Hi I have some javascript that is generating HTML code into hubspot, my client wants to have an easier access to editing content and I'm trying to set this up with a HubL template. I've found that I can right a for loop to print an array variables but I was curious if I'm able to print an array of objects?
Their code:
{% set languages = ['HTML', 'CSS', 'Javascript', 'Python', 'Ruby', 'PHP,', 'Java'] %}
{% for language in languages %}
<li>{{ language }}</li>
{% endfor %}
Simplified version of my code:
{ % set episodes = [{
id: "1",
name: "Episdoe 1"
}, {
id: "2",
name: "Episdoe 2"
}, {
id: "3",
name: "Episdoe 3"
}, {
id: "4",
name: "Episdoe 4"
}]
%}
<ul>{% for episode in episodes %}
<li>{{ episode.id }}</li>
<li>{{ episode.name}}</li>
{% endfor %}
</ul>
I'm currently getting an error for having the wrong syntax. The error is coming from having the brackets inside the []. I've tried looking on their site and did a bit of google searching but I can't seem to find anything on displaying an array of objects.
Should work! Here's a functional HubL template example using the object/data you provided above (with fixes):
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>{{ content.html_title }}</title>
<meta name="description" content="{{ content.meta_description }}">
{{ standard_header_includes }}
</head>
<body>
{% set episodes = [
{
id: "1",
name: "Episdoe 1"
},
{
id: "2",
name: "Episdoe 2"
},
{
id: "3",
name: "Episdoe 3"
},
{
id: "4",
name: "Episdoe 4"
}
] %}
<ul>{% for episode in episodes %}
<li>{{ episode.id }}</li>
<li>{{ episode.name}}</li>
{% endfor %}
</ul>
{{ standard_footer_includes }}
</body>
</html>
Related
I am trying to create a JSON object using a liquid template, but the fields array in my output is not properly formatted. For example, my input is:
{
"queryString": "id:00000000-0000-0000-0000-000000000000",
"fields": [
"linkFilename",
"documenttype",
"description",
"webUrl"
]
}
And my desired output is:
{
"requests": [
{
"entityTypes": [
"listItem"
],
"query": {
"queryString": "id:00000000-0000-0000-0000-000000000000"
},
"region": "EMEA",
"fields": [
"linkFilename",
"documenttype",
"description",
"webUrl"
]
}
]
}
But my current liquid template:
{% capture output %}
{
"requests": [
{
"entityTypes": ["listItem"],
"query": {
"queryString": "{{ queryString }}"
},
"region": "EMEA",
"fields": ["{{ fields }}"]
}
]
}
{% endcapture %}
{{ output }}
results in:
{
"requests": [
{
"entityTypes": [
"listItem"
],
"query": {
"queryString": "id:00000000-0000-0000-0000-000000000000"
},
"region": "EMEA",
"fields": [
"linkFilenamedocumenttypedescriptionwebUrl"
]
}
]
}
How can I separate the elements in the fields array with a comma in the liquid template?"
{% capture fieldList %}
{% for i in input.fields %}
"{{ i }}"
{% if forloop.last != true %},{% endif %}
{% endfor %}
{% endcapture %}
{% capture output %}
{
"requests": [
{
"entityTypes": [
"listItem"
],
"query": {
"queryString": "{{ input.queryString }}"
},
"region": "EMEA",
"fields": [
{{ fieldList }}
]
}
]
}
{% endcapture %}
{{ output }}
I have received a JSON payload for an order / abandon cart in this format.
{
"tokens": {
"locale": "en_GB",
"currency": "EUR",
"entity_id": "36140",
"item[0].type": "straw",
"item[0].row_total_incl_tax": "2000.0000",
"item[0].quantity": "2.0000",
"item[0].name": "Diego",
"item[0].straw_type": "itri",
"item[0].mot": "20",
"item[1].type": "virtual",
"item[1].row_total_incl_tax": "625.0000",
"item[1].quantity": "1.0000",
"item[1].name": "Mixmatch",
"item[2].type": "straw",
"item[2].row_total_incl_tax": "1000.0000",
"item[2].quantity": "1.0000",
"item[2].name": "Diego",
"item[2].straw_type": "abc",
"item[2].mot": "20",
"item[3].type": "straw",
"item[3].row_total_incl_tax": "600.0000",
"item[3].quantity": "1.0000",
"item[3].name": "Pete",
"item[3].straw_type": "itri",
"item[3].mot": "20"
}
}
I can print values like tokens.entity_id - this works successfully.
However, for each of the Items e.g. item[0] I want to pull the item.name to print using Twig and can't seem to make this work.
I have tried several things e.g.
{% set cart = contact.json_field | json_decode %}
{% for tokens in cart %}
Entity : {{tokens.entity_id | raw }} <br>
{% for item in tokens %}
Item Name : {{item.name | raw }} <br>
{% endfor %}
{% endfor %}
I have also tried tokens.item.name, and tokens.item1.name, and tokens.item[1].name but never seems to be able to pull the values for the items.
Any help would be appreciated as I'm new to Twig
Managed to resolve this, by restructuring the json data
<ul>
Item Name : {{tokens.entity_id | raw }}
{% set count = 0 %}
{% for item in tokens.items %}
{% set counter = ( counter | default(0) ) + 1 %}
{% set test = tokens.items.1.type %}
{{counter}}
Item Name : {{tokens.items.1.type | raw }}
Item Name : {{tokens.items.1.row_total_incl_tax | raw }}
{% endfor %}
</ul>
json
"link_order_status": "http://testing.com/en/",
"items": {
"0": {
"type": "straw",
"row_total_incl_tax": "400.0000"
},
"1": {
"type": "testing #1",
"row_total_incl_tax": "300.0000"
},
"2": {
"type": "testing #2",
"row_total_incl_tax": "200.0000"
}
}
In jinja2, I have a loop inside another loop and I want to write a comma if not last loop.
This is what I have so far:
// ksp = "{'a': ['someString', ['someString'], ['a1', 'a2']], 'b': ['someString', ['someString'], ['b1', 'b2', 'b3']]}"
"users": {
{% for kvd in ksp %}
{% set outer_loop = loop %}
{% for kvt in ksp[kvd][2] %}
"{{ kvt }}": {
"username": "{{ ksp[kvd][1][0] }}"
}{% if not outer_loop.last %},{% endif %}{% endfor %}{{ '' }}{% endfor %}
},
This is what I'm getting:
"users": {
"a1": {
"username": "someString"
},
"a2": {
"username": "someString"
},
"b1": {
"username": "someString"
}
"b2": {
"username": "someString"
}
"b3": {
"username": "someString"
}
}
As you can see, it's missing commas in the last three because they belong to the last outer_loop.index and because of that, it's not a valid JSON. How can I solve this?
Working now, it was just a matter of changing the "if" condition to:
{% if not (outer_loop.last and loop.last) %},{% endif %}{% endfor %}{{ '' }}{% endfor %}
"artists": {
"href": "https://api.spotify.com/v1/search?query=Hozier&type=artist&offset=0&limit=20",
"items": [
{
"images": [
{
"height": 640,
"url": "https://i.scdn.co/image/2e4114631a20bd71903bc335b88f872afdce9a33",
"width": 640
},
{
"height": 320,
"url": "https://i.scdn.co/image/4d4be818dc98d47b9086ecff8ec4883902781070",
"width": 320
},
{
"height": 160,
"url": "https://i.scdn.co/image/c181b6184e82bd7f8411d97b87e4f1daa1bbbbb8",
"width": 160
}
]
}
]
}
I'm trying to access the value of the url key in the second dict using jinja2, the problem is that every time i run the webpage it gives me a status code 500 and upon closer look in the terminal it gives me a jinja2.exceptions.UndefinedError: list object has no element 1 but that doesn't make sense to me since it prints {{value[1]}} just fine. The issue arises when i try to loop through the keys and values of that dict.
The following is my jinja2 code. if you can point out what i'm doing wrong or what i'm missing here that would be truly appreciated.
{% if q_type == "artist" %}
{% for record in results['artists']['items'] %}
{% for key, value in record.items() %}
{% if key == "images" %}
{% for k, v in value[1].items() %}
{% if k == "url" %}
{{info.append(v) or ""}}
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}
On my shopify store i want to disable the "collection-image" for the desktop users and not for mobile users, since i'am not 'expert with codes" i mess up everytime i try to change soemthing the reason why i want to disable this it's simple on desktop it looks horribly while on the phone it looks perfect so i'am here asking for your help
{% if section.blocks.size > 0 %}
{%- assign enable_sidebar = true -%}
{% else %}
{%- assign enable_sidebar = false -%}
{% endif %}
{%- assign products_per_page = section.settings.products_per_page_range -%}
{% if section.settings.image_placement != 'default' and section.settings.image_placement != 'hidden' and collection.image %}
<div class="hero-content header {{ section.settings.image_placement }}">
{%- assign image = collection.image -%}
<div class="collection-image" {% if section.settings.image_placement == 'above' %}style="max-width:{{ image.width }}px;"{% endif %}>
<div class="card__image-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times:100}}%">
{% assign image_widths = '295,394,590,700,900,1200,1500,1800,2000,2400' %}
{% include 'theme-rias' %}
<img class="card__image lazyload"
src="{{ image | img_url: '590x' }}"
data-src="{{ image_url_pattern }}"
data-widths="[{{ image_widths }}]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
<noscript>
<img class="card__image" src="{{ image | img_url: '1200x' }}" alt="{{ image.alt | escape }}">
</noscript>
</div>
</div>
</div>
{% endif %}
{% paginate collection.products by products_per_page %}
<section class="collection" data-section-id="{{ section.id }}" data-section-type="collection-template">
<div class="wrapper">
<header class="content-util">
{% include 'breadcrumb' %}
{% include 'social-icons' %}
</header>
<div class="grid {% unless enable_sidebar %}full-width{% endunless %}">
<div class="collection-container">
<header class="collection-header">
<div class="container">
<h1>{{ collection.title }}</h1>
{% include 'collection-sorting' %}
</div>
{% if section.settings.image_placement == 'default' and collection.image %}
<div class="collection-image">
{%- assign image = collection.image -%}
<div class="card__image-wrapper" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%">
{% assign image_widths = '295,394,590,700,900,1200,1500,1800,2000,2400' %}
{% include 'theme-rias' %}
<img class="card__image lazyload"
src="{{ image | img_url: '590x' }}"
data-src="{{ image_url_pattern }}"
data-widths="[{{ image_widths }}]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
style="width:{{ image.width }}px;"
alt="{{ image.alt | escape }}">
<noscript>
<img class="card__image" src="{{ image | img_url: '1200x' }}" alt="{{ image.alt | escape }}">
</noscript>
</div>
</div>
{% endif %}
{% if collection.description != blank %}
<div class="description rte">
{{ collection.description }}
</div>
{% endif %}
</header>
{% if enable_sidebar %}
<div class="mobile-aside-container">
{{ 'layout.navigation.collection_menu' | t}}
<aside>
{% include 'collection-sidebar' %}
</aside>
</div>
{% endif %}
<div class="products products-grid {% unless enable_sidebar %}full-width{% endunless %}">
{% comment %}
Loop through our products in the current collection.
See the snippet 'product-grid-item' for the layout.
{% endcomment %}
{% for product in collection.products %}
{% include 'product-grid-item' %}
{% else %}
{% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
{% for i in (1..products_per_page) %}
{% include 'placeholder-product-grid-item' %}
{% endfor %}
{% else %}
{% comment %}
If collection exists but is empty, display message
{% endcomment %}
<p>{{ 'collections.general.no_matches' | t }}</p>
{% endif %}
{% endfor %}
</div>
{% if paginate.pages > 1 %}
<footer class="collection-footer">
{% include 'pagination' %}
</footer>
{% endif %}
</div>
{% if enable_sidebar %}
<div class="aside-container">
<aside>
{% include 'collection-sidebar' %}
</aside>
</div>
{% endif %}
</div>
</div>
</section>
{% endpaginate %}
{% schema %}
{
"name": "Collection pages",
"settings": [
{
"type": "range",
"id": "products_per_page_range",
"label": "Number of products on each page",
"min": 12,
"max": 48,
"step": 12,
"default": 12
},
{
"type": "select",
"id": "image_placement",
"label": "Collection image placement",
"options": [
{ "value": "default", "label": "After collection title" },
{ "value": "above", "label": "After navigation" },
{ "value": "above-full", "label": "After navigation full width" },
{ "value": "hidden", "label": "Hidden" }
],
"default": "default"
},
{
"type": "checkbox",
"id": "sort_enable",
"label": "Enable sorting",
"default": true
},
{
"type": "checkbox",
"id": "layout_enable",
"label": "Enable grid and list views",
"default": true
}
],
"blocks": [
{
"type": "menu",
"name": "Sidebar menu",
"settings": [
{
"type": "link_list",
"id": "linklist",
"label": "Menu",
"default": "main-menu"
}
]
},
{
"type": "tags",
"name": "Sidebar tags",
"limit": 1,
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Shop by"
},
{
"type": "radio",
"id": "tag_style",
"label": "Show tags as",
"options": [
{ "value": "buttons", "label": "Buttons" },
{ "value": "menu", "label": "Menu" }
],
"default": "buttons"
},
{
"type": "checkbox",
"id": "tag_grouping",
"label": "Enable tag grouping",
"default": false,
"info": "[Learn how to set up tag groups](http://help.stylehatch.com/article/289-collections)"
}
]
}
]
}
{% endschema %}