shopify点击不同的按钮将运行不同的液体代码

如果用户单击类名为“3-col”的按钮，它将执行以下代码：'{％assign products_per_row =“3”％}’。

如果用户点击“4-col”按钮，它将执行以下代码：'{％assign products_per_row =“4”％}’。

但是，下面的代码不起作用。

我已经研究过所有这些方法，但我做不到。 任何建议表示赞赏。 谢谢！ 

  {% include 'product-loop' with settings.collection_sidebar %}  function prod3(){ {% assign products_per_row = "3" %} } function prod4(){ {% assign products_per_row = "4" %} }

  • 没有办法像你的那样。
  • 但我给你相关的提及：
    • 请参阅链接https://full-the-style.myharavan.com/collections/all ; 然后单击左侧栏上的filter项，然后右侧栏必须根据您的选择更改一些项目。
    • 在Chrome上，您可以按F12，选中网络标签，再次点击左侧栏中的过滤条件; 确保您可以看到请求“/search?…view=grid_and_control”; => 通过向指定的搜索页面TEMPLATE发送请求来解决您的问题 。
  • 在您的情况下，尝试执行以下步骤：
    • 在Shopify管理员/主题内，创建2个搜索页面TEMPLATES：“search.3col.liquid”＆search.4col.liquid。
    • 在每个按钮上，您可以使用2个视图向搜索页面发出请求：“/ search？view = 3col”＆“/ search？view = 4col”
    • 然后，您可以使用HTML，CSS制作任何内容，当然也可以使用上面2个搜索页面上的液体代码。

PS：上面的网站基于Haravan.com，它只是喜欢Shopify.com（创建自己的商店，用液体代码定制主题……）

这是我对Shopify感到好奇的事情。 没有简单的方法来提供模板和客户端代码之间的交互。

为了做到这一点，你需要在客户端做到这一点。

让我们说你的产品是div类的’product-cell’然后你的代码可能是： 

 function prod3(){ $(".product-cell").css('width', '33.3%'); } function prod4(){ $(".product-cell").css('width', '25%'); }

然后确保你在你的主题中包含jQuery作为资产，如果这是你想要持久的东西，包括使用localStorage或cookie。 

 function prod3(){ $(".product-cell").addClass("col-md-3"); } function prod4(){ $(".product-cell").addClass("col-md-4"); }
Interesting Posts