テーマの+/-数量ボタンで選択したオファーが変わらない

テーマの数量ボタンで選択したオファーが変わらない場合は、まず割引で使用している数量コントロールを確認してください。入力した数量がティアに合わせて減らされることと、ボタンがウィジェットの更新を一度も送信しないことは別の問題です。

8と入力したのに、カートには6個追加された

Bundlex独自の数量セレクターを使用しない通常の設定では、テーマの入力欄によって設定済みのティア間を移動します。ティアと一致する正確な数量を入力するとそのカードを選択できますが、中間の数量では現在のオファーが選択されたままになる場合があります。カートに追加すると、そのオファーの数量が使用されます。「6個購入」が選択されている状態で8と入力しても、8個の商品が追加されるとは限りません。

購入者が柔軟な数量を選択できるようにするには、利用可能な場合、割引の数量セレクターを追加商品タブで有効にしてください。定期購入と一緒に使用できます。無効になっている場合は、ダッシュボードにそれを妨げている設定名が表示されます。併用できない設定をご覧ください。

Bundlexのセレクターが有効な場合、テーマの入力欄には別の数量が設定されるのではなく、セレクターの結果が反映されます。一部のストアには、通常のティア向けにサポートチームが有効にしたネイティブ数量設定が別途ありますが、これはデフォルトではありません。テーマの数量動作をご覧ください。

オファー選択が任意で、オファーが選択されていない場合、テーマのコントロールは通常どおり動作し、オファーカード間を移動しません。以下の確認項目は、ティアナビゲーション設定で有効なオファーが選択されている場合を対象としています。

同期の想定動作

次の2つの方向を確認してください。

• オファーから数量へ: 購入者がオファー（例: 1個購入、2個購入、3個購入）をクリックすると、ウィジェットはテーマの数量入力欄をそのオファーの数量に設定します。これは、Bundlexが正しい数量入力欄を見つけられることが前提です。
• 数量からオファーへ: 購入者がテーマの+/-ボタンまたは入力操作で数量を変更すると、ウィジェットは新しい値を検出し、数量が完全に一致するオファーを選択します。

テーマがイベントを発生させずに入力欄を変更する場合や、ウィジェットが別の数量入力欄を監視している場合、2つ目の方向の同期が機能しないことがあります。ティアにない数値だけでは、イベントの問題があるとは判断できず、オファーの選択が解除されるとも限りません。

+/-ボタンでオファーが更新されない理由

ウィジェットは、数量入力欄で発生するネイティブのchangeイベントとinputイベントを監視します。通常の入力操作ではこれらのイベントが発生しますが、テーマのカスタム+/-ボタンでは発生しない場合があります。

ただし、多くのテーマでは、JavaScriptで入力欄の値を直接設定して+/-ボタンを実装しています（例: input.value = newValue）。この方法で値を代入しても、changeイベントやinputイベントは発生しません。画面上では数値が変わりますが、イベントが送信されないため、ウィジェットは数量が変わったことを認識できず、選択されたオファーはそのままになります。

これは特定のフレームワークに限った問題ではありません。プログラムによる値の代入では、どのような場合でもイベントが省略されます。イベントが発生するのは、入力操作など実際のユーザー操作だけです。Shopifyの<quantity-input>カスタム要素（Dawnで使用）を基盤とするテーマでは、値の更新後にchangeイベントが送信されるため、初期状態で動作します。

これが原因か確認する方法

1. ブラウザの開発者ツール（F12、MacではCmd+Option+I）を開き、Consoleタブに移動します。
2. 商品ページで+/-ボタンをクリックします。
3. 利用可能なオファーと完全に一致する数量を試してください。数値は変わるのに選択されたオファーが変わらない場合は、ボタンが、Bundlexが監視している数量入力欄でchangeイベントまたはinputイベントを送信しているか、テーマ開発者に確認してもらってください。

この問題が起きやすいテーマでは、Shopifyの<quantity-input> Webコンポーネントではなく、値を直接設定するカスタムの+/-ボタンが使われています。

解決方法: changeイベントを発生させる

この修正はテーマ側で行うため、テーマコードの管理担当者がすぐに対応できます。テーマ開発者に、+/-ハンドラーで新しい数量値を設定した直後にchangeイベントを発生させるよう依頼してください。

input.dispatchEvent(new Event('change', { bubbles: true }));

ここでのinputは、更新対象の数量入力要素です。これにより、Bundlexを含む、そのイベントを監視しているスクリプトに通知されます。変更後、テーマの数量ボタンとカートをテストしてください。

数量入力が重複しているケース（スティッキーカートバー）

テーマによっては、商品フォームを複製したスティッキーまたは固定の「カートに追加」バーが追加され、2つ目の数量入力が存在することがあります。両方の入力が同じname="quantity"を共有し、場合によっては同じidまで共有していることもあります。その場合、Bundlexのデフォルトセレクターinput[name="quantity"]が誤った入力に紐づき、オファーの数量とメインフォームの数量が一致しなくなることがあります。

重複を確認する方法

1. 開発者ツールを開き、Consoleタブに移動します。
2. 次を実行します: document.querySelectorAll('input[name="quantity"]').length
3. 結果が1より大きい場合、ページ上に複数の数量入力があります。

解決方法: カスタムの数量入力セレクター

スティッキーバーを除外し、メインフォームの数量入力だけをBundlexの対象にします。新しいセレクターによる修正については、商品URLを添えてサポートにお問い合わせください。サポートがストアのウィジェット設定で構成できます。アプリの埋め込みに保存済みの旧セレクターを確認する必要がある場合は、次の場所にあります。

1. Shopify管理画面でテーマエディタを開きます。
2. アプリの埋め込みに移動し、Bundlex Bundlesを見つけます。
3. 詳細設定を表示を有効にし、数量入力セレクターにメインフォームの数量入力だけを対象とするセレクターを設定します。

正確なセレクターはテーマによって異なります。一部のテーマで機能する例を2つ紹介します。

.product-form__item--submit input[name="quantity"]
form.shopify-product-form:not(#addtocart-sticky form) input[name="quantity"]

どちらのセレクターもテーマで機能しない場合は、適切なセレクターを特定できるよう、商品ページのURLをサポートに共有してください。サポートが以前にオーバーライドを設定している場合は、テーマのフィールドよりも優先されることがあります。

お問い合わせのタイミング

+/-ボタンがイベントを発生させずに値を変更していること、または数量入力が重複していることを確認し、上記の解決方法でも改善しない場合は、商品ページのURLを添えてサポートにお問い合わせください。ブラウザコンソールに表示された[Bundlex]メッセージと、商品フォームのHTMLも添えると役立ちます。