正文 

当前位置： 首页 > 知识 >

使用 Shopify 在 Collection 页面上筛选变体

     2023-02-16     132

关键词：

【中文标题】使用 Shopify 在 Collection 页面上筛选变体【英文标题】：Variant filter on Collection pages with Shopify 【发布时间】：2017-12-22 23:22:28 【问题描述】：

我正在尝试在我的收藏页面中设置过滤器。

到目前为止，我设法设置了一个很棒的自定义标签过滤器，如下所示：

                <div class="collection-sort">

% assign tags = 'Black, Slate, Military Green' | replace: ' ,', ',' | replace: ', ', ',' | split: ',' %
<select id="FilterBy" class="collection-sort__input">
  <option value="/collections/ collection.handle ">Choose Color</option>
  % for tag in tags %
  % if current_tags contains tag %
  <option value="/collections/ collection.handle /tag " selected> tag </option>
  % elsif collection.all_tags contains tag %
  <option value="/collections/ collection.handle /tag"> tag </option>
  % endif %
  % endfor %
</select>
</div>

但是，我希望有一个动态大小过滤器（使用 Variant）

为此，我尝试了以下方法：

<div class="collection-sort">


  <span value="">Choose Size</span>

          % for variant in collection.variants %
         % if variant.available %
  <span value=" variant.id " > variant.size</span>
% else %
  <span value=" variant.id " > variant.size </span>
 % endif %
        % endfor %

</div>

但我的下拉列表中没有出现任何内容。 . .我所有的产品都输入了尺寸作为产品选项/变体。 . .

有人设法完成这项工作吗？这将非常有帮助！

非常感谢

【问题讨论】：

【参考方案1】：

您的代码存在太多问题，无法输出任何内容。

让我们一一剖析。

集合没有变体

有了这行代码：

% for variant in collection.variants %

您的目标是集合内的变体，但集合没有变体。产品确实有变体。

所以这里的逻辑是不正确的。

变体选项以不同的方式存储

使用以下代码： variant.size 您正在尝试获取名为 size 的变体选项，但它不起作用。

您必须使用对象option1、option2 或option3 来获得选项。如果您的变体选项大小是第一个，您将通过以下方式获得它：variant.option1。

不好的部分

由于 Shopify 的限制，您尝试使用液体无法实现。

为了实现这一点，您需要循环所有产品并采用它们的变体选项并仅过滤独特的产品，并且由于每个请求的硬性限制 ot 50 产品，这是一场失败的战斗。

解决方法（有几个）

所有解决方法都需要您创建一个link_list，以保存您必须手动输入的所有可用尺寸。

1) 最常见的是使用标签作为尺寸并按标签过滤，因为集合可以直接按标签过滤产品。

2) 使用将根据尺寸存储产品并在过滤特定尺寸时重定向到它们的集合。

3) 创建一个无限的 AJAX 请求，通过检查每个产品是否具有选定的值并使用分页作为加载下一页的方式来根据您的过滤器提取产品。

这些是不使用应用程序的主要选项。

祝你好运！

【讨论】：

感谢所有的解释！这是我的想法，不可能达到我想要的方式，很高兴得到确认。那么我会通过标签的方式绕过:) 谢谢大家！

除了 Shopify 商店的主页之外，如何在任何页面中添加主页部分？

】除了Shopify商店的主页之外，如何在任何页面中添加主页部分？【英文标题】：HowcanIaddhome-pagesectionsinanypage,otherthanhome-pageinmyShopifyStore?【发布时间】：2020-03-2614:10:04【问题描述】：在我的Shopify商店中，我可以看到我可以使用我... 查看详情

Shopify REST API 分页链接为空

】ShopifyRESTAPI分页链接为空【英文标题】：ShopifyRESTAPIPaginationLinkEmpty【发布时间】：2021-09-1105:38:31【问题描述】：情况我正在尝试调用ShopifyRESTAPI，其中我有超过50-250个结果，但我无法从包含分页链接的cURL响应。APIDocumentation中用... 查看详情

在 Shopify 上使用 ngrok 的 Django

】在Shopify上使用ngrok的Django【英文标题】：DjangowithngrokonShopify【发布时间】：2019-04-0500:08:23【问题描述】：我正在尝试从Shopify获取有关订单的json数据。“管理私人应用程序”选项似乎在过去一年左右发生了变化，我能找到的最... 查看详情

在 Shopify 液体中使用 @font-face 时的字体文件 404

】在Shopify液体中使用@font-face时的字体文件404【英文标题】：Fontfile404whenusing@font-faceinShopifyliquid【发布时间】：2015-10-1702:33:21【问题描述】：我浏览了所有可以在此处和Shopify论坛上找到的帖子，并尝试了一些不同的方法，但遗憾... 查看详情

在区域 shopify 商店中正确使用 hreflang / canonical 标签 [关闭]

】在区域shopify商店中正确使用hreflang/canonical标签[关闭]【英文标题】：Correctuseofhreflang/canonicaltagsonregionalshopifystores[closed]【发布时间】：2019-04-2222:03:05【问题描述】：我正在设置2个区域性shopify网站。我是否应该考虑使用规范标... 查看详情

在 Shopify 中使用 ActiveMerchant 的 Paypal Express 结账

】在Shopify中使用ActiveMerchant的PaypalExpress结账【英文标题】：PaypalExpressCheckoutwithActiveMerchantasinShopify【发布时间】：2011-02-0309:05:27【问题描述】：我在一个市场网络应用程序中成功使用PaypalExpressCheckout，为每个卖家将三个参数传递... 查看详情

html重新排序模块以放入collection.liquid内-可能需要css爱。http://docs.shopify.com/manual/configuration/store-cust(代码片

查看详情

html重新排序模块以放入collection.liquid内-可能需要css爱。http://docs.shopify.com/manual/configuration/store-cust(代码片

查看详情

html重新排序模块以放入collection.liquid内-可能需要css爱。http://docs.shopify.com/manual/configuration/store-cust(代码片

查看详情

html重新排序模块以放入collection.liquid内-可能需要css爱。http://docs.shopify.com/manual/configuration/store-cust(代码片

查看详情

Shopify 在 Scala 中验证 webhook 调用

】Shopify在Scala中验证webhook调用【英文标题】：ShopifyverifywebhookcallinScala【发布时间】：2013-08-2502:40:30【问题描述】：我正在为Shopifywebhook实现一个简单的web服务，以便使用Play2进行调用。我想使用包含的“X-Shopify-Hmac-Sha256”标头参... 查看详情

在 Shopify 液体模板中使用 vue.js

】在Shopify液体模板中使用vue.js【英文标题】：Usingvue.jsinShopifyliquidtemplates【发布时间】：2017-09-1605:39:47【问题描述】：这应该很简单，但尽管进行了搜索，但我找不到任何解决方案。如何在液体文件中使用vue模板标签？由于Vue和... 查看详情

在 Heroku 上开发时，使用 GraphQL 的 Shopify 应用程序无法运行

】在Heroku上开发时，使用GraphQL的Shopify应用程序无法运行【英文标题】：ShopifyappwithGraphQLfailedtoworkwhendevelopingonHeroku【发布时间】：2020-04-2121:34:24【问题描述】：我正在使用Node.js和React开发Shopify私有应用程序，并使用GraphQLapi发出... 查看详情

使用 Firebase 进行 Shopify 身份验证验证？

】使用Firebase进行Shopify身份验证验证？【英文标题】：ShopifyAuthenticationValidationwithFirebase?【发布时间】：2020-10-0920:32:56【问题描述】：我一直在关注this教程，了解如何使用Node、Nextjs和React构建公共Shopify应用程序。一切进展顺利... 查看详情

Shopify - 使用 Shopify API 的新订单 - 如何了解税费和运费？

】Shopify-使用ShopifyAPI的新订单-如何了解税费和运费？【英文标题】：Shopify-NeworderusingtheShopifyAPI-howtoknowtaxandshipping?【发布时间】：2017-09-0420:04:05【问题描述】：我们已经构建了一个电子商务Web应用程序（Node后端，Vue前端）。我... 查看详情

在 Visual Studio 代码中格式化液体（Shopify）代码

】在VisualStudio代码中格式化液体（Shopify）代码【英文标题】：Formatliquid(Shopify)codeinvisualstudiocode【发布时间】：2018-10-2707:18:10【问题描述】：如何在VisualStudio中格式化.liquid（Shopify液体）代码。通过将语言设置为HTML，我可以做到... 查看详情

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

】使用布鲁克林主题在Shopify的收藏页面上显示所有颜色变体【英文标题】：ShowAllColorVariantsonCollectionpageinShopifyusing***lynTheme【发布时间】：2016-05-1509:28:20【问题描述】：嘿，我在我的shopify网站上使用***lyn主题。我有不同的产品会... 查看详情

Shopify：无限滚动限制为 48 种产品？

...我想在我的产品集合页面上实现无限滚动，为此我在我的collection-template.liquid文件中进行了编码：<divid="js-ajax-loop"class="ProductListProductList--g 查看详情