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

如果用户单击类名为“3-col”的按钮，它将执行以下代码：“{%assign products\u per_row=“3”%}”

如果用户单击“4列”按钮，它将执行以下代码：“{%assign products\u 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>

{%include'product loop'with settings.collection_sidebar%}
函数prod3（）{
{%assign products_per_row=“3”%}
}
函数prod4（）{
{%assign products_per_row=“4”%}
}

这正是我对Shopify感到好奇的事情。在他们的模板和客户端代码之间没有简单的交互方式

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

假设您的产品位于“product cell”类的div中，那么您的代码可以是：

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

---

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

这是我对Shopify感到好奇的事情。在他们的模板和客户端代码之间没有简单的交互方式

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

假设您的产品位于“product cell”类的div中，那么您的代码可以是：

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

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

• 没有办法像你这样做
• 但我要向你们提到：
  • 参考链接；然后单击左栏上的筛选项目，然后右栏必须根据您的选择更改某些项目
  • 在Chrome上，您可以按F12键，选中网络选项卡，再次单击左侧栏上的过滤器项；确保您可以看到请求“/搜索？…视图=网格和控制”=>通过向指定的搜索页面模板发送请求来解决问题
• 在您的案例中，尝试执行以下步骤：
  • 在Shopify管理员/主题中，创建两个搜索页面模板：“search.3col.liquid”和search.4col.liquid
  • 在每个按钮上，您都可以请求使用2个视图搜索页面：“/search？view=3col”和“/search？view=4col”
  • 然后你可以用HTML、CSS制作任何东西，当然也可以在上面的两个搜索页面上使用液体代码

注：以上网站基于Haravan.com，它就像Shopify.com（创建自己的商店，用液体代码定制主题…

• 没有办法像你这样做
• 但我要向你们提到：
  • 参考链接；然后单击左栏上的筛选项目，然后右栏必须根据您的选择更改某些项目
  • 在Chrome上，您可以按F12键，选中网络选项卡，再次单击左侧栏上的过滤器项；确保您可以看到请求“/搜索？…视图=网格和控制”=>通过向指定的搜索页面模板发送请求来解决问题
• 在您的案例中，尝试执行以下步骤：
  • 在Shopify管理员/主题中，创建两个搜索页面模板：“search.3col.liquid”和search.4col.liquid
  • 在每个按钮上，您都可以请求使用2个视图搜索页面：“/search？view=3col”和“/search？view=4col”
  • 然后你可以用HTML、CSS制作任何东西，当然也可以在上面的两个搜索页面上使用液体代码

---

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

liquid是一种模板语言。这样不行。一旦呈现/加载页面，您就无法更改液体。是否有其他方法可以实现它？您希望实现什么？在问题中提到这一点。是否有其他方法可以在一行中显示3个产品或在一行中显示4个产品，这取决于我单击的按钮。当您在液体中使用

每行产品的值而不使用JS时，产品的
类中是否有任何更改？液体是一种模板语言。这样不行。一旦呈现/加载页面，您就无法更改液体。是否有其他方法可以实现它？您希望实现什么？在问题中提到这一点。是否有其他方法可以在一行中显示3种产品或在一行中显示4种产品，这取决于在液体中不使用JS而使用
每行产品的值时我单击的按钮，产品的
类别
是否有任何变化？我怀疑
.product cell
在所有主题中是否普遍存在。我见过主题使用引导来实现这种效果。是的。因此答案的“让我们说…”部分。我怀疑
.product cell
是否会在所有主题中普遍存在。我见过主题使用引导来实现这种效果。是的。因此答案的“让我们说……”部分。