Widget calcul mensualités (paiement sans frais)

De Centre Documentation PowerBoutique
Aller à : navigation, rechercher

Qu'est-ce que le widget « Calcul mensualités (paiement sans frais) » ?

Le widget « Calcul mensualités (paiement sans frais) » permet d'indiquer, sur vos fiches articles et/ou sur la page panier de votre site, le montant des mensualités pour les paiements en plusieurs fois sans frais. Vous définissez le nombre de mensualités (3, 4, 5... fois) que vous souhaitez afficher en fonction du prix de l'article ou du montant total du panier. Le widget calcule ensuite automatiquement le montant des mensualités correspondantes.
En pratique, vos visiteurs visualisent en un clin d’œil, dès la fiche article et/ou sur le récapitulatif de leur panier, le montant de leurs mensualités s'ils décidaient d'opter pour un paiement en plusieurs fois. Dans le cas de paniers moyens élevés par exemple, le widget « Calcul mensualités (paiement sans frais) » devient un véritable déclencheur d'achat.

N.B. : l'utilisation de ce widget est réservée aux marchands qui proposent un mode de paiement en plusieurs fois sans frais sur leur site.
N.B. : l'affichage des mensualités se déclenche automatiquement sur les articles et/ou le panier dont le montant est compris dans les fourchettes de prix prédéfinies pour le paiement en plusieurs fois. Il est possible de les paramétrer dans la rubrique "Personnalisation du widget".

Voir le site démo

Voir le site démo Exemple du widget « Calcul mensualités (paiement sans frais) » sur une fiche article.


Voir le site démo

Voir le site démo Exemple du widget « Calcul mensualités (paiement sans frais) » sur la page panier.


Caractéristiques

Version minimale requise : PowerBoutique© V4.7.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 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.

Important : ce widget est réservé aux marchands qui proposent un mode de paiement en plusieurs fois sans frais sur leur site.

Étapes d'intégration

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

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

  • Étape 4
    Cette étape propose deux modes d'intégration. Choisissez celui qui vous conviendra le mieux ou suivez les deux, selon vos besoins :

    - Intégration sur la page panier :

    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, rendez-vous sur la page panier puis 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 ).
    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 cette étape si vous possédez un site multilingue, en prenant soin de sélectionner "site US" dans la fonction "Apparence" > "Modèles de site" et en prenant soin de copier-coller le code dans l'espace promotionnel créé dans la Version Anglaise cette fois-ci.
    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.
    **vous pouvez également insérer le code dans un cms existant.

    Version Française Francais.gif :
    1  <!-- DEBUT - Widget calcul mensualités (paiement sans frais) -->
    2 
    3 <script type="text/javascript" language="javascript">var symboleMonnaie = '&euro;';</script>
    4 <link rel="stylesheet" href="../site/paiementsansfrais/paiementsansfrais.css" type="text/css">
    5 <script type="text/javascript" src="../site/paiementsansfrais/paiementsansfrais_fr.js"></script>
    6 
    7 <!-- FIN - Widget calcul mensualités (paiement sans frais) -->
    

    Version Anglaise Anglais.gif :
    1  <!-- DEBUT - Widget calcul mensualités (paiement sans frais) -->
    2 
    3 <script type="text/javascript" language="javascript">var symboleMonnaie = '&euro;';</script>
    4 <link rel="stylesheet" href="../site/paiementsansfrais/paiementsansfrais.css" type="text/css">
    5 <script type="text/javascript" src="../site/paiementsansfrais/paiementsansfrais_us.js"></script>
    6 
    7 <!-- FIN - Widget calcul mensualités (paiement sans frais) -->
    


    - Intégration dans un modèle fiche articles :

    Vous devez ajouter le code du widget dans le modèle de fiche articles de votre choix. Pour cela, rendez-vous à la fonction "Apparence" > onglet "Outils experts - Web-design" > "Modèles fiche articles". Sélectionnez, dans le menu déroulant en haut à droite, "site FR" ou "site US" selon la version sur laquelle vous voulez intégrer ce widget puis sélectionnez, dans le menu déroulant des modèles de mise en page articles, celui que vous voulez modifier. Cliquez sur le bouton "Modifier". Dans l'écran suivant, cliquez sur l'onglet HTML et insérez le code ci-dessous (FR ou US) juste après le code dyn *Prix*. Enfin, cliquez sur "Enregistrer".
    N.B. : le code dyn *Prix* doit impérativement être positionné dans votre modèle de fiche articles pour que le widget fonctionne.

    Version Française Francais.gif :
    1  <!-- DEBUT - Widget calcul mensualités (paiement sans frais) -->
    2 
    3 <div id="zoneSimulArticle"></div>
    4 <script type="text/javascript" language="javascript">var PrixDeBaseBrutPaiementArticle = '*PrixDeBaseBrut*';</script>
    5 <script type="text/javascript" language="javascript">var symboleMonnaie = '&euro;';</script>
    6 <link rel="stylesheet" href="../site/paiementsansfrais/paiementsansfrais.css" type="text/css">
    7 <script type="text/javascript" src="../site/paiementsansfrais/paiementsansfrais_fr.js"></script>
    8 
    9 <!-- FIN - Widget calcul mensualités (paiement sans frais) -->
    

    Version Anglaise Anglais.gif :
    1  <!-- DEBUT - Widget calcul mensualités (paiement sans frais) -->
    2 
    3 <div id="zoneSimulArticle"></div>
    4 <script type="text/javascript" language="javascript">var PrixDeBaseBrutPaiementArticle = '*PrixDeBaseBrut*';</script>
    5 <script type="text/javascript" language="javascript">var symboleMonnaie = '&euro;';</script>
    6 <link rel="stylesheet" href="../site/paiementsansfrais/paiementsansfrais.css" type="text/css">
    7 <script type="text/javascript" src="../site/paiementsansfrais/paiementsansfrais_us.js"></script>
    8 
    9 <!-- FIN - Widget calcul mensualités (paiement sans frais) -->
    


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 le nombre de mensualités et les fourchettes de prix correspondantes
  • Par défaut, le widget "Calcul mensualités (paiement sans frais)" permet d'indiquer, sur vos fiches articles et/ou sur la page panier, trois modes de paiement sans frais (3X, 4X et 5X) et les mensualités correspondantes. Chaque mode s'affiche en fonction de fourchettes de prix prédéfinies.
    Ainsi, si le prix d'un article et/ou si le montant total du panier est compris entre :

    - 100 et 10.000 €, le paiement en 3X sans frais sera indiqué.
    - 500 et 10.000 €, le paiement en 4X sans frais sera indiqué.
    - 1000 et 10.000 €, le paiement en 5X sans frais sera indiqué.

    Pour modifier, supprimer ou ajouter de nouvelles tranches de prix, il faut éditer le fichier "paiementsansfrais_fr.js" pour la Version Française et le fichier "paiementsansfrais_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.

    Les 3 fourchettes de prix détaillées ci-dessus apparaissent aux lignes 6, 7 et 8.
    Prenons l'exemple de la 1ère ligne : "tranche1 : { debutTranche : 100, finTranche : 10000, nbrTranche : 3 },". Vous modifiez uniquement les éléments signalés en rouge, selon vos besoins :

    - tranche1 est le nom attribué à la 1ère fourchette de prix. Ce nom doit être unique pour chacune des fourchettes.
    - 100 correspond à la valeur minimale de la tranche de prix. Le montant de l'article ou du panier devra être supérieur ou égal à celle-ci pour que le widget s'affiche.
    - 1000 correspond à la valeur maximale de la tranche de prix. Le montant de l'article ou du panier devra être inférieur ou égal à celle-ci pour que le widget s'affiche.
    - 3 est le nombre de mensualités attribué à cette fourchette de prix.

    N.B. : chaque ligne doit se terminer par une virgule, à l'exception de la dernière.
    N.B. : si vous souhaitez proposer le paiement en plusieurs fois sans frais quelle que soit la valeur de l'article ou du panier, précisez 0 pour debutTranche et un nombre élevé pour finTranche (exemple : 999999999).
    N.B. : n'utilisez pas de virgules ni de points pour définir les valeurs minimales et maximales de vos tranches de prix, ainsi que le nombre de mensualités, renseignez uniquement des chiffres.

    Effectuez vos modifications puis 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 /paiementsansfrais, 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".

    Exemples de fourchettes de prix :
    6 tranche1 : { debutTranche : 1, finTranche : 500, nbrTranche : 3 },
    7 	tranche2 : { debutTranche : 500, finTranche : 1000, nbrTranche : 5 }
    
    N.B. : dans l'exemple ci-dessus, deux tranches de prix sont définies. Le paiement 3X sans frais pour les articles ou les paniers dont le montant est compris entre 1 et 500 €, et le paiement 5X sans frais pour les articles ou les paniers dont le montant est compris entre 500 et 1000 €. Dans le cas d'un article d'une valeur de 1001 €, le widget n'apparaîtra pas. Pour un panier total à 500 €, les montants des mensualités pour un paiement en 3 fois et pour un paiement en 5 fois sans frais seront indiqués.

    6 tranche2x : { debutTranche : 1, finTranche : 100, nbrTranche : 2 },
    7 tranche3x : { debutTranche : 100, finTranche : 1000, nbrTranche : 3 },
    8 	tranche5x : { debutTranche : 500, finTranche : 1000, nbrTranche : 5 } ,
    9 tranche10x : { debutTranche : 1000, finTranche : 20000, nbrTranche : 10 }
    
    N.B. : dans l'exemple ci-dessus, quatre tranches de prix sont définies. Le paiement 2X sans frais pour les articles ou les paniers dont le montant est compris entre 1 et 100 €, le paiement 3X sans frais pour les articles ou les paniers dont le montant est compris entre 100 et 1000 €, le paiement 5X sans frais pour les articles ou les paniers dont le montant est compris entre 500 et 1000 €, le paiement 10X sans frais pour les articles ou les paniers dont le montant est compris entre 1000 et 20000 €.


Éditer les textes
  • Par défaut, le widget "Calcul mensualités (paiement sans frais)" est composé des textes suivants :

    - "sans frais" sur les fiches articles et "(paiement sans frais)" sur la page panier, pour la Version Française.
    - "interest-free" sur les fiches articles et "(interest-free payment)" sur la page panier, pour la Version Anglaise.

    Pour modifier ces textes, il faut éditer le fichier "paiementsansfrais_fr.js" pour la Version Française et le fichier "paiementsansfrais_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 27 et remplacez à la fin "sans frais" pour la Version Française et "interest-free" pour la Version Anglaise.
    Cherchez la ligne 83 et remplacez à la fin "(paiement sans frais)" pour la Version Française et "(interest-free payment)" pour la Version Anglaise.

    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 /paiementsansfrais, 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".


Modifier les couleurs et tailles de police du widget
  • Pour modifier les couleurs et les tailles de police du widget, il faut éditer le fichier "paiementsansfrais.css" pour la Version Française et la Version Anglaise.
    Ouvrez ce fichier (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 fichier, éditez la dernière version pour ne pas perdre vos modifications précédentes.

    Couleurs et tailles de police du widget sur la page panier :

    - ligne 4 : "color:#ff0000;" correspond à la couleur de police utilisée pour présenter le nombre de mensualités (3X). Modifiez le code couleur par défaut. Il est défini en hexadécimale. Pour information, "#ff0000;" correspond au rouge.

    - ligne 5 : "font-size:120%;" correspond à la taille de police du nombre de mensualités (3X). Modifiez le 120%. Il est défini en pourcentage pour augmenter légèrement la taille de la police par défaut, vous pouvez également définir une taille en pixel.

    - ligne 9 : "font-size:80%;" correspond à la taille de police utilisée pour afficher le montant des mensualités (666.66 €). Modifiez le 80%. Il est défini en pourcentage pour diminuer légèrement la taille de la police par défaut, vous pouvez également définir une taille en pixel.
    N.B. : la couleur sera automatiquement la même que celle appliquée sur le prix total de votre panier (via l'id #prix_total_panierb).

    - ligne 13 : "font-size:80%;" correspond à la taille de police du texte (paiement sans frais) pour la Version Française et (interest-free payment) pour la Version Anglaise. Modifiez le 80%. Il est défini en pourcentage pour diminuer légèrement la taille de la police par défaut, vous pouvez également définir une taille en pixel.
    N.B. : la couleur sera automatiquement la même que celle appliquée sur le prix total du panier (via l'id #prix_total_panierb).

    - ligne 14 : "font-style:italic;" correspond au style italique appliqué au texte (paiement sans frais) pour la Version Française et (interest-free payment) pour la Version Anglaise.

    Couleurs et tailles de police du widget sur les fiches articles :

    - ligne 20 : "color:#ff0000;" correspond à la couleur de police utilisée pour présenter le nombre de mensualités (3X). Modifiez le code couleur par défaut. Il est défini en hexadécimale. Pour information, "#ff0000;" correspond au rouge.

    - ligne 21 : "font-size:120%;" correspond à la taille de police du nombre de mensualités (3X). Modifiez le 120%. Il est défini en pourcentage pour augmenter légèrement la taille de la police par défaut, vous pouvez également définir une taille en pixel.

    - ligne 25 : "font-size:80%;" correspond à la taille de police utilisée pour afficher le montant des mensualités et le texte "sans frais" pour la Version Française et "interest-free" pour la Version Anglaise (666.66 € sans frais). Modifiez le 80%. Il est défini en pourcentage pour diminuer légèrement la taille de la police par défaut, vous pouvez également définir une taille en pixel.
    N.B. : la couleur sera automatiquement la même que celle appliquée sur le prix de l'article (via l'id #prix_pas_promotion_euro_fiche_produit pour les articles sans remise et l'id #prix_promotion_euro_fiche_produit pour les articles avec remise).

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

    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 /paiementsansfrais, cliquez sur le bouton "Ajouter" puis sur "Parcourir...". Cherchez le fichier que vous venez de modifier, cliquez sur "Ouvrir", et enfin sur "OK".



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