Widget sélection de produits

De Centre Documentation PowerBoutique
Aller à : navigation, rechercher

Qu'est-ce que le widget « Sélection de produits » ?

Le widget « Sélection de produits » met en avant jusqu'à 6 articles de votre choix, dans un espace dédié sur votre site. Cet espace vous permet de promouvoir vos meilleures offres, de faciliter le déstockage de certains produits ou encore de conseiller vos visiteurs. En pratique, ce widget affiche, pour chaque article, son nom, sa marque, son prix et son visuel miniature (vignette).
Par défaut, cette documentation vous permet de mettre en place une sélection de 5 articles. Vous pouvez cependant choisir d'en afficher de 1 à 6, en suivant, pour cela, la procédure décrite dans la rubrique "Personnalisation du widget".

Voir le site démo

Voir le site démo Exemple de widget « Sélection de produits » affiché sur une page liste de gammes.


Caractéristiques

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

Dernières modifications : le 19 mars 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.

Étapes d'intégration

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

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

  • Étape 4
    Vous devez maintenant créer un modèle tête de gondole. Rendez-vous à la fonction "Apparence" > onglet "Outils experts - Web-design" > "Modèles têtes de gondole". Une nouvelle page apparaît : cliquez sur "Nouveau modèle". Dans la fenêtre suivante, sélectionnez "Français", dans le menu déroulant en haut à droite, puis écrivez le nom de votre choix pour ce nouveau modèle, en choisissant pour "Nombre d'articles à mettre en avant" l'option "6". Enfin, insérez le code de la Version Française dans l'onglet HTML puis cliquez sur "Enregistrer".
    N.B. : si vous possédez un site multilingue, insérez le code de la Version Anglaise cette fois-ci après avoir, au préalable, choisi "Anglais", dans le menu déroulant en haut à droite de la page de création de modèle.

    Version Française Francais.gif :
     1 <!-- DEBUT - Widget sélection de produits -->
     2 
     3 <link rel="stylesheet" type="text/css" media="screen" href="../site/selectionProduits/selection_produits.css">
     4 <div id="encadrement_titre_code_dev"><span id="titre_code_dev">Sélection de Produits</span></div> <!-- titre du widget -->
     5 <div class="texte_catalogue blocs" id="encadrement_texte_defaut" style="margin: 1px 0px 0px; padding: 5px 5px 6px;">
     6 
     7 <!-- Les 6 blocs d'articles sont en dessous -->
     8 
     9 <a href="*article1-Lien_fiche_produit*" id="lien_defaut" title="*article1-Nom* - *article1-Marque* - *article1-Prix*">
    10 <div class="bloc_selectionproduits">
    11 <span id="grand_titre_catalogue">1.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article1_vignette.gif"><br>
    12 <span class="textes_selectionproduits" id="titre_catalogue">*article1-Nom*</span><br>
    13 <span class="textes_selectionproduits" id="titre_catalogue">*article1-Marque*</span><br>
    14 <span class="textes_selectionproduits" id="titre_catalogue">*article1-Prix*</span>
    15 </div>
    16 </a>
    17 
    18 <a href="*article2-Lien_fiche_produit*" id="lien_defaut" title="*article2-Nom* - *article2-Marque* - *article2-Prix*">
    19 <div class="bloc_selectionproduits">
    20 <span id="grand_titre_catalogue">2.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article2_vignette.gif"><br>
    21 <span class="textes_selectionproduits" id="titre_catalogue">*article2-Nom*</span><br>
    22 <span class="textes_selectionproduits" id="titre_catalogue">*article2-Marque*</span><br>
    23 <span class="textes_selectionproduits" id="titre_catalogue">*article2-Prix*</span>
    24 </div>
    25 </a>
    26 
    27 <a href="*article3-Lien_fiche_produit*" id="lien_defaut" title="*article3-Nom* - *article3-Marque* - *article3-Prix*">
    28 <div class="bloc_selectionproduits">
    29 <span id="grand_titre_catalogue">3.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article3_vignette.gif"><br>
    30 <span class="textes_selectionproduits" id="titre_catalogue">*article3-Nom*</span><br>
    31 <span class="textes_selectionproduits" id="titre_catalogue">*article3-Marque*</span><br>
    32 <span class="textes_selectionproduits" id="titre_catalogue">*article3-Prix*</span>
    33 </div>
    34 </a>
    35 
    36 <a href="*article4-Lien_fiche_produit*" id="lien_defaut" title="*article4-Nom* - *article4-Marque* - *article4-Prix*">
    37 <div class="bloc_selectionproduits">
    38 <span id="grand_titre_catalogue">4.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article4_vignette.gif"><br>
    39 <span class="textes_selectionproduits" id="titre_catalogue">*article4-Nom*</span><br>
    40 <span class="textes_selectionproduits" id="titre_catalogue">*article4-Marque*</span><br>
    41 <span class="textes_selectionproduits" id="titre_catalogue">*article4-Prix*</span>
    42 </div>
    43 </a>
    44 
    45 <a href="*article5-Lien_fiche_produit*" id="lien_defaut" title="*article5-Nom* - *article5-Marque* - *article5-Prix*">
    46 <div class="bloc_selectionproduits">
    47 <span id="grand_titre_catalogue">5.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article5_vignette.gif"><br>
    48 <span class="textes_selectionproduits" id="titre_catalogue">*article5-Nom*</span><br>
    49 <span class="textes_selectionproduits" id="titre_catalogue">*article5-Marque*</span><br>
    50 <span class="textes_selectionproduits" id="titre_catalogue">*article5-Prix*</span>
    51 </div>
    52 </a>
    53 
    54 <!--
    55 <a href="*article6-Lien_fiche_produit*" id="lien_defaut" title="*article6-Nom* - *article6-Marque* - *article6-Prix*">
    56 <div class="bloc_selectionproduits">
    57 <span id="grand_titre_catalogue">6.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article6_vignette.gif"><br>
    58 <span class="textes_selectionproduits" id="titre_catalogue">*article6-Nom*</span><br>
    59 <span class="textes_selectionproduits" id="titre_catalogue">*article6-Marque*</span><br>
    60 <span class="textes_selectionproduits" id="titre_catalogue">*article6-Prix*</span>
    61 </div>
    62 </a>
    63 -->
    64 
    65 <!-- Les 6 blocs d'articles sont au dessus -->
    66 
    67 </div>
    68 
    69 <!-- FIN - Widget sélection de produits -->
    
    Version Anglaise Anglais.gif :
     1 <!-- DEBUT - Widget sélection de produits -->
     2 
     3 <link rel="stylesheet" type="text/css" media="screen" href="../site/selectionProduits/selection_produits.css">
     4 <div id="encadrement_titre_code_dev"><span id="titre_code_dev">Product Selection</span></div> <!-- titre du widget -->
     5 <div class="texte_catalogue blocs" id="encadrement_texte_defaut" style="margin: 1px 0px 0px; padding: 5px 5px 6px;">
     6 
     7 <!-- Les 6 blocs d'articles sont en dessous -->
     8 
     9 <a href="*article1-Lien_fiche_produit*" id="lien_defaut" title="*article1-Nom* - *article1-Marque* - *article1-Prix*">
    10 <div class="bloc_selectionproduits">
    11 <span id="grand_titre_catalogue">1.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article1_vignette.gif"><br>
    12 <span class="textes_selectionproduits" id="titre_catalogue">*article1-Nom*</span><br>
    13 <span class="textes_selectionproduits" id="titre_catalogue">*article1-Marque*</span><br>
    14 <span class="textes_selectionproduits" id="titre_catalogue">*article1-Prix*</span>
    15 </div>
    16 </a>
    17 
    18 <a href="*article2-Lien_fiche_produit*" id="lien_defaut" title="*article2-Nom* - *article2-Marque* - *article2-Prix*">
    19 <div class="bloc_selectionproduits">
    20 <span id="grand_titre_catalogue">2.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article2_vignette.gif"><br>
    21 <span class="textes_selectionproduits" id="titre_catalogue">*article2-Nom*</span><br>
    22 <span class="textes_selectionproduits" id="titre_catalogue">*article2-Marque*</span><br>
    23 <span class="textes_selectionproduits" id="titre_catalogue">*article2-Prix*</span>
    24 </div>
    25 </a>
    26 
    27 <a href="*article3-Lien_fiche_produit*" id="lien_defaut" title="*article3-Nom* - *article3-Marque* - *article3-Prix*">
    28 <div class="bloc_selectionproduits">
    29 <span id="grand_titre_catalogue">3.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article3_vignette.gif"><br>
    30 <span class="textes_selectionproduits" id="titre_catalogue">*article3-Nom*</span><br>
    31 <span class="textes_selectionproduits" id="titre_catalogue">*article3-Marque*</span><br>
    32 <span class="textes_selectionproduits" id="titre_catalogue">*article3-Prix*</span>
    33 </div>
    34 </a>
    35 
    36 <a href="*article4-Lien_fiche_produit*" id="lien_defaut" title="*article4-Nom* - *article4-Marque* - *article4-Prix*">
    37 <div class="bloc_selectionproduits">
    38 <span id="grand_titre_catalogue">4.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article4_vignette.gif"><br>
    39 <span class="textes_selectionproduits" id="titre_catalogue">*article4-Nom*</span><br>
    40 <span class="textes_selectionproduits" id="titre_catalogue">*article4-Marque*</span><br>
    41 <span class="textes_selectionproduits" id="titre_catalogue">*article4-Prix*</span>
    42 </div>
    43 </a>
    44 
    45 <a href="*article5-Lien_fiche_produit*" id="lien_defaut" title="*article5-Nom* - *article5-Marque* - *article5-Prix*">
    46 <div class="bloc_selectionproduits">
    47 <span id="grand_titre_catalogue">5.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article5_vignette.gif"><br>
    48 <span class="textes_selectionproduits" id="titre_catalogue">*article5-Nom*</span><br>
    49 <span class="textes_selectionproduits" id="titre_catalogue">*article5-Marque*</span><br>
    50 <span class="textes_selectionproduits" id="titre_catalogue">*article5-Prix*</span>
    51 </div>
    52 </a>
    53 
    54 <!--
    55 <a href="*article6-Lien_fiche_produit*" id="lien_defaut" title="*article6-Nom* - *article6-Marque* - *article6-Prix*">
    56 <div class="bloc_selectionproduits">
    57 <span id="grand_titre_catalogue">6.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article6_vignette.gif"><br>
    58 <span class="textes_selectionproduits" id="titre_catalogue">*article6-Nom*</span><br>
    59 <span class="textes_selectionproduits" id="titre_catalogue">*article6-Marque*</span><br>
    60 <span class="textes_selectionproduits" id="titre_catalogue">*article6-Prix*</span>
    61 </div>
    62 </a>
    63 -->
    64 
    65 <!-- Les 6 blocs d'articles sont au dessus -->
    66 
    67 </div>
    68 
    69 <!-- FIN - Widget sélection de produits -->
    
    N.B. : la seule différence entre la Version Française et la Version Anglaise se trouve à la ligne 4 : il s'agit du titre du bloc.

  • Étape 5
    Créez un nouveau diaporama via la fonction "Animation" > "Diaporamas". Cliquez sur le bouton "Ajouter un diaporama". Dans l'écran suivant, écrivez le nom de votre choix pour ce nouveau diaporama, sélectionnez "oui" pour l'option "Je souhaite personnaliser la hauteur du diaporama" et entrez une hauteur de "780"px. Cliquez ensuite sur l'onglet "Slides", puis sur le bouton "Ajouter un slide". Dans cette nouvelle fenêtre, écrivez le nom de votre choix pour ce nouveau slide et choisissez l'option "Insérer un slide de type "contenu libre avec informations articles dynamiques". Sélectionnez, dans la liste déroulante, le modèle que vous avez créé dans l'étape 4. Définissez vos 5 articles grâce aux menus déroulants qui s'affichent en dessous, puis cliquez sur "Enregistrer".
    N.B. : si la hauteur de 780px ne convient pas à votre site, rendez-vous à l'étape 2 de la rubrique "Changer le nombre d'articles à afficher" pour la personnaliser.

  • Étape 6
    Il faut maintenant activer ce diaporama. Rendez-vous à la fonction "Animation" > "Diaporamas". Repérez le diaporama que vous venez de créer et cliquez sur le bouton Desactive.gif correspondant. Un message de confirmation apparaît : cliquez sur "OK" et le bouton passera alors en Active.gif .

  • Étape 7
    La dernière étape sera de positionner ce diaporama "Sélection de Produits" sur votre site. Rendez-vous à 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, sélectionnez, dans le menu déroulant intitulé "Utiliser un bloc existant" (en haut à gauche), le diaporama que vous avez créé. Un message de confirmation apparaît : cliquez sur "OK" et disposez ensuite votre diaporama dans le bloc de gauche ou de droite à l'aide du bouton Deplacer code dev.gif. Enfin, enregistrez le positionnement de votre diaporama en cliquant sur le bouton Enregistrer position des blocs.png .
    N.B. : si vous avez ajouté une Version Anglaise dans l'étape 4, celle-ci s'ajoutera automatiquement grâce à cette étape 7.
    N.B. : l'espace promotionnel contenant le code doit impérativement être appelé dans toutes les pages pour que le widget fonctionne dans tout le site.



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 nombre d'articles à afficher

Par défaut, ce widget propose d'afficher 5 articles. Vous pouvez en afficher de 1 à 6.

  • 1. Il faut, dans un premier temps, éditer le code FR et/ou US de l'étape 4 d'intégration. Rendez-vous à la fonction "Apparence" > onglet "Outils experts - Web-design" > "Modèles têtes de gondole". Sélectionnez, dans le menu déroulant, votre modèle de tête de gondole et cliquez sur "Modifier". Sélectionnez, dans le menu déroulant en haut à droite, la version que vous souhaitez modifier (Français ou Anglais) et cliquez sur l'onglet HTML.
    - Pour masquer un article, il faut le commenter. Prenez exemple sur le code de l'étape 4 d'intégration : le bloc de couleur grise est un commentaire, il contient l'article 6 mais celui-ci ne sera pas affiché sur le site car il est écrit entre <! -- et -->. Chaque article est placé dans un bloc commençant par "<a" et terminant par "</a>". C'est autour de ces blocs que les symboles <! -- et --> doivent être ajoutés pour les commenter.
    - Pour afficher un article, il faut le dé-commenter. Enlevez simplement les symboles <! -- et --> entourant un bloc d'article pour que ce dernier devienne visible.
    Une fois vos modifications terminées, cliquez sur "Enregistrer".

    Dans cet exemple, on affichera 6 articles pour la Version Française. Par rapport à l'exemple du code de l'étape 4 d'intégration, il faut dé-commenter l'article 6. Au final, aucun bloc d'article ne sera alors commenté :
 1 <link rel="stylesheet" type="text/css" media="screen" href="../site/selectionProduits/selection_produits.css">
 2 <div id="encadrement_titre_code_dev"><span id="titre_code_dev">Sélection de Produits</span></div> <!-- titre du widget -->
 3 <div class="texte_catalogue blocs" id="encadrement_texte_defaut" style="margin: 1px 0px 0px; padding: 5px 5px 6px;">
 4  
 5 <!-- Les 6 blocs d'articles sont en dessous -->
 6 
 7 <a href="*article1-Lien_fiche_produit*" id="lien_defaut" title="*article1-Nom* - *article1-Marque* - *article1-Prix*">
 8 <div class="bloc_selectionproduits">
 9 <span id="grand_titre_catalogue">1.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article1_vignette.gif"><br>
10 <span class="textes_selectionproduits" id="titre_catalogue">*article1-Nom*</span><br>
11 <span class="textes_selectionproduits" id="titre_catalogue">*article1-Marque*</span><br>
12 <span class="textes_selectionproduits" id="titre_catalogue">*article1-Prix*</span>
13 </div>
14 </a>
15 
16 <a href="*article2-Lien_fiche_produit*" id="lien_defaut" title="*article2-Nom* - *article2-Marque* - *article2-Prix*">
17 <div class="bloc_selectionproduits">
18 <span id="grand_titre_catalogue">2.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article2_vignette.gif"><br>
19 <span class="textes_selectionproduits" id="titre_catalogue">*article2-Nom*</span><br>
20 <span class="textes_selectionproduits" id="titre_catalogue">*article2-Marque*</span><br>
21 <span class="textes_selectionproduits" id="titre_catalogue">*article2-Prix*</span>
22 </div>
23 </a>
24 
25 
26 <a href="*article3-Lien_fiche_produit*" id="lien_defaut" title="*article3-Nom* - *article3-Marque* - *article3-Prix*">
27 <div class="bloc_selectionproduits">
28 <span id="grand_titre_catalogue">3.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article3_vignette.gif"><br>
29 <span class="textes_selectionproduits" id="titre_catalogue">*article3-Nom*</span><br>
30 <span class="textes_selectionproduits" id="titre_catalogue">*article3-Marque*</span><br>
31 <span class="textes_selectionproduits" id="titre_catalogue">*article3-Prix*</span>
32 </div>
33 </a>
34  
35 <a href="*article4-Lien_fiche_produit*" id="lien_defaut" title="*article4-Nom* - *article4-Marque* - *article4-Prix*">
36 <div class="bloc_selectionproduits">
37 <span id="grand_titre_catalogue">4.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article4_vignette.gif"><br>
38 <span class="textes_selectionproduits" id="titre_catalogue">*article4-Nom*</span><br>
39 <span class="textes_selectionproduits" id="titre_catalogue">*article4-Marque*</span><br>
40 <span class="textes_selectionproduits" id="titre_catalogue">*article4-Prix*</span>
41 </div>
42 </a>
43 
44 <a href="*article5-Lien_fiche_produit*" id="lien_defaut" title="*article5-Nom* - *article5-Marque* - *article5-Prix*">
45 <div class="bloc_selectionproduits">
46 <span id="grand_titre_catalogue">5.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article5_vignette.gif"><br>
47 <span class="textes_selectionproduits" id="titre_catalogue">*article5-Nom*</span><br>
48 <span class="textes_selectionproduits" id="titre_catalogue">*article5-Marque*</span><br>
49 <span class="textes_selectionproduits" id="titre_catalogue">*article5-Prix*</span>
50 </div>
51 </a>
52 
53 <a href="*article6-Lien_fiche_produit*" id="lien_defaut" title="*article6-Nom* - *article6-Marque* - *article6-Prix*">
54 <div class="bloc_selectionproduits">
55 <span id="grand_titre_catalogue">6.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article6_vignette.gif"><br>
56 <span class="textes_selectionproduits" id="titre_catalogue">*article6-Nom*</span><br>
57 <span class="textes_selectionproduits" id="titre_catalogue">*article6-Marque*</span><br>
58 <span class="textes_selectionproduits" id="titre_catalogue">*article6-Prix*</span>
59 </div>
60 </a>
61 
62 <!-- Les 6 blocs d'articles sont au dessus -->
63 
64 </div>


Cette fois-ci, voici un exemple qui affichera 1 seul article pour la Version Anglaise. Il faut donc commenter les 5 derniers blocs d'articles :

 1 <link rel="stylesheet" type="text/css" media="screen" href="../site/selectionProduits/selection_produits.css">
 2 <div id="encadrement_titre_code_dev"><span id="titre_code_dev">Product Selection</span></div> <!-- titre du widget -->
 3 <div class="texte_catalogue blocs" id="encadrement_texte_defaut" style="margin: 1px 0px 0px; padding: 5px 5px 6px;">
 4  
 5 <!-- Les 6 blocs d'articles sont en dessous -->
 6 
 7 <a href="*article1-Lien_fiche_produit*" id="lien_defaut" title="*article1-Nom* - *article1-Marque* - *article1-Prix*">
 8 <div class="bloc_selectionproduits">
 9 <span id="grand_titre_catalogue">1.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article1_vignette.gif"><br>
10 <span class="textes_selectionproduits" id="titre_catalogue">*article1-Nom*</span><br>
11 <span class="textes_selectionproduits" id="titre_catalogue">*article1-Marque*</span><br>
12 <span class="textes_selectionproduits" id="titre_catalogue">*article1-Prix*</span>
13 </div>
14 </a>
15 
16 <!--
17 <a href="*article2-Lien_fiche_produit*" id="lien_defaut" title="*article2-Nom* - *article2-Marque* - *article2-Prix*">
18 <div class="bloc_selectionproduits">
19 <span id="grand_titre_catalogue">2.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article2_vignette.gif"><br>
20 <span class="textes_selectionproduits" id="titre_catalogue">*article2-Nom*</span><br>
21 <span class="textes_selectionproduits" id="titre_catalogue">*article2-Marque*</span><br>
22 <span class="textes_selectionproduits" id="titre_catalogue">*article2-Prix*</span>
23 </div>
24 </a>
25 
26 
27 <a href="*article3-Lien_fiche_produit*" id="lien_defaut" title="*article3-Nom* - *article3-Marque* - *article3-Prix*">
28 <div class="bloc_selectionproduits">
29 <span id="grand_titre_catalogue">3.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article3_vignette.gif"><br>
30 <span class="textes_selectionproduits" id="titre_catalogue">*article3-Nom*</span><br>
31 <span class="textes_selectionproduits" id="titre_catalogue">*article3-Marque*</span><br>
32 <span class="textes_selectionproduits" id="titre_catalogue">*article3-Prix*</span>
33 </div>
34 </a>
35  
36 <a href="*article4-Lien_fiche_produit*" id="lien_defaut" title="*article4-Nom* - *article4-Marque* - *article4-Prix*">
37 <div class="bloc_selectionproduits">
38 <span id="grand_titre_catalogue">4.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article4_vignette.gif"><br>
39 <span class="textes_selectionproduits" id="titre_catalogue">*article4-Nom*</span><br>
40 <span class="textes_selectionproduits" id="titre_catalogue">*article4-Marque*</span><br>
41 <span class="textes_selectionproduits" id="titre_catalogue">*article4-Prix*</span>
42 </div>
43 </a>
44 
45 <a href="*article5-Lien_fiche_produit*" id="lien_defaut" title="*article5-Nom* - *article5-Marque* - *article5-Prix*">
46 <div class="bloc_selectionproduits">
47 <span id="grand_titre_catalogue">5.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article5_vignette.gif"><br>
48 <span class="textes_selectionproduits" id="titre_catalogue">*article5-Nom*</span><br>
49 <span class="textes_selectionproduits" id="titre_catalogue">*article5-Marque*</span><br>
50 <span class="textes_selectionproduits" id="titre_catalogue">*article5-Prix*</span>
51 </div>
52 </a>
53 
54 <a href="*article6-Lien_fiche_produit*" id="lien_defaut" title="*article6-Nom* - *article6-Marque* - *article6-Prix*">
55 <div class="bloc_selectionproduits">
56 <span id="grand_titre_catalogue">6.</span><img class="vignette_selectionproduits" src="../boutique/images_boutique/cms/article6_vignette.gif"><br>
57 <span class="textes_selectionproduits" id="titre_catalogue">*article6-Nom*</span><br>
58 <span class="textes_selectionproduits" id="titre_catalogue">*article6-Marque*</span><br>
59 <span class="textes_selectionproduits" id="titre_catalogue">*article6-Prix*</span>
60 </div>
61 </a>
62 -->
63 
64 <!-- Les 6 blocs d'articles sont au dessus -->
65 
66 </div>


N.B. : par défaut, la Version Française et la Version Anglaise seront placées dans le même diaporama. Il est donc conseillé d'afficher le même nombre d'articles pour ces deux versions car la hauteur du diaporama sera la même. Si vous souhaitez afficher un nombre d'articles différent, vous devez réaliser l'étape 4, 5, 6 et 7 de l'intégration deux fois, une pour chaque langue.

  • 2. Une fois l'étape 1 terminée, il faut modifier la hauteur du diaporama : l'agrandir, si vous avez ajouté des articles ou la rétrécir, si vous en avez enlevé. Rendez-vous à la fonction "Animation" > "Diaporamas".
    Repérez le diaporama créé dans l'étape 5 de l'intégration et cliquez sur Bt modifier.gif. Sur l'écran suivant, modifiez la hauteur de l'option "Je souhaite personnaliser la hauteur du diaporama".
    Voici les différentes hauteurs possibles, en fonction du nombre d'articles que vous avez choisi d'afficher :

    - 6 articles : 930px.
    - 5 articles : 780px.
    - 4 articles : 630px.
    - 3 articles : 490px.
    - 2 articles : 340px.
    - 1 article  : 200px.

    N.B. : cette étape changera la hauteur pour la Version Française et la Version Anglaise.
    N.B. : ces dimensions sont basées sur les modèles de site proposés par PowerBoutique©. Elles peuvent varier en fonction des gabarits que vous avez mis en place sur votre site et devront, dans ce cas, être ajustées.

  • 3. Une fois l'étape 1 et l'étape 2 terminées, n'oubliez pas de choisir les articles à afficher via la fonction "Animation" > "Diaporamas". Repérez le diaporama créé dans l'étape 5 de l'intégration et cliquez sur Bt modifier.gif. Cliquez sur l'onglet "Slides". Repérez le slide créé dans l'étape 5 de l'intégration et cliquez sur "Modifier". Sur l'écran suivant, choisissez vos articles à afficher grâce aux menus déroulants, puis cliquez sur "Enregistrer".

    N.B. : ces trois étapes doivent être impérativement réalisées conjointement pour pouvoir changer le nombre d'articles à afficher.

Modifier le titre du widget
  • Il faut éditer le code FR et/ou US de l'étape 5 d'intégration en remplaçant le texte "Sélection de Produits" dans la Version Française et le texte "Product Selection" dans la Version Anglaise. Vous modifiez ces textes via la fonction "Apparence" > onglet "Outils experts - Web-design" > "Modèles têtes de gondole". Sélectionnez, dans le menu déroulant, votre modèle de tête de gondole et cliquez sur "Modifier". Sélectionnez ensuite, dans le menu déroulant en haut à droite, la version que vous souhaitez modifier (Français ou Anglais), et cliquez sur l'onglet HTML. Modifiez votre texte et cliquez sur "Enregistrer".

    N.B. : le texte à modifier se trouve à la ligne 4 pour la Version Française et la Version 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