[Shopify] カートへノベルティ（オプション商品）を追加する方法

商品をカートに追加する際に、商品に関連するオプション商品を一緒にカートへ追加する方法を紹介します。

テックギーク

Shopify構築オンラインスクール「テックギーク」の内容を一部抜粋したものになります。

構築の方針
コード

構築の方針

ノベルティ（オプション商品）は、商品として登録しておく
productテンプレートを新規作成するか、テーマをカスタマイズしてノベルティがつく商品とつかない商品とをLiquidで判定する。ただし、全ての商品につく場合は不要。
原則として商品詳細ページを想定。商品一覧画面から直接カートに追加できるテーマは想定していない。

コード

{%- form 'product', product -%} にname属性を付与します。

formタグは、main-product.liquidなど、商品詳細ページにあります。

今回は、addOptionForm という属性をつけます。

{%- form 'product', product, name: "addOptionForm" -%}

{% form %} から {% endform %} の中に下記のスクリプトを挿入します。

ここでノベルティ商品のバリアントIDを事前にコピーしておいてください。

バリアントIDは、下記スクリプトの id のところに記載します。

<script>
const customItems = [
  {
    id: (ノベルティ商品のバリアントID）,
    quantity: 1
  }]; // 複数ある場合は、カンマ区切りで追加。
document.addEventListener("submit", (e) => {
    if(customItems.length > 0){
      e.preventDefault();
      const formData = {
        'items': customItems
      };
      fetch(window.Shopify.routes.root + "cart/add.js", {
        method: "POST",
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(formData)
        }
      )
      .then(response => response.json())
      .then(data => {
        document.addOptionForm.submit();
      })
      .catch(error => {
        console.log(error);
        alert("Error: " + error);
      });
    }
  });
</script>

これでサブミット（「カートへ追加」「今すぐ購入」）時にノベルティ商品が一緒に登録されます。