液体 shopify - 更改页面上显示的产品数量答案

【问题标题】：liquid shopify - change number of products displayed on a page液体 shopify - 更改页面上显示的产品数量
【发布时间】：2016-04-11 17:30:55
【问题描述】：

我想在用户单击按钮后更改 shopify 页面上显示的产品数量。

但是，单击按钮后什么也没有发生。

是不是因为液体不能在脚本标签中渲染？

// set 25 products display on the page by default 
{% assign number = 25 %} 
{% paginate collection.products by number %}

<div>
   // content of products description go here
</div>

//after user click on the button, it will change the number of products displayed on a page  

<span><strong>Show&nbsp;&nbsp;&nbsp;</strong></span>
  <button onclick="view()">50&nbsp;&nbsp;&nbsp;&nbsp; </button>  
  <span>100&nbsp;&nbsp;&nbsp;&nbsp;</span> 
  <span>All</span> 
{% endpaginate %}

<script>
    //after user click on the button, it will change the number of products displayed on a page to 5 items. 
   // However Nothing happens after I click on the button.   
    function view(){
        {% assign number = 5 %} 
        {% paginate collection.products by 5 %}
        {% endpaginate %}
    }

【问题讨论】：

Liquid 是一种模板语言，你不能用 javascript 更新它。
你知道当用户点击按钮时如何重新加载模板吗？
当用户点击按钮时，使用纯 JS 隐藏产品。当他达到 25 岁时，只需发出 AJAX 请求并获取下一个 25 岁。
如果我在 shopify 液体代码中渲染 ajax，我会出现跨域错误吗？因为shopify似乎有自己的服务器，我正在调用另一台可能会产生跨域错误的服务器
为什么不实现点击无限滚动？

标签： shopify liquid assign pagination

【解决方案1】：

你应该使用不同的模板。

创建几个集合模板，如

collection.12.liquid collection.24.liquid collection.48.liquid

在这些模板中，将collection.liquid的内容和产品分页分别设置为12、24和48

然后把这些页面的链接像

<div>
  Show: 
  <a href="{{collection.url}}?view=12">12</a>
  <a href="{{collection.url}}?view=24">24</a>
  <a href="{{collection.url}}?view=48">48</a>
</div>

使用 ?view= yiu 将加载模板 12、24 或 48，您可以在其中按 12、24 或 48 对产品进行分页

【讨论】：