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

# Empêcher les achats composés uniquement de ventes incitatives dans le panier

> Exigez que les clients ajoutent au moins un produit régulier avant de passer au paiement.

<div id="overview">
  # **Aperçu**
</div>

Cette personnalisation utilise du HTML, du CSS et du JavaScript pour bloquer le paiement lorsque le panier ne contient que des articles de vente incitative. Elle permet de garantir que les ventes incitatives soient traitées comme des offres secondaires et non comme des achats autonomes, en soutenant une stratégie de vente incitative plus contrôlée et intentionnelle.

Cela garantit que les produits de vente incitative fonctionnent dans des limites spécifiques, en soulignant leur rôle d'articles complémentaires aux produits principaux.

Une fois implémenté, le **bouton de paiement sera désactivé** jusqu'à ce qu'au moins un produit non incitatif soit ajouté au panier.

<div id="how-it-works">
  ## Comment ça fonctionne
</div>

* Si le panier ne contient que des articles de vente incitative, le bouton de paiement est grisé
* Un message d'avertissement apparaît sous le bouton
* Une fois qu'un produit régulier est ajouté, le bouton devient actif et l'avertissement disparaît — Fournit une validation claire pour les scénarios garantissant que les produits de vente incitative ne sont achetés qu'avec les produits déclencheurs associés, par exemple en affichant des messages d'avertissement ciblés.

Cette configuration est idéale pour les propriétaires de boutiques ou les développeurs ayant des connaissances de base en JavaScript et CSS.

<div id="step-1-add-custom-html">
  ## Étape 1 : Ajouter du HTML personnalisé
</div>

Allez dans :\
**Upcart > Cart Editor > Settings > Custom HTML**

<div id="in-the-above-announcementsrewards-section-paste">
  ## Dans la section **Above announcements/rewards**, collez :
</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>
  **Remarque sur l'API héritée :** les rappels `window.upcartOnCartLoaded` fonctionnent toujours mais sont obsolètes et affichent des avertissements dans la console. Utilisez `upcartSubscribeCartLoaded` pour tous les nouveaux scripts.
</Note>

<div id="in-the-below-checkout-button-section-paste">
  ## Dans la section **Below checkout button**, collez :
</div>

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

N'hésitez pas à ajuster la formulation du message d'avertissement pour correspondre au ton de votre marque.

<div id="step-2-add-custom-css">
  ## Étape 2 : Ajouter du CSS personnalisé
</div>

Allez dans :\
**Upcart > Cart Editor > Settings > Custom CSS**

Collez le code suivant :

```
.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;  
}
```

Cela met en forme le message d'avertissement et désactive le bouton de paiement visuellement et fonctionnellement.

<div id="final-result">
  ## Résultat final
</div>

Une fois configuré :

* Le paiement est bloqué à moins qu'au moins un produit non incitatif ne se trouve dans le panier
* Un message informe les clients de la raison pour laquelle le paiement est désactivé
* L'expérience reste fluide et cohérente avec votre marque

C'est particulièrement utile pour : associer des stratégies de vente incitative efficaces à ces techniques améliore également l'expérience d'achat globale du client en éliminant les conflits inutiles dans le processus d'achat.

* Empêcher les achats accidentels d'un seul article de vente incitative
* Maintenir les ventes incitatives en tant que produits complémentaires uniquement
* Assurer un meilleur contrôle du panier moyen (AOV) et du regroupement de produits

<div id="still-need-help">
  ## Besoin d'aide supplémentaire ?
</div>

Si vous avez besoin d'aide pour les personnalisations, nous vous recommandons de consulter un expert Shopify pour l'ajout de HTML, CSS et même de JavaScript à votre tiroir de panier.

[Voir les experts Shopify](https://www.shopify.com/partners/directory)