如何在Shopify集合页显示商品自提库存的Stocked标签？

需求说明 #

已启用Shopify多库存地点功能，商品详情页已实现显示最近自提点的功能。现需在集合视图页（展示某集合下所有商品的页面），为具备自提库存的商品显示「STOCKED」标签。

问题现状 #

使用以下代码时返回空字段，标签无法正常显示：

<div class="pickup-availability-container">
  {%- assign pick_up_availabilities = product.store_availabilities | where: 'pick_up_enabled', true -%}

  {%- if pick_up_availabilities.size > 0 -%}
    <span class="h6" style="color:var(--lc-blue);"> STOCKED {% render 'icon_ticked_circle' %}</span>
  {%- endif -%}
</div>

原因：Shopify为优化集合页加载性能，默认不会在集合页的product对象中加载store_availabilities数据，因此无法直接通过该属性获取自提库存信息。

可行实现方案 #

方案一：Liquid服务器端渲染（直接显示标签） #

遍历店铺内所有开启自提功能的库存地点，检查商品在对应地点的库存数量，只要存在任一地点有库存，就显示标签。

替换代码如下：

<div class="pickup-availability-container">
  {% assign has_pickup_stock = false %}
  {%- for location in shop.locations -%}
    {%- if location.enabled and location.pickup_enabled -%}
      {%- assign inventory_qty = product | inventory_at: location -%}
      {%- if inventory_qty > 0 -%}
        {%- assign has_pickup_stock = true -%}
        {%- break -%}
      {%- endif -%}
    {%- endif -%}
  {%- endfor -%}

  {%- if has_pickup_stock -%}
    <span class="h6" style="color:var(--lc-blue);"> STOCKED {% render 'icon_ticked_circle' %}</span>
  {%- endif -%}
</div>

注意：若店铺库存地点较多，遍历所有地点可能轻微影响集合页加载速度，可根据实际情况添加地点筛选逻辑（比如只遍历特定区域的地点）。

方案二：前端AJAX异步加载（优化首屏性能） #

通过Shopify的商品API异步获取商品的自提库存信息，避免服务器端遍历带来的性能影响，标签会在页面加载完成后显示。

1. 在集合页的商品元素上添加商品handle属性：

<div class="product-item" data-product-handle="{{ product.handle }}">
  <!-- 商品原有内容 -->
  <div class="pickup-availability-container"></div>
</div>

2. 添加JavaScript代码（可放在主题的theme.js或集合页专属脚本中）：

document.addEventListener('DOMContentLoaded', function() {
  const productItems = document.querySelectorAll('.product-item');
  productItems.forEach(item => {
    const productHandle = item.dataset.productHandle;
    if (!productHandle) return;

    fetch(`/products/${productHandle}.js`)
      .then(response => response.json())
      .then(product => {
        // 判断是否存在开启自提且有库存的地点
        const hasPickupStock = product.store_availabilities.some(avail => 
          avail.pick_up_enabled && avail.inventory_quantity > 0
        );
        if (hasPickupStock) {
          const container = item.querySelector('.pickup-availability-container');
          container.innerHTML = '<span class="h6" style="color:var(--lc-blue);"> STOCKED {% render 'icon_ticked_circle' %}</span>';
        }
      })
      .catch(err => console.error('获取自提库存失败:', err));
  });
});

优点：不影响集合页首屏加载速度，适合库存地点较多的店铺。

内容的提问来源于stack exchange，提问作者Dan Griffin