search - 在 SHOPIFY 中添加“每页项目”下拉框

Question

我正在shopify上建立一个网上商店。我想在显示我的产品的页面上添加一个下拉框，我可以在其中选择每页显示的项目数（即 25、50、100）。

关于从哪里开始以及shopify中是否有任何短代码可以帮助我做到这一点的任何建议？

Answer 1

这是收藏页面的解决方案；试试下面的代码：

<div class="sort-per-page">
 <label for="sel1">Show per page:</label>
 <select id="sel1" class="num">
 <option value="/collections/{{ collection.handle }}?view=9" {% if limit == 9 %}selected="selected"{% endif %}>9</option>
 <option value="/collections/{{ collection.handle }}?view=12" {% if limit == 12 %}selected="selected"{% endif %}>12</option>
 <option value="/collections/{{ collection.handle }}?view=24" {% if limit == 24 %}selected="selected"{% endif %}>24</option>
 <option value="/collections/{{ collection.handle }}?view=36" {% if limit == 36 %}selected="selected"{% endif %}>36</option>
 </select>
</div>

<script>
$(document).ready(function(){
    jQuery('.sort-per-page select.num').on('change', function(){
      window.location.replace(jQuery(this).val());
    });
});
</script>

Answer 2

有一件事情是肯定的。您将处理集合。渲染集合时，您可以选择要显示的产品数量。进一步 Shopify 具有您设置和控制的分页。

因此，您可以通过封装内置的 Liquid Collection 渲染变量来渲染您的选择机制。

或者，您可以将集合中的所有产品渲染到某个客户端数据结构中（这可能需要一些时间，具体取决于产品的数量），然后使用您自己的算法和想法渲染任意数量的产品。