Shopifyでカートに入れるボタンをつける

Shopifyでテーマ備え付けの「カートに入れる」ボタンとは別に同様機能を持ったボタンを設置する方法の検討と一部サンプルです。

実現したいこと

• 任意のページに「ADD TO CART」ボタンをつける

特に英語で検索しづらいのが、「Buy Button(購入ボタン)」ではなく、「ADD TO CART(商品ページについているボタン)」だという点です。

Buy Buttonでも良いとは思いますが、ストアでLiquidを使っているのですから無駄にJSを必要とするパーツを使わずとも設置したいと考えました。
Shopifyのストア内にBuy Buttonは非推奨ですね…。

サンプル

• Solved: How to add “add to cart” button on my collection page – Shopify Community

<form method="post" action="/cart/add">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input min="1" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn" />
</form>

フォーラムの投稿そのままですが動作はしました。ただそのままカートに移動してしまうのでちょっと思った動作と違っています。

理由は単純で、formのactionに記載したパスのファイルに移動するためであり、備え付けの「カートに入れる」ボタンはJSでこの動作を止めているのでその部分の動作が不足しているからです。

つまり/cart/add.jsなどのCart APIを用いる必要があります。

Cart APIの利用

• Cart API reference

追加する商品に関するデータをLiquidを利用してHTMLに組み込み、Cart APIを使うことで概ね実現可能でした。
カートに入れるだけなら難しくないのですが、在庫数との関連などいくつか考慮しないといけないことがありました。

カートに追加した直後にユーザーが「やっぱりやめた」となる可能性も考えられるため、/cart/change.jsを使ったカート内の商品情報の操作が必要です。
新たに商品を追加する場合は/cart/add.jsを使いますが、すでにカート内に同じ商品がある場合や削除する(点数を減らす)場合は/cart/change.jsを使います。

またヘッダーにあるカートアイコンの商品点数バッジも更新する必要があります。
テーマによるかもしれませんがカート内の商品点数が0の場合はバッジを消す処理も必要です。
こちらはcart.jsを使って現在の商品点数を取得してバルーン内の数値に反映させる必要があります。

ここまでを踏まえると、使用テーマの動作に合わせることも含めて考えるなら検討範囲はそれなりに広く、ちゃんと作るのであれば簡単な作業とは言い難いように思います。

Debutでのバルーン更新に関するメモ

theme.Cart.prototype._setCartCountBubble(1);

上記のように_setCartCountBubble()の引数に数値を入力する形で記載すれば、theme.js内の仕組みを利用して一応カゴアイコン右上のバルーン内の購入商品点数を変更できました。

しかしこれを使うのであれば、本来の動作の一部のみを切り取ったかなり無理やりな状態になりそうではあります。
ただし使わない場合も本来の動作を通さないという点で無理やりな方法とも言えるので、結局theme.jsの内部へ適切に組み込まない限りは、どのように作っても同じことかもしれません。

結び

試作はできましたが結構大変でした。