> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Upcart のアップセルモジュール V1.0 でカルーセル矢印が表示されない問題の修正

> この記事では、エディタのプレビューには表示されるのに、公開中のストアフロントでカルーセル矢印が表示されない問題の修正方法を説明します。

<div id="overview">
  # 概要
</div>

Upcart のアップセルモジュールでカルーセル矢印が表示されない問題が発生している場合、通常はストアのテーマとの互換性の問題が原因です。

これを解決するには、Upcart のエディタ設定でカスタム HTML を使用したカスタマイズを適用し、矢印を手動で追加できます。

**Upcart でカスタムコードフィールドにアクセスするには：**

**Cart Editor** > **Settings**、次に **Custom HTML** タブと **Custom CSS** タブを開きます。Settings はタブが横一列に並んだ形式で、収まらないものは **More settings** の中にあります。

***

<div id="html">
  ## HTML
</div>

この修正では、HTML のドロップダウンメニューを開いて **「Scripts (before load)」** を選択し、そのセクションに以下のコードを貼り付けます：

```
<script>
  window.upcartSubscribeCartOpened(() => {
    setTimeout(() => {
      // The cart may render inside a shadow root, where document.querySelector
      // cannot reach it. Search the shadow root when there is one.
      const host = document.getElementById('upCart');
      const scope = host?.shadowRoot ?? document;

      const buttonLeft = scope.querySelector('.control-arrow.control-prev');
      if (buttonLeft) buttonLeft.innerText = "<";

      const buttonRight = scope.querySelector('.control-arrow.control-next');
      if (buttonRight) buttonRight.innerText = ">";
    }, 300);
  });
</script>
```

<Warning>
  **ここで素の `document.querySelector` を使用しないでください。** ほとんどのストアでは Upcart は Shadow Root 内にレンダリングされ（新しいインストールではこれがデフォルトです）、`document.querySelector` はその内部を参照できません。スクリプトは何も見つけられず、`if` によるガードがなければ `null` でエラーを投げます。上記の `host?.shadowRoot ?? document` の行は、どちらの場合でも機能します。
</Warning>

<Note>
  **レガシーに関する注意：** `window.upcartOnCartOpened` のコールバックは引き続き動作しますが、非推奨であり、コンソールに警告が記録されます。新しいスクリプトにはすべて `upcartSubscribeCartOpened` を使用してください。
</Note>

Upcart のカスタム HTML 設定は次のようになります：

<img src="https://mintcdn.com/aftersell/uVGuDiyXpd6WOLO4/images/upcart/upsell-carousel-arrows-custom-html-script.gif?s=56a99321312a0b59c77d3ce059a72dbb" alt="Scripts Before Load にカルーセル矢印スクリプトが入力された Upcart のカスタム HTML 設定" width="2052" height="1080" data-path="images/upcart/upsell-carousel-arrows-custom-html-script.gif" />

<div id="css">
  ## CSS
</div>

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

```
.carousel.carousel-slider .control-next {  
  right: -34px !important;  
}
```

***

<div id="explanation">
  ## 解説
</div>

カルーセル矢印の表示には、ボタン内に含まれる CSS 疑似要素（`::before`）を使用することがよくあります。しかし、一部のストアテーマは疑似要素のレンダリングをブロックするため、カルーセル矢印がカートドロワーから消えてしまいます。

これにより、アップセルカルーセルの矢印がエディタのプレビューでは正しく表示されるのに、実際の公開中ストアフロントでは表示されないという問題が発生します。