Help me understand the body tag on theme.liquid

Solved
ThomasMaghanga
Tourist
7 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)

Accepted Solutions
PaulNewton
Shopify Partner
3501 234 685

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"

What important thing did you learn this Black Friday?


Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com

View solution in original post

Replies 2 (2)
PaulNewton
Shopify Partner
3501 234 685

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"

What important thing did you learn this Black Friday?


Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org

Problem Solved? ✔Accept and Like solutions to help future merchants

Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com

View solution in original post

ThomasMaghanga
Tourist
7 0 2

Thank you so much Paul, understood!