liquid shopify-更改页面上显示的产品数量

我想在用户点击按钮后更改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 %}
    } 

//设置页面默认显示25种产品
{%assign number=25%}
{%paginate collection.products by number%}
//产品说明内容请点击此处
//用户单击按钮后，将更改页面上显示的产品数量
展示
50
100
全部的
{%endpaginate%}
//用户单击按钮后，页面上显示的产品数量将更改为5项。
//但是在我点击按钮后什么也没发生。
函数视图（）{
{%assign number=5%}
{%paginate collection.products乘以5%}
{%endpaginate%}
} 

---

您应该使用不同的模板

创建多个集合模板，如

收集.12.液体 收集.24.液体 收集.48.液体

在这些模板中，将collection.liquid和paginate产品的内容设置为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

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