Skip to main content

​
Shadow DOM の役割

Render Cart in Shadow DOM 設定をオンにすると、Upcart は自身のスタイルとスクリプトをストアの他の部分から分離する自己完結型の空間を作成します。 これは次のことを意味します:
  • テーマのグローバル CSS が Upcart のデザインを上書きできなくなります。
  • Upcart のスタイルもテーマに干渉しません。
  • カートはさまざまなデバイスやテーマで一貫した状態を保ちます。
Shadow DOM は、カートが本来の見た目と動作を保てるようにする、カートの周りの「保護バブル」のようなものと考えることができます。

​
なぜこれが起こるのか

Shopify やサードパーティのテーマには、Upcart の見た目や動作に意図せず影響を与える可能性のあるグローバル CSS や JavaScript が含まれていることがよくあります。 Render Cart in Shadow DOM 設定は、Upcart の cart drawer を独自の保護された環境内に分離することで、これらの競合を防ぎます。有効にすると、Shadow DOM はテーマの更新やカスタムコードの変更に関係なく、カートのデザインとレイアウトを一貫した状態に保ちます。 ただし、テーマやサードパーティアプリがカート要素への直接アクセスを必要とする場合、この分離が統合上の課題を生むことがあります。

​
技術的な考慮事項

あなたや開発者が JavaScript を使用して Upcart 内の要素を変更する必要がある場合、正しいドキュメント参照を使用することが重要です:
  • Upcart の内側の要素を対象とする場合は upcartDocumentOrShadowRoot を使用します。
  • Upcart の外側の要素(たとえば、Shopify テーマのヘッダーやフッター)を対象とする場合は document を使用します。
Shadow DOM は分離されていますが、Upcart はパブリック API とヘルパー関数を通じて、テーマや他のアプリとやり取りする方法を引き続き提供しています。

​
トラブルシューティングと制限事項

ほとんどの場合、Shadow DOM を有効にすると CSS とレイアウトの競合は自動的に修正されます。
ただし、引き続き問題が発生する可能性のあるシナリオもあります:
  • 価格設定アプリ: 別のアプリがカート内の価格やチェックアウトの動作を直接変更する必要がある場合、Shadow DOM は Upcart の内部構造を外部スクリプトから隠すため、それが困難になることがあります。
  • テーマレベルの JavaScript: document.querySelector() を使用するカスタムスクリプトは、Shadow DOM が有効な間、カート要素を見つけられない場合があります。
これらの統合についてストアの動作をテストする必要がある場合は、一時的に無効にできます: Cart Editor を開き、Settings → Cart settings に移動し、Advanced Settings を展開して、Render cart in shadow DOM のチェックを外します。