Ajouter un panier à un site Web personnalisé

Vous pouvez ajouter une icône de panier sur votre site Web personnalisé à l'aide de l'extension de la boutique Panier supplémentaire. L'icône permet à vos clients de voir combien d'articles ils ont ajouté à leur commande et de passer à la commande.

Vous pouvez également changer l'apparence et l'apparence de l'icône par défaut du panier, définir sa position sur la page, appliquer la redirection vers une page personnalisée ou des effets animés au moyen de paramètres spéciaux qui sont ajoutés au code d'intégration. La combinaison de plusieurs paramètres dans un seul code d’intégration permet de créer l’icône de panier qui correspond le mieux à la conception de votre site Web.

Ajouter un panier par défaut

Si votre boutique Ecwid est ajoutée à un site Web personnalisé, vous pouvez ajouter un panier en utilisant un petit bout de code. Vous devrez copier et coller ce code sur votre site Web.

Pour ajouter un panier à un site Web personnalisé :

1. À partir de l'interface d'administration d'Ecwid, accédez à Canaux de vente.
2. Dans la section « Vendre sur votre site Web », cliquez sur le bloc Personnaliser le site Web.
3. Faites défiler vers Extensions de boutique → Panier supplémentaire.
4. Cliquez sur Ajouter un panier et le code du panier sera copié dans votre presse-papiers :
   
5. Connectez-vous à la zone d'administration de votre site Web et ouvrez la page où vous voulez afficher le panier.
6. Collez le code du panier copié dans le code source de la page. Selon la plateforme que vous utilisez, cela peut être HTML, onglet source ou un bouton séparé pour ajouter des codes. Si vous ne savez pas comment ajouter un code personnalisé à votre site Web, veuillez contacter votre développeur pour des instructions plus détaillées.
7. Enregistrez et publiez les modifications.

Une fois que vous avez enregistré et publié, une icône de panier apparaîtra sur votre site Web.

Modifier la disposition du panier

Vous pouvez modifier la disposition par défaut du panier en ajoutant le paramètre data-layout au conteneur « ec-cart-widget » dans le code d'intégration, comme indiqué dans l'exemple ci-dessous :

<div data-layout="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

où :
VALUE est une des valeurs prises en charge pour le paramètre de mise en page des données ;
STORE_ID est l'ID de votre boutique Ecwid.

Vous pouvez trouver les valeurs prises en charge et voir à quoi ressemble chaque mise en page dans le tableau ci-dessous.

Valeur	Mise en page
SMALL_ICON
SMALL_ICON_COUNTER
COUNTER_ONLY
TITLE_COUNTER
MEDIUM_ICON_COUNTER
MEDIUM_ICON_TITLE_COUNTER
BIG_ICON_TITLE_SUBTOTAL
BIG_ICON_DETAILS_SUBTOTAL

Afficher ou masquer un panier vide

Vous pouvez afficher ou masquer le panier quand il est vide au moyen du paramètre data-show-videty-cart spécifié pour le conteneur « ec-cart-widget » dans le code d'intégration, comme indiqué dans l'exemple ci-dessous :

<div data-show-empty-cart="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code"
charset="utf-8"data-fixed="TRUE"></script><script>Ecwid.init();</script></div>

où :
VALUE est soit TRUE ou FALSE ;
STORE_ID est l'ID de votre boutique Ecwid.

Modifier l'icône du panier

Vous pouvez changer l'icône du panier par défaut en ajoutant le paramètre data-icon au conteneur « ec-cart-widget » dans le code d'intégration, comme indiqué dans l'exemple ci-dessous :

<div data-icon="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

où :
VALUE est une des valeurs prises en charge pour le paramètre d'icône de données ;
STORE_ID est l'ID de votre boutique Ecwid.

Vous pouvez trouver les valeurs prises en charge et voir à quoi ressemble chaque icône dans le tableau ci-dessous.

Valeur	Icône
BAG
CART
BASKET

Modifier la forme de la bordure du panier

Vous pouvez modifier la forme de la bordure autour du panier en ajoutant le paramètre data-fixed-shade au conteneur « ec-cart-widget » dans le code d'intégration, comme indiqué dans l'exemple ci-dessous :

<div data-fixed-shape="VALUE" class="ec-cart-widget"></div>
<div><script data-cfasync="false" type="text/javascript"
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

où :
VALUE est NONE (pas de bordure) /RECT  (bordure rectangle) /PILL (bordure rectangulaire arrondie) ; 
STORE_ID est l'ID de votre boutique Ecwid.

Appliquer une icône de panier personnalisée

Pour utiliser une icône de panier personnalisée sur votre site Web :

1. Téléversez votre image d'icône dans votre hébergement ou dans n'importe quel hébergement d'images où vous pouvez obtenir un lien direct vers l'image. Ou créez une image SVG de votre icône de panier.
2. Utilisez le code suivant pour ajouter un panier à votre site Web :

<div data-custom-icon-url="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

et remplacez : 
VALUEavec soit une URL vers le fichier d'icône personnalisée ou un balisage SVG ; 
STORE_IDavec l'ID de votre boutique Ecwid.

Modifier la position du panier

Vous pouvez changer la position du panier à l'aide de plusieurs paramètres ajoutés au conteneur « ec-cart-widget » dans le code d'intégration.

<div data-fixed="VALUE" 
data-fixed-position="VALUE"
data-fixed-shape="VALUE" 
data-horizontal-indent="VALUE" 
data-vertical-indent="VALUE" class="ec-cart-widget"></div>
<div>
<script data-cfasync="false" type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

où : 
VALUE est une des valeurs prises en charge pour chaque paramètre ; 
STORE_ID est l'ID de votre boutique Ecwid.

Vous pouvez trouver les paramètres qui permettent de modifier la position du panier et leurs valeurs prises en charge dans le tableau ci-dessous.

Afficher ou masquer l'animation du panier

Vous pouvez afficher ou masquer l'effet animé lorsque des articles sont ajoutés au panier à l'aide du paramètre data-show-buy-animation spécifié pour le conteneur « ec-cart-widget » dans le code d'intégration, comme indiqué dans l'exemple ci-dessous :

<div data-show-buy-animation="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

où :
 VALUE est soit TRUE ou FALSE ; 
STORE_ID est l'ID de votre boutique Ecwid.

Utiliser la même apparence de panier sur tous les appareils

Vous pouvez désactiver la réactivité du widget panier pour qu'il soit identique dans les différentes tailles d'écran, bureau et mobile. Pour cela, incluez le paramètre data-responsive dans le conteneur « ec-cart-widget » dans le code d'intégration, comme indiqué dans l'exemple ci-dessous :

<div data-responsive="VALUE" 
class="ec-cart-widget"></div>
<div><script data-cfasync="false" 
type="text/javascript" 
src="https://app.ecwid.com/script.js?STORE_ID&data_platform=code" 
charset="utf-8"></script><script>Ecwid.init();</script></div>

où : 
VALUE est soit TRUE (le panier s'adapte automatiquement à des tailles d'écran différentes) ou FALSE (le panier a la même apparence sur des tailles d'écran différentes) ;
STORE_ID est l'ID de votre boutique Ecwid.