カートページにてそれぞれの商品にオプションを追加する

Topic summary

課題: カートページで各商品にLine item propertiesを追加したい。Cart APIの使用方法が不明。

解決策の提案:

  • Cart APIの/cart/change.jsを使用することで実現可能
  • 手順: ①カートに商品追加 → ②対象商品のline番号を取得 → ③/cart/change.jsでpropertiesに情報を追加
  • Shopify公式ドキュメントのサンプルコードが参考になる

新たな問題:

  • cart-template.liquidにJavaScriptを記述したところ、カート数量変更や削除ボタン押下時にエラーが発生
  • エラーメッセージ:「お客様のカートをアップデートするときにエラーが発生しました」
  • 使用テーマはDawn。<cart-items>タグの外側に記述すべきという意見もあり
  • ブラウザ更新で元に戻るため、バグが発生している状態

現状: Line item propertiesの設定は成功したが、カート更新時のエラー対策が未解決で困っている

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.

商品をカートへ追加した後にそれぞれ商品ごとにLine item propertiesで追加オプションを設定することは可能でしょうか。

自身で調べたところ、Cart APIをしようして更新するのではないかとは思いましたがその先がわからずでした。

フロントからの情報をjsに流し込んで反映までの一連の流れを行えると嬉しいのですがご存じの方がいましたらご教授いただけると助かります。

参考サイト

https://zenn.dev/m_j_t/articles/c2414aec1e5c28

Hdm 様

お世話になっております。

ご質問確認いたしました。

やられたいことは、Cart APIの/cart/change.jsを使用すればできる認識です。

  1. カートに商品を追加

  2. 情報を追加したい商品のlineを取得 ※ lineとは、カートに入っている商品の順番です。

  3. line情報を元に、/cart/change.jsでpropertiesに情報を追加

3.は以下にサンプルがあるので、参考にしてください。

https://shopify.dev/docs/api/ajax/reference/cart#update-properties

なにかヒントになれば幸いです。

私たちの励みにもなりますので、

お役に立てていればBest Answerボタンを押して頂ければ嬉しいです。

/cart/change.jsで商品ごとにLine item propertiesを設定することができたのですが

cart-template.liquidにjavascriptを記述したところカート数量や削除ボタンを押したときのカート更新時に「お客様のカートをアップデートするときにエラーが発生しました。再度お試しください。」というエラーメッセージが出て表示がバグを起こしてしましました。

ブラウザの更新をすると元に戻るのですがこちらの原因など予想できたりしますでしょうか。

テーマはDebutを使用しています。Dawnの場合の外側に記述すればよいなどの意見がありますがDebutでの対策がわからず困っております。

もしお分かりでしたらご教授いただけると助かります。