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"
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
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"
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Thank you so much Paul, understood!
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024