CODEWITHSUNDEEP
shopifyliquidliquid-layout
Oleg K
Oleg K

Reputation: 360

Shopify Liquid. If line.title contains '<br>' statement is not working

We are using Shopify where we have an invoice page where product title and other data is showing.

My problem is that product.title is displaying <br> tag on the invoice page.
(On the product page title is displaying w/o <br> tag)

The reason for this is that product.title can only be entered via WYSIWYG.
Where WYSIWYG encodes product.title into ASCII code and decodes product.title on the invoice page.

I am trying to find and replace/hide <br> tag inside product.title using Liquid string filter
{{ product.title | replace: 'Awesome', 'Mega' }} with {% if %} statement and it is not working. If i'll change {% if line.title contains '<br>'%} to {% if line.title contains 'Dress'%} the code will replace Dress with white space.
Kindly find below part of my code.

Part of the code i added

{% if line.title contains '<br>'%} {{ line.title | replace: '<br>', ' ' }} {% endif %}

General code

<td class="order-list__product-description-cell" style="width:100%">
  {% if line.product.title %} {% assign line_title = line.product.title %} 
  {% else %} {% assign line_title = line.title %} {% endif %}
  <span class="order-list__item-title">

 <!-- Replace if statement -->

  {% if line.title contains '<br>'%} {{ line.title | replace: '<br>', ' ' }}
  {% endif %} 

  <!-- Replace if statement -->

  {{ line_title }} × {{ line.quantity }}
</span>
<br/> {% if line.variant.title != 'Default Title' %}
<span class="order-list__item-variant">{{ line.variant.title }}</span> {% endif %}

I would highly appreciate if you could please tell me what am i doing wrong and guide me on how to implement this in the right way. Meanwhile waiting for Shopify to fix the issue of displaying tags in their app

Upvotes: 2

Views: 4354

Answers (1)

Dave B
Dave B

Reputation: 3248

If your title is showing like this:

This is a really, really, really,<br>really long product title!

Then Shopify is probably escaping your HTML tag, turning it into this under-the-hood:

This is a really, really, really,&lt;br&gt;really long product title!

If you update your {{ product.title }} code to: {{ product.title | replace: '&lt;', '<' | replace: '&gt;', '>' }} you should get the following:

This is a really, really, really,

really long product title!

Alternatively, if you want to remove the line break entirely, you could use either:

{{ product.title | replace: '&lt;', '<' | replace: '&gt;', '>' | remove: '<br>' }}

or: {{ product.title | replace: '&lt;br&gt;', ' ' }}

Upvotes: 6

Related Questions