Split description by different tags and if tag is present

cdevlin
Tourist
11 0 0

I hope someone can help. I've followed this older post to some success (https://community.shopify.com/c/Technical-Q-A/Splitting-Product-Description/m-p/241668).

Particularly the following code contained in this post:

{% assign topdescription = product.description | split:'<p>[[end top]]</p>' | first %}
{% assign topdescription = topdescription | split:'<p>[[start top]]</p>' | last %}
{% assign bottomdescription = product.description | split:'<p>[[end bottom]]</p>' | first %}
{% assign bottomdescription = bottomdescription | split:'<p>[[start bottom]]</p>' | last %}

<div class="topdescription"> {{top description}} </div>

Whatever else you wanted to put in like the product form etc

<div class="bottomdescription"> {{bottomdescription}} </div>

I've modified this to suit my naming scheme etc and it has helped me to split up my description text into different sections to be then styled differently. The issue though I'm having is how to only utilise this code when the product description contains the 'trigger tag' of '<p>[[start top]]</p>' if you will.  I tried wrapping it in an if statement on the product theme template and in the snippet code:

{% if product.description contains '<p>[[start desc]]</p>' or '<p>[[start spec]]</p>' %}
<!-- Name of snippet containing above code -->
{{ include 'styled-description' }}
{% else }}
{{ product.description}}
{% endif %}

 I am most likely going around this the wrong way. Any help to achieve this would be good and any further code required can be given.

 

Thanks in advance, Christopher.

0 Likes
Ninthony
Shopify Partner
1637 224 613

One thing I can see that is wrong is that your if statement doesnt have the condition specified again after the or, so it doesnt know what else you're checking. It should be:

{% if product.description contains '<p>[[start desc]]</p>' or product.description contains '<p>[[start spec]]</p>' %}
<!-- Name of snippet containing above code -->
{{ include 'styled-description' }}
{% else }}
{{ product.description}}
{% endif %}

 

As long as you have that HTML in your descriptions, it should be right assuming your snippet's logic is correct.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
cdevlin
Tourist
11 0 0

Ahh, yes! I have done this a few times before but usually notice! Thanks for helping it now works as expected.

A follow-up question. Take this as my description text:

[[start desc]]
Hello, I am the description.
[[end desc]]

[[start spec]]
Hello, I am the specification
[[end spec]]

Hello, I am some other text without a tag 'trigger'.

How would be best to have the text at the bottom that has no 'tag trigger' be displayed as normal? Currently, it just doesn't display at all and only text between the tag trigger text does.

 

0 Likes
Ninthony
Shopify Partner
1637 224 613

Well if there's a specification you could do:

{{ product.description | split: '[[end spec]]' | last }}

 

Same for if there's only a description:


{{ product.description | split: '[[end desc]]' | last }}

 

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
cdevlin
Tourist
11 0 0

Thanks for your reply.

I have a block of text like the following:
Description
SupaSoft insulation offers a safe, sustainable and cost effective way to insulate your loft. SupaSoft insulation contains 100% recycled polyester and is made almost entirely from recycled plastic bottles. SupaSoft insulation contains no harmful chemicals or binders and is completely safe to handle SupaSoft insulation is long-lasting and safe to handle. What’s more, energy savings mean the insulation pays for itself in a just a few years.
Key points
100% Recycled Polyester.
Can Be Recycled.
Highly Breathable.
Good Sound Absorption.
Non-harmless. Can be installed without gloves or protective clothing(dust mask is recommended)
Specification:
Thickness: 150mm
Width: 2 x 590mm
Length: 4.65m
Pack Coverage: 5.49 m²
Density: 13 kgm³
Thermal Conductivity: 0.040 W/mK
R-Value: 3.75 m²K/W
Fire Rating: Passes - BS 5803-4
Application:
Roofs – Loft
Floors – All levels
Other – can be used in walls and between rafters
Acoustic – Walls, floors & roofs

I would like it to be that Key Points and Specification are styled differently but the other section that is above or below this stays the same. This is my current code:

{% assign sty-desc = product.description | split: '<p>[[end desc]]</p>' | first %}
{% assign sty-desc = sty-desc | split: '<p>[[start desc]]</p>' | last %}
{% assign sty-spec = product.description | split: '<p>[[end spec]]</p>' | first %}
{% assign sty-spec = sty-spec | split: '<p>[[start spec]]</p>' | last %}
{% if 
<div class="pro-page_text">
  {{ sty-desc }}
</div>
<div class="pro-spec_cont">
  <div class="pro-page_heading pro-desc_pad">Specification<span class="periodorange">:</span></div>
  {{ sty-spec }}
</div>

I'm assuming because the two div sections are fixed it will only display them on the final page in that order. What would be the best use of liquid code to display the styling based on the 'trigger tag'.
For example: if the tag = X then use this <div> for layout. I've tried to think about how best to use an if for this but can't quite get it. I mean I could just put all possibility for the layout in the code and that way it covers all basis, but sometimes I might not have an application section to the description etc so thinking of ways to automate this and cover most scenarios of the description page layout.

Thanks for all your help so far.

0 Likes
Ninthony
Shopify Partner
1637 224 613

Well before I kind of dive in there and lay out how I would do it, can I ask why you don't just use HTML in the description itself? You can toggle to the HTML version of your description by pressing the little button in the top right corner, kind of looks like this:   [<>]

It just seems to me (as long as you don't have a massive amount of products yet) that it would be simpler. Anyway, my approach would be to not use separate tags for each portion that you're separating them. Especially if they are all always occurring in this order, and Application will be the only thing that sometimes wont be there. I would use one unique identifier that I could split by, and then loop through it. So lets say instead of separate things, you're using 4 hyphens '----'. Your description would look like this:


I have a block of text like the following:
Description
SupaSoft insulation offers a safe, sustainable and cost effective way to insulate your loft. SupaSoft insulation contains 100% recycled polyester and is made almost entirely from recycled plastic bottles. SupaSoft insulation contains no harmful chemicals or binders and is completely safe to handle SupaSoft insulation is long-lasting and safe to handle. What’s more, energy savings mean the insulation pays for itself in a just a few years.

----
Key points
100% Recycled Polyester.
Can Be Recycled.
Highly Breathable.
Good Sound Absorption.
Non-harmless. Can be installed without gloves or protective clothing(dust mask is recommended)

----
Specification:
Thickness: 150mm
Width: 2 x 590mm
Length: 4.65m
Pack Coverage: 5.49 m²
Density: 13 kgm³
Thermal Conductivity: 0.040 W/mK
R-Value: 3.75 m²K/W
Fire Rating: Passes - BS 5803-4

----
Application:
Roofs – Loft
Floors – All levels
Other – can be used in walls and between rafters
Acoustic – Walls, floors & roofs

Then you could split it up and loop through it like:

{% assign descriptionPieces = product.description | split: '----' %}

<div class="description-container ">
{% if descriptionPieces.size > 1 %}
  {% for piece in description.pieces %}
    {% if piece contains "Description" %}
      <div class="initial-description-styles">{{ piece }}</div>
    {% elsif piece contains "Key points" %}
      <div class="key-point-styles">{{ piece }}</div>
    {% elsif piece contains "Specification" %}
      <div class="specification-styles">{{ piece }}</div>
    {% elsif piece contains "Application" %}
      <div class="application-styles">{{ piece }}</div>
    {% endif %}
  {% endfor%}
{% else %}
{{ product.description }}
</div>

 

Something like that, obviously you can rename the div classes to whatever you want it to be for that particular section.

If my solution helped you, please like and accept as solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes