# バリエーション毎に「カートにいれる」ボタンが設置できるかどうか

**URL:** <https://community.shopify.com/t/topic/66733>\
**Category:** 技術的なQ＆A\
**Created:** [September 20, 2021, 1:19am UTC](https://community.shopify.com/t/topic/66733 "2021-09-20T01:19:16Z")\
**Posts on this page:** 4\
**Page:** 1

## AI-generated summary

主題: バリエーションの表を作成し、各行に個別の「カートに追加」ボタンを設置できるか。参考サイトのような実装を目指している。

現状: 表はShopifyのvariantオブジェクト（商品バリエーションデータ）で作成可能。購入ボタンの技術的な実装方法が不明。

最新の提案: ShopifyのAJAX Cart API（/cart/add.js）を使えば、各バリエーションに対応した「カートに追加」ボタンを設置可能。公式ドキュメントのサンプルで基本動作が把握できる。

追加質問と回答: APIを使わずに実現可能かという問いに対し、非APIの具体的方法が不明のため回答困難。カートページへ遷移してよいなら、関連フォーラムのサンプルコードが参考になるとの案内。

補足: テーマやアプリで同様の動作を実現している実装を解析するとヒントが得られる可能性あり。

決定・アクション: AJAX Cart APIのサンプルを試す、提示されたフォーラムのコードを確認、既存テーマ/アプリの実装調査。

ステータス: 未解決。API以外の方法は未確定のまま。

<div class="post-metadata">

**Author:** ![Kaori\_2](https://avatars.discourse-cdn.com/v4/letter/k/5f8ce5/32.png) [@Kaori\_2](https://community.shopify.com/u/Kaori_2)\
**Post date:** [September 20, 2021, 1:19am UTC](https://community.shopify.com/t/topic/66733/1 "2021-09-20T01:19:16Z")

</div>

参考サイトのように

バリエーションの表を作成し、それぞれに「カートに追加」ボタンを設置したいと考えております。

表まではvariantオブジェクトを使用すれば簡単かと思いますが、購入ボタンも設置することはできるのでしょうか？？

参考サイト）[https://axel.as-1.co.jp/asone/g/NCG107901-1/?cfrom=MB0000000](https://axel.as-1.co.jp/asone/g/NCG107901-1/?cfrom=MB0000000)

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [September 28, 2021, 2:12pm UTC](https://community.shopify.com/t/topic/66733/2 "2021-09-28T14:12:20Z")

</div>

以下のCart APIを使うことで可能だと思います。

[https://shopify.dev/api/ajax/reference/cart](https://shopify.dev/api/ajax/reference/cart)

/cart/add.js あたりのサンプルを試すと基本部分が分かりやすいかもしれません。

---

<div class="post-metadata">

**Author:** ![Kaori\_2](https://avatars.discourse-cdn.com/v4/letter/k/5f8ce5/32.png) [@Kaori\_2](https://community.shopify.com/u/Kaori_2)\
**Post date:** [September 28, 2021, 2:49pm UTC](https://community.shopify.com/t/topic/66733/3 "2021-09-28T14:49:18Z")

</div>

ありがとうございます！

API使わなくてもできると思っていたのですが不可能なのでしょうか？？

---

<div class="post-metadata">

**Author:** ![Jizo\_Inagaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/jizo_inagaki/32/149480_2.png) [@Jizo\_Inagaki](https://community.shopify.com/u/Jizo_Inagaki)\
**Post date:** [September 29, 2021, 2:21am UTC](https://community.shopify.com/t/topic/66733/4 "2021-09-29T02:21:33Z")

</div>

想定されているAPIを使わない方法がどういうものなのか分かりませんのでご返答できかねますが、カートページに移動してよいなら以下のスレッドにサンプルコードが記載されていますので参考になるかと思います。

[https://community.shopify.com/topic/550247](https://community.shopify.com/topic/550247)

他にはご要望の動作をするテーマやアプリを解析することでヒントを得られるかもしれません。
