Shopifyで「カートに追加」する方法を解説！「form送信」と「fetch API」の違いや仕組み、使い分けのポイントを初心者向けにわかりやすく紹介します。
Shopifyに限らず、ECサイトにおける基本的かつ重要な流れは、「商品（またはバリエーション）を選ぶ → カートに追加する → 決済する」という一連の行動です。
なかでも「カートに追加する」処理は、ユーザー体験に直結するため、テーマのカスタマイズにおいて特に手が加えられることが多いポイントです。
この記事では、Shopifyでカート追加を実現する2つの主要な方法、「formを使う方法」と「JavaScript（fetch API）を使う方法」について、それぞれの特徴や違い、使い分けの考え方をご紹介します。
form送信 vs JavaScript APIの違いとは
では、シンプルに両者はどう違うのでしょうか。
formを使う方法は、HTMLだけで完結します。データはHTML経由で渡されますが、実際にカートへ追加する処理は、Shopifyのサーバー側（Ruby on Rails）によって行われるとの事です。この方法では、ボタンを押すとページが遷移し、カートページに移動するのが一般的です。いわゆる「同期的なPOST送信」です。
一方、fetchを使う方法では、JavaScriptで非同期にデータを送信します。ページを遷移させることなく、裏側でカート追加の処理を行い、結果だけを画面上に反映することができます。Shopifyではこのような非同期APIに.jsが付くのが特徴で、レスポンスはJSON形式で返されます。
※同期と非同期ってなに？
「同期」とは、ある処理が終わるまで次の動作に進めない状態のことです。
たとえば、カートに追加したあとにページ全体が切り替わってから次の画面に進むような動きが「同期的」です。
一方「非同期」とは、バックグラウンドで処理をしながら、ページはそのまま表示し続ける仕組みです。
たとえば、商品をカートに追加してもページはそのままで、画面の一部だけが更新されるというような動きが「非同期的」です。
ここで頭をよぎる疑問‥非同期は表示だけ変えられるの？データの更新は？
「非同期」は見た目だけを変えているように見えるかもしれませんが、実際はJavaScriptが裏側でShopifyのサーバーにリクエストを送り、サーバーがリアルなカート情報を更新しています。
つまり、カートの中身は「ボタンを押したその瞬間に、裏でちゃんとサーバーに伝わり、データも更新されている」のです。
form送信
では、「form送信」の仕様について見ていきましょう。以下はサンプルコードです。
<form action="/cart/add" method="post">
<!-- 最初のバリアントIDを hidden で送信 -->
<input type="hidden" name="id" value="{{ product.variants.first.id }}">
<!-- 数量を指定できるフィールド -->
<label for="Quantity">数量</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1">
<button type="submit">カートに入れる</button>
</form>formを使ったカート追加では、HTMLのformタグに「action」と「method」という属性を指定します。
「action=”/cart/add”」「method=”post”」とすることで、Shopifyが用意している「カートに追加するための専用URL」にデータを送信します。
この「/cart/add」というURLは、実在するページではなく、Shopifyが内部的に処理する仮想的なエンドポイントです。
見た目はページ遷移のように見えますが、実際にはこのパスにPOSTリクエストが送られ、サーバー側でカート処理が行われます。
fetch API
次は、fetch APIを使う方法になります。以下はサンプルコードです。
<!-- ボタン（最初のバリアントIDを埋め込む） -->
<button id="add-to-cart-btn" data-variant-id="{{ product.variants.first.id }}">
カートに追加する
</button>
<!-- 結果表示用のメッセージ -->
<p id="cart-message" style="color: green;"></p>
<script>
document.addEventListener('DOMContentLoaded', function () {
const btn = document.getElementById('add-to-cart-btn');
const message = document.getElementById('cart-message');
btn.addEventListener('click', function () {
const variantId = this.dataset.variantId;
fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
id: variantId,
quantity: 1
})
})
.then(res => {
if (!res.ok) throw new Error('カート追加失敗');
return res.json();
})
.then(data => {
message.textContent = '商品をカートに追加しました！';
console.log(data); // 商品情報も見れる
})
.catch(err => {
message.textContent = '商品を追加できませんでした…';
console.error(err);
});
});
});
</script>一方、fetch APIはJavaScriptを使って実装します。
「fetch」とは英語で「取ってくる」という意味があり、その名のとおり、サーバーからデータを「取りに行って」「受け取る」ための仕組みです。
Shopifyでは、fetchを使って「/cart/add.js」という仮想的なURLにリクエストを送り、商品データをカートに追加します。ページをリロードすることなく処理できるのが大きな特徴です。
fetch APIに用いられる「/cart/add.js」は、form送信の「/cart/add」と同様、実際にページが存在するわけではない「仮想的なエンドポイント」になります。
***
以上、Shopifyにおける「カートに追加」の仕組みと、「
