Shopify Expanse主题:隐藏无库存菜单集合技术求助
Shopify Expanse主题隐藏无库存集合导航项的实现方法
核心思路
针对导航中的集合链接,判断对应集合内是否存在可售商品(即product.available为true的商品),仅当存在可售商品时才渲染该导航项;非集合类型的导航项(如首页、自定义页面)保持正常显示。
代码修改步骤
- 在头部导航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 %}
- 替换为带判断逻辑的代码:
{% 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
相关产品推荐
相关产品推荐

