I am trying to access and loop through the collection list inside the blocks:
The following code should loop through this collection list
<!-- If The Category Has So Many Subs -->
<div class="sub-cat-childs-container">
{% for block in section.blocks %}
{% case block.type %}
{% when 'Sub-Category' %}
{% if shop.locale == 'en' %}<style>.subCategory::after{float: right}</style>{% endif %}
<div class="sub--category--contnet" id="sub-category-{{ block.settings.sub_category_collection.id }}">
<div class="sub-sub---items-row">
Loop Throug The CollectionList {{ block.settings.sub-subcategory-collection_list }}
</div>
</div>
{% endcase %}
{% endfor %}
</div>
{% endif %}
The following is the schema I am trying to get the collection list from it:
{% schema %}
{
"name" : "Main Category",
"settings" :
[
],
"blocks" :
[
{
"name" : "Sub-Category",
"type" : "Sub-Category",
"settings" :
[
{
"type": "collection_list",
"id": "sub-subcategory-collection_list",
"label": "Sub Sub-Categories"
}
]
}
],
"presets" :
[
{
"name" : "Main Category"
}
]
}
{% endschema %}
Any one can help me to display all the collection in this collecion List
id:sub-subcategory-collection_list.
Thank you all...
You can create a new for loop to loop over the collections you have selected, for example:
{% for collection in block.settings.sub-subcategory-collection_list %}
{{ collection.title }}
{% endfor %}
The collection_list type gives you an array of Collection objects which you can loop over, as documented here
As a side note, you should aim to keep all your setting IDs as snake-case, to match Shopify's practice guides
Related
I'm trying to loop through a nested json file with nunjucks, give each object type a specific layout and sort all based on date.
So in my case I have two collections events and videos. Both collections will have an array of events and videos.
My file is named /content.json and structured as followed:
{
media: {
events: [
{
content_id: "1",
content_type: "event",
date: "01-11-2019",
etc: "etc"
},
{
content_id: "2",
content_type: "event",
date: "01-08-2019",
etc: "etc"
}
],
videos: [
{
content_id: "3",
content_type: "video",
date: "01-12-2019",
etc: "etc"
},
{
content_id: "4",
content_type: "video",
date: "01-09-2019",
etc: "etc"
}
]
}
}
I have tried to get the different object assigned with an if/else statement and then use a for loop to cycle through the array, but that has failed, see below:
{% for item in content.media %}
{% if item == events %}
{% for item in content.media.events %}
{% include "components/event.njk" %}
{% endfor %}
{% elif item == video %}
{% for item in content.media.videos %}
{% include "components/video.njk" %}
{% endfor %}
{% endif %}
{% endfor %}
I never got to try and sort all the content by date, but I have found:
{% for item in items|sort(attribute='date')%}
Can anyone guide me in right direction?
Thanks in advance.
AENM
This code outputs separated feeds by type of elements (event or video).
{% for event in content.media.events | sort(attribute = 'date') %}
{% include "components/event.njk" %}
{% endfor %}
{% for video in content.media.videos | sort(attribute = 'date') %}
{% include "components/video.njk" %}
{% endfor %}
If you need to output a mixed feed, you should join arrays to one and run trought it (fortunately each elements already have the type):
{% for item in [].concat(content.media.events, content.media.videos) | sort(attribute = 'date') %}
{% include "components/" + item.content_type + ".njk" %}
{% endfor %}
Aikon,
I got it now!!
It was another typo, you switched the media and events. (did you try to keep me sharp?! :-))
But that's why the concat didn't work!!
So this is the final working result:
{% for item in [].concat(media.content.events, media.content.videos) | sort(attribute = 'date') %}
{% include "components/" + item.type + ".njk" %}
{% endfor %}
Only the date is not in the correct order, but I think that has to with my grid setup.
Thanks for helping me out......
These are my JSON data:
[
{
"name":"unit 1",
"lessons":{
"1":{
"name":"lesson 1",
"content":"......."
},
"2":{
"name" "lesson 2",
"content":"......."
}
}
]
I can access these data using the following Twig code:
{% for unit in units %}
{{ unit.name }}
{% for lesson in unit.lessons %}
{{ lesson.name }}
{% endfor %}
{% endfor %}
But I want to access the lesson number, to make a hyperlink to the content. How can I do that?
You can Iterating over Keys and values as example:
{% for key, lesson in unit.lessons %}
{{ key}}
{{ lesson.name }}
{% endfor %}
Hope this help
Hey guys I am really new to shopify. and trying to learn liquid. I am getting an invalid JSON tag in schema/ and I am not quite sure where it is. I am just trying to have 4 basic blocks that you can add to a section with a image and a title underneath. I don't have the content block made right now because I can't get the image one to work in the first place.
{% for block in section.blocks %}
<div class="grid-item" {{ block.shopify_attributes }}>
{% case block.type %}
{% when 'image' %}
<img src="{{ block.settings.image | img_url }}">
</div>
{% when 'text' %}
{{ block.settings.content }}
{% endcase %}
{% endfor %}
{% schema %}
{
{
"blocks": [
{
"name": "Service",
"limit": 4
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "image"
}
]
}
]
}
}
{% endschema %}
Once again, Like I said, I am really new to all of this so any point in the right direction or help would be crazy awesome! Thanks!
missing a comma after your limit: 4?
I have a JSON file with the following structure:
{
"resources": [
{
"date": "Nov 7",
"content": [
{
"articleTitle":"The Distribution of Users’ Computer Skills: Worse Than You Think",
"articleUrl":"https://www.nngroup.com/articles/computer-skill-levels/?ref=boomkrak",
"articleAuthor": "Jakob Nielson",
"articleTag": "ux, web design"
},
{
"articleTitle":"How to Use Animation to Improve UX",
"articleUrl":"https://uxplanet.org/how-to-use-animation-to-improve-ux-338819e93bdb#.84b3m022s?ref=boomkrak",
"articleAuthor": "Nick Babich",
"articleTag": "ux, animation"
}
]
},
{
"date": "Nov 15",
"content": [
{
"articleTitle":" 7 Things Every Designer Needs to Know about Accessibility",
"articleUrl":"https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b#.5pgg5014x?ref=boomkrak",
"articleAuthor": "Jesse Hausler",
"articleTag": "ux, web design, accessibility"
},
{
"articleTitle":"Get the most out of your research with storytelling",
"articleUrl":"https://blog.intercom.com/get-the-most-out-of-your-research-storytelling/?ref=boomkrak",
"articleAuthor": "Jillian Wells",
"articleTag": "design research, collaboration"
}
]
}
]
}
I want to show the article based on each tag. For example, if I want to show ux articles, then all articles with ux tag should be displayed.
Anyone know how to do it in Jekyll?
Considering that your datas are in _datas/articles.json, you can use this include file (_includes/listbyTag.html) :
{% assign tag = include.tag %}
{% assign days = site.data.articles.resources %}
{% assign list = ""| split: "/" %} {% comment %} creates an empty array {% endcomment %}
{% for day in days %}
{% for article in day.content %}
{% if article.articleTag contains tag %}
{% assign list = list | push: article %}
{% endif %}
{% endfor %}
{% endfor %}
{% if list.size != 0 %}
<h3>Found {{ list.size }} posts for tag : {{ tag }}</h3>
<ul>
{% for post in list %}
<li>{{ post.articleTitle }}</li>
{% endfor %}
</ul>
{% endif %}
Now you can include it anywhere with :
{% include listByTag.html tag="ux" %}
Or for a tag page :
---
tag: ux
title: my title
layout: default
---
{% include listByTag.html tag=page.tag %}
Given this JSON:
case studies: [
[ "Nubaru",
["Nubaru Yearly Report", "Web design", "2013", "/case-studies/Nubaru.html", "/images/case-studies/Nubaru.png"]
],
[ "Ekande",
["Ekande application", "Web application design", "2013", "/case-studies/Ekande.html", "/images/case-studies/Ekande.png"]
]
]
And this Liquid (using Jekyll):
<ul>
{% for items in page.case-studies %}
{% for item in items %}
<li>
{{ item }}
<!-- How to get sub items? -->
</li>
{% endfor %}
{% endfor %}
</ul>
How would I access the data in the inner array?
Is there a way to name the data so I might access it like this: {{ case-study.date }}?
For the first question, have you tried using a third loop like {% for subItem in {{ item[2] }} %}, or accessing directly, like for the data {{ item[2][3] }} ?
For the second one, you can use {% assign %} like this: {% assign caseDate = 'your-value' %}, cf. http://wiki.shopify.com/Liquid#Variable_Assignment