動的ページとバリエーションの変更#

SDK はページ読み込み後に追加された対象要素を監視します。選択中の商品の管理は引き続きオンラインストア側で行い、対象要素の属性を選択内容と同期させる必要があります。

一度読み込み、対象要素を更新する#

SDK ローダーはアプリケーションまたはテーマ全体で一つにします。ルート遷移のたびに新しいスクリプトを追加しないでください。現在の商品が表示される場所に対象要素を描画し、クイックビュー、バリエーション選択、クライアント側のルート遷移によって商品が変わったら更新します。

自動生成ボタンの場合は、対象コンテナに現在の商品コードを設定します。独自に作成したボタンの場合は、独自オンラインストアのチュートリアルに示すように、以前の SDK の状態もリセットします。

独自ボタンのリセット#

以下は、既存の独自オンラインストア向けの仕様に沿った例です。選択した商品コードが確定した後、自身の選択処理ハンドラーから呼び出してください。

function setSelectedProduct(button, productCode) {
  button.dataset.active = 'false';
  button.style.visibility = 'hidden';
  delete button.dataset.rvProductCode;
  delete button.dataset.rvProductType;
  delete button.dataset.rvProductId;
  delete button.dataset.rvProductIds;
  const code = typeof productCode === 'string' ? productCode.trim() : '';
  if (code) button.dataset.productCode = code;
  else delete button.dataset.productCode;
  button.disabled = !code;
}

実際のプラットフォームのライフサイクルへの接続#

すべての EC サイトに共通するバリエーション変更イベントはありません。Shopify ガイドではテーマ側で発行するイベントを定義しています。そのリスナーを追加するだけではテーマとは接続されません。実際に使用しているテーマやアプリケーションで定義されたコールバックを使用してください。

React / Next.js と Vue / Nuxt では、フレームワーク別ガイドのクライアント側ライフサイクルとクリーンアップの説明に従ってください。

古い選択内容が残っていないか確認する#

利用可能な商品、別の利用可能な商品、対応付けのない商品の間で選択を切り替えます。選択変更後に Viewer が以前の商品を再度開くことがあってはなりません。クイックビューやブラウザーの戻る操作でも繰り返し確認してください。