アプリを使わずにお気に入り機能を実装するチュートリアル

はじめに この「お気に入り」機能を実装するカスタマイズ方法は、ローカルストレージを使ってブラウザに商品情報を登録していくもので、あくまでも回遊性の向上を目的としております。 異なるブラウザやデバイス間で、お気に入り登録した商品情報を共有できるわけではありませんのでご注意下さい。 また、GA4と連動させてイベントを計測することは可能ですが、お気に入り機能を使ったメールマーケティングなどをご希望の場合は、アプリのご利用を推奨します。 本カスタマイズ方法はGithubに公開されているコードをベースにしております。 Shopify Wishlist 公開されている実装方法はDawnテーマベースですが、最新バージョンに対応していないため、現時点での最新バージョン（v13.0.1）に合わせてご紹介します。 仕組みさえ理解できれば、他テーマへの設置も可能です。 インストール Shopify Wishlistを利用するには、リポジトリ内の以下ファイルをテーマに設置します。

リポジトリファイル 設置場所

button-wishlist.liquid snippets/

icon-heart.liquid snippets/

wishlist-template.liquid sections/

product-card-template.liquid sections/

page.wishlist.json templates/

product.card.json templates/

Wishlist.js assets/

設置が終わったら、各ファイルをテーマに併せて編集していきます。 テンプレート用のJSONファイルを編集する必要はありません。 button-wishlist.liquid 編集後 {%- if product.handle != blank -%} {%- render 'icon-heart' -%} {%- endif -%} 見比べるとわかりますが、コメントやスタイルタグを削除し、スタイリング用のクラスやdata-label属性を追加してあります。 data-label属性は「true」でボタンラベル（お気に入りに追加）のテキストが疑似属性として出力される仕組みにしてあります。 また、aria-label属性も削除していますが、Wishlist.jsをカスタマイズしてJSで出力する仕様にするので、予め省いております。 icon-heart.liquid 編集後 元のファイルはアイコンサイズが大きくパス情報も多いので、シンプルなものに差し替えています。 アイコンはサイトデザインに合わせて、お好みで採用してください。 wishlist-template.liquid 編集後 {{ 'template-collection.css' | asset_url | stylesheet_tag }} {{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }} {{ 'component-card.css' | asset_url | stylesheet_tag }} {{ 'component-price.css' | asset_url | stylesheet_tag }}

{% comment %} {{ 'quick-add.css' | asset_url | stylesheet_tag }} {% endcomment %}

{%- 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 -%}

{{ page.title | escape }} {% if page.content != blank %} {{ page.content }} {% endif %}

Loading...

{% schema %} { "name": "Wishlist", "class": "section", "settings": [ { "type": "range", "id": "products_per_page", "min": 8, "max": 24, "step": 4, "default": 16, "label": "t:sections.main-collection-product-grid.settings.products_per_page.label" }, { "type": "range", "id": "columns_desktop", "min": 1, "max": 5, "step": 1, "default": 4, "label": "t:sections.main-collection-product-grid.settings.columns_desktop.label" }, { "type": "header", "content": "t:sections.main-collection-product-grid.settings.header_mobile.content" }, { "type": "select", "id": "columns_mobile", "default": "2", "label": "t:sections.main-collection-product-grid.settings.columns_mobile.label", "options": [ { "value": "1", "label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__1.label" }, { "value": "2", "label": "t:sections.main-collection-product-grid.settings.columns_mobile.options__2.label" } ] }, { "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 } ], "enabled_on": { "templates": ["page"] } } {% endschema %}

お気に入りリストを出力するファイルなので、商品一覧を出力するファイル「main-collection-product-grid.liquid」とページ出力用のファイル「main-page.liquid」をベースに編集しました。 Shopify Wishlistの仕様では商品カードが独立しているため、セクション設定から省き、カラム数や余白制御の設定のみ残してあります。 また、「クイック追加ボタン」を有効にする場合は、上部のコメントアウトを外して下さい。 product-card-template.liquid 編集後 {%- render 'card-product', card_product: product, media_aspect_ratio: 'adapt', image_shape: 'default', show_secondary_image: false, show_vendor: false, show_rating: false, lazy_load: true, show_quick_add: false, section_id: section.id -%}

{% schema %} { "enabled_on": { "templates": ["product"] } } {% endschema %} ご利用のテーマの商品カードに合わせて、パラメータを編集します。 上記コードは基本的にDawnのデフォルト値にしてありますので、サイトに合わせて変数値を編集してください。 他テーマの場合は、商品一覧を出力するファイルから商品カードの出力部分を参照してください。 ここに直接Liquidコードを記述しても構いませんし、セクションファイルになるので、変数部分をセクション設定と連動させることも可能です。 Wishlist.js 編集後 const LOCAL_STORAGE_WISHLIST_KEY = "shopify-wishlist"; const LOCAL_STORAGE_DELIMITER = ","; const BUTTON_ACTIVE_CLASS = "active"; const BUTTON_ACTIVE_LABEL = "お気に入り追加済"; const BUTTON_DEFAULT_LABEL = "お気に入りに追加"; const GRID_LOADED_CLASS = "loaded";

const selectors = { button: "[button-wishlist]", grid: "[grid-wishlist]", productCard: ".card-wrapper", count: "[data-wishlist-count]", };

document.addEventListener("DOMContentLoaded", () => { initButtons(); initGrid(); updateWishlistCount(); });

document.addEventListener("shopify-wishlist:updated", (event) => { initGrid(); });

const setupGrid = async (grid) => { const wishlist = getWishlist(); const requests = wishlist.map(fetchProductCardHTML); const responses = await Promise.all(requests); const wishlistProductCards = responses.join(""); grid.innerHTML = wishlistProductCards; grid.classList.add(GRID_LOADED_CLASS); initButtons();

const event = new CustomEvent("shopify-wishlist:init-product-grid", { detail: { wishlist: wishlist }, }); document.dispatchEvent(event); };

const changeButtonLabel = (button) => { button.setAttribute("aria-label", BUTTON_DEFAULT_LABEL); if (button.classList.contains(BUTTON_ACTIVE_CLASS)) { button.setAttribute("aria-label", BUTTON_ACTIVE_LABEL); } };

const initGrid = () => { const grid = document.querySelector(selectors.grid) || false; if (grid) setupGrid(grid); };

const getWishlist = () => { const wishlist = localStorage.getItem(LOCAL_STORAGE_WISHLIST_KEY) || false; if (wishlist) return wishlist.split(LOCAL_STORAGE_DELIMITER); return []; };

const setWishlist = (array) => { const wishlist = array.join(LOCAL_STORAGE_DELIMITER); if (array.length) localStorage.setItem(LOCAL_STORAGE_WISHLIST_KEY, wishlist); else localStorage.removeItem(LOCAL_STORAGE_WISHLIST_KEY);

const event = new CustomEvent("shopify-wishlist:updated", { detail: { wishlist: array }, }); document.dispatchEvent(event);

return wishlist; };

const updateWishlist = (handle) => { const wishlist = getWishlist(); const indexInWishlist = wishlist.indexOf(handle); if (indexInWishlist === -1) wishlist.push(handle); else wishlist.splice(indexInWishlist, 1); return setWishlist(wishlist); };

const wishlistContains = (handle) => { const wishlist = getWishlist(); return wishlist.includes(handle); };

const resetWishlist = () => { return setWishlist([]); };

{% render 'card-product' %} {% render 'card-product' %} {% render 'card-product' %} このJSファイルを「theme.liquid」内の 直前に貼り付けます。 CSSファイル 以下CSSを設置します。Dawnの場合は「base.css」の最下部に貼り付けてください。 /* Wishlist */ .button-wishlist { background: none; padding: 0; border: none; border-radius: 0; cursor: pointer; transition: 0.2s linear; } .button-wishlist[data-label="true"] { display: inline-flex; align-items: center; gap: 1rem; height: 5rem; background: rgba(var(--color-button), var(--alpha-button-background)); color: rgb(var(--color-button-text)); padding: 0 3rem; border: none; border-radius: 2.5rem; } .button-wishlist[data-label="true"]::after { content: attr(aria-label); } .button-wishlist[data-label="true"]:hover { box-shadow: 0 0 0 2px rgba(var(--color-button), var(--alpha-button-background)); } .button-wishlist[data-label="true"].active { opacity: 0.5; } .button-wishlist .icon-wishlist { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: 0.2s linear; } .button-wishlist.active .icon-wishlist { fill: currentColor; } .product-grid .grid__item { position: relative; } .product-grid .button-wishlist { position: absolute; top: 1rem; right: 1rem; color: red; z-index: 1; } .product-grid .button-wishlist:hover { transform: scale(1.1); } .header__icon--wishlist { position: relative; } .wishlist-count-bubble { position: absolute; top: -0.5rem; right: -0.5rem; color: #fff; background: red; height: 1.4rem; min-width: 1.4rem; display: flex; justify-content: center; align-items: center; font-size: 0.9rem; font-weight: 700; line-height: 1; letter-spacing: 0; border-radius: 0.7rem; transform: scale(1); transition: 0.2s linear; opacity: 1; } .wishlist-count-bubble[data-wishlist-count="0"] { transform: scale(0); opacity: 0; }

テキスト付きボタンとアイコンボタンを、それぞれ1ファイルで出力できるようになっています。「data-label="true"」と出力されていれば「テキスト付きボタン」として出力されます。 Dawnに合わせてシンプルにスタイリングしたものなので、ご利用テーマに合わせて編集してください。 ボタンの設置 テキスト付きボタンを設置 {% render 'button-wishlist', product: product, label: true %} 上記コードを商品ページの出力用ファイルに貼り付けます。Dawnの場合は「main-product.liquid」が該当します。 購入ボタンの下部が一般的ですが、ブロックとして設置するのがスマートですね。 「label: true」とするだけで、テキスト付きボタンとして出力されます。 アイコンボタンを商品カードに設置 {% render 'button-wishlist', product: card_product %} 上記コードを商品ページの出力用ファイルに貼り付けます。Dawnの場合は「card-product.liquid」が該当します。 ここで気を付けなければいけないのは、商品カードの構造です。 基本的には最下部に貼り付けて、「position: absolute」で配置するのですが、Dawn（v13.0.1）の場合は編集しないと、お気に入り一覧ページではアイコンボタンが出力されませんのでご注意下さい。 {{ 'component-rating.css' | asset_url | stylesheet_tag }} {{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }} {%- if card_product and card_product != empty -%} {% comment %}商品カードのコード{% endcomment %} {%- else -%} {% comment %}ダミー用のコード{% endcomment %} {%- endif -%}

{{ 'component-rating.css' | asset_url | stylesheet_tag }} {{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }} {%- if card_product and card_product != empty -%} {% comment %}商品カードのコード{% endcomment %} {%- else -%} {% comment %}ダミー用のコード{% endcomment %} {%- endif -%} {%- render 'button-wishlist', product: card_product -%} リンクを設置 メニューとして設置する場合は不要ですが、10caのヘッダーにもあるようにアイコンリンクとして設置する場合は、「header.liquid」内にあるカートリンク直前に以下のコードを設置します。 {% render 'icon-heart' %} お気に入りリスト 0 他のアイコンとのバランスも考慮し、ご利用テーマに合わせて調整してください。 また、ページリンクは次に作成するお気に入り一覧ページのハンドルに合わせて編集してください。 テーマの編集は以上です。 お気に入り一覧ページを作成 Shopifyの管理画面で新しいページを作成します。

オンラインストア→ページ→ページを追加

テーマテンプレートは「wishlist」を選択 ハンドルを 「 wishlist」で設定 「保存」

以上で、主なセットアップは完了です。 動作検証やデザイン検証をお忘れなく！

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

アプリを使わずにお気に入り機能を実装するチュートリアル

アプリを使わずに「お気に入り機能」を実装できます

2024年5月

2024年6月