Widget Bannière promotionnelle effet Lightbox

De Centre Documentation PowerBoutique

Qu'est-ce que le widget « Bannière promotionnelle effet Lightbox » ?

Le widget « Bannière promotionnelle effet Lightbox » vous permet de mettre en avant, sur votre site, une offre commerciale, un article ou une gamme promotionnelle.
En pratique, le message s'affiche sous la forme d'un pop-up avec effet « Lightbox ».
Par défaut, ce widget redirige les visiteurs intéressés vers vos articles en promotion. Vous pouvez cependant personnaliser la page de destination en suivant la procédure décrite dans la rubrique "Personnalisation du widget".

N.B. : le message ne s'affiche qu'une fois par visiteur. Il est à nouveau visible une fois le cache du navigateur nettoyé.
N.B. : l'utilisation de la navigation privée sur certains navigateurs peut parfois bloquer le désaffichage de la bannière promotionnelle.
N.B. : par défaut, la Bannière promotionnelle effet Lightbox redirige vers la page Promotions de votre site. Si vous n'en avez pas, vous pouvez changer ce lien dans la rubrique "Personnalisation du widget"

Voir le site démo

Voir le site démo Exemple du widget « Bannière promotionnelle effet Lightbox ».


Caractéristiques

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

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

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

    - Intégration sur votre site en version FR et/ou en version US :

  • É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.
    N.B. : le positionnement de l'espace promotionnel/cms le plus bas possible sur votre site permet d'éviter que Google n'indexe les contenus de votre bandeau cookies.
    *vous pouvez également insérer le code dans un cms existant.

    - Intégration sur votre site en version mobile :

  • Étape 4
    Rendez-vous à la fonction "Animation" > "Bloc libre - cms". Sélectionnez, dans le menu déroulant en haut à droite, "site mobile". Ajoutez le code de la Version Française/Version Mobile Française et/ou le code de la Version Anglaise/Version Mobile Anglaise, selon votre besoin, dans un CMS existant. Pour cela, cliquez sur le bouton Bt modifier.gif et copiez-collez le code dans l'onglet HTML.

    Version Française Francais.gif / Version Mobile Française Iphone ipad fr.jpg :
    1. <!-- DEBUT - Widget bannière promotionnelle effet Lightbox  -->
    2. <link rel="stylesheet" type="text/css" href="../site/promos/promos.css">
    3. <div onclick="getLightboxPwb();" id="lightboxPwb">
    4. <div id="contentLightboxPwb">
    5. <a href="../site/,fr,3,promotion.cfm" target="_blank" style="display:block;">
    6. <img src="../site/promos/promosFR.png">
    7. </a>
    8. <span id="boxclose" onclick="return false;" title="Fermer"></span>
    9. </div>
    10. </div>
    11. <script type="text/javascript" src="../site/promos/promos.js"></script>
    12. <!-- FIN - Widget bannière promotionnelle effet Lightbox  -->
    Version Anglaise Anglais.gif / Version Mobile Anglaise Iphone ipad us.jpg :
    1. <!-- DEBUT - Widget bannière promotionnelle effet Lightbox  -->
    2. <link rel="stylesheet" type="text/css" href="../site/promos/promos.css">
    3. <div onclick="getLightboxPwb();" id="lightboxPwb">
    4. <div id="contentLightboxPwb">
    5. <a href="../site/,us,3,promotion.cfm" target="_blank" style="display:block;">
    6. <img src="../site/promos/promosUS.png">
    7. </a>
    8. <span id="boxclose" onclick="return false;" title="Close"></span>
    9. </div>
    10. </div>
    11. <script type="text/javascript" src="../site/promos/promos.js"></script>
    12. <!-- FIN - Widget bannière promotionnelle effet Lightbox  -->
    N.B. : les seules différences entre la Version Française et la Version Anglaise se trouvent aux lignes 5,6 et 8 : il s'agit du lien de la page de destination, du nom de l'image et du titre du bouton de fermeture.

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.

Agrandir

Agrandir Exemple de personnalisation de la Bannière promotionnelle effet Lightbox, réalisée par notre Studio graphique.



Changer la page de destination de la bannière
  • Par défaut, la Bannière promotionnelle effet Lightbox redirige vers la page Promotions de votre site.
    Vous pouvez personnaliser ce lien en éditant le(s) code(s) de la Version Française/Version Mobile Française et/ou de la Version Anglaise/Version Mobile Anglaise de l'étape d'intégration. Rendez-vous à la fonction "Animation" > "Bloc libre - cms". Sélectionnez, dans le menu déroulant en haut à droite, "site FR" ou "site US" ou "site mobile". Cliquez sur le bouton Bt modifier.gif de l'espace promotionnel contenant le code de l'étape d'intégration.

    Dans l'onglet HTML, cherchez, sur la ligne 5 :

    - le code ../site/,fr,3,promotion.cfm et remplacez-le par l'URL de la page vers laquelle vous souhaitez rediriger vos visiteurs pour la Version Française/Version Mobile Française

    - le code ../site/,us,3,promotion.cfm et remplacez-le par l'URL de la page vers laquelle vous souhaitez rediriger vos visiteurs pour la Version Anglaise/Version Mobile Anglaise.

    Cliquez sur "Enregistrer".



Éditer le titre du bouton de fermeture
  • Par défaut, le widget Bannière promotionnelle effet Lightbox est composé des textes suivants :

    - un texte "Fermer" au survol du bouton de fermeture, pour la Version Française et la Version Mobile Française.

    - un texte "Close" au survol du bouton de fermeture, pour la Version Anglaise et la Version Mobile Anglaise.

    Pour modifier ces textes, il faut éditer le(s) code(s) de la Version Française/Version Mobile Française et/ou de la Version Anglaise/Version Mobile Anglaise de l'étape d'intégration.
    Rendez-vous à la fonction "Animation" > "Bloc libre - cms". Sélectionnez, dans le menu déroulant en haut à droite, "site FR" ou "site US" ou "site mobile". Puis cliquez sur le bouton Bt modifier.gif de l'espace promotionnel contenant le code de l'étape d'intégration. Effectuez vos modifications dans l'onglet HTML puis cliquez sur "Enregistrer".

N.B. : le texte qui apparaît au survol du bouton de fermeture est sur la ligne 8 pour la Version Française/Version Mobile Française et pour la Version Anglaise/Version Mobile Anglaise.


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