Widget bandeau spécial soldes

De Centre Documentation PowerBoutique

Qu'est-ce que le widget « Bandeau spécial soldes » ?

Le widget « Bandeau spécial soldes » permet d'identifier de façon attractive, sur vos listes articles, vos articles soldés, grâce à un bandeau au design spécifique. Ce dernier se positionne sur chacun des visuels miniatures (vignettes) de vos articles remisés et en soldes, dans l'un des quatre angles.
En pratique, les visiteurs de votre site repèrent, en un clin d’œil, vos meilleures offres du moment et sont ainsi davantage tentés de cliquer pour les découvrir.

N.B. : pour que le « Bandeau spécial soldes » s'affiche automatiquement sur vos articles soldés, il est au préalable impératif d'identifier chacun de vos articles remisés concernés en tant que "Produit soldé" (fonction "Catalogue" > "Articles" > onglet "Identification" > "Remise" > "Produit soldé = Oui").

Important : vous pouvez installer ce widget dès à présent, il se déclenchera automatiquement et ne sera ainsi visible sur votre site qu'à compter de la date officielle de démarrage des soldes d'été 2017 (28/06/2017 à 8h). Il se désaffichera ensuite de nouveau automatiquement à la date de fin des soldes (08/08/2017 à 23h59min59sec).
Vous pouvez néanmoins modifier ces dates, en préparation des prochains soldes d'hiver par exemple, en vous rendant à la rubrique "Changer les dates d'affichage du widget (mode auto)".

Voir le site démo

Voir le site démo Exemple du widget « Bandeau spécial soldes »


Caractéristiques

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

Dernières modifications : le 08 juin 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 "bandeausoldes" dans le dossier /site en cliquant sur le bouton "Nouveau dossier".

  • Étape 3
    Via la même page, cliquez sur le nouveau dossier /bandeausoldes, 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
    Il faut maintenant ajouter le code du widget dans le modèle liste articles de votre choix. Via la fonction "Apparence" > onglet "Outils experts - Web-design" > "Modèles liste 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. Sélectionnez ensuite, dans le menu déroulant des modèles de mise en page liste 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) tout en bas du code déjà présent dans l'onglet HTML.
    N.B. : nous vous conseillons également d'enlever le code dyn *VignettePromo* (qui correspond à l'image qui apparaît en-dessous du prix des articles en promotion, sur vos listes articles), ceci afin d'éviter un double affichage "soldes" (bandeau et image promotion).
    Pour finir, cliquez sur "Enregistrer".

    Version Française Francais.gif :
    1. <!-- DEBUT - Widget bandeau spécial soldes -->
    2.  
    3. <script type="text/javascript" language="javascript" src="../site/bandeausoldes/soldes.js"></script>
    4. <script type="text/javascript" language="javascript">
    5. function startAddSoldeImg(){addSoldeImg('soldes_haut_gauche.png','left','top','100px','auto','*ArticleSolde*','*Reference*');}
    6. if(window.addEventListener){window.addEventListener("load", startAddSoldeImg);}
    7. else{if(window.attachEvent){ window.attachEvent("onload", startAddSoldeImg);}}
    8. </script>
    9.  
    10. <!-- FIN - Widget bandeau spécial soldes -->
    Soldes haut gauche.png

    N.B. : par défaut, cette Version Française placera l'image "soldes_haut_gauche.png" dans l'angle supérieur gauche et définira une hauteur de 100px.
    Vous pouvez choisir un autre angle, une autre image , une taille différente ou passer du mode auto à manuel en suivant la procédure décrite dans la rubrique "Personnalisation du widget".



    Version Anglaise Anglais.gif :
    1. <!-- DEBUT - Widget bandeau spécial soldes -->
    2.  
    3. <script type="text/javascript" language="javascript" src="../site/bandeausoldes/soldes.js"></script>
    4. <script type="text/javascript" language="javascript">
    5. function startAddSoldeImg(){addSoldeImg('sales_haut_gauche.png','left','top','100px','auto','*ArticleSolde*','*Reference*');}
    6. if(window.addEventListener){window.addEventListener("load", startAddSoldeImg);}
    7. else{if(window.attachEvent){ window.attachEvent("onload", startAddSoldeImg);}}
    8. </script>
    9.  
    10. <!-- FIN - Widget bandeau spécial soldes -->
    Sales haut gauche.png

    N.B. : par défaut, cette Version Anglaise placera l'image "sales_haut_gauche.png" dans l'angle supérieur gauche et définira une hauteur de 100px.
    Vous pouvez choisir un autre angle, une autre image , une taille différente ou passer du mode auto à manuel en suivant la procédure décrite dans la rubrique "Personnalisation du widget".





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 le mode d'affichage du widget (auto/manuel)
  • Par défaut, le bandeau spécial soldes ne sera visible que pendant la période des soldes d'été 2017. Il vous est cependant possible de visualiser le rendu de ce widget avant cette période. Pour cela, il vous suffit d'éditer le code FR et/ou US de l'étape 4 d'intégration. Cherchez, sur la ligne 5, le mot "auto" et modifiez-le par "manuel" : votre bandeau spécial soldes apparaîtra alors sur vos articles remisés et soldés.
    N.B. : pensez à remettre le mode "auto" à la fin de votre phase de test.

Version Française Francais.gif :

  1. function startAddSoldeImg(){addSoldeImg('soldes_haut_gauche.png','left','top','100px','manuel','*ArticleSolde*','*Reference*');}


Version Anglaise Anglais.gif :

  1. function startAddSoldeImg(){addSoldeImg('sales_haut_gauche.png','left','top','100px','manuel','*ArticleSolde*','*Reference*');}



Modifier l'emplacement du bandeau spécial soldes
  • Par défaut, le bandeau spécial soldes est placé en superposition des visuels produits, dans l'angle supérieur gauche de l'image. Pour changer cette position, il suffit d'éditer la ligne 5 du code d'intégration.
    N.B. : le changement d'emplacement nécessite d'utiliser une autre image, mieux adaptée à l'angle choisi.
    Voici des exemples de bandeaux positionnés dans les 3 autres angles de l'image :

    Angle supérieur droit :

    Francais.gif
    1.     function startAddSoldeImg(){addSoldeImg('soldes_haut_droite.png','right','top','100px','auto','*ArticleSolde*','*Reference*');}

    Anglais.gif
    1. function startAddSoldeImg(){addSoldeImg('sales_haut_droite.png','right','top','100px','auto','*ArticleSolde*','*Reference*');}


    Angle inférieur gauche :

    Francais.gif
    1. function startAddSoldeImg(){addSoldeImg('soldes_bas_gauche.png','left','bottom','100px','auto','*ArticleSolde*','*Reference*');}

    Anglais.gif
    1. function startAddSoldeImg(){addSoldeImg('sales_bas_gauche.png','left','bottom','100px','auto','*ArticleSolde*','*Reference*');}


    Angle inférieur droit :

    Francais.gif
    1. function startAddSoldeImg(){addSoldeImg('soldes_bas_droite.png','right','bottom','100px','auto','*ArticleSolde*','*Reference*');}

    Anglais.gif
    1. function startAddSoldeImg(){addSoldeImg('sales_bas_droite.png','right','bottom','100px','auto','*ArticleSolde*','*Reference*');}



Modifier la taille du bandeau spécial soldes
  • Par défaut, la hauteur du bandeau spécial soldes est de 100px et sa largeur s'adapte automatiquement. Pour modifier cette hauteur, il suffit d'éditer la ligne 5 du code d'intégration. Cherchez, le code "100px" et modifiez-le par une nouvelle valeur.
    Voici un exemple, réalisé sur la base du positionnement par défaut (angle supérieur gauche), qui définit la hauteur du bandeau à 200px :

Francais.gif
  1. function startAddSoldeImg(){addSoldeImg('soldes_haut_gauche.png','left','top','200px','auto','*ArticleSolde*','*Reference*');}

Anglais.gif
  1. function startAddSoldeImg(){addSoldeImg('sales_haut_gauche.png','left','top','200px','auto','*ArticleSolde*','*Reference*');}

N.B. : les images de ce widget doivent avoir une hauteur maximale de 238px. Au-delà, leur qualité sera réduite.



Changer les dates d'affichage du widget (mode auto)
  • Par défaut, le bandeau spécial soldes a été paramétré en mode auto pour n'être visible que pendant la période des soldes d'été 2017. Pour modifier ces dates, pour les prochains soldes d'hiver, il vous faut éditer le fichier "soldes.js" pour la Version Française et pour la Version Anglaise.
    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.

    Cherchez, sur la ligne 8, le code "2017, 5, 28, 8, 0, 0" et modifiez-le. Il correspond à la date de début des soldes d'été 2017.
    Cherchez, sur la ligne 9, le code "2017, 7, 8, 23, 59, 59" et modifiez-le. Il correspond à la date de fin des soldes d'été 2017.

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

    Dans l'exemple ci-dessous, nous avons modifié la date de début et de fin des soldes d'été 2017 par les dates de début et de fin des soldes d'hiver 2018 :
    1. var dateDebutSolde = new Date(2018, 0, 10, 8, 0, 0);  //2018, 0, 10, 8, 0, 0 = 10 janvier 2018 8h00m00s
    2. var dateFinSolde = new Date(2018, 1, 20, 23, 59, 59); //2018, 1, 20, 23, 59, 59 = 20 fevrier 2018 23h59m59s
    N.B. : pour convertir une date en javascript, notez que :
    - le premier nombre correspond à l'année,
    - le deuxième nombre correspond au mois (il commence à 0 pour janvier, 1 pour février... et finit à 11 pour décembre),
    - le troisième nombre correspond au jour,
    - le quatrième nombre correspond à l'heure,
    - le cinquième nombre correspond aux minutes,
    - le sixième nombre correspond aux secondes.



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