Widget affichage dynamique du panier au survol

De Centre Documentation PowerBoutique
Aller à : navigation, rechercher
Alert.png

Information importante

Ce widget est déjà installé sur les thèmes responsives PowerBoutique. Il n'est donc pas nécessaire de l'installer à nouveau.

Pour savoir si un thème responsive est activé sur votre site, rendez-vous à la fonction "Apparence" > "Modèles de site". Vous devriez voir à l'écran l'exemple ci-dessous :

Theme.png



Qu'est-ce que le widget « Affichage dynamique du panier au survol » ?

Le widget « Affichage dynamique du panier au survol » permet à vos acheteurs de visualiser, au simple survol du mini-panier avec leur souris, le contenu détaillé de leur commande. Leur processus d'achat est ainsi simplifié : ils suivent le contenu de leur commande facilement, sans avoir à cliquer sur le panier pour accéder à la page correspondante. En pratique, ce widget leur permet également de valider le panier et d'accéder directement à la page de choix de livraison (à condition qu'ils soient identifiés sur le site ; si cela n'est pas le cas, le bouton de validation les redirige vers la page d'identification). Il leur est également possible, via ce widget, de gérer le contenu de leur commande, en supprimant directement un article, sans passer par la page panier.

N.B. : le panier dynamique s'affiche dès qu'au moins un article est ajouté au panier.
N.B. : de base le widget apparaitra au survol de la zone votre_selection correspondant à l'id "encart_texte_votre_selection", si vous n'avez pas cet élément sur votre site rendez-vous à la section Changer l'élément sur lequel le panier dynamique apparaît

Voir le site démo

Voir le site démo Exemple du widget « Affichage dynamique du panier au survol »


Caractéristiques

Version minimale requise : PowerBoutique© V4.7.0
Technologies utilisées : HTML / CSS / JS / XSL
Navigateurs compatibles : Firefox.gif Chrome.gif Ie.gif Safari.gif Opera.gif
Versions : Francais.gif   Anglais.gif

Dernières modifications : le 14 mars 2016

La procédure suivante a été conçue pour vous permettre d'installer ce widget de façon autonome.
L'intégration et le fonctionnement de ce widget sont conditionnés aux intitulés des dossiers et des fichiers précisés dans cette procédure. Nous vous recommandons de ne pas les renommer.
N.B. : un widget est une extension technique d'une ou plusieurs fonctionnalités du logiciel PowerBoutique©. Les procédures de mise en place et de personnalisation ne sont pas couvertes par l’Assistance Utilisateurs.

Étapes d'intégration

  • Étape 2
    Via la fonction "Import/Export" > "Espace de stockage", créez un nouveau dossier "panierhover" dans le dossier /site en cliquant sur le bouton "Nouveau dossier".

  • Étape 3
    Via la même page, cliquez sur le nouveau dossier /panierhover, puis sur le bouton "Ajouter" et enfin sur "Parcourir...". Ouvrez un à un les 8 fichiers que vous avez téléchargé dans l'étape 1 et cliquez sur "OK".

  • Étape 4
    Créez un espace promotionnel* via la fonction "Apparence" > "Modèles de site". Sélectionnez, dans le menu déroulant en haut à droite, "site FR" puis cliquez sur le bouton "Personnaliser". Dans l'écran suivant, cliquez sur le bouton "Nouvel espace promotionnel". Positionnez ensuite ce nouvel espace promotionnel le plus bas possible à l'aide du bouton Deplacer code dev.gif (cela n'a pas d'impact sur son affichage). Enregistrez son emplacement en cliquant sur le bouton Enregistrer position des blocs.png. Enfin, activez-le en cliquant sur le bouton Off.gif (qui passera alors en On.gif ).
    N.B. : renouvelez l'étape 4 si vous possédez un site multilingue, en prenant soin de sélectionner "site US" dans la fonction "Apparence" > "Modèles de site".
    N.B. : dans le cas où vous utilisez votre propre gabarit html pour personnaliser l'apparence de votre site, créez votre espace promotionnel via la fonction "Apparence" > "Outils Experts - Web-design" > "Intégration gabarits html" > bouton "Espaces promotionnels", puis éditez-le dans la fonction "Animation" > "Bloc libre - cms". Pour finir, appelez ce nouveau cms dans votre gabarit, le plus bas possible.
    *vous pouvez également utiliser un cms existant.

  • Étape 5
    Insérez ensuite le code de la Version Française dans l'espace promotionnel créé dans la Version Française* à l'aide du bouton Style edit fo.gif. Placez ce code dans l'onglet HTML puis cliquez sur "Enregistrer".
    N.B. : renouvelez l'étape 5 si vous possédez un site multilingue, en prenant soin de copier-coller le code dans l'espace promotionnel créé dans la Version Anglaise cette fois-ci.
    N.B. : l'espace promotionnel contenant ce code doit impérativement être appelé sur toutes vos pages pour que le widget fonctionne sur l'ensemble du site.
    *vous pouvez également insérer le code dans un cms existant.

    Version Française Francais.gif :
    1 <!-- DEBUT - Widget affichage dynamique du panier au survol -->
    2 
    3 <link rel="stylesheet" type="text/css" media="screen" href="../site/panierhover/panierhover_fr.css">
    4 <script type="text/javascript" src="../site/panierhover/panierhover_fr.js"></script>
    5 
    6 <!-- FIN - Widget affichage dynamique du panier au survol -->
    
    Version Anglaise Anglais.gif :
    1 <!-- DEBUT - Widget affichage dynamique du panier au survol -->
    2 
    3 <link rel="stylesheet" type="text/css" media="screen" href="../site/panierhover/panierhover_us.css">
    4 <script type="text/javascript" src="../site/panierhover/panierhover_us.js"></script>
    5 
    6 <!-- FIN - Widget affichage dynamique du panier au survol -->
    

Personnalisation du widget (facultatif)

Il est possible de personnaliser l'apparence de ce widget.

Remarques concernant les extraits de codes :
Les numéros de lignes sont précisés à titre indicatif sur la base des fichiers téléchargés dans l'étape 1 d'intégration. Ces numéros peuvent varier, en fonction des modifications apportées aux fichiers ou du logiciel utilisé pour les éditer.
Les textes entourés de /* ... */ ou <! -- ... --> ou encore // ... // sont des commentaires. Ils sont là pour vous aider dans la compréhension du code. Une partie de code commentée ne sera pas visible sur votre site.

Changer l'élément sur lequel le panier dynamique apparaît
  • 1. Il faut éditer le fichier "panierhover_fr.js" pour la Version Française et le fichier "panierhover_us.js" pour la Version Anglaise.
    Ouvrez ce(s) fichier(s) (que vous avez téléchargé à l'étape 1, pendant l'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ce(s) fichier(s), éditez la dernière version pour ne pas perdre vos modifications précédentes.
    Cherchez la ligne 1 et remplacez l'id "encart_texte_votre_selection" qui correspond à la zone Votre panier.png par l'id d'un autre élément.
    Cherchez la ligne 5 et remplacez encore l'id "encart_texte_votre_selection" par le même id que la ligne 1.

    Enregistrez le(s) fichier(s) (gardez le format .js et le même nom). Retournez à la fonction "Import/Export" > "Espace de stockage". Placez-vous dans le dossier /panierhover, cliquez sur le bouton "Ajouter" puis sur "Parcourir...". Cherchez le(s) fichier(s) que vous venez de modifier, cliquez sur "Ouvrir", et enfin sur "OK".

    Dans l'exemple ci-dessous, en remplaçant l'id "encart_texte_votre_selection" par "lienLogo", on affichera le panier dynamique au survol de la zone contenant le logo :

    Francais.gif
     1 if(document.getElementById("lienLogo") != null){
     2 var hoverpanierxsl = "../site/panierhover/panierhover_fr.xsl";
     3 chargeBlocAjaxWithTransformXSL("./api/api.cfm?object=panier&method=getPanier&randomVar="+ Math.random()+"&code_lg=lg_fr", hoverpanierxsl, "hoverpanier")
     4 }
     5 var votre_selection_hover = document.getElementById('lienLogo');
     6 var divhoverpanier = document.createElement('div');
     7 divhoverpanier.id = 'hoverpanier';
     8 votre_selection_hover.appendChild(divhoverpanier);
     9 
    10 
    11 function getHtmlOutput(){
    12 	var zones = document.querySelectorAll('.HTMLContent');
    13 	for (var i = 0; i < zones.length; i++) {
    14 		var encodedOpen = zones[i].innerHTML.replace(/&lt;/g,"<"); 
    15 		var encoded = encodedOpen.replace(/&gt;/g,">"); 
    16 		document.getElementById(zones[i].id).innerHTML = encoded;
    17 	}
    18 }
    

    Anglais.gif
     1 if(document.getElementById("lienLogo") != null){
     2 var hoverpanierxsl_us = "../site/panierhover/panierhover_us.xsl";
     3 chargeBlocAjaxWithTransformXSL("./api/api.cfm?object=panier&method=getPanier&randomVar="+ Math.random()+"&code_lg=lg_us", hoverpanierxsl_us, "hoverpanier")
     4 }
     5 var votre_selection_hover_us = document.getElementById('lienLogo');
     6 var divhoverpanier_us = document.createElement('div');
     7 divhoverpanier_us.id = 'hoverpanier';
     8 votre_selection_hover_us.appendChild(divhoverpanier_us);
     9 
    10 
    11 function getHtmlOutput(){
    12 	var zones = document.querySelectorAll('.HTMLContent');
    13 	for (var i = 0; i < zones.length; i++) {
    14 		var encodedOpen = zones[i].innerHTML.replace(/&lt;/g,"<"); 
    15 		var encoded = encodedOpen.replace(/&gt;/g,">"); 
    16 		document.getElementById(zones[i].id).innerHTML = encoded;
    17 	}
    18 }
    


  • 2. Il faut également éditer le fichier "panierhover_fr.css" pour la Version Française et le fichier "panierhover_us.css" pour la Version Anglaise.
    Ouvrez ce(s) fichier(s) (que vous avez téléchargé à l'étape 1, pendant l'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ce(s) fichier(s), éditez la dernière version pour ne pas perdre vos modifications précédentes.
    Cherchez, sur la ligne 20, le code "#encart_texte_votre_selection:hover >#hoverpanier{" puis remplacez "encart_texte_votre_selection" par l'id d'un autre élément. Enregistrez le(s) fichier(s) (gardez le format .css et le même nom).
    Retournez à la fonction "Import/Export" > "Espace de stockage". Placez-vous dans le dossier /panierhover, cliquez sur le bouton "Ajouter" puis sur "Parcourir...". Cherchez le(s) fichier(s) que vous venez de modifier, cliquez sur "Ouvrir", et enfin sur "OK".

    Pour continuer notre exemple, nous devons donc remplacer "encart_texte_votre_selection" par "lienLogo" :

    Francais.gif
    20 #lienLogo:hover >#hoverpanier{ /* "#encart_texte_votre_selection:hover >#hoverpanier{" devient "#lienLogo:hover >#hoverpanier{" */
    

    Anglais.gif
    20 #lienLogo:hover >#hoverpanier{ /* "#encart_texte_votre_selection:hover >#hoverpanier{" devient "#lienLogo:hover >#hoverpanier{" */
    

    N.B. : ces deux étapes doivent être impérativement réalisées conjointement pour pouvoir changer l'élément sur lequel le panier s'affiche dynamiquement.
    N.B. : vous pouvez choisir que le widget apparaisse à un endroit x pour la Version Française et à un endroit y pour la Version Anglaise.



Déplacer horizontalement le panier dynamique
  • Il faut éditer le fichier "panierhover_fr.css" pour la Version Française et le fichier "panierhover_us.css" pour la Version Anglaise.
    Ouvrez le(s) fichier(s) (que vous avez téléchargé à l'étape 1, pendant l'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ce(s) fichier(s), éditez la dernière version pour ne pas perdre vos modifications précédentes.
    Cherchez, sur la ligne 4, le code "margin: 1px 0px 0px 0px;" et modifiez la valeur du dernier "0px". Une valeur négative déplacera le panier dynamique vers la gauche, et une valeur positive le déplacera vers la droite. Enregistrez le(s) fichier(s) (gardez le format .css et le même nom).
    Retournez à la fonction "Import/Export" > "Espace de stockage". Placez-vous dans le dossier /panierhover, cliquez sur le bouton "Ajouter" puis sur "Parcourir...". Cherchez le(s) fichier(s) que vous venez de modifier, cliquez sur "Ouvrir", et enfin sur "OK".

    L'exemple ci-dessous déplacera le panier dynamique vers la droite, de 50px :
    4 margin:1px 0px 0px 50px; /* "margin: 1px 0px 0px 0px;" devient "margin:1px 0px 0px 50px;" */
    
    L'exemple ci-dessous déplacera le panier dynamique vers la gauche, de 70px :
    4 margin:1px 0px 0px -70px;  /* "margin:1px 0px 0px 0px;" devient "margin: 1px 0px 0px -70px;" */
    


    N.B. : vous pouvez déplacer indépendamment le panier dynamique de la Version Française de celui de la Version Anglaise.
    N.B. : ce réglage est nécessaire lorsque le Code Dev *votre_selection* est placé a droite de votre template.



Modifier l'icône de suppression d'articles
  • 1. Pour modifier l'icône de suppression d'articles Delete.gif , rendez-vous à la fonction "Import/Export" > "Espace de stockage". Placez-vous dans le dossier /panierhover, cliquez sur le bouton "Ajouter" puis sur "Parcourir...". Cherchez une nouvelle image (elle doit impérativement s'appeler "supprimer_panierb" et doit être de type .gif), cliquez sur "Ouvrir", et enfin sur "OK".
  • 2. La taille de l'image d'origine est de 16px de hauteur par 13px de large. Si votre image possède des dimensions différentes, il faut alors modifier le fichier "panierhover_fr.css" pour la Version Française et le fichier "panierhover_us.css" pour la Version Anglaise.
    Ouvrez ces deux fichiers (que vous avez téléchargé à l'étape 1, pendant l'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ces deux fichiers, éditez les dernières versions pour ne pas perdre vos modifications précédentes.
    Cherchez, sur la ligne 42 de ces deux fichiers, le code "height:16px;width:13px;" et modifiez les valeurs en fonction de la taille de votre nouvelle image. Enregistrez les fichiers (gardez le format .css et les mêmes noms).
    Retournez à la fonction "Import/Export" > "Espace de stockage". Placez-vous dans le dossier /panierhover, cliquez sur le bouton "Ajouter" puis sur "Parcourir...". Cherchez les deux fichiers que vous venez de modifier, cliquez sur "Ouvrir", et enfin sur "OK".

    Pour une image de 20px de hauteur par 30px de largeur, le code sera le suivant dans les deux fichiers :
    42 height:20px;width:30px; /* height est la hauteur de l'image de suppression, width est la largeur de l'image de suppression */
    
    N.B. : ces modifications changeront l'icône de suppression d'articles sur la Version Française et la Version Anglaise.



Éditer le texte des boutons et leur lien
  • Par défaut, ce widget est composé des boutons suivants :

    - "Voir panier" et "Valider votre panier" qui redirigent respectivement vers les pages "panierb.cfm" et "adresse_e_mail.cfm" pour la Version Française.
    - "View cart" et "Order" qui redirigent respectivement vers les pages "panierb.cfm" et "adresse_e_mail.cfm" pour la Version Anglaise.

    Pour modifier le texte de ces boutons et les pages vers lesquelles ils redirigent, il faut éditer le fichier "panierhover_fr.xsl" pour la Version Française et/ou "panierhover_us.xsl" pour la Version Anglaise.
    Ouvrez le(s) fichier(s) (que vous avez téléchargé à l'étape 1, pendant l'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ce(s) fichier(s), éditez la dernière version pour ne pas perdre vos modifications précédentes.
    Cherchez les lignes 13, 14, 15 et 16 et modifiez les textes par défaut. Enregistrez le(s) fichier(s) (gardez le format .xsl et le même nom).
    Retournez à la fonction "Import/Export" > "Espace de stockage". Placez-vous dans le dossier /panierhover, cliquez sur le bouton "Ajouter" puis sur "Parcourir...". Cherchez le(s) fichier(s) que vous venez de modifier, cliquez sur "Ouvrir", et enfin sur "OK".

L'exemple ci-dessous est une modification du fichier "panierhover_fr.xsl" dans lequel on personnalise les boutons de la Version Française :

Francais.gif
13 		<xsl:variable name="voir_panier">Rayon 1</xsl:variable> <!-- Le texte "Voir panier" devient  "Rayon 1"-->
14 		<xsl:variable name="voir_panier_href">rayon-1,fr,2,1.cfm</xsl:variable> <!-- Le lien "panierb.cfm" devient "rayon-1,fr,2,1.cfm" -->
15 		<xsl:variable name="valider_panier">Conditions de ventes</xsl:variable> <!-- Le texte "Valider votre panier" devient "Conditions de ventes" -->
16 		<xsl:variable name="valider_panier_href">conditions-de-ventes,fr,8,4.cfm</xsl:variable> <!-- Le lien "adresse_e_mail.cfm" devient "conditions-de-ventes,fr,8,4.cfm" -->


L'exemple ci-dessous est une modification du fichier "panierhover_us.xsl" dans lequel on personnalise les boutons de la Version Anglaise :

Anglais.gif
13 		<xsl:variable name="view_cart">Best Items</xsl:variable> <!-- Le texte "View cart" devient  "Best Items"-->
14 		<xsl:variable name="view_cart_href">rayon-3,fr,2,31.cfm</xsl:variable> <!-- Le lien "panierb.cfm" devient "rayon-3,fr,2,31.cfm" -->
15 		<xsl:variable name="order_cart">Google</xsl:variable> <!-- Le texte "Order" devient "Google" -->
16 		<xsl:variable name="order_cart_href">http://www.google.com</xsl:variable> <!-- Le lien "adresse_e_mail.cfm" devient "http://www.google.com" -->


N.B. : vous pouvez mettre un lien vers la page de votre choix, en fonction de vos besoins.



Modifier la couleur de fond du widget
  • Par défaut, la couleur de fond est blanche, pour la modifier il faut éditer le fichier "panierhover_fr.xsl" pour la Version Française et/ou "panierhover_us.xsl" pour la Version Anglaise.
    Ouvrez le(s) fichier(s) (que vous avez téléchargé à l'étape 1, pendant l'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ce(s) fichier(s), éditez la dernière version pour ne pas perdre vos modifications précédentes.
    Cherchez la ligne 22 : "< div class="texte_catalogue" id="encadrement_texte_defaut" style="width:320px;margin:0px;padding:0 11px 10px 20px;background-color:white;">" puis remplacez "background-color:white" par un code couleur en hexadécimale. Enregistrez le(s) fichier(s) (gardez le format .xsl et le même nom).
    Retournez à la fonction "Import/Export" > "Espace de stockage". Placez-vous dans le dossier /panierhover, cliquez sur le bouton "Ajouter" puis sur "Parcourir...". Cherchez le(s) fichier(s) que vous venez de modifier, cliquez sur "Ouvrir", et enfin sur "OK".

    Dans cet exemple nous avons définit un fond noir pour la Version Française et un fond rouge pour la Version Anglaise :

    Francais.gif
    22 <div class="texte_catalogue" id="encadrement_texte_defaut" style="width:320px;margin:0px;padding:0 11px 10px 20px;background-color:#000000;"> /* "background-color:white;" devient "background-color:#000000;" */
    

    Anglais.gif
    22 <div class="texte_catalogue" id="encadrement_texte_defaut" style="width:320px;margin:0px;padding:0 11px 10px 20px;background-color:##FF0000;"> /* "background-color:white;" devient "background-color:#FF0000;" */
    

    N.B. : vous pouvez trouver la correspondance des codes couleurs ici : Dictionnaire couleurs



Services d'intégration et de personnalisation des widgets PowerBoutique©

Nos équipes sont à votre disposition pour intervenir depuis l'intégration de ce widget jusqu'à sa personnalisation complète, selon vos besoins et les spécificités de votre site.
Contactez votre consultant e-business pour en savoir plus : cliquez ici.



Cet espace de documentation vise à vous aider dans la personnalisation avancée de votre site PowerBoutique©. L'Assistance Utilisateurs PowerBoutique© ne couvre pas l'utilisation que vous pouvez faire des informations issues de cette documentation. cf. Conditions d'utilisation