Skip to main content

概要

Upcart のアップセルモジュールでカルーセル矢印が表示されない問題が発生している場合、通常はストアのテーマとの互換性の問題が原因です。 これを解決するには、Upcart のエディタ設定でカスタム HTML を使用したカスタマイズを適用し、矢印を手動で追加できます。 Upcart でカスタムコードフィールドにアクセスするには: Cart Editor > Settings、次に Custom HTML タブと Custom CSS タブを開きます。Settings はタブが横一列に並んだ形式で、収まらないものは More settings の中にあります。

HTML

この修正では、HTML のドロップダウンメニューを開いて 「Scripts (before load)」 を選択し、そのセクションに以下のコードを貼り付けます:
ここで素の document.querySelector を使用しないでください。 ほとんどのストアでは Upcart は Shadow Root 内にレンダリングされ(新しいインストールではこれがデフォルトです)、document.querySelector はその内部を参照できません。スクリプトは何も見つけられず、if によるガードがなければ null でエラーを投げます。上記の host?.shadowRoot ?? document の行は、どちらの場合でも機能します。
レガシーに関する注意: window.upcartOnCartOpened のコールバックは引き続き動作しますが、非推奨であり、コンソールに警告が記録されます。新しいスクリプトにはすべて upcartSubscribeCartOpened を使用してください。
Upcart のカスタム HTML 設定は次のようになります: Scripts Before Load にカルーセル矢印スクリプトが入力された Upcart のカスタム HTML 設定

CSS

カルーセル矢印の位置に引き続き問題がある場合は、次の CSS による修正を適用してみてください:

解説

カルーセル矢印の表示には、ボタン内に含まれる CSS 疑似要素(::before)を使用することがよくあります。しかし、一部のストアテーマは疑似要素のレンダリングをブロックするため、カルーセル矢印がカートドロワーから消えてしまいます。 これにより、アップセルカルーセルの矢印がエディタのプレビューでは正しく表示されるのに、実際の公開中ストアフロントでは表示されないという問題が発生します。