ShopifyカートAPIを使ってみよう①

カートAPIとは？

カートAPIはShopifyが提供している現在のカート情報を更新する際に用いられるAPIです。

通常Shopifyではオブジェクトを使用してアイテムをカートに追加したり、カートから商品を削除したりしますが、基本的に画面遷移が伴います。
カートAPIはjavascriptを使用することでSPA（シングルページアプリケーション）のような動作を実現することができます。

今回は数量セレクタを使用して画面遷移を発生さえずにカートに追加する方法を説明していきます。

使用方法

フォームの作成

商品ページを用意して下記コードを記載してください。

<section>
  <div class="product">
    <h2>{{ product.title }}</h2>
    {% assign selectedVariant = product.first_or_selected_variant 
    {% form 'product', product %}
      <select name="id">
        {% for variant in product.variants %}
          <option
            {% if selectedVariant.id == variant.id %}
              selected
            {% endif %}
            id="variant_id"
            value="{{ variant.id }}"
          >
            {{ variant.title }}
          </option>
        {% endfor %}
      </select>
      <div class="cart-item-quantity">
        <div class="cart-quantity-selector">
          <button type="button" class="minus">マイナス</button>
          <input name="updates[]" id="quantity" type="text" value="1">
          <button type="button" class="plus">プラス</button>
        </div>
      </div>
      <button type="submit">add to cart</button>
      <p class="added-to-cart">Added to cart!</p>
    {% endform %}
    <div id="cart-in"></div>
  </div>
</section>

productフォームを機能させるには
数量セレクタ、バリデーション、submitボタンを用意する必要があります。

数量セレクタ作成

次に数量セレクタを機能させます。
jsファイルを作成し、以下コードを記入してください。

document
  .querySelectorAll('.cart-quantity-selector button')
  .forEach(button => {
    button.addEventListener('click', () => {
      const isPlus = button.classList.contains("plus");
      const input = button.parentElement.querySelector("input");
      const value = Number(input.value);

      if (isPlus) {
        // pulus
        const newValue = value + 1;
        input.value = newValue;
      } else if (value > 1) {
        // minus
        const newValue = value - 1;
        input.value = newValue;
      }
    });
  });

これで数量セレクタが動くようになりました。

APIを取得

const addToCartForms = document.querySelectorAll('form[action="/cart/add"]');
addToCartForms.forEach(form => {
  form.addEventListener('submit',(e) => {
    // クリックした要素を取得
    let submitter = e.submitter;

    // 送信を無効化
    e.preventDefault();

    // 個数とIDを取得
    const add_count = submitter.parentElement.querySelector("#quantity").value;
    const id = submitter.parentElement.querySelector("#variant_id").value;

    let data = {
      items: [{
        quantity: add_count,
        id: id,
      }]
    };
    // 追加
    fetch('/cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    })
    .then(res => {
      console.log(res);
      const cart_in = document.getElementById("cart-in");
      const title = res.data.items[0].product_title;

      cart_in.innerHTML = `
        <div>カートに${title}が入りました。</div>
      `;
    })
  });
});

まず送信イベントを取得しフォームの送信を止めます。

e.preventDefault();

その後、入力された数量セレクタの値と選択したバリデーションのIDを取得し
変数に入れます

// 個数とIDを取得
const add_count = submitter.parentElement.querySelector("#quantity").value;
const id = submitter.parentElement.querySelector("#variant_id").value;

let data = {
  items: [{
    quantity: add_count,
    id: id,
  }]
};

fetchを使用して「cart/add.js」に接続します。
返り値としてカートに入った商品情報が取得できるので、innerHTMLなので表示させて完成です。

    fetch('/cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    })
    .then(res => {
      console.log(res);
      const cart_in = document.getElementById("cart-in");
      const title = res.data.items[0].product_title;

      cart_in.innerHTML = `
        <div>カートに${title}が入りました。</div>
      `;
    })

商品情報の他にも料金、カテゴリ、現在のカート個数などが取得できます。

まとめ

カートAPIを使うことで他にカートページの商品削除、個数変更等ができます。
ぜひ試してみてください。