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

Question

如果用户单击具有 class 名称的按钮：'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 感到好奇的地方。没有简单的方法来提供模板和客户端代码之间的交互。

为了做到这一点，您需要在所有客户端完成。

假设您的产品在带有 class 'product-cell' 的 div 中，那么您的代码可能是：

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

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

Answer 2

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

PS：上面的站点基于Haravan.com，它就像Shopify.com（创建你自己的商店，用流动代码定制主题......）

Answer 3

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

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

shopify click on different button will run different liquid code

javascript

jquery

liquid

shopify

assign

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

shopify click on different button will run different liquid code

javascript

jquery

liquid

shopify

assign

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