よく一緒に購入されている商品を実装するチュートリアル

はじめに この機能を開発にあたり、メタフィールドで実装するかSearch & Discoveryで実装するかの2択で悩みました。 当初はSearch & Discoveryのおすすめ機能を使って関連商品や付属商品と紐づければ、管理も楽になるのではと考えておりましたが、出力方法が特殊なためJSを使って動的に合計価格を変えるのが難しかったので、メタフィールドを採用しました。 基本的には商品ページのメタフィールドに、一緒に購入させたい商品を登録して出力させる仕様で、Amazonのようにチェックを外したり、バリエーションを変更すると総額が再計算され、チェックしたものがカートに入ります。 このカスタマイズ方法はデフォルトテーマのDawnベースで紹介しておりますので、ご利用のテーマに合わせてコードを編集してください。 メタフィールドを登録 管理画面の「設定→カスタムデータ→バリエーション」の「定義を追加する」ボタンより「一緒に購入」のメタフィールドを定義します。

ネームスペースとキーは何でも構いませんが、本件では「custom.buy_together」としております。それ以外で登録する場合は、以降のコードを編集する必要があります。 タイプは「商品→商品のリスト」を選択して下さい。 セクションファイルを作成 「新しいセクションを追加する」より「buy-together.liquid」を作成し、以下のコードを順番にコピペしてください。 CSS {{ 'buy-together.css' | asset_url | stylesheet_tag }} 後ほど作成する「buy-together.css」を読み込むためのコードを追加します。 LIQUID {%- liquid assign meta_products = product.metafields.custom.buy_together.value capture product_handles echo product.handle for product in meta_products limit: section.settings.limit echo product.handle | prepend: ',' endfor endcapture assign buy_together_handles = product_handles | split: ',' -%} 続いてメタフィールド登録した商品に、親商品（対象商品）を加え配列化するためのLiquidコードを追加します。メタフィールドのネームスペースとキーが異なる場合は、編集してください。 例えば「商品A」が親商品の場合、一緒に購入させたい子商品「商品B」と「商品C」がメタフィールドに登録されているので、親子合わせて出力させられるよう各商品のハンドルで配列化しています。 また、メタフィールドの商品リストには最大128商品登録できてしまうため、セクション設定で出力上限を制御できるよう「limit: section.settings.limit」としております。 HTML {%- if meta_products != blank -%} {%- if section.settings.title != blank -%} {{ section.settings.title }} {%- endif -%} {% form 'product', product, class: 'buy-together-form' %} {%- for handle in buy_together_handles -%} {%- liquid assign product = all_products[handle] assign product_image = product.featured_image | image_url: width: 300 | image_tag: width: 300, height: 300, class: 'image', loading: 'lazy' -%} {%- liquid if forloop.first echo product_image | prepend: ' 対象商品 ' | append: ' ' else echo product_image | link_to: product.url, class: 'product-link' endif unless forloop.last render 'icon-plus' endunless -%} {%- liquid if forloop.first echo product.title else echo product.title | link_to: product.url endif -%} {{ product.price | money }}

{% render 'icon-checkmark' %} {% if product.has_only_default_variant %} {% else %} {% for variant in product.variants %} {{ variant.title }} {% endfor %} {% endif %} {%- endfor -%} {% endform %} {%- endif -%} 長いので重要な部分だけ順番に説明していきます。 まず最初の「{%- if meta_products != blank -%}」にてメタフィールドに商品が登録されていない場合はコンテンツが出力されないように分岐しています。 次に「{%- if section.settings.title != blank -%}」にてセクションタイトルの出力を制御しています。 「{% form 'product', product, class: 'buy-together-form' %}」では タグを出力します。クラス名は「buy-together-form」としています。 「{%- for handle in buy_together_handles -%}」にて最初のLiquidで配列化したハンドルをForループで出力させます。「assign product = all_products[handle]」とすることで、productの値が、全商品の中からハンドル指定で定義、その後に商品画像を「product_image」として定義しています。 「 」内の分岐は、最初のループ（親商品）はリンクされないようになっており、最後のループ以外は「＋」アイコンが出力されます。アイコンは「render 'icon-plus'」としていますが、テーマに合わせてコードを編集してください。 先程と同様に「 」内の分岐も最初のループ（親商品）はリンクされないようにしています。 「{% if product.has_only_default_variant %}」では、バリエーションの無い商品は隠し タグが出力され、複数バリエーションの商品は タグで出力されます。 「 」は合計価格を出力させるタグで、JSでの出力となるため空となっております。その後の タグもテキストはJSからの出力となりますので、同様に空となっております。 Javascript {%- if meta_products != blank -%} document.addEventListener('DOMContentLoaded', function () { const checkboxes = document.querySelectorAll('.buy-together-check'); checkboxes.forEach((checkbox) => checkbox.addEventListener('change', updateTotalPrice));

updateTotalPrice(); const variantSelecters = document.querySelectorAll('.variant-select'); if (variantSelecters) { variantSelecters.forEach((select) => { select.addEventListener('change', () => { updateProductPrice(select); updateTotalPrice(); }); }); } });

function updateTotalPrice() { const checkedCheckboxes = document.querySelectorAll('.buy-together-check:checked'); let totalPrice = Array.from(checkedCheckboxes).reduce((total, checkbox) => { const price = parseInt(checkbox.dataset.price.replace(/\¥|\,/g, '')); return total + price; }, 0);

const totalPriceElement = document.getElementById('TotalPrice'); totalPriceElement.innerHTML = ` 総額: ¥${totalPrice.toLocaleString()}`;

const BuyTogetherButton = document.getElementById('BuyTogetherButton'); const checkedCount = checkedCheckboxes.length;

switch (checkedCount) { case 0: BuyTogetherButton.textContent = '選択して下さい'; BuyTogetherButton.disabled = true; break; case 1: BuyTogetherButton.textContent = 'カートに入れる'; BuyTogetherButton.disabled = false; break; case 2: BuyTogetherButton.textContent = '両方ともカートに入れる'; BuyTogetherButton.disabled = false; break; default: BuyTogetherButton.textContent = `${checkedCount}点ともカートに入れる`; BuyTogetherButton.disabled = false; break; } }

function updateProductPrice(select) { const parent = select.parentNode; const checkbox = parent.querySelector('.buy-together-check'); const priceElement = parent.querySelector('.product-price'); const price = select.options[select.selectedIndex].getAttribute('data-price'); checkbox.setAttribute('data-price', price.replace(/\¥|\,/g, '')); priceElement.textContent = price; }

const form = document.querySelector('.buy-together-form'); const submitButton = form.querySelector('.buy-together-button'); submitButton.addEventListener('click', async (event) => { event.preventDefault();

const formData = { items: [] }; const inputElements = form.querySelectorAll('.buy-together-check:checked');

inputElements.forEach(function (inputElement) { const quantity = parseInt(inputElement.value); if (quantity > 0) { const variantId = inputElement.nextElementSibling.value; formData.items.push({ id: variantId, quantity: quantity }); } });

try { const response = await fetch(window.Shopify.routes.root + 'cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(formData), });

const json = await response.json(); window.location.href = '/cart'; } catch (error) { console.error('Error:', error); } }); {%- endif -%} 当セクションは基本的にJavascriptで制御しています。 チェックボックスやバリエーションチェンジした際に、合計価格やボタンテキストを変更させるようなっており、Amazonの仕様に合わせてあるのでテキスト表記はご自由に編集してください。 後は、カートボタンを押した際に「cart/add.js」が更新され、チェックした商品及び選択したバリエーションがカートに入るようになっており、カート画面に繊維するようになっています。 Schema

{% schema %} { "name": "一緒に購入", "tag": "section", "class": "section", "limit": 1, "settings": [ { "type": "text", "id": "title", "label": "タイトル", "default": "よく一緒に購入されている商品" }, { "type": "range", "id": "limit", "min": 1, "max": 4, "step": 1, "unit": "点", "label": "一緒に購入できる商品点数", "default": 3 } ], "presets": [ { "name": "一緒に購入" } ], "enabled_on": { "templates": ["product"] } } {% endschema %}

最後にスキーマのコードです。 セクションタイトルと、出力できる商品点数上限を設定するだけのシンプル仕様ですので、用途に合わせて編集して下さい。 セクションファイルは以上です。 CSSファイルを作成 「新しいアセットを追加する」より、「buy-together.css」を作成し以下をコピペしてください。 .buy-together-container { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; line-height: 1.4; }

.buy-together-form { display: flex; flex-direction: column; gap: 2rem; }

.buy-together-grid { display: grid; gap: 3rem; }

.buy-together-grid .product-item { position: relative; display: grid; grid-template-columns: 10rem 1fr; align-items: center; gap: 1rem; padding: 1rem; border: 1px solid #eee; }

.buy-together-grid .product-text { padding-right: 4rem; }

.buy-together-grid .product-image .icon { position: absolute; bottom: -2.5rem; left: 50%; width: 2rem; height: 2rem; transform: translateX(-50%); }

.buy-together-grid .product-link { display: block; overflow: hidden; }

.buy-together-grid .product-image .badge { position: absolute; top: 1rem; left: 1rem; font-size: 1rem; padding: .5rem 1rem; z-index: 1; }

.buy-together-grid .product-image .image { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.buy-together-grid .product-title { font-size: inherit; font-weight: 400; margin: 0; }

.buy-together-grid .product-title a { text-decoration: none; }

.buy-together-grid .variant-select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; color: #333; background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22feather%20feather-chevron-down%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E') right .5rem center / 1.2rem auto no-repeat, #fff; padding: .5rem 1rem; margin: .5rem 0; border: 1px solid #ccc; outline: none; }

.buy-together-grid .product-price { font-size: 1.2em; margin: 0; }

.buy-together-grid .check-label { position: absolute; top: 50%; right: 1rem; display: grid; place-content: center; width: 3rem; height: 3rem; background: #fff; color: #fff; border: 1px solid #ccc; border-radius: 50%; transform: translateY(-50%); transition: .1s linear; cursor: pointer; } .buy-together-grid .check-label .icon { width: 1.5rem; height: 1.5rem;

} .buy-together-check { opacity:0; -webkit-appearance: none; appearance: none; position: absolute; } .buy-together-check:checked + .check-label { background: #c00; border-color: #c00; } .buy-together-action { text-align: center; } .buy-together-action .total-price { font-size: 1.5em; margin: 0 0 1rem; } .buy-together-button { width: 100%; } @media (min-width: 750px) { .buy-together-form { flex-direction: row; }

.buy-together-grid { display: flex; max-width: 75%; min-width: 50%; }

.buy-together-grid .product-item { display: block; padding: 0; border: none; }

.buy-together-grid .product-image { position: relative; }

.buy-together-grid .product-image .icon { top: 50%; right: -2.5rem; bottom: auto; left: auto; transform: translateY(-50%); }

.buy-together-grid .product-link { background: #f7f7f7; padding: 1rem 3rem; border-radius: 1rem; }

.buy-together-grid .product-link .badge { top: auto; bottom: 1rem; left: 1rem; }

.buy-together-grid .product-text { padding: 1rem 0 0; }

.buy-together-grid .check-label { top: 1rem; right: 1rem; transform: none; }

.buy-together-action { flex: 1; max-width: 25%; padding-top: 5rem; }

.buy-together-button { width: 100%; } }

Dawnの出力に合わせたシンプルなスタイルなので、ご利用のテーマや希望のデザインに合わせて編集して下さい。 設定 テーマカスタマイザーより商品ページを開き、任意の場所へ「一緒に購入」セクションを追加してください。

メタフィールド未登録の場合は、セクションが出力されませんので、商品管理を開き「一緒に購入」のメタフィールドに登録していきます。

前述にもある通り複数登録できてしまいますが、セクション設定の商品点数しか出力されませんのでご注意下さい。 出力されるアイテムは親商品＋一緒に購入できる商品点数となります。 以上。

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

よく一緒に購入されている商品を実装するチュートリアル

Amazonみたいな「よく一緒に購入されている商品」をメタフィールドを使って実装できます。

2024年4月

2024年5月