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

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

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

假设您的产品属于带有“产品单元”类的div，那么您的代码可能是：

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

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

Answer 2

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

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

Answer 3

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

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

3 个答案: