Widget Retour haut de page

De Centre Documentation PowerBoutique
Aller à : navigation, rechercher

Qu'est-ce que le widget « Retour haut de page » ?

Le widget « Retour haut de page » offre la possibilité d'ajouter, sur les pages de votre site, un bouton avec un lien de retour automatique vers le haut de la page, afin de faciliter la navigation de vos visiteurs.
En pratique, le widget s'affiche dès que l'internaute commence à faire défiler la page, et lui permet, au clic, de remonter directement en haut.

Voir le site démo

Voir le site démo Exemple du widget « Retour haut de page »
N.B. : il est nécessaire de faire défiler la page pour que le bouton s'affiche.


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 11 mai 2015

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

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

    - Intégration sur votre site en version FR et/ou en version US :

  • É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.

    - Intégration sur votre site en version mobile :

  • Étape 4
    Rendez-vous à la fonction "Animation" > "Bloc libre - cms". Sélectionnez, dans le menu déroulant en haut à droite, "site mobile". Ajoutez le code de la Version Française/Version Mobile Française ou le code de la Version Anglaise/Version Mobile Anglaise, selon votre besoin, dans un CMS existant. Pour cela, cliquez sur le bouton Bt modifier.gif et copiez-collez le code dans l'onglet HTML.

    Version Française Francais.gif / Version Mobile Française Iphone ipad fr.jpg :
    1 <!-- DEBUT - Widget haut de page -->
    2 
    3 <link rel="stylesheet" type="text/css" href="../site/hautpage/hautpage.css">
    4 <script type="text/javascript" src="../site/hautpage/hautpage.js"></script>
    5 <script type="text/javascript">hautpageDiv.title = "Haut de page";</script>
    6 
    7 <!-- FIN - Widget haut de page -->
    
    Version Anglaise Anglais.gif / Version Mobile Anglaise Iphone ipad us.jpg :
    1 <!-- DEBUT - Widget haut de page -->
    2 
    3 <link rel="stylesheet" type="text/css" href="../site/hautpage/hautpage.css">
    4 <script type="text/javascript" src="../site/hautpage/hautpage.js"></script>
    5 <script type="text/javascript">hautpageDiv.title = "Back to top";</script>
    6 
    7 <!-- FIN - Widget haut de page -->
    



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.

Personnaliser la couleur de fond du bouton
  • Il est possible de modifier la couleur de fond par défaut du bouton "Retour haut de page". Il vous faut, pour cela, éditer le fichier "hautpage.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 10 le code background-color:#000; et modifiez le code couleur #000 qui correspond au noir par celui de votre choix (défini en hexadécimale).

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

Éditer le texte qui apparaît au survol du bouton
  • Il est possible de modifier le texte qui apparaît au survol du bouton. Il vous faut, pour cela, éditer le(s) code(s) de la Version Française/Version Mobile Française et/ou de la Version Anglaise/Version Mobile Anglaise de l'étape d'intégration.

    Remplacez "Haut de page" pour la Version Française/Version Mobile Française, et "Back to top" pour la Version Anglaise/Version Mobile Anglaise, par les textes de votre choix.
    N.B. : pour les deux versions, le texte à modifier se trouve à la ligne 5.

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