[Shopify] カートへノベルティ(オプション商品)を追加する方法 – Ajax API

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

テックギーク

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>

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

Shopifyエンジニアをお探しの方へ

Shopifyエンジニアをお探しの方へ

ShopifyのLiquidやAjax APIまで網羅したShopify構築オンラインスクール「テックギーク」を運営しております。

Shopifyをカスタマイズしたい方は、「テックギーク」の卒業生をご紹介しますので、下記URLまでお問い合わせください。

Shopify構築・アプリ開発のご相談
Shopify構築・アプリ開発のご相談

コメント

タイトルとURLをコピーしました