🔍

[無料] shopify 商品タグのOR検索を実現する方法　liquid例も添付

2024/06/30に公開

Shopify

Liquid

shopifyアプリ

tech

結論

Shopify Search & Discoveryアプリを導入する

複数商品タグをurlに指定したらAND検索

shopifyでは、商品タグを設置することができます。

コレクションの中で、商品タグで絞り込みを行うときには、基本的にAND検索になります。

/collections/all/タグ1+タグ2

👆のように、タグを複数個つけた絞り込みでは、AND検索で実行されます。
タグ1とタグ2を両方持つ商品のみを取得します。

タグ１、もしくはタグ２を持つ商品を取得したいときに、上記では実現できません。

shopifyのデフォルトが提供している機能では、OR検索は実現できないようです。

導入手順

Appをインストール

shopifyに、「Shopify Search & Discovery」アプリをインストールします。

こちらのリンクからインストールできます。

Filtersから、フィルターを追加

アプリを追加すると、メニューが左側に表示されます。
写真赤枠の「フィルター」を選択します。

右上に「フィルターを追加」ボタンがあるので、クリックします。

追加するフィルターの設定

今回は、商品タグによる絞り込みを行いたいので、SourceにはTags（商品タグ）を選択します。

以下のような画面が出てくるので、適宜、フィルター名を入力します。

もちろん、OR検索にチェック✅

特定のタググループも作れる

Valuesの部分で、複数項目にチェックを入れると、タググループを作ることができます。

タグをグループに分けて、検索画面に表示したいときに便利です。

タググループの使用例

tablet_ipad-air
tablet_ipad-pro
pc_macbook-air
pc_macstudio
pc_macmini
mobile_iphone-14
mobile_iphone-se
mobile_iphone-promax

👆 このようなタグで商品を管理している場合、
タググループを設定しない場合は、合計8個のタグがストアフロントに表示されます。

これを、ipad, mac iphoneの三つのタグに分類して、かつOR検索を実施したい場合、

ipad
- tablet_ipad-air
- tablet_ipad-pro
mac
- pc_macbook-air
- pc_macstudio
- pc_macmini
iphone
- mobile_iphone-14
- mobile_iphone-se
- mobile_iphone-promax

となるようにタググループを作成すると、ストアフロントに表示されるタグの個数は３つになります。

開発者向け：　タグ絞り込みをliquidで表示させるtips

基本的にshopifyのテーマを使っている場合は、コレクションの絞り込みUIが自動で追加されていると思います。

自作テーマを作っている場合、liquidを調整して、OR検索用のUIを作成する必要があります。

step1 タグ一覧を取得

「shopify 商品タグ一覧　取得　liquid」

などのキーワードで検索してみてください。

全商品のタグを取得するのか、特定のコレクションに属する商品のタグを一覧するのか、要件によって実装が変わってくると思います。

一例として、以下コードです。

{% liquid
  assign tag_list = ""
  paginate collections.all.products by 1000
    for product in collections.all.products
      for tag in product.tags
        assign tag_list = tag_list | append: "," | append: tag
      endfor
    endfor
  endpaginate
  assign tag_list = tag_list | remove_first: ","
  assign tag_array = tag_list | split: "," | uniq
%}

step2 タグを表示する・絞り込みのURL

tag_arrayをforで回して表示させます。

**コレクションのURLに、filter.p.tagクエリパラメータを渡すと、絞り込まれた商品が返ってきます。
**

もちろんfilter.p.tag=tag1&filter.p.tag=tag2のように複数指定するとOR条件で絞り込まれます。

{%- for tag in tag_array -%}
  <li class="custom-footer__main--list-item">
    <a
      href="/collections/xxx?&filter.p.tag={{ tag | handleize  }}"
    >
      {{ tag }}
    </a>
  </li>
{%- endfor -%}

※Dawnを元に、facet.liquidを流用している場合

Dawnをベース、既存のfacet.liquidを流用している場合もあるかと思います。

フォーム実装の参考に、以下に一例を載せておきます。

<facet-filters-form>カスタムHTMLエレメントの中で、以下のように記述します。

// facet.liquid
{%- for filter in results.filters -%}
    {% if filter.param_name == 'filter.p.tag' %}
        {% liquid
            assign input_id = 'Filter-' | append: filter.param_name | escape | append: '-' | append: forloop.index
            assign is_disabled = false
            if value.count == 0 and value.active == false
            assign is_disabled = true
            endif
        %}
        <label for="{{ input_id }}">
            <input
                type="checkbox"
                name="{{ value.param_name }}"
                value="{{ value.value }}"
                id="{{ input_id }}"
                {% if value.active %}
                  checked
                {% endif %}
                {% if is_disabled %}
                  disabled
                {% endif %}
            >
        </label>
    {% endif %}
{% endfor %}

<facet-filters-form>カスタムHTMLエレメントの中で記述することで、FacetFiltersFormクラスが持っている非同期処理を流用することができます。

facet-filters-formの外で実装する場合は、

URLにfilter.p.tagクエリパラメータをつけて遷移
URLをfilter.p.tagクエリパラメータをつけて上書き（遷移しない）＆Section Rendering APIで商品一覧を上書き

の２パターンの実装を、独自で実装することになると思います。

感想

Section Rendering APIの存在を知れてよかった。FacetFiltersFormのようなdawnが用意してくれているカスタムエレメントの恩恵を受けられないときに使えそう。