Shopify/liquid - 添加类和删除注入的文本

Question

我正在开发一个经验非常有限的 Shopify (slate) 主题。我需要添加一些我在图像上管理过的类，但找不到在 <h2 class="mosaic__title p-name">{{ item.title | link_to: item.url }}</h2> 中包含的锚点上执行此操作的方法。

我还有一些价格，在它之前注入了诸如“On Sale from”之类的文字。我不知道这是如何添加或如何删除它的。这是一个例子：

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

我已经尝试删除 .on_sale_from_html 和 t: price: sale_price 但这不起作用/它坏了。

任何人都可以就此提出建议吗？谢谢！

完整部分代码供参考：

<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>

Answer 1

让我们从link_to 过滤器开始。此代码：<h2 class="mosaic__title p-name">{{ item.title | link_to: item.url }}</h2>

link_to 接受一个 URL 并使用提供的文本和链接创建一个 html 链接元素。

所以上面的代码是一样的：

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

因此您可以编写上述代码作为替代方案或使用替换过滤器添加类属性，例如：item.title | link_to: item.url | replace: '<a', '<a class="foo"'

---

至于你的第二个问题，{{ 'products.product.on_sale_from_html' | t: price: sale_price }} 这样的输出指出这是一个可翻译的文本。

这意味着您的文本位于您的翻译文件中（通常是 en.default.json 在您的 locales 文件夹中），因此您可以从那里修改文本。

至于添加的文本，您翻译的字符串似乎包含以下{{ price }} 变量，该变量通过传递的变量price: sale_price 替换。

PS：阅读 Shopify 中的文档，其中更详细地描述了这些功能： https://help.shopify.com/themes/liquid/filters/url-filters#link_to https://help.shopify.com/themes/development/internationalizing/locale-files#values