Widget kit graphique Halloween

De Centre Documentation PowerBoutique
Aller à : navigation, rechercher

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

Le widget « Kit graphique Halloween » vous permet d'ajouter des éléments graphiques thématiques sur votre site pour l'habiller aux couleurs d'Halloween !
En pratique, ce widget inclut 5 fonds de page et 6 personnages "Halloween" que vous positionnez à droite ou à gauche, sur votre site. Vous affichez le fond de page et/ou le personnage de votre choix. Rendez-vous dans la rubrique "Personnalisation du widget" pour définir les éléments graphiques que vous souhaitez ajouter sur votre site.

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

Voir le site démo

Voir le site démo Exemple du widget « Kit graphique Halloween »


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

Dernières modifications : le 29 septembre 2016

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

  • Étape 3
    Via la même page, cliquez sur le nouveau dossier /halloween, puis sur le bouton "Ajouter" et enfin sur "Parcourir...". Ouvrez un à un les 19 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 Halloween -->
    2 
    3 <script type="text/javascript" src="../site/halloween/halloween.js"></script>
    4 
    5 <!-- FIN - Widget kit graphique Halloween -->
    
    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 faut, pour cela, éditer le fichier "halloween.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 entre la ligne 3 et la ligne 11.

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 gère l'affichage du fond de page "Halloween" :

    - 'oui' permet d'afficher le fond (il s'agit du paramétrage par défaut),
    - 'non' permet de le masquer.

  • Ligne 4 : le code var nom_fond_ecran permet de définir le fond de page "Halloween" que vous souhaitez afficher. Trois fonds sont disponibles dans le widget :

    - 'fond1' (il s'agit du fond paramétré par défaut),
    - 'fond2' (liseret en bas de la page),
    - 'fond3',
    - 'fond4',
    - 'fond5'.
Aperçu :


  • Ligne 6 : le code var afficher_personnage gère l'affichage du personnage "Halloween" :

    - 'oui' permet d'afficher le personnage (il s'agit du paramétrage par défaut),
    - 'non' permet de le masquer.

  • Ligne 7 : le code var cote_personnage définit de quel côté le personnage "Halloween" apparaîtra :

    - 'droite' (il s'agit du paramétrage par défaut),
    - 'gauche'.

  • Ligne 8 : le code var nom_personnage permet de choisir le personnage "Halloween" que vous souhaitez afficher sur votre site. Six personnages sont disponibles dans le widget :

    - 'momie',
    - 'monstre',
    - 'sorciere',
    - 'squelette',
    - 'vampire',
    - 'zombie' ,
    - 'aleatoire' permet d'afficher tous les personnages aléatoirement (il s'agit du paramétrage par défaut).
Aperçu (droite/gauche) :


  • Ligne 10 : le code var id_zone_personnage correspond au nom (id) de la zone autour de laquelle le personnage "Halloween" est positionné. Par défaut, cette zone est celle du corps de la page : son id est 'largeur_de_page_et_bordures'. Si ce bloc n'est pas présent sur votre site ou si vous voulez changer la zone d'affichage du personnage, il vous suffit de changer l'id par celui de la zone de votre choix.
    N.B. : le widget définit par défaut une ombre sur le contour de la zone d'affichage du personnage "Halloween".

  • Ligne 11 : le code var decalage_personnage définit à quelle hauteur le personnage est positionné par rapport à la zone d'affichage. Si l'image se situe à côté d'une zone cliquable, le personnage peut recouvrir ce lien. Il peut donc être nécessaire de le déplacer. Par défaut, la hauteur définie est de '50px' . Cette valeur doit être précisée en pixel.




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