Shopify/liquid - adding classes and removing injected text

Question

I'm working on a Shopify (slate) theme with very limited experience. There's a few classes I need to add which I've managed on images but can't find a way to do this on an anchor included within <h2 class="mosaic__title p-name">{{ item.title | link_to: item.url }}</h2>.

Also I have some prices that has text like "On Sale from" injected before it. I don't know how this is added or how to remove it. Here's an example:

<del>{{ item.compare_at_price | money }}</del>
{% assign sale_price = item.price | money %}
{{ 'products.product.on_sale_from_html' | t: price: sale_price }}

I've tried removing the .on_sale_from_html and t: price: sale_price but that doesn't work/it breaks.

Can anyone advise on this? Thanks!

Full section of code for reference:

<div class="mosaic__caption">
  <h2 class="mosaic__title p-name">{{ item.title | link_to: item.url }}</h2>

  {% if item.object_type == 'product' %}
    <p class="mosaic__value">
      {% if item.compare_at_price > item.price %}
        {% if item.price_varies %}
          <del>{{ item.compare_at_price | money }}</del>
          {% assign sale_price = item.price | money %}
          {{ 'products.product.on_sale_from_html' | t: price: sale_price }}
        {% else %}
          {{ 'products.product.on_sale' | t }}
          <data itemprop="price" class="p-price">{{ item.price | money }}</data>
        {% endif %}
        <data class="visually-hidden p-price">{{ 'products.product.regular_price' | t }}</data>
      {% else %}
        {% if item.price_varies %}
          {% assign price = item.price | money %}
          <data itemprop="price" class="p-price">{{ 'products.product.from_text_html' | t: price: price }}</data>
        {% else %}
          <data itemprop="price" class="p-price">{{ item.price | money }}</data>
        {% endif %}
      {% endif %}
      {% unless item.available %}
      {{ 'products.product.sold_out' | t }}
      {% endunless %}
    </p>
  {% else %}
    <p>{{ item.content | strip_html | truncatewords: 50 }}</p>
  {% endif %}
</div>

drip drip · Accepted Answer · 2018-05-05T17:22:44

Lets start with the link_to filter. This code: <h2 class="mosaic__title p-name">{{ item.title | link_to: item.url }}</h2>

The link_to takes a URL and just creates a html link element with the provided text and link.

So the above code is the same as:

<h2 class="mosaic__title p-name">
  <a href="{{item.url}}">{{item.title}}</a>
</h2>

So you can write as an alternative the above code or use replace filter to add a class attribute like so for example: item.title | link_to: item.url | replace: '<a', '<a class="foo"'

As for your second question such outputs {{ 'products.product.on_sale_from_html' | t: price: sale_price }} points that this is a translatable text.

This means that your text is located in your translation file ( usually en.default.json in your locales folder ) so you can modify the text from there.

As for the text that is added, it seems that your translated string contains the following {{ price }} variable which is replaced via the passed variable price: sale_price.

PS: Read up the documentation in Shopify where these functions are described in more detail: https://help.shopify.com/themes/liquid/filters/url-filters#link_to https://help.shopify.com/themes/development/internationalizing/locale-files#values

Shopify/liquid - adding classes and removing injected text

1 Answers