Widget affichage permanent du contenu du panier

De Centre Documentation PowerBoutique
Aller à : navigation, rechercher

Qu'est-ce que le widget « Affichage permanent du contenu du panier » ?

Le widget « Affichage permanent du contenu du panier » permet à vos acheteurs de visualiser en permanence le contenu détaillé de leur commande tout au long de leur processus d'achat, sans avoir à cliquer sur le panier pour accéder à la page correspondante.
En pratique, le passage de la souris sur le nom d'un article fait également apparaître des informations supplémentaires à son sujet : nom complet, vignette, prix unitaire, disponibilité et remise éventuelle. Un simple clic sur le titre d'un article leur permet, par ailleurs, de se rendre sur sa fiche détaillée. Enfin, un bouton spécifique leur permet de finaliser directement leur commande.

N.B. : vous positionnez ce widget à l'emplacement de votre choix sur votre site, il s'affiche ensuite dès qu'au moins un article est ajouté au panier.
N.B. : ce widget fait 200px de largeur par défaut, il est possible de modifier cette largeur dans la rubrique "Personnalisation du widget".

Widget mini panier statique.png

Loupe.png Exemple du widget « Affichage permanent du contenu du panier »


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 2 septembre 2014

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 "panierstatic" dans le dossier /site en cliquant sur le bouton "Nouveau dossier".

  • Étape 3
    Via la même page, cliquez sur le nouveau dossier /panierstatic, 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 > 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 permanent du contenu du panier -->
    2 
    3 <link rel="stylesheet" type="text/css" media="screen" href="../site/panierstatic/panierstatic_fr.css">
    4 <div id="panierstatic"></div>
    5 <script type="text/javascript" src="../site/panierstatic/panierstatic_fr.js"></script>
    6 
    7 <!-- FIN - Widget affichage permanent du contenu du panier -->
    
    Version Anglaise Anglais.gif :
    1 <!-- DEBUT - Widget affichage permanent du contenu du panier -->
    2 
    3 <link rel="stylesheet" type="text/css" media="screen" href="../site/panierstatic/panierstatic_us.css">
    4 <div id="panierstatic"></div>
    5 <script type="text/javascript" src="../site/panierstatic/panierstatic_us.js"></script>
    6 
    7 <!-- FIN - Widget affichage permanent du contenu du panier -->
    

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.

Modifier la largeur du widget
  • Ce widget fait 200px de large par défaut. Cependant, vous pouvez modifier cette largeur.
    Il faut, pour cela, éditer le fichier "panierstatic_fr.css" pour la Version Française et le fichier "panierstatic_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 2, le code "width:200px;" puis modifiez "200px". 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 /panierstatic, cliquez sur le bouton "Ajouter" puis sur "Parcourir...". Cherchez le(s) fichier(s) que vous venez de modifier, cliquez sur "Ouvrir", et enfin cliquez sur "OK".

Pour notre site démo, la largeur par défaut de 200px n'était pas satisfaisante et nous avons décidé d'appliquer une largeur de 250px pour la Version Française dans le fichier "panierstatic_fr.css" :

Francais.gif
2 width:250px; /* Largeur du widget, valeur en pixel */


Idem pour la Version Anglaise dans le fichier "panierstatic_us.css" cette fois-ci :

Anglais.gif
2 width:250px; /* Largeur du widget, valeur en pixel */



Modifier la position du pop-up d'information produit
  • Vous pouvez modifier le positionnement du pop-up d'information produit. Il faut, pour cela, éditer le fichier "panierstatic_fr.css" pour la Version Française et le fichier "panierstatic_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 17, le code "margin-left:0px;" puis modifiez le nombre "0px". Un nombre positif déplacera le pop-up vers la droite, tandis qu'un nombre négatif le déplacera vers la gauche. 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 /panierstatic, cliquez sur le bouton "Ajouter" puis sur "Parcourir...". Cherchez le(s) fichier(s) que vous venez de modifier, cliquez sur "Ouvrir", et enfin cliquez sur "OK".

Pour notre site démo, nous avons appliqué un déplacement de 335px vers la gauche pour la Version Française dans le fichier "panierstatic_fr.css" :

Francais.gif
17 margin-left:-335px; /* "margin-left:0px;" devient  "margin-left:-335px;" */


Pour la Version Anglaise, nous avons appliqué un déplacement de 50px, vers la droite dans le fichier "panierstatic_us.css" cette fois-ci :

Anglais.gif
17 margin-left:50px; /* "margin-left:0px;" devient  "margin-left:50px;" */



Éditer les textes et le lien du bouton
  • Par défaut, ce widget est composé :

    - d'un bouton "Voir panier" qui redirige vers la page "panierb.cfm" et d'un titre "Votre panier", pour la Version Française.
    - d'un bouton "View cart" qui redirige vers la page "panierb.cfm" et d'un titre "Your selection", pour la Version Anglaise.

    Pour modifier ces textes et le lien du bouton, il faut éditer le fichier "panierstatic_fr.xsl" pour la Version Française et/ou "panierstatic_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 et 15 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 /panierstatic, cliquez sur le bouton "Ajouter" puis sur "Parcourir...". Cherchez le(s) fichier(s) que vous venez de modifier, cliquez sur "Ouvrir", et enfin cliquez sur "OK".

L'exemple ci-dessous est une modification du fichier "panierstatic_fr.xsl" : on édite les textes de la Version Française et le lien du bouton :

Francais.gif
13 		<xsl:variable name="titre_panier_fr">Mes achats</xsl:variable> <!-- Le texte "Votre panier" devient  "Mes achats"-->
14 		<xsl:variable name="voir_panier_fr">Commander</xsl:variable> <!-- Le texte "Voir panier" devient  "Commander"-->
15 		<xsl:variable name="voir_panier_fr_href">adresse_e_mail.cfm</xsl:variable> <!-- Le lien "panierb.cfm" devient "adresse_e_mail.cfm" -->


L'exemple ci-dessous est une modification du fichier "panierstatic_us.xsl" : on édite les textes de la Version Anglaise et le lien du bouton :

Anglais.gif
13 		<xsl:variable name="titre_panier_us">My Cart</xsl:variable><!-- Le texte "Your selection" devient  "My Cart"-->
14 		<xsl:variable name="voir_panier_us">Search</xsl:variable> <!-- Le texte "View cart" devient  "Search"-->
15 		<xsl:variable name="voir_panier_us_href">www.google.fr</xsl:variable> <!-- Le lien "panierb.cfm" devient "www.google.fr" -->


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



Gérer le texte pour le stock des articles
  • 1. Par défaut, le texte pour les articles avec une disponibilité immédiate (délai de disponibilité compris entre 0 jour et 0 jour) est "en stock" pour la Version Française et "in stock" pour la Version Anglaise.
    Vous modifiez ces textes via la fonction "Paramétrages" > onglet "Commerce" > "Affichage disponibilité article". Si vous avez choisi des textes différents de ceux par défaut, il vous faut éditer le fichier "panierstatic_fr.xsl" pour la Version Française et/ou le fichier "panierstatic_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 16 et modifiez le texte par défaut. Enregistrez le fichier (gardez le format .xsl et le même nom).
    Retournez à la fonction "Import/Export" > "Espace de stockage". Placez-vous dans le dossier /panierstatic, cliquez sur le bouton "Ajouter" puis sur "Parcourir...". Cherchez le(s) fichier(s) que vous venez de modifier, cliquez sur "Ouvrir", et enfin cliquez sur "OK".

Pour cet exemple, nous avons choisi le texte "Disponible" pour nos articles en stock dans notre Version Française. On modifie donc le fichier "panierstatic_fr.xsl" en conséquence :

Francais.gif
16 <xsl:variable name="texte_en_stock">Disponible</xsl:variable> <!-- "en stock" devient "Disponible" -->


Pour cet exemple, nous avons choisi le texte "Available" pour nos articles en stock dans notre Version Anglaise. On modifie donc le fichier "panierstatic_us.xsl" en conséquence :

Anglais.gif
16 <xsl:variable name="texte_in_stock">Available</xsl:variable> <!-- "in stock" devient "Available" -->


  • 2. Par défaut, le texte "en stock" est affiché en vert, et tous les autres types de disponibilité ("disponibilité : 24 à 48h", "disponibilité : 3 jours", etc.) sont affichés en rouge.
    Vous pouvez changer ces couleurs en éditant le fichier "panierstatic_fr.css" pour la Version Française et le fichier "panierstatic_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 les lignes 49 et 50, les codes ".stock_ok{color:#228B22;}" et ".stock_ko{color:#FF0000;}" et modifiez les codes couleurs par défaut (définis en hexadécimale). Pour information, "#228B22;" correspond au vert et "#FF0000;" au rouge. 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 /panierstatic, 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 remplace la couleur verte par la couleur noire et la couleur rouge par orange dans notre Version Française (fichier "panierstatic_fr.css") :

Francais.gif
49 .stock_ok{color:#000000;} /* #228B22; devient #000000; ==> #000000; est le code couleur du noir */  
50 .stock_ko{color:#C03000;} /* #FF0000; devient #C03000; ==> #C03000; est le code couleur du orange */


L'exemple ci-dessous remplace la couleur verte par la couleur bleue et la couleur rouge par marron dans la Version Anglaise (fichier "panierstatic_us.css") :

Anglais.gif
49 .stock_ok{color:#1E7FCB;} /* #228B22; devient #1E7FCB; ==> #1E7FCB; est le code couleur du bleue */  
50 .stock_ko{color:#582900;} /* #FF0000; devient #582900; ==> #582900; est le code couleur du marron*/


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