Shopify Ajax API を用いてコレクションページで商品をカートに入れる方法を徹底解説

はじめに

今回は、Ajax API である Cart API を使ってコレクションページで商品をカートに追加できるように実装していきたいと思います。

Cart API とは

Cart API は、カートへ商品を追加したり、カートに入っている商品の情報を表示したりするときに使用します。

Cart API には、以下のようなエンドポイントが用意されています。

POST /cart/add.js : 商品を追加するときに使用
GET /cart.js : 顧客のカート情報を JSON として、取得するときに使用
POST /cart/update.js : カートに追加されている商品の数量、ノート、プロパティを更新するときに使用
POST /cart/change.js : カートに追加されている商品一つに対して、数量とプロパティを変更するときに使用
POST /cart/clear.js : カート内のすべての商品の数量をゼロ（カートを空）にするときに使用

上記の中の、POST /cart/add.js を使用してコレクションページにカートに追加ボタンを作成します。

参考

https://zenn.dev/unreact/articles/ajax-api-reference-cart

実装

それでは、コードを書いていきます。

本記事では、新規テーマの Dawn に実装します。

実装の流れは以下の通りです。

カートに追加ボタンの UI を作成
js ファイルを作成
js ファイルの読み込み
挙動の確認

1. カートに追加ボタンの UI を作成

まず、カートに追加ボタンの見た目を作成するのですが、デフォルトのコレクションページでも見てみましょう。

Dawn デフォルトのコレクションページ

Dawn デフォルトのコレクションページは以下のような感じです。

商品画像、商品名、商品価格が表示されている一般的なコレクションページですね。

ここに、カートに追加ボタンを作成します。

カートに追加ボタンの作成

ボタンの作成

Dawn では、コレクションページの商品一覧を表示するセクションは、main-colleciton-product-gird.liquidになります。

コレクションページの商品一覧を表示

カートに追加ボタン

<button
  type="button"
  class="button button--full-width button--secondary"
  onclick="buttonClick({{ product.selected_or_first_available_variant.id }})"
  {% if product.selected_or_first_available_variant.available == false %} disabled {% endif %}
>
  <span>
    {% if product.selected_or_first_available_variant.available == false %}
      売り切れ
    {% else %}
      カートに追加
    {% endif %}
  </span>
</button>

上記コードを、下記の場所に追加します。

liquid ファイルに追加

コードを追加すると下記画像のようにカートに追加ボタンが表示されます。

ボタンを押したときにカートに商品を追加する関数を走らせるために、<button>にonclick属性を追加しています。

onclickは、ボタンを押したときに走る関数を定義することができます。（※関数は後で定義します）

関数に渡す引数は、商品のバリエーション ID です。（※商品 ID とは異なるので注意が必要です）

見た目はできたので、次は**POST /cart/add.js**を使って商品をカートに追加する関数を作成します。

カートに追加する関数を作成

2. js ファイルを作成

次に、**POST /cart/add.js**を使って商品をカートに追加する関数を作成していきます。

Shopify で JavaScript ファイルを保存するディレクトリは Assets ディレクトリになります。

Assets ディレクトリに新規 JS ファイルを作成します。

Assets ディレクトリ

JS ファイルを作成

add-to-cart.js

追加した JavaScript ファイルに関数を定義します。

関数の中では、Ajax API が使用されており、商品をカートに追加することができます。

function buttonClick(variantId){
  let formData = {
    items: [
      {
        id: variantId,
        quantity: 1,
      },
    ],
  };

  fetch("/cart/add", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(formData),
  })
  .catch((error) => {
    console.error("Error:", error)
  })
}

簡単に説明をします。

まず、関数はvariantIdを引数として受け取ります。

この引数には、追加する商品を判別するための{{ product.selected_or_first_available_variant.id }}が入ります。

formDataを定義して、fetch()のbodyに渡たすことで、カートに追加されます。

（JSON.stringify()は、 JavaScript のオブジェクトや値を JSON 文字列に変換するメソッドです。）