时间戳

首页 > 解决方案 > 按前缀查找产品标签并将它们一起显示在 shopify 前端的一个文本行中

jquery - 按前缀查找产品标签并将它们一起显示在 shopify 前端的一个文本行中

问题描述

我的一些产品具有相同前缀的标签，例如：

Color Family:Neutrals和Color Family:Beiges。

我想要在前端，它看起来像这样：

Color Family: Beiges, Neutrals.

我成功地设法得到了这条线，除了它重复的次数与具有相同前缀的标签一样多（在本例中为两次）：

在此处输入图像描述

我的液体代码：

{% for tag in product.tags %}
     {% if tag contains "Color Family:" %}
         <div class="bullet">
             <div class="left">Color Family:</div>
             <div class="right bold colorfamily-hook" style="font-weight: bold;">{{tag | replace: 'Color Family:', '' | replace: "||", ", "}}, </div>
        </div>
     {% endif %}
{% endfor %}

jQuery代码：

$(document).ready(function() {
     var comma_replace = function (el) {
        return $(el).text().split(',').filter(function(word) {
            return word !== ' ' 
        }).join(',')
     } 

     $($('.colorfamily-hook')).text(comma_replace($('.colorfamily-hook'))) 
})

如果有多个标签具有相同的前缀，我应该如何更改文本行不会重复？

标签： jqueryshopifyliquid

解决方案

您不需要 Javascript，这可以使用 Liquid 来实现：

{% assign k = 0 %}
{% for tag in product.tags %}
     {% if tag contains "Color Family:" %}
       {% if k == 0 %}
         {{ tag }}
       {% else %}
         {{ tag | remove: 'Color Family:' | prepend: ', ' }} 
       {% endif %}
       {% assign k = k | plus:1 %}
     {% else %}
       {% continue %}
     {% endif %}
{% endfor %}

说明：首先，您启动标签盒的自定义计数器。然后，如果标签是第一个标签，则按原样显示它。如果不是，则删除第一部分并用逗号替换它。完成此案例检查后，您将迭代您的自定义计数器。

推荐阅读