使用布鲁克林主题在 Shopify 的收藏页面上显示所有颜色变体

Posted 2023-02-16

【中文标题】使用布鲁克林主题在 Shopify 的收藏页面上显示所有颜色变体

【英文标题】：Show All Color Variants on Collection page in Shopify using ***lyn Theme

【发布时间】：2016-05-15 09:28:20

【问题描述】：

嘿，我在我的 shopify 网站上使用 ***lyn 主题。我有不同的产品会有颜色变体。当我点击收藏页面时，我想将该产品的所有颜色变体显示为单独的产品。我从昨晚开始就在谷歌上搜索，请帮忙。

【参考方案1】：

看看下面的代码。

<ul class="colorlist"> 
 % for option in product.options %
 % if option == 'Color' %
 % assign index = forloop.index0 %
 % assign colorlist = '' %
 % assign color = '' %
 % for variant in product.variants %
 % capture color %
  variant.options[index] 
 % endcapture %

 % unless colorlist contains color %
  % if variant.available %

  <li id=" variant.id " title=" variant.inventory_quantity  In Stock" class="instock"><a href=" product.url | within: collection ?variant= variant.id " style="background: color | downcase "> color | downcase </a></li>

  % else %

  <li id=" variant.id " title="Out of Stock"  class="outstock" > color | downcase </li>

  % endif %

% capture tempList %
colorlist | append: color | append: " " 
% endcapture %
% assign colorlist = tempList %
% endunless %
% endfor %
% endif %
% endfor %
</ul>

上面的代码可以在集合页面中显示产品的可用颜色。您可以采用相同的循环结构并显示整个产品网格，而不仅仅是显示变体名称。

【讨论】：

我在哪个文件中使用这个？

你能帮我显示整个产品网格吗？

我很乐意提供帮助。如果您使用的是网格布局。您需要编辑 Snippets/product-grid-item.liquid 。这是要放置的代码。 link

在给你代码之前我已经测试过了，你可以在这里看到演示。 price-match.myshopify.com/collections/all

嗨，添加一个名为“product-grid-item-home.liquid”的新 sn-p 现在将这些代码插入其中。 link 并保存。现在编辑名为 'featured-products.liquid' 的 sn-p，将第 57 行从 % include 'product-grid-item' % 更改为 % include 'product-grid-item-home' % 保存。这应该可以解决您的主页问题。