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 但这并没有 work/it 中断。

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

全段代码供参考：

<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 link 元素，其中包含提供的文本和 link.

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

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

所以你可以写上面的代码作为替代，或者使用替换过滤器来添加一个 class 属性，例如：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

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

Shopify/liquid - adding classes and removing injected text

liquid

shopify

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