Shopify themes, liquid, logos, and UX
Hello everyone
May someone please help me understand the difference between these two lines
Line 1
<body class="template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }} template-{{ template | replace: '.', '-' | handle }}{% if request.path == '/challenge' %} template-challange{% endif %}" data-center-text="{{ settings.type_body_align_text }}" data-button_style="{{ settings.button_style }}" data-type_header_capitalize="{{ settings.type_header_capitalize }}" data-type_headers_align_text="{{ settings.type_headers_align_text }}" data-type_product_capitalize="{{ settings.type_product_capitalize }}" data-swatch_style="{{ settings.swatch_style }}" {% if settings.disable_animations %}data-disable-animations="true"{% endif %}>
Line 2
<body class="template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}{% if request.path == '/challenge' %} template-challange{% endif %}" data-center-text="{{ settings.type_body_align_text }}" data-button_style="{{ settings.button_style }}" data-type_header_capitalize="{{ settings.type_header_capitalize }}" data-type_headers_align_text="{{ settings.type_headers_align_text }}" data-type_product_capitalize="{{ settings.type_product_capitalize }}" data-swatch_style="{{ settings.swatch_style }}" {% if settings.disable_animations %}data-disable-animations="true"{% endif %}>
Solved! Go to the solution
This is an accepted solution.
@ThomasMaghanga The first <body> is creating a class in the class attribute with this logic "template-{{ template | replace: '.', '-' | handle }}"
which is similar to another piece of logic creating the first class : "template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}"
When comparing code/html lines like this it helps immensely to format code with line breaks between attributes for reading sanity
<body
class="template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }} template-{{ template | replace: '.', '-' | handle }}{% if request.path == '/challenge' %} template-challange{% endif %}"
data-center-text="{{ settings.type_body_align_text }}"
data-button_style="{{ settings.button_style }}"
data-type_header_capitalize="{{ settings.type_header_capitalize }}"
data-type_headers_align_text="{{ settings.type_headers_align_text }}"
data-type_product_capitalize="{{ settings.type_product_capitalize }}"
data-swatch_style="{{ settings.swatch_style }}"
{% if settings.disable_animations %}data-disable-animations="true"{% endif %}
>
When having trouble interpreting an html tags class logic extract it out to it's own code block being careful to not inadvertently remove whitespace between the classes
{%- capture body_classes - %}
template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}
template-{{ template | replace: '.', '-' | handle }}
{% if request.path == '/challenge' %} template-challange {% endif %}
{%- endcapture - %}
<body class="{{ body_classes }}" >
FYI: "template-challange" is a typo it should be "template-challenge"
This is an accepted solution.
@ThomasMaghanga The first <body> is creating a class in the class attribute with this logic "template-{{ template | replace: '.', '-' | handle }}"
which is similar to another piece of logic creating the first class : "template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}"
When comparing code/html lines like this it helps immensely to format code with line breaks between attributes for reading sanity
<body
class="template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }} template-{{ template | replace: '.', '-' | handle }}{% if request.path == '/challenge' %} template-challange{% endif %}"
data-center-text="{{ settings.type_body_align_text }}"
data-button_style="{{ settings.button_style }}"
data-type_header_capitalize="{{ settings.type_header_capitalize }}"
data-type_headers_align_text="{{ settings.type_headers_align_text }}"
data-type_product_capitalize="{{ settings.type_product_capitalize }}"
data-swatch_style="{{ settings.swatch_style }}"
{% if settings.disable_animations %}data-disable-animations="true"{% endif %}
>
When having trouble interpreting an html tags class logic extract it out to it's own code block being careful to not inadvertently remove whitespace between the classes
{%- capture body_classes - %}
template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}
template-{{ template | replace: '.', '-' | handle }}
{% if request.path == '/challenge' %} template-challange {% endif %}
{%- endcapture - %}
<body class="{{ body_classes }}" >
FYI: "template-challange" is a typo it should be "template-challenge"
Thank you so much Paul, understood!
User | RANK |
---|---|
129 | |
93 | |
77 | |
70 | |
40 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022