Widget Kit spécial Pâques

De Centre Documentation PowerBoutique
Aller à : navigation, rechercher

Qu'est-ce que le widget « Kit spécial Pâques » ?

Le widget « Kit spécial Pâques » vous permet d'ajouter des éléments graphiques thématiques sur votre site pour l'habiller aux couleurs de Pâques !
Ce widget inclut également une "chasse à l’œuf" : petit jeu qui consiste à dissimuler sur votre site un "œuf surprise" derrière lequel se cache un code promo à utiliser par vos clients. Cet "œuf surprise" se situe dans le coin inférieur droit du fond de votre site, il affiche au clic le code promo de votre choix, par défaut "PAQUES2018".
Vous devez donc soit créer au préalable une règle commerciale avec comme code remise "PAQUES2018", ou alors modifier le widget pour y faire apparaitre le code promo de votre choix.
Rendez-vous dans la rubrique "Personnalisation du widget" pour découvrir comment désactiver la chasse à l’œuf et personnaliser le code promo affiché.

N.B. : Important : le widget sera masqué automatiquement pour une largeur d'écran inférieure ou égale à 1130px. En effet, en-dessous de cette résolution, l'œuf n'est plus visible et le bandeau annonciateur du jeu vient masquer une partie du site. Vous avez la possibilité d'ajuster cette valeur de 1130px pour adapter le comportement du widget sur votre site en vous rendant à la rubrique "Modifier la largeur d'écran en dessous de laquelle le widget sera masqué".

N.B. : si un fond de page (image et/ou couleur) est déjà appliqué à votre site, le "Kit spécial Pâques" se superposera à ce dernier.
N.B. : si vous avez déjà un élément dans le coin inférieur droit du fond de votre site (badge Trusted Shops, Avis Vérifiés..), l’œuf risque d'être masqué.


Voir le site démo

Exemples du widget « Kit spécial Pâques» :
BleuBandeau bleu | JauneBandeau jaune | VertBandeau vert | RoseBandeau rose


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


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

  • Étape 3
    Via la même page, cliquez sur le nouveau dossier /paques, puis sur le bouton "Ajouter" et enfin sur "Parcourir...". Ouvrez un à un les 13 fichiers que vous avez téléchargés 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. : 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. : 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 :
     1  <!-- DEBUT - Widget kit spécial Pâques -->
     2 
     3 <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css">
     4 <link rel="stylesheet" type="text/css" href="../site/paques/paques.css">
     5 <script type="text/javascript" src="../site/paques/paques.js"></script>
     6 <div id="conteneur_bravo" class="conteneur_bravo_close">
     7 <div id="conteneur_codepromo"></div>
     8 <a href="#" onclick="document.getElementById('conteneur_bravo').className='conteneur_bravo_close';return false;"></a>
     9 </div>
    10 
    11 <!-- FIN - Widget kit spécial Pâques -->
    

  • Étape 6
    Pour cette dernière étape deux possibilité s'offrent à vous, choisissez celle qui vous conviendra le mieux :

    - Utiliser le code promo PAQUES2018 :

    Il vous faut donc créer une règle commerciale dans la fonction "Animation" > "Règles commerciales". Cliquez sur le bouton Remise.png en haut à droite. Dans l'écran suivant, définissez un nom, une description et n'importe quel type de remise, puis cliquez sur "Valider". L'écran suivant est différent en fonction du type de remise choisi, entrez les différents éléments demandés et cliquez sur "Enregistrer". Enfin, sur l'écran suivant, vous êtes libre de remplir les conditions que vous désirez à l’exception du "code remise requis" qui doit absolument être PAQUES2018. Une fois les conditions remplies, cliquez sur "Terminer". Il vous faut maintenant activer cette règle commerciale : vous êtes toujours sur la fonction "Animation" > "Règles commerciales" > repérez celle que vous venez de créer et cliquez sur le bouton Desactive.gif qui passera alors en Active.gif .
    N.B. : pour plus d'informations sur le paramétrage des règles commerciales, rendez-vous dans le manuel d'utilisation du logiciel Powerboutique


    - Utiliser un code promo existant :

    Rendez-vous dans la rubrique "Utiliser un code promo existant" pour découvrir comment personnaliser le code promo affiché.



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.

Désactiver la chasse à l'oeuf
  • Il est possible de désactiver la chasse à l’œuf et de garder uniquement l'image de fond sur votre site. Il vous faut, pour cela, éditer le fichier "paques.js".
    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.
    Recherchez sur la ligne 3 le code var activer_chasse = 'oui'; et modifiez le paramètre oui :

    - 'oui' permet d'afficher l’œuf à trouver (il s'agit du paramétrage par défaut),
    - 'non' permet de le masquer.

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

Utiliser un code promo existant
  • Il est possible d'afficher sur l'image un code promo existant. Il vous faut, pour cela, éditer le fichier "paques.js".
    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.
    Recherchez sur la ligne 4 le code var code_promo = 'PAQUES2018'; et modifiez le paramètre PAQUES2018 par le code promo de votre choix.

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

Modifier la couleur du bandeau annonciateur du jeu
  • Il est possible de changer la couleur du bandeau qui apparait en haut à gauche de l'écran pour annoncer à vos visiteurs la chasse à l’œuf. Il vous faut, pour cela, éditer le fichier "paques.js".
    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.
    Recherchez sur la ligne 5 le code var couleur_bandeau = 'bleu'; et modifiez le paramètre bleu :

    - 'bleu' permet d'afficher un bandeau bleu (il s'agit du paramétrage par défaut),
    - 'jaune' permet d'afficher un bandeau jaune,
    - 'rose' permet d'afficher un bandeau rose,
    - 'vert' permet d'afficher un bandeau vert.

    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 /paques, 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 :


Modifier la largeur d'écran en dessous de laquelle le widget sera masqué
  • Il est possible de choisir à partir de quelle largeur d'écran le widget sera masqué. Il vous faut, pour cela, éditer le fichier "paques.css".
    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.
    Recherchez sur la ligne 1 le code @media screen and (max-width: 1130px) et modifiez le 1130 par la taille souhaitée.

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

    N.B. : si vous ne souhaitez pas masquer le widget, quelle que soit la taille de l'écran de vos visiteurs, il vous suffit de supprimer la ligne 1 du fichier "paques.css".



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