This post will go over creating a blog template for a list of recipes that have structured content in a way that is SEO friendly and complies to liquid correctly from Builder.
For this example, we chose metafields because they are available on Shopify’s server. When Shopify’s server renders the hosted page, it can access the metafields through the liquid (which is what Builder complies to). We are using a custom metafields app (Easy Custom Metafields), but, you can also use the admin API to define these metafields.
After defining the metafields, navigate to the article tab in the custom metafields app. We’ve added ingredients, name, and image. {"ingredients": ["foo", "bar"], "name": "test", "image": "URL"}
Now in Builder, select Blog Posts page from page types in the content list → + New → Create a new blog posts page. With your new blog posts page open in the editor, select the options tab → show advanced → edit bootstrap code (this is where Builder reads the data from the Shopify liquid).
In the bootstrap code, locate the line window.BuilderJsonData['article'] = {{ article | json }} and replace it with
window.BuilderJsonData['article'] = Object.assign({{ article | json}}, {
metafields: {
global: {
content: {
value: {{ article.metafields["global"]["content"] }}
}
}
}
});
This will read the metafields and pass it in the context to Builder. Now you can drag and drop a text block onto your page → open the data tab → + new binding → get text from context.liquid.get('article.metafields.global.content.value.name', state). Now, publish your entry staged to get the bootstap data. Once you refresh the editor, the name will display.
You can repeat the bindings on new text blocks for other metafields like ingredients and image. The steps to display ingredients is slightly different than displaying the name. You can select your new text block and add context.liquid.get('article.metafields.global.content.value.ingredients', state) in the repeat for each section in the data tab. You’ll now see your text block repeating for all of your ingredients.
Now, select command + E to open the json editor so we can define the item.name within the repeat. You’ll see the repeat you just added, "collection": "context.liquid.get('article.metafields.global.content.value.ingredients', state)". Below this, add "itemName": "item".
Exit the json editor and with your repeating text block still selected choose + new binding in the data tab and get text from context.liquid.get('item', state).
