I am trying to develop the knowledge necessary to pass the assessment for this badge. I know this message is a bit long, but hopefully it is easy to follow. I hope someone from Shopify will read this message and follow up with those in charge of developing the curriculum in the Shopify Academy, because I am fairly certain that this new course has both flaws and lacks adequate directions to accomplish the task associated with the labs. While the information on each topic seems scant and wanting,perhaps it may be made up for by a focused reading of the docs. However, the Labs in Theme architecture with Liquid for Developers are confusing, if not definitively incorrect. There are gaps in the steps and the logic needed to complete the task seems to be disjointed.
Lab 1
states: “The collection title is displayed accordingly and the link leads to the collection URL.” Using the code below it is assumed that the each collection’s title will be used as a link to the collection’s url
<li>
<h5>Collection card</h5>
<div class="card">
{% for collection in collections %}
<div
class="media"
style="--width: {{ collection.image.width | default: 100 }}; --height: {{ collection.image.width | default: 100 }};"
>
{{ 'collection-1' | placeholder_svg_tag }}
</div>
<h2>
<a href="{{ collection.url }}">{{ collection.title }}</a>
</h2>
{% endfor %}
</div>
</li>
This creates one large card with every collection pointed to whatever collection is positioned last in the the list of collections.
Below is my code enabling each collection to use its associated url in the href link
{% for collection in collections %}
- ##### Collection card
{{ 'collection-1' | placeholder_svg_tag }}
##
{{ collection.title }}
{% endfor %}
Lab Part 2: Analyze Accelerator theme code
References a main-collection-grid.json in the sections directory, which I think is actually suppose to be main-collection-grid.liquid. At least from what I can recall from my studies, the footer-group and header-group are the only 2 files in the sections directory that can be .json files. Moreover, there is no file called main-collection-grid.json.
Question Posed: How does the when ‘text’ block render the vendor information?
Answer: The when ‘text’ block uses {{ block.settings.text }} to render the vendor information. In your product.json, the vendor is set as {{ product.vendor }} in the text block’s settings. This outputs the vendor’s name in uppercase, as specified by the text_style.
I have been unable to see text_style have any effect on the name of the vendor.
The following code
"blocks": {
"vendor": {
"type": "text",
"settings": {
"text": "{{ product.vendor }}",
"text_style": "uppercase"
}
}
does not render an “uppercase” when applied to
<div id="Product-Info-{{ section.id }}">
{%- assign product_form_id = 'Product-Form-' | append: section.id -%}
{%- for block in section.blocks -%}
{%- case block.type -%}
{%- when '@app' -%}
{% render block %}
{%- when 'text' -%}
<p {{ block.shopify_attributes }}>
// this text is associated with vendor and should receive the upper case style
{{ block.settings.text }}
</p>
Since I believe the goal of this lab was to have this text style applied from the theme editor ( or based upon changes performed in the product.json) how should this styling be accomplished?
Also if anyone can point out where in the documentation “text_style” is used, that would be extremely helpful. Thus far, I have not found a reference to "text_style " explained as an attribute for “settings”.
In the Dawn theme I have seen it is applied as a class
<div class="banner__text rte {{ block.settings.text_style }}" {{ block.shopify_attributes }}>
<p>{{ block.settings.text }}</p>
</div>
( which I tried to do in this theme as well without success). If this is how we are expected to achieve this outcome, then there needs to be better guidance. I have used css “text-transform: uppercase” in a class but I do not understand how this happens when it is being inject into a class using “text_style: uppercase”.
Lab Part 3
This is the real reason I have spent some much of day writing this post. I was able to create the metaobject and 2 metafields for the labs in the Shopify Development Fundamentals but how to use the work from that lab to accomplish the work that needs to be done is this lab is beyond what I can deduce from the instructions provided.
After applying the model_info to the product.json structure per the instructions.
{
"sections": {
"main": {
"type": "main-product",
"blocks": {
...
"model_info": {
"type": "model_info",
"settings": {}
}
},
"block_order": [
"vendor",
"title",
"caption",
"price",
"variant_picker",
"quantity_selector",
"buy_buttons",
"description",
"model_info"
],
"settings": {}
},
},
I have been unable to get the model info to appear as a block or section of the theme editor, and I am not even sure it should be done with the theme editor, as it clearly states in the lab " In this task, we’re going to recreate this PDP element using Liquid instead."
It would great if someone from shopify can expound on my questions and concerns.
Even though a developer’s work is all code and logic, it’s challenging to create learning paths for a job that really can be more of an art sometimes.