如何在 shopify collection 页面的自定义标签列表中突出显示活动项目

Question

在这个支持论坛的帮助下，我已将自定义标签添加到我的 collection 页面：https://ecommerce.shopify.com/c/ecommerce-design/t/change-order-in-which-tags-are-displayed-on-collection-page-179468

collection 页面上出现的标签由导航中的链接列表定义。我在上面发布的讨论论坛中有更多相关信息。

我插入 collection-template.liquid 中 header 正下方的代码片段是：

{% capture collection_taglist %}{{ collection.handle | append: "-tags" }}{% endcapture %}
{% if linklists[collection_taglist] %}
  <ul class="tags tags--collection inline-list">
    {% for link in linklists[collection_taglist].links %}
    <li>{{ link.title | link_to: link.url }}</li>
    {% endfor %}
  </ul>
  {% endif %}

一切都按预期工作，但是我无法使用 CSS 样式突出显示活动标签。我也尝试了一些 Javascript（见下文），但这似乎也不起作用。

jQuery(".tags").find("a[href='"+window .location .href+"']").each(function() {
    jQuery(this).addClass("active");
});

看这里：http://shopsexologyinstitute.com/collections/women（可以用密码输入'eaclim'）

如有任何帮助，我们将不胜感激！

非常感谢:)

Answer 1

我运行在各种情况下都喜欢这个。运行控制台中的以下内容概述了问题：

jQuery(".tags").find('a').each(function(){ console.log(this.href);});

网址中的主机不是站点的主机。

您需要提取路径名进行比较。有多种方法可以做到这一点，但运行 Chrome 或 Firefox 中的以下方法可以理解。 URL 未得到广泛支持，因此对于生产，您需要一种不同的方式来解析 link 网址：

(function(){
    var path = location.pathname;
    return jQuery(".tags").find('a').filter(function(){
        console.log('checking: '+ this.getAttribute('href'));
        var href = new URL(this.getAttribute('href'), location.href);
        console.log(href.pathname +' vs '+ path);
        return href.pathname  == path;
    });
})();

如何在 shopify collection 页面的自定义标签列表中突出显示活动项目

How to highlight active item in custom taglist on shopify collection page

tags

collections

customization

filtering

shopify