アプリ不要！機能的な「ブランドで探す」ページを実装する方法

はじめに このカスタマイズ方法は、ベンダーリンク（/collections/vendors?q=ブランド名）で出力します。 各ブランドのコレクションを設けている場合はコレクションリンクとしても出力したり、ブランドロゴの出力も可能ですが、本件は「メンテ不要」がコンセプトとなりますので割愛させていただきます。 ZOZOTOWNの「ブランドで探す」ページを目標に開発しておりますので、基本的な並び順は「AZ順＋その他（0〜1、日本語あいうえお順）」となります。 ZOZOTOWN - ブランドで探す また、Rise（v15.0.0）にて検証しておりますが、Dawnにも同様に実装可能です。その他のテーマで実装する場合はCSSやSVGコード、クラス名など編集が必要になります。 言語ファイルを編集 「locales/en.default.json」を開き、「sections」下に以下のJSONコードを追加します。 "sections": { "vendor_list": { "placeholder": "Enter your brand name", "item_count": "({{ count }})", "others": "Others" } } 上から検索ボックスの透かし、商品カウント、その他のラベルになります。 続いて「locales/ja.json」を開き、同様に追加します。 "sections": { "vendor_list": { "placeholder": "ブランド名を入力してください", "item_count": "({{ count }})", "others": "その他" } } テキストはショップに合わせて自由に編集してください。 また、ショップの利用言語に併せて他の言語ファイルも編集してください。 セクションファイルを作成 「新しいセクションを追加する」より「vendor-list.liquid」を作成し、以下のコードを順番に挿入してください。 CSS {{ 'vendor-list.css' | asset_url | stylesheet_tag }} {%- style -%} .section-{{ section.id }}-padding { padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px; padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px; } @media screen and (min-width: 750px) { .section-{{ section.id }}-padding { padding-top: {{ section.settings.padding_top }}px; padding-bottom: {{ section.settings.padding_bottom }}px; } } {%- endstyle -%} 最初に後ほど作成するCSSファイルを読み込むLiquidコードを挿入し、DawnやRiseでお馴染みのセクションの余白を設定するコードを挿入します。 Liquid {% liquid assign show_search = section.settings.show_search capture initials for product_vendor in shop.vendors echo product_vendor | first | upcase echo ',' endfor endcapture assign initials = initials | split: ',' | uniq assign alphabet_keys = 'A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z' | split: ',' assign others = false for initial in initials unless alphabet_keys contains initial assign others = true endunless endfor %} 最初に「show_search」としてセクション設定の「ページ内検索を表示」を定義します。 次に「initials」としてベンダーの頭文字を大文字にして配列化します。 続いて「alphabet_keys」としてA〜Zを配列化します。 「others」はA〜Z以外の頭文字がある場合に「true」を返します。 HTML {% if show_search %} {% for key in alphabet_keys %} {{ key }} {% endfor %} {% if others %} {% endif %} {% endif %} {% for initial in initials %} {% if alphabet_keys contains initial %} {{ initial }} {% liquid for product_vendor in shop.vendors assign vendor_initial = product_vendor | first | upcase if initial == vendor_initial echo ' ' echo product_vendor | link_to_vendor: class: 'link' if section.settings.show_length assign length = 0 paginate collections.all.products by shop.products_count for product in collections.all.products if product.vendor == product_vendor assign length = length | plus: 1 endif endfor endpaginate echo 'sections.vendor_list.item_count' | t: count: length | prepend: ' ' | append: ' ' endif echo ' ' endif endfor %} {% endif %} {% endfor %} {% if others %} {{ 'sections.vendor_list.others' | t }} {% liquid for initial in initials unless alphabet_keys contains initial for product_vendor in shop.vendors assign vendor_initial = product_vendor | first if initial == vendor_initial echo ' ' echo product_vendor | link_to_vendor: class: 'link' if section.settings.show_length assign length = 0 paginate collections.all.products by shop.products_count for product in collections.all.products if product.vendor == product_vendor assign length = length | plus: 1 endif endfor endpaginate echo 'sections.vendor_list.item_count' | t: count: length | prepend: ' ' | append: ' ' endif echo ' ' endif endfor endunless endfor %} {% endif %} 長いので要所だけご説明します。 37行目は全体を囲む タグで、セクションの余白を調整します。 38〜97行目はページ内検索を出力します。取り扱いブランドが少ない場合は不要かと思いますので、セクション設定で「表示/非表示」が切り替えられます。50、54行目のSVGコードは、ご利用テーマに併せて編集する必要があります。82〜90行目のSVGコードは、「その他」用の「…（三点リーダー）」が出力されます。出力フォントによって下付けになったりするので、SVGで実装しております。 99〜167行目はベンダーリンクリストの出力部分になります。検索部分とは異なり、「initials」で定義された頭文字のみ出力されます。100〜131行目にて「A〜Z」でカテゴライズされたのベンダーリンクリスト、133〜166行目で「その他」でカテゴライズされたベンダーリンクリストを出力します。 各ベンダーの商品点数は簡単に出力できるLiquidコードがない為、全商品コレクション（collections/all）から強引に取得する方法を採用しています。ただし負荷がかかりそうなので、セクション設定で「表示/非表示」を切り替えられるようにしてあります。コレクションリンクの場合は簡単に出力できるので、もうちょっとスマートになります。 Javascript {%- if show_search -%} document.addEventListener('DOMContentLoaded', function () { const container = document.querySelector('.vendor-list'); const input = container.querySelector('.vendor-search--input'); const reset = container.querySelector('.vendor-search--reset'); const items = container.querySelectorAll('.vendor-list--item, .vendor-list--box'); const links = container.querySelectorAll('.vendor-initial--link'); const typeInterval = 500; let typingTimer; function liveSearch() { const search_query = input.value.toLowerCase(); items.forEach((item) => { const isMatch = item.textContent.toLowerCase().includes(search_query); item.classList.toggle('hidden', !isMatch); }); } input.addEventListener('keyup', () => { clearTimeout(typingTimer); typingTimer = setTimeout(liveSearch, typeInterval); }); input.addEventListener('search', () => { if (!input.value) { items.forEach((item) => item.classList.remove('hidden')); } }); links.forEach((link) => { link.addEventListener('click', function (e) { e.preventDefault(); const targetElement = document.getElementById(this.dataset.id); targetElement?.scrollIntoView({ behavior: 'smooth' }); }); }); reset.addEventListener('click', () => { input.value = ''; clearTimeout(typingTimer); typingTimer = setTimeout(liveSearch, typeInterval); }); }); {%- endif -%} ページ内検索用の機能なのでセクション設定で有効化した場合のみに出力され、以下の機能が実装されます。 キーワード入力によるライブサーチ キーワードリセット ページ内スムーズスクロール ライブサーチ機能は、リアルタイムで入力したキーワードが含まれていない頭文字ブロック及びリンクに「display: none;」が適用され、それ以外が表示されます。付与される「hidden」クラスはRiseやDawnで「base.css」に実装されていますが、他テーマの場合は別のクラスに置き換えるか、以下のCSSを「vendor-list.css」に追記してください。 .hidden { display: none !important; } Schema {% schema %} { "name": "Vendor list", "tag": "section", "class": "vendor-list--section", "limit": 1, "settings": [ { "type": "checkbox", "id": "show_search", "label": "ページ内検索を表示", "default": true }, { "type": "checkbox", "id": "show_length", "label": "商品数を表示", "default": true }, { "type": "header", "content": "t:sections.all.padding.section_padding_heading" }, { "type": "range", "id": "padding_top", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_top", "default": 36 }, { "type": "range", "id": "padding_bottom", "min": 0, "max": 100, "step": 4, "unit": "px", "label": "t:sections.all.padding.padding_bottom", "default": 36 } ], "presets": [ { "name": "Vendor list" } ] } {% endschema %} 最後にスキーマです。 「ページ内検索を表示」と「商品数を表示」のチェックボックス加え、「セクションの余白」の設定のみです。 カスタマイザーで追加できるように、プリセット化してあります。 CSSファイルを作成 「新しいアセットを追加する」より「vendor-list.css」を作成し、以下のコードをコピペします。 .vendor-list { display: grid; gap: 3em; } .vendor-list a, .vendor-list button, .vendor-list input { transition: .2s linear; } .vendor-list ul { list-style: none; padding: 0; margin: 0; } .vendor-search--box { position: relative; margin-bottom: 1.5rem; } .vendor-search--box .icon-search { position: absolute; top: calc(50% - .5em); left: 1.5rem; display: block; width: 1em; height: 1em; } .vendor-search--input { width: 100%; height: 4rem; background: none; padding: 1rem 4rem; margin: 0; border: 1px solid #ccc; border-radius: 0; outline: none; appearance: none; } .vendor-search--input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .vendor-search--reset { position: absolute; top: 0; right: 0; display: grid; place-content: center; width: 4rem; height: 4rem; background: none; border: none; cursor: pointer; outline: none; padding: 0; appearance: none; } .vendor-search--reset .icon-reset { width: 2rem; height: 2rem; } .vendor-initials { display: flex; flex-wrap: wrap; gap: 5px; } .vendor-initial--link { display: grid; place-content: center; width: 2em; height: 2em; color: #fff; line-height: 1; text-decoration: none; border: none; border-radius: 50%; background: steelblue; cursor: pointer; } .vendor-initial--link[disabled] { pointer-events: none; opacity: .25; } .vendor-initial--link:hover { transform: scale(1.1); } .vendor-initial--link .icon-more { width: 100%; height: auto; fill: currentColor; } .vendor-list--container { display: grid; gap: 3em; width: 100%; } .vendor-list--initial { margin: 0 0 1em; } .vendor-list--links { display: grid; gap: 1em; } .vendor-list--item .link { line-height: 1.5; color: steelblue; text-decoration: none; background: linear-gradient(steelblue, steelblue) left bottom / 0 1px no-repeat; } .vendor-list--item .link:hover { background-size: 100% 1px; } .vendor-list--item .length { margin-left: .5em; } @media (min-width: 560px) { .vendor-list--links { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .vendor-list--links { grid-template-columns: repeat(3, 1fr); } } シンプルなスタイルなので、ショップデザインに合わせて編集してください。 テーマ編集は以上です。 ページテンプレートを作成 テーマ編集で作成しても良いですが、カスタマイザーからでも簡単に作成できます。 カスタマイザーを開き、「ページ→テンプレートを作成する」より以下の設定でテンプレートを作成してください。 名前：vendor-list 「デフォルトのページ」に基づく 続いて「テンプレート→セクションを追加」にて「Vendor list」を選択し追加。セクション設定にてお好みの設定にしてください。 ページを作成 管理画面「オンラインストア→ページ」より「ページを追加」でページを作成し、タイトルを入力後、ページテンプレートを「vendor-list」にして保存します。 必要に応じてコンテンツやハンドルを設定してください。 以上で「ブランドを探す」ページの実装は完了です。

カートにアイテムが追加されました

アプリ不要！機能的な「ブランドで探す」ページを実装する方法

取り扱いブランドの多いショップ必見！ZOZOTOWNみたいな「ブランドで探す」ページを実装

2024年12月

2025年1月