Widget Kit graphique Soldes

De Centre Documentation PowerBoutique

Qu'est-ce que le widget « Kit graphique Soldes » ?

Le widget « Kit graphique Soldes » vous permet d'ajouter des éléments graphiques thématiques sur votre site pour l'habiller aux couleurs des soldes d'été ou d'hiver !
Ce widget inclut 6 fonds de page : 1 orienté Soldes d'été, 2 orientés Soldes d'hiver et 2 plus neutres. Vous êtes libre d'afficher celui de votre choix.
Rendez-vous dans la rubrique "Personnalisation du widget" pour découvrir comment personnaliser votre fond.

N.B. : si un fond de page (image et/ou couleur) est déjà appliqué à votre site, le fond "soldes" choisi se superposera à votre fond de page habituel.

Voir le site démo

Exemples du widget « Kit graphique Soldes » :

Fond1Fond 1 | Fond2Fond 2 | Fond3Fond 3 | Fond4Fond 4 | Fond5Fond 5 | Fond6Fond 6


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

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

  • É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.
    *vous pouvez également insérer le code dans un cms existant.

    Version Française Francais.gif et Version Anglaise Anglais.gif :
    1.  <!-- DEBUT - Widget Kit graphique Soldes -->
    2.  
    3. <link rel="stylesheet" type="text/css" href="../site/soldes/soldes.css">
    4. <script type="text/javascript" src="../site/soldes/soldes.js"></script>
    5.  
    6. <!-- FIN - Widget Kit graphique Soldes -->
    N.B. : les codes de la Version Française et de la Version Anglaise sont identiques.



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.

Paramétrer les éléments graphiques affichés sur votre site

Il est possible de paramétrer les éléments graphiques qui seront ajoutés sur votre site. Il vous faut, pour cela, éditer le fichier "soldes.js" pour la Version Française et pour 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.
Les paramètres se trouvent aux lignes 3 et 4.

Voici une liste des différents éléments graphiques inclus dans le widget, ainsi que des différents paramétrages que vous pouvez effectuer :

  • Ligne 3 : le code var afficher_fond_ecran_soldes gère l'affichage du fond de page :

    - 'oui' permet d'afficher le fond (il s'agit du paramétrage par défaut),
    - 'non' permet de le masquer, sans à avoir à supprimer le widget. Pour pouvoir l'utiliser aux prochaines soldes.

  • Ligne 4 : le code var nom_fond_ecran_soldes permet de définir le fond de page que vous souhaitez afficher. Six fonds sont disponibles pour ce widget :

    - 'fond1' (il s'agit du fond paramétré par défaut pendant les soldes d'hiver),
    - 'fond2',
    - 'fond3',
    - 'fond4' (il s'agit du fond paramétré par défaut pendant les soldes d'été),
    - 'fond5',
    - 'fond6'.

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

Aperçu :



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