You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Shopify Expanse主题:隐藏无库存菜单集合技术求助

Shopify Expanse主题隐藏无库存集合导航项的实现方法

核心思路

针对导航中的集合链接,判断对应集合内是否存在可售商品(即product.available为true的商品),仅当存在可售商品时才渲染该导航项;非集合类型的导航项(如首页、自定义页面)保持正常显示。

代码修改步骤

  1. 在头部导航Liquid文件中,找到导航菜单的循环代码块,通常结构如下:
{% for link in linklists[settings.main_linklist].links %}
  <li class="nav__item">
    <a href="{{ link.url }}" class="nav__link">{{ link.title }}</a>
  </li>
{% endfor %}
  1. 替换为带判断逻辑的代码:
{% for link in linklists[settings.main_linklist].links %}
  {% if link.type == 'collection_link' %}
    {% assign target_collection = link.object %}
    <!-- 过滤并统计集合内可售商品数量 -->
    {% assign available_products = target_collection.products | where: 'available', true %}
    {% if available_products.size > 0 %}
      <li class="nav__item">
        <a href="{{ link.url }}" class="nav__link">{{ link.title }}</a>
      </li>
    {% endif %}
  {% else %}
    <!-- 非集合类型导航项正常渲染 -->
    <li class="nav__item">
      <a href="{{ link.url }}" class="nav__link">{{ link.title }}</a>
    </li>
  {% endif %}
{% endfor %}

代码说明

  • link.type == 'collection_link':筛选出导航中指向集合的链接
  • target_collection = link.object:获取当前链接对应的集合对象
  • available_products = target_collection.products | where: 'available', true:过滤出集合内所有可售商品
  • available_products.size > 0:仅当可售商品数量大于0时,才显示该集合导航项

性能优化提示

如果集合内商品数量较多,可改用遍历终止的方式减少资源消耗:

{% for link in linklists[settings.main_linklist].links %}
  {% if link.type == 'collection_link' %}
    {% assign target_collection = link.object %}
    {% assign has_available = false %}
    {% for product in target_collection.products limit: 10 %}
      {% if product.available %}
        {% assign has_available = true %}
        {% break %}
      {% endif %}
    {% endfor %}
    {% if has_available %}
      <li class="nav__item">
        <a href="{{ link.url }}" class="nav__link">{{ link.title }}</a>
      </li>
    {% endif %}
  {% else %}
    <li class="nav__item">
      <a href="{{ link.url }}" class="nav__link">{{ link.title }}</a>
    </li>
  {% endif %}
{% endfor %}

通过limit:10限制遍历商品数量,找到第一个可售商品就终止循环,提升页面加载效率。

内容的提问来源于stack exchange,提问作者Adam Rayan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.24 18:16:38