Panier d'achat Digistore24 : plusieurs Produits - un seul paiement – Centre d'aide Digistore24

Le panier d'achat Digistore24 est une fonctionnalité utile si vous proposez plusieurs produits sur votre page de vente.

Avec le panier d'achat, les clients peuvent d'abord sélectionner et « collecter » tous les produits qui les intéressent, puis finaliser l'achat lors d'un paiement unique groupé.

Cela présente des avantages pour vos clients :

Simplicité : sélectionnez d'abord tout, puis payez en une seule étape, au lieu de devoir passer par plusieurs processus de paiement séparés.
Clarté : voyez tous les produits sélectionnés en un coup d'œil lors du paiement.

Cela présente également des avantages pour vous :

Un processus d'achat plus simple pour plusieurs produits peut réduire les frictions et entraîner davantage d'achats finalisés (conversion plus élevée).
Vous pouvez placer stratégiquement des produits associés sur votre page de vente, que les clients peuvent facilement ajouter à leur achat.

Vous intégrez le panier d'achat Digistore24 sur votre page de vente. Il existe différentes options (JavaScript ou via le plugin WordPress Digistore24) et vous pouvez configurer le panier d'achat de manière détaillée si nécessaire. Cet article vous montre comment procéder.

Comment fonctionne l'achat avec le panier d'achat

Une fois le panier d'achat Digistore24 intégré sur votre page de vente, le flux d'achat pour vos clients fonctionne ainsi :

Le client ouvre votre page de vente.
Le client clique sur le bouton Acheter d'un produit.
Le produit est ajouté au panier d'achat. Juste après, le client voit une courte confirmation qui inclut :
- Une note indiquant que le produit a été ajouté au panier d'achat
- Le sous-total et le nombre de produits sélectionnés
- Un bouton Continuer vos achats
- Un bouton Aller au paiement
Facultatif : le client ouvre le panier d'achat sur votre page.
Vous pouvez ajouter un lien ou un bouton qui ouvre le panier d'achat sous forme de fenêtre superposée.
Le client passe au paiement.
Lorsqu'il clique sur Aller au paiement, il est redirigé vers le formulaire de commande Digistore24.
Le client paie tout ensemble dans le formulaire de commande.
Tous les produits sélectionnés y sont listés, et le client finalise l'achat en une seule étape.

Ajouter le panier d'achat Digistore24 à votre page de vente

Pour permettre à vos clients d'utiliser le panier d'achat Digistore24, vous devez l'ajouter une fois à votre page de vente. Selon votre site web, il existe deux façons de procéder : soit avec un petit extrait JavaScript, soit, si vous utilisez WordPress, avec le plugin WordPress Digistore24 et un shortcode.

Intégrer le panier d'achat

Pour rendre le panier d'achat disponible sur votre page de vente, vous devez l'intégrer une fois.

Sélectionnez l'une des options suivantes :

Intégrer le panier d'achat via JavaScript

Ajoutez ce code au code source de votre page de vente (par exemple dans la zone où d'autres scripts sont intégrés).

<script src="https://www.digistore24-scripts.com/service/digistore.js"></script> <script> digistoreCart("theme=v2"); </script>
Enregistrez / publiez la page.

Le panier d'achat est maintenant intégré à votre page et peut être utilisé.

Intégrer le panier d'achat via WordPress (plugin + shortcode)

Exigence : le shortcode ne fonctionne qu'avec WordPress et le plugin Digistore24 (version 2.17 ou supérieure).

Installez le plugin Digistore24 (si ce n'est pas déjà fait).
Ouvrez la page qui contient votre page de vente dans l'éditeur WordPress.
Insérez le shortcode à un emplacement approprié.

[digistore_cart theme=v2]
Enregistrez / mettez à jour la page.

Le panier d'achat est maintenant intégré à votre page WordPress et peut être utilisé.

Lier les boutons d'achat afin que les produits arrivent dans le panier d'achat

Pour qu'un produit arrive dans le panier d'achat lorsque le client clique sur Acheter, votre bouton d'achat doit renvoyer vers une adresse Digistore24 spécifique. Le client reste sur votre page de vente ; le produit est simplement ajouté au panier d'achat.

Comment ça marche

URL d'achat (principe de base)

L'URL d'achat pour le panier d'achat est :

https://www.digistore24.com/add/PRODUCT-ID

Remplacez PRODUCT-ID par l'ID de votre produit. Vous pouvez le trouver, par exemple, sous Mes produits > Liste des produits dans la ligne du produit.

Important : utilisez uniquement des liens HTML classiques

Utilisez un lien HTML normal pour le bouton d'achat au format suivant :

<a href="LINK">TEXTE-DU-LIEN</a>

Sinon, Digistore24 risque de ne pas reconnaître correctement le bouton d'achat.

Exemples

Exemple : lien texte

<a href="https://www.digistore24.com/add/PRODUCT-ID">Acheter maintenant</a>

Exemple : lien image

<a href="https://www.digistore24.com/add/PRODUCT-ID"><img src="URL-DE-L'IMAGE" /></a>

Ajouter un lien ou un bouton de panier d'achat

Pour que vos clients puissent toujours voir ce qui se trouve déjà dans le panier d'achat, vous devez ajouter un lien vers le panier d'achat ou un bouton de panier d'achat à votre page de vente. Cela permet au client d'ouvrir le panier d'achat puis de finaliser l'achat.

Comment ça marche

URL du panier d'achat

https://www.digistore24.com/cart

Exemples

Exemple : lien texte

<a href="https://www.digistore24.com/cart">Afficher le panier d'achat</a>

Exemple : lien image

<a href="https://www.digistore24.com/cart"><img src="URL-DE-L'IMAGE" /></a>

Facultatif : lien direct vers le paiement

Si vous le souhaitez, vous pouvez également ajouter un lien direct vers le paiement. Cela permet au client de passer directement au formulaire de commande.

https://www.digistore24.com/checkout

Exemple : lien texte

<a href="https://www.digistore24.com/checkout">Aller au paiement</a>

Exemple : lien image

<a href="https://www.digistore24.com/checkout"><img src="URL-DE-L'IMAGE" /></a>

Définir le paiement : standard ou votre propre domaine

Dans la plupart des cas, le paiement sur Digistore24 est suffisant. Pour certaines configurations de suivi, il peut être utile d'utiliser le paiement sur votre propre domaine.

Paiement sur Digistore24 (standard)

Avec l'option standard, vous n'avez rien d'autre à faire. Lorsqu'un client clique sur Aller au paiement dans le panier d'achat, il est redirigé vers le formulaire de commande Digistore24.

Facultatif : définir un formulaire de commande spécifique (orderform_id)

Si vous souhaitez utiliser un formulaire de commande spécifique, vous pouvez indiquer son ID dans le code d'intégration du panier d'achat. Remplacez 4321 par l'ID de votre formulaire de commande.

JavaScript

<script src="https://www.digistore24-scripts.com/service/digistore.js"></script> <script> digistoreCart("theme=v2 orderform_id=4321"); </script>

Shortcode WordPress

[digistore_cart theme=v2 orderform_id=4321]

Paiement sur votre propre domaine (p. ex. suivi / iOS)

Si vous souhaitez intégrer le paiement sur votre propre domaine (par exemple pour certaines configurations de suivi comme les publicités Facebook avec des appareils iOS), suivez ces trois étapes :

Comment ça marche

Intégrer le paiement sur votre domaine
Ajoutez l'un des extraits de code suivants à votre page de paiement (sur votre domaine) :
- JavaScript
  
  <style> body { margin:0; } </style> <script src='https://www.digistore24.com/service/js/orderform_widget.js'></script> <iframe class='ds24_payIFrame' style='overflow: hidden; width: 100%; height: 100%; border: none; margin:0; padding: 0; background: transparent;' src='https://www.digistore24.com/checkout?iframe=1'></iframe>
- Shortcode WordPress
  
  [digistore_cart_checkout]
Indiquer l'URL de votre paiement au panier d'achat
Transmettez l'URL de votre propre page de paiement dans le code d'intégration du panier d'achat.
- JavaScript
  
  <script src="https://www.digistore24-scripts.com/service/digistore.js"></script> <script> digistoreCart("theme=v2 checkout_url=https://www.mydomain.com/my-checkout_url"); </script>
- Shortcode WordPress
  
  [digistore_cart theme=v2 checkout_url=https://www.mydomain.com/my-checkout_url]

Remplacer le placeholder
Remplacez https://www.mydomain.com/my-checkout_url par l'URL de votre page de paiement de l'étape 1.

Remarque

Vous pouvez spécifier l'URL de paiement et le formulaire de commande en même temps :

JavaScript

<script src="https://www.digistore24-scripts.com/service/digistore.js"></script> <script> digistoreCart("theme=v2 orderform_id=4321 checkout_url=https://www.mydomain.com/my-checkout_url"); </script>

Shortcode WordPress

[digistore_cart theme=v2 orderform_id=4321 checkout_url=https://www.mydomain.com/my-checkout_url]

Paramètres et configuration du panier d'achat Digistore24

Vous pouvez personnaliser le comportement du panier d'achat Digistore24 à l'aide d'options supplémentaires, par exemple la langue, l'affichage de la TVA ou la destination après l'achat. Il vous suffit d'ajouter les options au code ou au shortcode que vous utilisez déjà pour le panier d'achat.

Par défaut dans cet article : tous les exemples utilisent theme=v2. Si vous souhaitez utiliser des paramètres supplémentaires, ajoutez-les simplement à la suite.

Comment ajouter des paramètres (principe de base)

JavaScript

digistoreCart("theme=v2 OPTION1 OPTION2");

WordPress

[digistore_cart theme=v2 OPTION1 OPTION2]

Exemple

digistoreCart("theme=v2 language=en netto");
[digistore_cart theme=v2 language=en netto]

Paramètres courants (recommandés)

Ces options sont les plus utilisées. Vous pouvez les combiner selon vos besoins.

Langue

Définir la langue du panier d'achat.

language=de (allemand)
language=en (anglais)

Exemple :
digistoreCart("theme=v2 language=en");
[digistore_cart theme=v2 language=en]

Prix incluant ou excluant la TVA

brutto - prix incluant la TVA
netto - prix sous forme de prix nets plus TVA

Exemple :
digistoreCart("theme=v2 brutto");
[digistore_cart theme=v2 brutto]

Après l'achat / retour à votre page

thankyou_url=https://xyz - page de destination après l'achat
return_url=https://xyz - destination lorsque l'acheteur clique sur « Continuer vos achats » dans le formulaire de commande
no_return_button - masque « Continuer vos achats » dans le formulaire de commande

Bon d’achat et suivi

voucher=some_voucher_code - ajoute un code du bon
tracking='Your tracking key' - ajoute une clé de suivi à l'achat
Remarque : si votre clé de suivi contient des espaces, utilisez des guillemets.

Comportement du paiement

orderform_id=4321 - utilise un formulaire de commande spécifique
orderform_as_popup - ouvre le formulaire de commande dans une nouvelle fenêtre

Contrôler les offres additionnelles (avec exemples)

Avec upsell=..., vous définissez si et comment les offres additionnelles sont affichées pendant le processus de commande.

Variantes courantes

upsell=any - Digistore24 sélectionne les offres additionnelles du premier produit du panier d'achat qui comporte des offres additionnelles (par défaut)
upsell=none - désactive complètement les offres additionnelles
upsell=first - affiche uniquement les offres additionnelles du premier produit du panier d'achat
upsell=1234 - affiche les offres additionnelles du produit 1234 après l'achat initial

Règles d'ordre (exemples)

Vous pouvez spécifier plusieurs ID de produits dans un ordre. Digistore24 vérifie ensuite quels produits se trouvent dans le panier d'achat, dans l'ordre où vous les listez.

upsell=12,34,56,78,12 - vérifie si les produits 12/34/56/78 se trouvent dans le panier d'achat (voir la logique existante pour plus de détails)
upsell=123,any,456 - privilégie 123, sinon n'importe quel autre produit du panier d'achat, sinon 456
upsell=123,456,none - privilégie 123, sinon 456, sinon aucune offre additionnelle

Exemple :
digistoreCart("theme=v2 upsell=none");
[digistore_cart theme=v2 upsell=none]

Pour les développeurs : afficher des valeurs et utiliser des événements

Ces options sont utiles si vous souhaitez intégrer le panier d'achat plus en profondeur dans votre page (par exemple, afficher la valeur du panier d'achat ou réagir aux changements).

Afficher le total du panier d'achat sur votre page

show_total_amount=some_name affiche le total du panier d'achat dans un élément HTML avec l'ID ou la classe CSS spécifié(e) (ou le nom correspondant).

Exemple :
digistoreCart("theme=v2 show_total_amount=total_amount");
[digistore_cart theme=v2 show_total_amount=total_amount]

Afficher les articles du panier d'achat sur votre page

show_cart_items=some_name affiche le contenu du panier d'achat dans un élément HTML avec l'ID ou la classe CSS spécifié(e) (ou le nom correspondant).

Exemple :
digistoreCart("theme=v2 show_cart_items=cart_items");
[digistore_cart theme=v2 show_cart_items=cart_items]

Réagir aux changements

on_cart_change=some_js_function appelle une fonction JavaScript chaque fois que le panier d'achat change. La fonction reçoit un objet cart (incluant les montants bruts/nets, la devise et les articles).

Gérer les messages personnalisés

on_message=some_alert_function appelle une fonction JavaScript lorsqu'un message doit être affiché à l'utilisateur. msg_type est error, warning ou info.

Tous les paramètres (tableau de référence)

Ce tableau liste toutes les options disponibles à titre de référence. (Les exemples de cet article utilisent theme=v2 par défaut.)

Option	Explication
`info_position`	Définit où le message d'information « Ajouté au panier d'achat » est affiché. `top` (par défaut) - tout en haut de la fenêtre du navigateur `bottom` - tout en bas de la fenêtre du navigateur Nombre (p. ex. `50`) - ce nombre de pixels sous le bord supérieur de la fenêtre du navigateur
`info_sticky`	Si spécifié, le résumé du panier d'achat est toujours affiché et « épinglé » au bord de la fenêtre.
`brutto`	Les prix dans le panier d'achat sont affichés TVA incluse. Si ce n'est pas explicitement défini, le paramètre du premier produit dans le panier d'achat est utilisé comme valeur par défaut pour tous les produits supplémentaires.
`netto`	Les prix dans le panier d'achat sont affichés sous forme de prix nets plus TVA. Si ce n'est pas explicitement défini, le paramètre du premier produit dans le panier d'achat est utilisé comme valeur par défaut pour tous les produits supplémentaires.
`orderform_id=4321`	Sélectionne le formulaire de commande affiché après que le client a cliqué sur « Aller au paiement ». Si ce n'est pas explicitement défini, le paramètre du premier produit dans le panier d'achat est utilisé comme valeur par défaut pour tous les produits supplémentaires.
`checkout_url=https://xyz`	Définit l'URL de paiement utilisée (par exemple si vous avez intégré le paiement sur votre propre domaine).
`return_url=https://xyz`	Définit où l'acheteur est redirigé lorsqu'il clique sur « Continuer vos achats » dans le formulaire de commande. La valeur par défaut est le référent HTTP (c'est-à-dire la page visitée le plus récemment).
`thankyou_url=https://xyz`	Après l'achat, l'acheteur est redirigé vers cette page.
`no_return_button`	Masque le lien « Continuer vos achats » dans le formulaire de commande.
`currency_symbol`	Affiche le symbole de la devise sur le formulaire de commande au lieu du code de devise (p. ex. EUR → €).
`currency=USD`	Utilise la devise spécifiée dans le panier d'achat (p. ex. EUR ou USD).
`upsell=XXX`	Définit si et comment les offres additionnelles sont affichées pendant le processus de commande (voir les variantes ci-dessous).
`upsell=any`	Digistore24 sélectionne les offres additionnelles du premier produit du panier d'achat qui comporte des offres additionnelles. (Par défaut)
`upsell=1234`	Affiche les offres additionnelles du produit 1234 après l'achat initial.
`upsell=12,34,56,78,12`	Vérifie la liste dans l'ordre : si le produit 12 se trouve dans le panier d'achat, ses offres additionnelles sont affichées. Sinon 34, sinon 56, sinon 78. Si aucun de ces produits ne se trouve dans le panier d'achat, les offres additionnelles du dernier ID de produit de la liste sont affichées (ici : 12 ; les doublons sont possibles mais non recommandés).
`upsell=123,any,456`	Affiche les offres additionnelles du produit 123 s'il se trouve dans le panier d'achat ; sinon les offres additionnelles de n'importe quel autre produit du panier d'achat (si disponibles) ; sinon les offres additionnelles du produit 456 (même si 456 ne se trouve pas dans le panier d'achat).
`upsell=123,456,none`	Affiche les offres additionnelles du produit 123 s'il se trouve dans le panier d'achat ; sinon les offres additionnelles du produit 456 s'il se trouve dans le panier d'achat ; sinon aucune offre additionnelle et l'acheteur est redirigé directement vers la page de remerciement.
`upsell=none`	Désactive complètement les offres additionnelles, indépendamment du fait que les produits du panier d'achat comportent des offres additionnelles.
`upsell=first`	Affiche uniquement les offres additionnelles du premier produit du panier d'achat. C'est le comportement par défaut pour les ventes qui n'utilisent pas de panier d'achat.
`language=en`	Passe la langue en anglais. Par défaut, la langue du premier produit ajouté au panier d'achat est utilisée. Langues disponibles : `en` et `de`.
`orderform_as_popup`	Lorsque l'acheteur clique sur « Aller au paiement », le formulaire de commande Digistore24 s'ouvre dans une nouvelle fenêtre.
`tracking=your_tracking_key` `tracking='Your tracking key'`	Ajoute la clé de suivi spécifiée à l'achat (comme le paramètre GET ds24tr). Si la clé de suivi contient des espaces, utilisez des guillemets (p. ex. `tracking='my key'`).
`quantity_readonly`	La quantité ne peut pas être modifiée dans le formulaire de commande, et les produits ne peuvent pas être supprimés.
`show_total_amount=some_name`	Affiche le total du panier d'achat dans l'élément HTML avec l'ID ou la classe CSS spécifié(e) (ou le nom). Lorsque le panier d'achat change, le montant se met à jour automatiquement.
`afficher_articles_panier=un_nom`	Affiche le contenu du panier d'achat dans l'élément HTML avec l'ID ou la classe CSS spécifié(e) (ou le nom).
`on_cart_change=some_js_function`	Appelle la fonction JavaScript `some_js_function(cart)` chaque fois que le panier d'achat change. cart inclut (entre autres) : `gross_amount`, `net_amount` `gross_amount_msg`, `net_amount_msg` `monnaie` `items` (tableau), chaque article inclut (entre autres) : `product_id`, `gross_amount`, `vat_amount`, `can_show_price`, `max_quantity`, `quantity`, `is_quantity_readonly`
`on_message=some_alert_function`	Appelle la fonction JavaScript `some_alert_function(msg_type, msg_text)` lorsqu'un message doit être affiché. `msg_type` est `error`, `warning` ou `info`.
`voucher=code_promotionnel`	Ajoute le code du bon à la commande. Le code est appliqué (à condition qu'il soit valide pour le premier produit acheté).
`theme=v2` `theme=modern` `theme=classic`	Sélectionne un thème pour le panier d'achat. Dans cet article, nous utilisons `theme=v2` par défaut. (Pour le thème classique, définissez `theme=classic` ; sinon `theme=modern`.)

Remarque

Si un paramètre n'est pas explicitement défini dans le code ou le shortcode, le paramètre du premier produit dans le panier d'achat est utilisé comme valeur par défaut pour tous les produits supplémentaires.

Exemple :

[digistore_cart theme=v2 language=en netto tracking="campaign 1"]

Astuces et conseils pour le panier d'achats Digistore24

Voici quelques conseils pratiques issus d'une utilisation réelle.

Astuce 1 : Aligner les plans de paiement de vos produits

Si vous vendez des produits via abonnement ou paiements échelonnés, vous devez utiliser les mêmes intervalles de facturation pour tous les produits chaque fois que possible (p. ex. mensuel ou annuel). Cela entraîne moins de prélèvements individuels pour l'acheteur et garde le processus de paiement clair.

Vous pouvez mélanger des paiements uniques avec des produits par abonnement et paiement échelonné. Digistore24 propose ensuite à l'acheteur l'intervalle de facturation qui convient à tous les produits sélectionnés.

Exemple

Produit 1 : paiement annuel et paiement mensuel
Produit 2 : paiement annuel et paiement sur deux ans
Produit 3 : paiement unique uniquement

Résultat : l'acheteur ne peut payer qu'avec des paiements annuels (car c'est le dénominateur commun).

Si vos produits ont des périodes d'essai, la période d'essai la plus courte parmi les produits sélectionnés est utilisée. Et pour garantir que les prélèvements concordent, vous devez également décider de manière cohérente pour tous les produits (y compris les paiements uniques) si la TVA est incluse dans le prix ou non.

Vous pouvez configurer les deux dans Digistore24 sous Mes produits > Liste des produits, dans les détails du produit, dans l'onglet « Plans de paiement ».

Astuce 2 (pour les concepteurs web) : garder les fenêtres visibles en permanence

Si votre concepteur web doit ajuster l'apparence du panier d'achat, il est utile que les fenêtres du panier d'achat restent visibles en permanence. Cela les rend plus faciles à styliser et à tester.

Ajoutez le paramètre ?ds24debug à l'URL de la page où le panier d'achat est intégré.

Exemple

https://www.domain.com?ds24debug

Astuce 3 (pour les développeurs web) : ajouter des produits via JavaScript

Si vous souhaitez rendre votre page plus flexible (p. ex. boutons personnalisés, listes de produits dynamiques), vous pouvez également ajouter des produits au panier d'achat directement via JavaScript.

Ajouter des produits

ds24cart_add(123) - ajoute le produit 123 au panier d'achat
ds24cart_add(123, 3) - ajoute le produit 123 au panier d'achat trois fois

Afficher le panier d'achat

Utilisez ds24cart_show(button) pour ouvrir le panier d'achat.

Exemple

<button onclick="return ds24cart_show(this);">Afficher le panier d'achat</button>