> ## 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.

# カートでのアップセルのみの購入を防止する

> チェックアウト前に、顧客が少なくとも 1 つの通常商品を追加することを必須にします。

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

このカスタマイズは、HTML、CSS、JavaScript を使用して、カートにアップセルアイテムしか入っていない場合にチェックアウトをブロックします。アップセルが単独の購入対象ではなく、あくまで付随的なオファーとして扱われるようにし、より統制された意図的なアップセル戦略をサポートします。

これにより、アップセル商品が特定の境界内で機能するようになり、主要商品の補完アイテムとしての役割が強調されます。

実装すると、アップセル以外の商品が少なくとも 1 つカートに追加されるまで、**チェックアウトボタンが無効になります**。

<div id="how-it-works">
  ## 仕組み
</div>

* カートにアップセルアイテムしか入っていない場合、チェックアウトボタンがグレーアウトされます
* ボタンの下に警告メッセージが表示されます
* 通常商品が追加されると、ボタンが有効になり警告が消えます - アップセル商品が関連するトリガー商品と一緒にのみ購入されるように、対象を絞った警告メッセージを表示するなど、シナリオに対する明確な検証を提供します。

このセットアップは、JavaScript と CSS の基本知識を持つストアオーナーや開発者に最適です。

<div id="step-1-add-custom-html">
  ## ステップ 1: カスタム HTML を追加する
</div>

次の場所に移動します:\
**Upcart > Cart Editor > Settings > Custom HTML**

<div id="in-the-above-announcementsrewards-section-paste">
  ## **Above announcements/rewards** セクションに以下を貼り付けます:
</div>

```
<script>  
  function CartContainsOnlyUpsells(cart) {  
    var cartWithoutUpsells = cart.items.filter(item => item.properties?.__upcartUpsell == null);  
    return cartWithoutUpsells.length === 0;  
  }  
  
  function ToggleCheckoutButton(shouldBeEnabled) {  
    var checkoutButton = window.upcartDocumentOrShadowRoot.querySelector(".upcart-checkout-button");  
    var warning = window.upcartDocumentOrShadowRoot.querySelector(".upcartUpsellOnlyWarning");  
  
    if (checkoutButton && warning) {  
      if (shouldBeEnabled) {  
        checkoutButton.classList.remove("upcart-disable-checkout-button");  
        warning.style.display = "none";  
      } else {  
        checkoutButton.classList.add("upcart-disable-checkout-button");  
        warning.style.display = "block";  
      }  
    }  
  }  
  
  window.upcartSubscribeCartLoaded((event) => {  
    ToggleCheckoutButton(!CartContainsOnlyUpsells(event.cart));  
  });  
</script>
```

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

<div id="in-the-below-checkout-button-section-paste">
  ## **Below checkout button** セクションに以下を貼り付けます:
</div>

```
<div class="upcartUpsellOnlyWarning" style="display: none;">  
  Your cart only contains upsell products. <br>  
  Please add a regular product to continue to checkout.  
</div>
```

警告メッセージの文言は、ブランドのトーンに合わせて自由に調整してください。

<div id="step-2-add-custom-css">
  ## ステップ 2: カスタム CSS を追加する
</div>

次の場所に移動します:\
**Upcart > Cart Editor > Settings > Custom CSS**

次のコードを貼り付けます:

```
.upcartUpsellOnlyWarning {  
  width: 100%;  
  text-align: center;  
  margin-top: 10px;  
  color: red;  
  font-weight: bold;  
  font-size: 15px;  
}  
  
.upcart-disable-checkout-button {  
  cursor: none !important;  
  pointer-events: none !important;  
  opacity: 0.4 !important;  
}
```

これにより、警告メッセージのスタイルが設定され、チェックアウトボタンが視覚的にも機能的にも無効になります。

<div id="final-result">
  ## 最終結果
</div>

セットアップが完了すると:

* アップセル以外の商品が少なくとも 1 つカートに入っていない限り、チェックアウトがブロックされます
* チェックアウトが無効になっている理由を顧客にメッセージで伝えます
* スムーズでブランドに合った体験になります

これは特に次のような場合に役立ちます: 効果的なアップセル戦略とこれらのテクニックを組み合わせることで、購入プロセスにおける不要な競合を排除し、顧客の全体的なショッピング体験も向上します。

* 誤ったアップセル単品購入の防止
* アップセルをアドオン専用商品として維持
* AOV と商品バンドルのより優れた管理

<div id="still-need-help">
  ## まだサポートが必要ですか?
</div>

カスタマイズに関するサポートが必要な場合は、cart drawer への HTML、CSS、さらには JavaScript の追加について、Shopify エキスパートに相談することをおすすめします。

[Shopify エキスパートを見る](https://www.shopify.com/partners/directory)