Shopifyの商品がどのようにカートに追加されるのか、その基本的な仕組みと手法をできるだけわかりやすく解説していきます。
Shopifyで「カートに入れる」ボタンを設置しようと思っても、初心者にとっては思いのほか難しく感じるかもしれません。
というのも、この仕組みにはLiquidだけでなく、JavaScriptやAjax、さらにはサーバー側で動くRubyなど、複数の技術が関わっているからです。
本記事では、Shopifyの商品がどのようにカートに追加されるのか、その基本的な流れをできるだけわかりやすく解説していきます。
カートボタンの設置をしたい方や、カート周りのカスタマイズを考えている方に向けて、仕組みをシンプルにご紹介します。
基本的な構造と流れ
まずは、Shopifyで「カートに入れる」処理がどのように行われているのか、基本的な構造と流れについて説明します。
もちろん、私自身もまだ学び途中の部分があり、多少の誤解が含まれているかもしれませんが、できるだけわかりやすく伝えていきたいと思います。
簡単に言えば、HTMLの「form」タグを使って、商品情報をカート側に送信する仕組みです。Shopifyでは、このフォームの送信によってカート処理が行われます。
フォームのアクション（送信先URL）は、大きく分けて次の2種類です。
/cart/add：商品をカートに追加する処理
/cart/change：カート内の商品の数量を変更する処理
の2つの処理はいずれも「Ruby on Rails」で構築されたShopifyのサーバー側によって処理されます。
フォームの送信は通常method="post"で行い、以下のような「input」要素を使って商品IDや数量を指定します。
<input type="hidden" name="id" value="商品バリアントID">
<input type="number" name="quantity" value="1">送信されるURLは、実在する「HTMLページ」ではなく、Shopify側がカート処理専用に用意している仮想的なURLパスと考えて差し支えありません。たとえば/cart/addや/cart/changeといったものがそれに当たります。
フォームの送信が成功すると、Shopifyは自動的に「/cart」ページ（カートの中身を表示するページ）へリダイレクトします。この一連の流れが、Shopifyにおける「カートに入れる」処理の基本的な仕組みです。
使われるページについて
カートに商品を追加する処理(cart/add)と、商品の数量を調整する処理(cart/change)が、それぞれ異なるエンドポイントによって行われます。そして、この2つの処理は用途によって使われるページが明確に分かれています。
まず「カートに追加」は、商品ページや商品一覧ページなど、商品ID（正確にはバリアントID）が取得できるテンプレートで使用されます。
一方「数量調整」は、すでにカートに入っている商品の個数を変更したいときに使用されます。
この処理は、主にカートページやサイドカート（ドロワーカート）のように、現在のカート内容が表示されているページで使われます。
ちなみに、商品ページでよく見かける「数量を選んでからカートに入れる」動作は「/cart/change」ではなく「/cart/add 」の input要素（name="quantity"）によって実現されています。
つまり、この場合は「最初から○個カートに追加する」という考え方で、数量調整というよりは、追加時の数量指定にあたります。
実際のサンプルコードを見る
<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>以上、Shopifyの商品がどのようにカートに追加されるのか、その基本的な仕組みと手法を紹介しました。本記事を参考に、自作の「カート追加」ボタンを作ってみてはいかがでしょうか。ぜひご活用ください！
