freks blog

Shopify テーマの中で Add to cart ボタンを足す方法を調べました

ドキュメントを見ると Cart API reference という api があります

これを使ってフォームを実装すればカートに商品の追加はできるのですが、ヘッダーにあるカートアイコンに数量のバッチの更新がされません
（リロードすれば更新される）

公式テーマをよく読むと
assets/product-form.js link
というファイルがあり、この中で商品追加後の処理が書かれてました

HTML のカスタムエレメントで描かれているので、これをテーマ内で呼び出してあげれば使えます

呼び出し方は snippets/buy-buttons.liquid link とかを参考にするとよさそうです

At to cart ボタンを表示するのに

{% render 'buy-buttons', block: block, product: product, product_form_id:
product_form_id, show_pickup_availability: true %}

といったコードを書いてあげれば一旦表示はできます

見た目が気に入らなければ snippets/buy-button.liquid をコピーして新しい snippets を作るとかしてカスタマイズしてあげればいいです

いちばんやさしいShopifyの教本 人気講師が教える売れるネットショップ制作・運営 「いちばんやさしい教本」シリーズ

このリンクは、アフィリエイトリンクです