Quick look product description: can we truncate by html tag rather than word count?

Highlighted
New Member
13 0 0

I have a quick look popup that has a word count for the product description.

is it possible to truncate not by the word count, but by the contents of the first <p> tag? That way it isolates all content after the first <p> tag, making the word count fluid. I want this because some products have longer descriptions than others. 

Has anyone done something like this?

0 Likes
Highlighted
Shopify Partner
1166 32 213

You can only show the first <p> tag using CSS. here is an example. http://codepen.io/lixonic/pen/bwLRmw

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Available for hiring. lixon@ecommercestudio.in
0 Likes
Highlighted
Shopify Expert
9924 103 1762

Hey Mike,

If you're sure there's going to be a paragraph tag in place you can do something like this:

{% assign description = product.description | split:'</p>' | first %}
{% if description.size > 1 %}
  <!-- show the first item in the array, remembering to add the closing </p> tag back in -->
  {{ description }}</p>
{% else %}
  <!-- fallback to full description if </p> tag not found -->
  {{ product.description }}
{% endif %}

 

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
1 Like
Highlighted
Shopify Partner
1166 32 213

^ Recommended :) 

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Click Accept as Solution
- Available for hiring. lixon@ecommercestudio.in
0 Likes
Highlighted
New Member
13 0 0

Jason,

worked like a charm! Since my content was inside of product page tabs, I just did a replace w/ ' ', for the keywords. Now the full product description is available for my first <p> tag. 

 

Thanks a bunch.

0 Likes
Highlighted
Tourist
17 0 0

Hi

Just to ask where I should add the code for Truncating the product description please?

 

Regards

0 Likes