Widget bandeau spécial soldes

De Centre Documentation PowerBoutique
Aller à : navigation, rechercher

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").
N.B. : les soldes d'hiver 2019 ne seront pas impactés par le projet de loi PACTE visant à réduire leur durée à 4 semaines, ce texte étant toujours en cours de discussion entre les assemblées.

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'hiver 2019 (9 janvier 2019 à 8h00). Il se désaffichera ensuite de nouveau automatiquement à la date de fin des soldes (19/02/19 à 23h59min59sec).

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 18 decembre 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 "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.
    Pour finir, cliquez sur "Enregistrer".

    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).
    N.B. : si l'option Scroll infini est cochée pour ce modèle liste articles, les articles qui apparaîtront après le chargement de la page ne pourront pas bénéficier du widget.

    Version Française Francais.gif :
     1 <!-- DEBUT - Widget bandeau spécial soldes -->
     2 
     3 <script type="text/javascript" language="javascript" src="//www.ph1.powerboutique.net/L23998/site/bandeausoldes/soldesDates.js"></script>
     4 <script type="text/javascript" language="javascript" src="../site/bandeausoldes/soldes.js"></script>
     5 <script type="text/javascript" language="javascript">
     6 function startAddSoldeImg(){addSoldeImg('soldes_haut_gauche.png','left','top','100px','auto','*ArticleSolde*','*Reference*');}
     7 if(window.addEventListener){window.addEventListener("load", startAddSoldeImg);}
     8 else{if(window.attachEvent){ window.attachEvent("onload", startAddSoldeImg);}}
     9 </script>
    10 
    11 <!-- 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="//www.ph1.powerboutique.net/L23998/site/bandeausoldes/soldesDates.js"></script>
     4 <script type="text/javascript" language="javascript" src="../site/bandeausoldes/soldes.js"></script>
     5 <script type="text/javascript" language="javascript">
     6 function startAddSoldeImg(){addSoldeImg('sales_haut_gauche.png','left','top','100px','auto','*ArticleSolde*','*Reference*');}
     7 if(window.addEventListener){window.addEventListener("load", startAddSoldeImg);}
     8 else{if(window.attachEvent){ window.attachEvent("onload", startAddSoldeImg);}}
     9 </script>
    10 
    11 <!-- 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'hiver 2019. 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 :

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


Version Anglaise Anglais.gif :

5 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
    5     function startAddSoldeImg(){addSoldeImg('soldes_haut_droite.png','right','top','100px','auto','*ArticleSolde*','*Reference*');}
    

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


    Angle inférieur gauche :

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

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


    Angle inférieur droit :

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

    Anglais.gif
    5 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
5 function startAddSoldeImg(){addSoldeImg('soldes_haut_gauche.png','left','top','200px','auto','*ArticleSolde*','*Reference*');}


Anglais.gif
5 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.



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