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

Question

如果用户点击类名：'3-col' 的按钮，它将执行以下代码：'{% assign products_per_row = "3" %}'。

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

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

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

<button class='3-col' onclick="prod3()"></button> 
<button class='4-col'onclick="prod4()" ></button> 
{% include 'product-loop' with settings.collection_sidebar %}


<script type="text/javascript">
 function prod3(){ 
            {% assign products_per_row = "3" %} 
        }
function prod4(){ 
            {% assign products_per_row = "4" %} 
        }

</script>

Answer 1

• 没有办法像你那样做。
• 但我给你相关的提及：
  • 参考链接https://full-the-style.myharavan.com/collections/all；然后单击左侧栏上的过滤器项目，然后右侧栏必须根据您的选择更改一些项目。
  • 在 Chrome 上，您可以按 F12，检查网络选项卡，再次单击左侧栏上的过滤项；确保您可以看到请求“/search?...view=grid_and_control”； => 通过向指定的搜索页面模板发送请求来解决您的问题。
• 根据您的情况，请尝试执行以下步骤：
  • 在您的 Shopify 后台/主题中，创建 2 个搜索页面模板：“search.3col.liquid”和 search.4col.liquid。
  • 在每个按钮上，您可以请求具有 2 个视图的搜索页面：“/search?view=3col”和“/search?view=4col”
  • 然后，您可以使用 HTML、CSS 制作任何东西，当然还可以使用上面 2 个搜索页面上的液体代码。

PS：上面的网站基于Haravan.com，它就像Shopify.com（创建自己的商店，使用液体代码自定义主题......）

Answer 2

这就是我对 Shopify 感到好奇的地方。没有简单的方法可以在他们的模板和客户端代码之间提供交互。

为了做到这一点，您需要在客户端进行所有操作。

假设您的产品在具有“product-cell”类的 div 中，那么您的代码可能是：

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

然后确保您将 jQuery 作为资产包含在您的主题中，如果这是您想要持久化的内容，请使用 localStorage 或 cookie。

Answer 3

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