Solved

Help me understand the body tag on theme.liquid

ThomasMaghanga
Shopify Partner
12 0 2

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 %}>

Accepted Solution (1)

PaulNewton
Shopify Partner
6274 573 1319

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


View solution in original post

Replies 2 (2)

PaulNewton
Shopify Partner
6274 573 1319

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


ThomasMaghanga
Shopify Partner
12 0 2

Thank you so much Paul, understood!