タブで切り替えられるランキングセクションを実装するチュートリアル

はじめに このカスタマイズ方法は、回遊性の向上、省スペース可、表示速度の上昇を目的としております。 このセクションを1ページに複数実装することも可能ですが、CSSやJSを重複して読み込んでしまうので、1ページあたり1セクションを推奨しております。 また、このカスタマイズ方法はShopifyテーマ「Dawn（10.0.0）」をベースにご紹介しておりますので、他テーマへ実装される場合はご注意下さい。 セクションファイルを作成 「新しいセクションを追加する」より「tab-ranking.liquid」を作成し、以下のコードを順番に追記します。 CSSファイル {{ 'tab-ranking.css' | asset_url | stylesheet_tag }} {{ 'component-card.css' | asset_url | stylesheet_tag }} {{ 'component-price.css' | asset_url | stylesheet_tag }} 「tab-ranking.css」は後ほど作成しますが、このセクションをスタイリングするために設置します。 「component-card.css」及び「component-price.css」は、Dawnの商品カードをスタイリングするCSSファイルです。当カスタマイズでは、コレクションの表示にDawnの商品カードを使用しますので、他テーマの場合は不要です。 HTMLとLiquidコード {{ section.settings.title | escape }} {%- if section.blocks.size > 1 -%} {%- for block in section.blocks -%} {%- liquid assign tab_collections = block.settings.collection assign tab_label = block.settings.tab_label if forloop.first assign aria_selected = true assign tabindex = 0 else assign aria_selected = false assign tabindex = -1 endif -%} {%- liquid if tab_label != blank echo tab_label else echo tab_collections.title endif -%} {%- endfor -%} {%- endif -%} {%- for block in section.blocks -%} {%- liquid assign panel_collections = block.settings.collection if forloop.first assign aria_hidden = false else assign aria_hidden = true endif -%} {%- if panel_collections != blank -%} {%- assign products = collections[panel_collections].products | sort: 'best-selling' -%} {%- for product in products limit: 5 -%} {{ forloop.index }} {%- render 'card-product', card_product: product, media_aspect_ratio: section.settings.image_ratio, show_secondary_image: section.settings.show_secondary_image, show_vendor: section.settings.show_vendor, show_rating: section.settings.show_rating, show_quick_add: section.settings.enable_quick_add, section_id: section.id -%} {%- endfor -%} {%- else -%} {%- for i in (1..5) -%} {{ forloop.index }} {%- assign placeholder_image = 'product-apparel-2' -%} {% render 'card-product', show_vendor: section.settings.show_vendor, placeholder_image: placeholder_image %} {%- endfor -%} {%- endif -%} {%- if section.settings.show_viewall and panel_collections != blank -%} {{ section.settings.button_text }} {%- endif -%} {%- endfor -%} 順に説明します。 はコンテンツの横幅を制御するDawn用のコンテナです。他テーマの場合はクラス名を置き換えるか、新たにCSSに追記して下さい。 タグはセクションタイトルを出力します。 後はタブ用のHTMLで、以下の構造で出力されます。 Tab 1 Tab 2 Tab 3 Ranking 1 Ranking 2 Ranking 3 section.idやblock.idは複数設置した場合や、IDやクラスが重複しないよう付与しております。 また「aria-○○」属性や「role」属性を正しく設置することでWAI-ARIAに対応させ、アクセシビリティを向上させます。 タブとパネル、各パーツはブロック追加で出力され、コレクションが2つ以上でタブが出力されます。ブロックが1つの場合タブは出力されず、通常の特集コレクションと同等の機能になります。 コレクションの出力に関しては、どのコレクションを選択してもランキングに対応するよう「sort: 'best-selling'」で売上順で並べ替えています。 ランキングバッジ（順位）は「forloop.index」で出力しており、data-rank属性と併せて出力しています。 Forループを「limit: 5」としているので5位までしか表示されませんが、それ以上を出力したい場合は数値を編集してください。 商品カード部分はDawnの「特集コレクション」からコピーしましたので、他テーマで実装する場合は、別のコードに置き換えてください。 「全てを見る」ボタンは、セクション設定で「コレクションリンクを表示」にチェックがある場合に表示されます。 Javascriptコード function showTab(container, clickedTab) { const tabs = container.querySelectorAll('.tab'); const panels = container.querySelectorAll('.panel'); tabs.forEach((tab) => { const isActiveTab = tab === clickedTab; tab.setAttribute('aria-selected', isActiveTab); tab.setAttribute('tabindex', isActiveTab ? 0 : -1); const panelId = tab.getAttribute('aria-controls'); const panel = container.querySelector(`#${panelId}`); panel.setAttribute('aria-hidden', !isActiveTab); }); } document.addEventListener('DOMContentLoaded', function () { document.querySelectorAll('.tab-{{ section.id }}').forEach((container) => { container.addEventListener('click', (event) => { if (event.target.classList.contains('tab')) { showTab(container, event.target); } }); }); }); 構造はシンプルです。 タブをクリックすると「aria-selected」属性が「true」に、「tabindex」属性が「0」になり、それ以外を「-1」にします。そのタブの「aria-controls」属性と同じIDを持つのパネルの「aria-hidden」属性を「false」にし、それ以外を「true」にしています。 Schema {% schema %} { "name": "ランキング", "tag": "section", "class": "ranking-section", "limit": 1, "settings": [ { "type": "text", "id": "title", "label": "タイトル", "default": "Ranking" }, { "type": "header", "content": "Button" }, { "type": "checkbox", "id": "show_viewall", "label": "コレクションリンクを表示", "default": true }, { "type": "text", "id": "button_text", "label": "コレクションリンクのテキスト", "default": "More" }, { "type": "header", "content": "t:sections.featured-collection.settings.header.content" }, { "type": "select", "id": "image_ratio", "options": [ { "value": "adapt", "label": "t:sections.featured-collection.settings.image_ratio.options__1.label" }, { "value": "portrait", "label": "t:sections.featured-collection.settings.image_ratio.options__2.label" }, { "value": "square", "label": "t:sections.featured-collection.settings.image_ratio.options__3.label" } ], "default": "adapt", "label": "t:sections.featured-collection.settings.image_ratio.label" }, { "type": "select", "id": "image_shape", "options": [ { "value": "default", "label": "t:sections.all.image_shape.options__1.label" }, { "value": "arch", "label": "t:sections.all.image_shape.options__2.label" }, { "value": "blob", "label": "t:sections.all.image_shape.options__3.label" }, { "value": "chevronleft", "label": "t:sections.all.image_shape.options__4.label" }, { "value": "chevronright", "label": "t:sections.all.image_shape.options__5.label" }, { "value": "diamond", "label": "t:sections.all.image_shape.options__6.label" }, { "value": "parallelogram", "label": "t:sections.all.image_shape.options__7.label" }, { "value": "round", "label": "t:sections.all.image_shape.options__8.label" } ], "default": "default", "label": "t:sections.all.image_shape.label", "info": "t:sections.all.image_shape.info" }, { "type": "checkbox", "id": "show_secondary_image", "default": false, "label": "t:sections.featured-collection.settings.show_secondary_image.label" }, { "type": "checkbox", "id": "show_vendor", "default": false, "label": "t:sections.featured-collection.settings.show_vendor.label" }, { "type": "checkbox", "id": "show_rating", "default": false, "label": "t:sections.featured-collection.settings.show_rating.label", "info": "t:sections.featured-collection.settings.show_rating.info" }, { "type": "checkbox", "id": "enable_quick_add", "default": false, "label": "t:sections.featured-collection.settings.enable_quick_buy.label" } ], "blocks": [ { "type": "collection", "name": "コレクション", "settings": [ { "type": "collection", "id": "collection", "label": "コレクション" }, { "type": "text", "id": "tab_label", "label": "タブのラベル", "info": "空欄の場合はコレクションタイトルが表示されます。" } ] } ], "presets": [ { "name": "ランキング" } ], "disabled_on": { "templates": ["password"], "groups": ["header", "footer"] } } {% endschema %} セクション設定にて編集できるのは以下の通りです。 セクションタイトル コレクションリンクの表示/非表示 コレクションリンクのテキスト 商品カード（Dawn仕様） 商品カード部分のスキーマは「特集コレクション」セクションよりコピペしましたので、機能説明は省きます。他テーマをご利用の場合は、デザインに合わせて編集してください。 ブロック設定で編集できるのは以下の通りです。 コレクション タブのラベル タブのラベルが空欄の場合は、選択したコレクションタイトルが出力されます。 このセクションは「ヘッダー」「フッター」「パスワード」を除くテンプレートに設置できます。 アセットにCSSファイルを作成 「新しいアセットを追加する」より「tab-ranking.css」を新規に作成し以下をコピペしてください。 .ranking-section .title { text-align: center; } .ranking-section .tab-group { display: flex; justify-content: center; align-items: flex-end; flex-wrap: wrap; gap: .5rem; margin-bottom: 2em; } .ranking-section .tab { position: relative; line-height: 1; white-space: nowrap; background: none; padding: 1em 2em; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: .2s linear; cursor: pointer; } .ranking-section .tab[aria-selected="true"] { background: #000; color: #fff; pointer-events: none; } .ranking-section .panel[aria-hidden="true"] { display: none; } .ranking-section .ranking-list { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; transition: .5s linear; } .ranking-section .ranking-item { position: relative; } .ranking-section .ranking-badge { position: absolute; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 2em; height: 2em; background: #eee; line-height: 1; z-index: 1; } .ranking-section .ranking-item:nth-child(-n+3) .ranking-badge { color: #fff; } .ranking-section .ranking-badge[data-rank="1"] { background: #c90; } .ranking-section .ranking-badge[data-rank="2"] { background: #999; } .ranking-section .ranking-badge[data-rank="3"] { background: #633; } .ranking-section .collection-link { text-align: center; } @media (max-width: 749px) { .ranking-section .ranking-item { width: calc(50% - .5rem); } .ranking-section .ranking-item:first-child { width: 100%; } } @media (min-width: 750px) { .ranking-section .tab-group { margin: 0 0 4rem; } .ranking-section .tab:hover { background: #eee; } .ranking-section .ranking-list { display: grid; grid-template-columns: repeat(5, 1fr); margin-bottom: 20px; } .ranking-section .ranking-item { width: 100%; } } 必要最低限のスタイルですので、サイトのデザインに合わせて編集してください。 アクティブタブは「.tab[aria-selected="true"]」でスタイリングしており、非アクティブパネルは「.tab[aria-hidden="true"]」を「display: none;」で非表示にしています。 また、「.ranking-badge[data-rank="○"]」でランキングバッジを順位ごとにスタイリングできます。 当カスタマイズは5位までの出力なので、モバイルは1位のみ1カラム、それ以外は2カラムで表示されます。CSSを編集すれば横スクロールにも対応できます。 デスクトップでは5つ並びますが、ランキング数を編集した場合は「.ranking-section .ranking-list」の「grid-template-columns: repeat(5, 1fr);」を編集してください。 設定 カスタマイザーよりランキングを設置したいテンプレートを開き、「セクションを追加」で「ランキング」セクションを追加してください。 セクションを追加したら、ランキングのセクション設定を開き、各種設定してください。 続いて「コレクションを追加」でコレクションブロックを追加し、ブロック設定にてコレクションを選択、タブのラベルを入力してください。 表示させたいコレクションを全て登録し終えたら、右上の「保存する」で設定完了です。

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

タブで切り替えられるランキングセクションを実装するチュートリアル

タブで切り替えられるランキングセクションを実装

2024年4月

2024年5月