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

2
votes

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

1
shopifyliquidliquid-layout
Why do you have <br> in the product titles? – Josh Brown
We have <br> tag only in certain products. Their titles are too long for one row and we would like to have them on two rows, that is why we used <br> in the titles. (No other way to break the line in Shopify WYSIWYG product editor) We are using Order Printer app by Shopify to print our invoices and it is about the way this application works. I already let them know about this issue, hopefully they will fix it. – Oleg K

1 Answers

6
votes

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