如何制作shopify网格视图和列表视图？

Question

如何制作shopify网格视图和列表视图？我已经为列表视图完成了html和collection-list.liquid。

这是按钮代码 - ＆gt;

<div class="collection-view">
 <button type="button" title="Grid view" class="change-view{% unless template contains 'list' %} change-view--active{% endunless %}" data-view="grid">
<span class="icon-fallback-text">
  <span class="icon icon-grid-view" aria-hidden="true"></span>
  <span class="fallback-text">Grid View</span>
</span>

                     列表显示        

我需要jquery或javascript代码来控制shopify上的网格视图和列表视图。

示例按钮 - ＆gt; http://prntscr.com/8lfkvh

Answer 1

您可以使用JavaScript将一个类添加到.collection-view，使用其中一个按钮的click事件在两个不同的视图之间切换。