shopifyの商品カテゴリーページに表示される要素に、表示件数をコントロールできる機能をつけたい。
完成イメージはこんな感じ。
プルダウンを選択すると、8件、16件、32件といったように、表示させられる商品の数をコントロールできるようにするのがゴールです。
Debutテーマを例に解説していきます。
collection-template.liquidファイルを修正
こちらのファイルでは、コレクションテンプレートに関する設定がなされています。
コレクションテンプレートとは、何かしらのコレクションを作成したときのページとなります。
下記のようなコレクションリストをクリックして表示されるページが、collection-template.liquidで管理されています。
表示件数のプルダウンを表示させるためのコードを追加
まずは、下記のコードをコピーしてください。
shopifyからコピーして貼り付けているので、インデントがめちゃくちゃですが、ご容赦ください。
<div class="filters-toolbar__item-child">
<label class="filters-toolbar__label select-label" for="paginateBy">表示件数</label>
<div class="filters-toolbar__input-wrapper select-group">
<select name='paginateBy' id='paginateBy' class='collection-sort__input filters-toolbar__input'>
{% for i in (4..4) %} {% assign v = i | append: '' %}
<option value='{{ v }}'
{% if cart.attributes.pagination != blank and cart.attributes.pagination %}
{% if cart.attributes.pagination == v %} selected{% endif %}
{% else %}
{% if i == 40 %} selected{% endif %}
{% endif %}>{{ i }} 件 </option>
{% endfor %}
{% for i in (8..8) %} {% assign v = i | append: '' %}
<option value='{{ v }}'
{% if cart.attributes.pagination != blank and cart.attributes.pagination %}
{% if cart.attributes.pagination == v %} selected{% endif %}
{% else %}
{% if i == 40 %} selected{% endif %}
{% endif %}>{{ i }} 件 </option>
{% endfor %}
{% for i in (16..16) %} {% assign v = i | append: '' %}
<option value='{{ v }}'
{% if cart.attributes.pagination != blank and cart.attributes.pagination %}
{% if cart.attributes.pagination == v %} selected{% endif %}
{% else %}
{% if i == 40 %} selected{% endif %}
{% endif %}>{{ i }} 件 </option>
{% endfor %}
{% for i in (32..32) %} {% assign v = i | append: '' %}
<option value='{{ v }}'
{% if cart.attributes.pagination != blank and cart.attributes.pagination %}
{% if cart.attributes.pagination == v %} selected{% endif %}
{% else %}
{% if i == 40 %} selected{% endif %}
{% endif %}>{{ i }} 件 </option>
{% endfor %}
{% for i in (64..64) %} {% assign v = i | append: '' %}
<option value='{{ v }}'
{% if cart.attributes.pagination != blank and cart.attributes.pagination %}
{% if cart.attributes.pagination == v %} selected{% endif %}
{% else %}
{% if i == 40 %} selected{% endif %}
{% endif %}>{{ i }} 件 </option>
{% endfor %}
</select>
{% include 'icon-chevron-down' %}
</div>
</div>こちらのコードを、collection-template.liquidの114行目の下に貼り付けてください。
おそらく、Debutテーマを使用していただければ、114行目は、</div>と{% endif %}の間になるかと思います。
ここで、一度保存してプレビューを確認しましょう。
そうすると、下記のように「表示件数」という文字が画面に存在しているかと思います。
まだこの段階では、「表示件数」と言う文字が画面に表示されているだけで、表示件数を「8件」や「16件」を選択しても、画面の表示は何も変わらない状態です。
デフォルトの表示件数を変更するコードを追加
まずは、下記のコードを、collection-template.liquidファイルの、17行目に挿入してください。
{% endif %}と{% paginate collection.products by limit %}の間に挿入してください。
下記の画像も参考にしていただければと思います。
{% if cart.attributes.pagination != blank %}
{%- assign limit = cart.attributes.pagination %}
{% else %}
{% assign limit = 4 -%}
{% endif %}ここまで、できたらひとまず保存して、プレビューしてみましょう。
下記のように、デフォルトの4件のみが表示されている状態のはずです。
「デフォルトで8件表示したい」、「デフォルトで16件表示したい」と言った場合には、
21行目の、{% assgin limit = 4 -%}の「4」と言う数字をお好きな数字に変更してください。
ただ、今のコードだけでは、デフォルトで設定した件数が表示されるだけで、まだ表示件数の切り替え機能は実装できていません。
任意の表示件数を選択した際に、実際に画面の表示を切り替えるコードを追加
まずは、下記のコードをコピペしてください。
このコードを、collection-template.liquidファイルの、290行目あたり、
{% javascript %}
/* Bind a change event to the dropdown */
$('#paginateBy').on('change', function(){
/* Get the current value. Some value validation could be added here (but we don't) */
var val = $(this).val();
/* Send the value as a cart attribute via the AJAX API */
$.ajax({
type: "POST",
url: '/cart.js',
data: {"attributes[pagination]": val}, /* We are using an attribute named "pagination" */
success: function(d){
window.location.reload();
},
dataType: 'json'
});
});
{% endjavascript %}{% endpaginate %}と{% schema %}間に記載してください。画像も参考にしていただければと思います。ika
これでほとんど完成です！
あとは、このジャバスクリプトのコードを読み込むためのコードを追加すれば完了です。
下記のコードをコピーして、theme.liquidファイルの、</head>タグのすぐ上に記載してください。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>ここまで書いたら、保存してプレビューを確認してみてください。
手順通りに実行できていれば、しっかりと表示件数の切り替え機能が実装できているかと思います。
まとめ
collection-template.liquidファイルと、theme.liquidファイルの2つのファイルに、いくつかのコードを追加するだけで、この機能は実装できました。
商品の表示件数はユーザーが操作できた方が、より使い勝手が良くなり、サイトの満足度が高くなるのではないかと思います。
また、shopifyのカスタマイズ記事は随時あげていこうかと思いますので、何かご要望があればお気軽にご連絡ください。
ご自身でのカスタマイズが難しい際には、ご依頼も受け付けております。その際はお問い合わせフォームよりご連絡ください。