Widget Plus que x euros avant la livraison gratuite

De Centre Documentation PowerBoutique
Aller à : navigation, rechercher

Qu'est-ce que le widget « Plus que x euros avant la livraison gratuite » ?

Le widget « Plus que x euros avant la livraison gratuite » vous permet d'afficher un message à chacun de vos visiteurs pour les informer qu'ils peuvent bénéficier de la gratuité de la livraison sur leur commande en cours. En pratique, ce widget fait apparaître une alerte qui, au survol, affiche dynamiquement le montant restant à dépenser pour atteindre le seuil qui déclenchera la gratuité des frais de port.
Si la largeur de l'appareil utilisé par votre visiteur n'est pas suffisante, le message n'apparaîtra plus sur le côté de l'écran mais tout en haut de la page, sous forme de bandeau.
Vous encouragez ainsi vos visiteurs à finaliser leur commande, tout en les incitant à dépenser plus pour atteindre le seuil et profiter de l’offre.

N.B. : le fonctionnement de ce widget est conditionné à l'existence ou à la création préalable d'une règle commerciale de type "Remise sur le port", avec, pour unique condition d'application, un montant minimum de commande requis.
N.B. : le widget est automatiquement masqué dès lors qu'une autre remise de type "Remise sur le port" est appliquée sur le panier en cours.
N.B. : le widget s'affiche dès qu'au moins un article est ajouté au panier.

Voir le site démo

Voir le site démo Exemple du widget « Plus que x euros avant la livraison gratuite » : illustration avec et sans survol sur PC & rendu sur mobile.
N.B. : si vous ne visualisez pas le widget sur le site démo, assurez-vous d'avoir un panier avec un sous-total inférieur à 250 €.


Caractéristiques

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

Versions : Francais.gif   Anglais.gif   Iphone ipad.jpg
Dernières modifications : le 18 juin 2018

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

  • Étape 3
    Via la même page, cliquez sur le nouveau dossier /livraisongratuite, puis sur le bouton "Ajouter" et enfin sur "Parcourir...". Ouvrez un à un les 10 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 Plus que x euros avant la livraison gratuite -->
    2 
    3 <div id="livraisonGratuite" class="livraisonGratuite1"></div>
    4 <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    5 <link rel="stylesheet" type="text/css" href="../site/livraisongratuite/livraisongratuite.css">
    6 <script type="text/javascript" src="../site/livraisongratuite/livraisongratuite_fr.js"></script>
    7 
    8 <!-- FIN - Widget Plus que x euros avant la livraison gratuite -->
    
    Version Anglaise Anglais.gif :
    1 <!-- DEBUT - Widget Plus que x euros avant la livraison gratuite -->
    2 
    3 <div id="livraisonGratuite" class="livraisonGratuite2"></div>
    4 <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
    5 <link rel="stylesheet" type="text/css" href="../site/livraisongratuite/livraisongratuite.css">
    6 <script type="text/javascript" src="../site/livraisongratuite/livraisongratuite_us.js"></script>
    7 
    8 <!-- FIN - Widget Plus que x euros avant la livraison gratuite -->
    



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.

Personnaliser la couleur de fond du widget
  • Il est possible de modifier la couleur de fond par défaut du message. Il vous faut, pour cela, éditer le fichier "livraisongratuite.css".
    Ouvrez ce fichier (que vous avez téléchargé dans l'étape 1 d'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ce fichier, éditez la dernière version pour ne pas perdre vos modifications précédentes.

    Recherchez sur la ligne 3 le code background-color:#111; et modifiez le code couleur #111 qui correspond à un gris foncé par celui de votre choix (défini en hexadécimale).

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

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

Changer l'image principale du widget
  • Pour modifier l'image principale du widget, il faut éditer le(s) code(s) FR et/ou US de l'étape 5 d'intégration. Cherchez, sur la ligne 5, le code class="livraisonGratuite1".

    Il faut changer le numéro pour changer l'image.

    Voici la liste des 4 images disponibles dans ce widget, avec leur code correspondant :
Aperçu :


Modifier la couleur du texte "Plus que x € d'achat..."
  • Il est possible de modifier la couleur du texte annonçant le montant restant avant la livraison offerte.
    Il vous faut, pour cela, éditer le fichier "livraisongratuite.css". Ouvrez ce fichier (que vous avez téléchargé dans l'étape 1 d'intégration) avec un éditeur de texte (Notepad++, Bloc-notes, Document texte...). Si vous avez déjà modifié ce fichier, éditez la dernière version pour ne pas perdre vos modifications précédentes.

    Recherchez sur la ligne 4 le code color:#fff; et modifiez le code couleur #fff qui correspond au blanc par celui de votre choix (défini en hexadécimale).

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

    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