🔍 コレクション/検索中級
コレクションページのフィルタパネル
コレクションページで真偽値・リスト・価格帯のフィルタを、オフキャンバス（サイドスライダー）パネルとして表示するスニペット。チェックボックスと価格入力フィールドで絞り込み条件を選択でき、該当件数を併記する。
用途
コレクションページで商品を色・素材・サイズ・価格帯で絞り込みたいとき。モバイルではオフキャンバスとして画面右から引き出し表示される。
設置場所
snippets/collection-filters.liquid に配置し、templates/collection.liquid または sections/main-collection.liquid 内で `{% render 'collection-filters', collection: collection %}` で呼び出す。フィルタ送信後の JavaScript は `collection-filters` カスタムエレメントで実装する。
注意点
フィルタの表示順は Shopify の管理画面で設定した順に従う。price_range フィルタで通貨記号 `cart.currency.symbol` を使うため、複数通貨対応が必要な場合は Shopify Markets の通貨設定と整合させる。数値計算時に `money_without_currency` で通貨記号を除去し、`replace: ',', ''` で千位区切りを削除して数値化しているため、ストア通貨の形式（カンマ区切り）が変わるとここの処理も調整が必要。
コード
179 行 / liquid<div
id="offcanvas-collection-filters"
class="offcanvas offcanvas-end"
tabindex="-1"
aria-labelledby="offcanvas-collection-filters-label">
<collection-filters
id="collection-filters"
class="collection-filters">
<div class="offcanvas-header border-0">
<h2 id="offcanvas-collection-filters-label" class="offcanvas-title">
{{ 'collection.filters.title' | t }}
</h2>
<button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="{{ 'general.accessibility.close' | t }}">
{% render 'svg-icons', icon: 'x' %}
</button>
</div>
<div class="offcanvas-body p-0">
<form class="collection-filters-form">
<input type="hidden" name="sort_by" value="{{ collection.sort_by }}">
<div
role="list"
aria-labelledby="offcanvas-collection-filters-label">
{% for filter in collection.filters %}
<div class="collapse-wrapper" role="listitem">
<button
id="filters-collapse-btn-{{ forloop.index }}"
class=""
type="button"
data-bs-toggle="collapse"
data-bs-target="#filters-collapse-{{ forloop.index }}"
aria-expanded="true"
aria-controls="filters-collapse-{{ forloop.index }}">
{{ filter.label }}
{% render 'svg-icons', icon: 'chevron-down', size: 18 %}
</button>
<div id="filters-collapse-{{ forloop.index }}" class="collapse show">
<div class="collapse-inner">
{% case filter.type %}
{% when 'boolean' %}
<ul
class="list-unstyled mb-0"
ari-labelledby="filters-collapse-btn-{{ forloop.index }}">
<li class="form-check">
<input
type="checkbox"
id="filter-{{ filter.param_name }}-{{ filter.true_value.value }}"
class="form-check-input"
name="{{ filter.param_name }}"
value="{{ filter.true_value.value }}"
{% if filter.true_value.active %}checked{% endif %}
{% if filter.true_value.count == 0 and filter.true_value.active == false %}disabled{% endif %}>
<label
class="form-check-label"
for="filter-{{ filter.param_name }}-{{ filter.true_value.value }}">
{{ filter.true_value.label }} ({{ filter.true_value.count }})
</label>
</li>
<li class="form-check">
<input
type="checkbox"
id="filter-{{ filter.param_name }}-{{ filter.false_value.value }}"
class="form-check-input"
name="{{ filter.param_name }}"
value="{{ filter.false_value.value }}"
{% if filter.false_value.active %}checked{% endif %}
{% if filter.false_value.count == 0 and filter.false_value.active == false %}disabled{% endif %}>
<label
class="form-check-label"
for="filter-{{ filter.param_name }}-{{ filter.false_value.value }}">
<div class="d-flex">
<span>{{ filter.false_value.label }}</span>
<span class="ms-2">({{ filter.false_value.count }})</span>
</div>
</label>
</li>
</ul>
{% when 'list' %}
<ul
class="list-unstyled mb-0"
ari-labelledby="filters-collapse-btn-{{ forloop.index }}">
{% for filter_value in filter.values %}
<li class="form-check">
<input
type="checkbox"
id="filter-{{ filter.param_name }}-{{ forloop.index }}"
class="form-check-input"
name="{{ filter_value.param_name }}"
value="{{ filter_value.value }}"
{% if filter_value.active -%}checked{%- endif %}
{% if filter_value.count == 0 and filter_value.active == false -%}disabled{%- endif %}>
<label
class="form-check-label"
for="filter-{{ filter.param_name }}-{{ forloop.index }}">
<div class="d-flex">
<span>{{ filter_value.label | escape }}</span>
<span class="ms-2">({{ filter_value.count }})</span>
</div>
</label>
</li>
{% endfor %}
</ul>
{% when 'price_range' %}
{% liquid
if filter.min_value.value
assign filter_min_value = filter.min_value.value | money_without_currency | replace: ',', ''
else
assign filter_min_value = 0
endif
if filter.max_value.value
assign filter_max_value = filter.max_value.value | money_without_currency | replace: ',', ''
else
assign filter_max_value = filter.range_max | money_without_currency | replace: ',', ''
endif
%}
<div class="filter-price-group row mx-n2">
<div class="col-9 px-2">
<div class="input-group">
<span class="input-group-text px-3">
{{ cart.currency.symbol }}
</span>
<input
class="form-control"
name="{{ filter.min_value.param_name }}"
value="{{ filter_min_value }}"
type="number"
min="0"
max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
placeholder="{{ 'collection.filters.from' | t }}"
aria-label=" {{ 'collection.filters.from' | t }}">
</div>
</div>
<div class="col-9 px-2">
<div class="input-group">
<span class="input-group-text px-3">
{{ cart.currency.symbol }}
</span>
<input
class="form-control"
name="{{ filter.max_value.param_name }}"
value="{{ filter_max_value }}"
type="number"
min="0"
max="{{ filter.range_max | money_without_currency | replace: ',', '' }}"
placeholder="{{ 'collection.filters.to' | t }}"
aria-label="{{ 'collection.filters.to' | t }}">
</div>
</div>
</div>
{% endcase %}
</div>
</div>
</div>
{% endfor %}
</div>
</form>
</div>
<div
class="offcanvas-footer border-top px-5 py-4">
<button class="btn btn-primary btn-filters-view-results w-100" type="button" data-bs-dismiss="offcanvas">
{{ 'collection.filters.view_results' | t: count: collection.products_count }}
</button>
<button
class="btn btn-link btn-filters-clear-all btn-sm w-100 mt-2 mb-n2"
type="button"
data-bs-dismiss="offcanvas"
hidden>
{{ 'collection.filters.clear_all' | t }}
</button>
</div>
</collection-filters>
</div>
出典・ライセンス
- Repository:
- https://github.com/kondasoft/ks-bootshop
- License:
- MIT
このコードは kondasoft 著作の MIT ライセンスソースです。 原本の著作権は kondasoft が保有します。日本語訳は ALSEL によるものです。
関連項目
🔍 コレクション/検索初級
ページネーションの表示
ページネーションUI（前へ・次へ、ページ番号）を paginate オブジェクトから描画するスニペット。デフォルトのページネーション形式で複数ページに分割したコンテンツをナビゲートできる。
📁 shopify-code-snippets·MIT·6 行
🔍 コレクション/検索初級
ページネーションの現在位置表示
コレクションや検索結果の一覧ページで、現在のページ番号と全ページ数を表示する。Shopify の多言語対応翻訳キーを使用して、言語ごとに自動で表記を切り替える。
📁 shopify-code-snippets·MIT·6 行
🔍 コレクション/検索中級
検索結果のペジネーション比較
検索結果を paginate タグで複数パターン分割して表示するテンプレート。デフォルトペジネーションと window_size:1 オプション指定の両方の書き方を示しており、ページネーション動作の違いを検証するサンプルコード。
📁 theme-tools·MIT·12 行
🔍 コレクション/検索初級
検索結果のページネーション設定
検索結果を paginate タグでページ分割し、複数の window_size 設定を並べて出力する方法。28件単位のペーグネーションと、ウィンドウサイズを明示的に指定した設定の2パターンを示している。
📁 theme-tools·MIT·12 行
🔍 コレクション/検索初級
コレクションページの商品ギャラリー
コレクション内の商品を3列のテーブルレイアウトで表示するテンプレート。各商品にサムネイル、タイトル、価格（セール時は定価を取消線）を表示し、ページネーションに対応する。
📁 liquid·MIT·20 行
🔍 コレクション/検索初級
コレクションページの商品一覧
コレクション内の商品を一覧表示し、商品画像・タイトル・説明文・価格帯をカード状に並べる。ページネーション機能で20件ごとに分割表示する。
📁 liquid·MIT·23 行