Ad

Shopify Liquid. If Line.title Contains '
' Statement Is Not Working

- 1 answer

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

Ad

Answer

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;', ' ' }}

Ad
source: stackoverflow.com
Ad