I'm using Twig PatternLab.
I got a small issue with JSON and a Twig for loop.
Atom 00-h3-black.twig:
<h3 class="A-ChevronBlack">{{ text.chevron }}</h3>
Molecule 00-mastertile.twig:
<div class="M-DMasterTile">
<div class="image"></div>
<div class="content">
{% include "atoms-h3-black" %}
</div>
</div>
Organisms 00-default2.twig:
{% for post in default2 %}
{% include "molecules-mastertile" %}
{% endfor %}
And JSON inside Organism folder 00-default2.json
{
"default2" : [
{
"text" : {
"chevron" : "How to build a campfire",
"body" : "This is the body copy"
}
},
{
"text" : {
"chevron":"Lorem Ipsum",
"body" : "This is the body copy"
}
}
]
}
My expectation is for the "default2" to loop twice because I've got an array with 2 items in the JSON and push the JSON content. If I take the variables out of the JSON array it shows the changes(but obviously duplicated).
What am I doing wrong here?
I appreciate your help
include uses global scope and there is no variable text in it. Use include with syntax to pass variable into inner scope.
Your Organisms 00-default2.twig should look like this:
{% for post in default2 %}
{% include "molecules-mastertile" with {'text': post.text} %}
{% endfor %}
Related
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
I'm struggling with json in twig. I want to include a static json file to my twig file and pass it to a twig include inside that.
I have my index twig file where I have my STATIC json file include and twig include:
{% set json %}
{% include "content.json" %}
{% endset %}
{% include '#partials/blocks/site-header.twig' with {json:json} %}
In My siteheader.twig I would like to render my navigation something like:
{% for headerNav in json %}
<a class="button button--nav" href="#">
{{headerNav.text}}
</a>
{% endfor %}
My content.json looks like this:
{
"headerNav":[
{
"text": "Link 1"
},
{
"text": "Link 2"
}
]
}
The whole point is that the siteheader should be able to render different links dependant on which json file i pass into it.
I am rather new to Liquid templates, but I don't seem to find a way to loop through a dictionary in json and access the different values.
Disclaimer: I am using the Shopify Liquid Preview extension for VSCode.
Input json file:
The input file contains two properties: CustomerId and Transactions, which is the 'dictionary' property, containing a list of KeyValuePairs. I want to loop through the Transactions collection and output the TransactionValue properties.
{
"CustomerId": 13,
"Transactions": {
"1": {
"Id": "1",
"TransactionValue": 1000
},
"2": {
"Id": "2",
"TransactionValue": 207.47
}
}
}
Expected output:
<h1>Customer 13</h1>
<ul>
<li>1000</li>
<li>207.47</li>
</ul>
Current Attempt
I can easily loop the collection, but then it's not clear to me on how I can access the actual properties of the current transaction. None of the following work. When just outputting the variable, it gets printed like this: 1,[object Object]
<ul>
{% for trx in Transactions %}
<li>{{trx}}</li>
<li>{{trx.Key}}</li>
<li>{{trx.Value}}</li>
<li>{{trx.Object}}</li>
{% endfor %}
</ul>
I don't really have control over the input json, so I was hoping to find a good way on making this work as is.
Thank you
In most Liquid flavors it should be possible to reference an object field by name like this:
{{ Transactions["1"].TransactionValue }}
Then it is a matter of getting all known transactionIds from somewhere. If they're not available as an array, then the dirty solution could be to parse raw incoming JSON, e.g. like that:
{% assign transactionIds = Transactions | split: "\"Id\": \"" %}
<ul>
{% for id in transactionIds %}
{% if id[0] != "{" %}
{% assign realId = id | split: "\"" | first %}
<li>
{{ Transactions[realId].TransactionValue }}
</li>
{% endif %}
{% endfor %}
</ul>
I would like to use gulp and Nunjucks to generate multiple template files at once with varying content. These templates will all have the exact same layout, but pass in different variables for text/images.
I am able to successfully generate a single index.html file, but am unsure how to set this up for multiple files to be created at once. Here is a simplified version of what I have:
gulpfile.js
var nunjucks = require('gulp-nunjucks-render');
var data = require('gulp-data');
gulp.task('nunjucks', function () {
return gulp
.src('./src/layouts/**/*.+(html|nunjucks)')
.pipe(data(function () { return require('./src/data.json'); }))
.pipe(nunjucks({ path: ['./src/templates'] }))
.pipe(gulp.dest('./dist'));
});
layout.nunjucks
<head>
{% block title %} {% endblock %}
</head>
index.nunjucks
{% extends "layout.nunjucks" %}
{% block title %}
<title>{{ title }}</title>
{% endblock %}
data.json
{
"title": "DEFAULT"
}
What is the best way to alter this workflow to generate multiple files where each has a different title?
I've found that I can create multiple index.nunjucks files, but it looks like they all use the same data.json file. I also wouldn't want to make a separate JSON file for each.
Could I add an array to my data.json file to have Nunjucks loop through and create a separate file for each object found? Such as the following:
data.json
{
"files": [{
"title": "DEFAULT",
}, {
"title": "DEFAULT #2"
}]
}
Or is there a way to set variables within the index.nunjucks file without relying on storing them in JSON?
Found the way to do this: in each Nunjucks index file, I set a variable named email to the filename and updated my data.json file with a new object matching the filename with its own content.
default.nunjucks
{% set email = default %}
{% include "index.nunjucks" %}
test.nunjucks
{% set email = test %}
{% include "index.nunjucks" %}
index.nunjucks
{% extends "layout.nunjucks" %}
{% block title %}
<title>{{ email.title }}</title>
{% endblock %}
layout.nunjucks
<head>
{% block title %} {% endblock %}
</head>
data.json
{
"default":
{
"title": "TITLE"
},
"test":
{
"title": "TEST TITLE"
}
}
When compiled through gulp, two separate emails are created with their own title using the same template.
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?