Bannière PrestaShop

PrestaShop Banner CC Documentation

Documentation complète pour le module de gestion des bannières pour PrestaShop (cc_ps_banner) avec des options de configuration étendues et des modèles prêts à l'emploi.

Table des matières

1. Introduction
2. Installation
3. Activation de la licence
4. Panel de gestion
5. Gestion des bannières
6. Configuration de base
7. Configuration vidéo
8. Présélections de contenu
9. Configuration de la superposition
10. Paramètres d'animation
11. Afficher le calendrier
12. Utilisation du module dans les modèles
13. Résolution de problèmes
14. FAQ

1. Introduction

CC PrestaShop Banner est un module avancé pour créer et gérer des bannières dans les boutiques PrestaShop. Le module offre une interface intuitive qui vous permet de créer des bannières attrayantes en utilisant des modèles prêts à l'emploi, sans avoir besoin de connaissances en HTML et CSS. connaissances en HTML et CSS.

Le module offre :

• Neuf contenus de bannières prédéfinis
• Différents types d'arrière-plan : vidéo, photo ou couleur
• Intégration avec YouTube, Vimeo et possibilité de télécharger ses propres vidéos
• Couleur ou graphique superposé
• Effets d'animation d'entrée
• Affichage de l'horaire (de à)
• Possibilité de placer la bannière à différents endroits du magasin
• Prise en charge de plusieurs bannières simultanément

2. installation

Exigences du système

• PrestaShop 1.7 ou supérieur
• PHP 7.0 ou plus récent
• Permission d'installer des modules

Processus d'installation

1. Télécharger le fichier ZIP du module depuis la boutique officielle cocos.codes
2. Se connecter au panneau d'administration de PrestaShop
3. Allez dans : Modules > Gestionnaire de modules > Ajouter un nouveau module
4. Cliquez sur "Ajouter un module" et sélectionnez le fichier ZIP téléchargé.
5. Une fois l'installation terminée, cliquez sur "Configurer"

3. Activation de la licence

Avant de pouvoir utiliser toutes les fonctionnalités du module, il est nécessaire d'activer la licence :

1. Après l'installation, procéder à la configuration du module
2. Sélectionnez l'onglet "Licence
3. Saisir la clé de licence reçue après l'achat
4. Cliquez sur "Activer la licence"
5. Une fois l'activation réussie, un message de confirmation s'affiche et toutes les fonctions du module sont déverrouillées.

4 Panneau de gestion

Le panneau de gestion du module se compose de plusieurs onglets qui permettent une configuration complète :

Principaux onglets :

• Gestion des bannières - l'ajout, la modification et la suppression de bannières
• Documentation - lien vers la documentation en ligne
• Soutien - lien vers la page d'assistance
• Plug-ins - extensions supplémentaires pour le module
• Licence - gestion des licences de modules

Lorsque vous accédez à l'onglet "Gérer la bannière", vous voyez une liste de toutes les bannières que vous avez créées, avec la possibilité de les modifier, de les supprimer et de changer leur statut d'activité.

5. gestion des bannières

Sous l'onglet "Gestion des bannières", vous pouvez créer, modifier et supprimer des bannières :

Liste des bannières

• ID de la bannière
• Nom
• Crochet (lieu de présentation)
• Preset (modèle de contenu)
• Type d'arrière-plan
• Type de vidéo
• Statut de l'activité
• Position
• Date de création
• Actions disponibles (modifier, supprimer)

Ajout et modification de bannières

1. Cliquez sur le bouton "Ajouter un nouveau" ou "Modifier" à côté d'une bannière existante.
2. Remplir le formulaire de données de la bannière, qui est divisé en plusieurs sections :
   • Données de base - nom, statut de l'activité
   • Affichage - crochet, dimensions, coins arrondis, position
   • Type d'arrière-plan - choix du type d'arrière-plan (vidéo, photo, couleur)
   • Configuration vidéo - paramètres du lecteur vidéo
   • Contenu prédéfini - la sélection d'un modèle prêt à l'emploi et sa configuration
   • Superposition - configuration de la couche superposée
   • Animations - effets d'entrée de la bannière
   • Afficher le calendrier - définir la durée de l'activité de la bannière
3. Cliquez sur "Enregistrer" pour sauvegarder les modifications

6. configuration de base

Le module propose trois types différents d'arrière-plan de bannière :

Couleur

• Sélectionnez "Couleur" comme type d'arrière-plan
• Utilisez le sélecteur de couleur pour sélectionner la couleur d'arrière-plan souhaitée.
• Vous pouvez saisir la valeur de la couleur au format HEX (#RRGGBB) ou RGBA.

Photo

• Sélectionnez "Photo" comme type d'arrière-plan
• Télécharger l'image en utilisant le bouton "Parcourir".
• Formats pris en charge : JPG, PNG, GIF (maximum 15MB)
• Lors de la modification, le téléchargement d'une nouvelle image remplacera l'image actuelle, tandis que si le champ est laissé vide, l'image existante sera conservée.

Vidéo

• Sélectionnez "Vidéo" comme type d'arrière-plan
• Configurez les autres paramètres vidéo dans la section "Configuration vidéo" (décrite dans le chapitre suivant).

7. configuration vidéo

Le module permet d'utiliser une vidéo comme arrière-plan d'une bannière. Différentes sources vidéo sont disponibles :

Types de vidéos

• Pas de vidéo - utilisé lorsqu'un type d'arrière-plan autre que vidéo est sélectionné
• YouTube - intégrer une vidéo YouTube
• Vimeo - intégrer une vidéo de Vimeo
• URL direct - lien vers un fichier vidéo hébergé sur un serveur externe
• Fichier vidéo (upload) - téléchargement de votre propre fichier vidéo

Paramètres de lecture

• Lecture automatique - démarre la lecture automatiquement lorsque la page est chargée
• Réduit au silence - vidéo jouée sans son (recommandé pour la lecture automatique)
• Boucle - répétition automatique de la vidéo à la fin de celle-ci
• Afficher les contrôles - affiche des boutons de commande personnalisés (lecture/pause, sourdine/son)

Chargement de votre propre vidéo

• Sélectionnez le type de vidéo "Fichier vidéo (upload)"
• Télécharger le fichier en utilisant le bouton "Parcourir".
• Formats pris en charge : MP4, WebM, AVI, MOV (maximum 50MB)

8 préréglages de contenu

Le module propose neuf présélections de contenu prêtes à l'emploi (modèles) qui peuvent être sélectionnées et personnalisées :

Présélections disponibles

• Sans préréglage (vidéo uniquement) - affiche uniquement l'arrière-plan sans aucun contenu supplémentaire
• Préréglage 1 (titre central avec bouton) - grand titre central, sous-titre et bouton CTA
• Préréglage 2 (Texte aligné à gauche) - contenu aligné sur le côté gauche de la bannière
• Préréglage 3 (Disposition en trois colonnes) - contenu divisé en trois colonnes
• Présélection 4 (divisée en deux colonnes) - contenu divisé en deux colonnes
• Préréglage 5 (Plein écran avec flou) - effet plein écran avec grand titre central
• Préréglage 6 (En-tête avec statistiques) - un en-tête en haut et trois colonnes de données en bas
• Présélection 7 (Liste des fonctions avec CTA) - titre et liste de fonctions se terminant par un bouton CTA
• Préréglage 8 (en-tête et deux colonnes) - télécharger la présentation de la demande
• Préréglage 9 (En-tête et deux colonnes centrées, agrandies) - mise en page pour la promotion d'événements

Éléments de contenu pour la configuration

• Titre principal - bannière d'en-tête
• Sous-titre - texte complémentaire sous le titre principal
• Texte du bouton - le contenu affiché sur le bouton CTA
• Lien vers le bouton - URL de destination lorsque le bouton est cliqué
• Couleur du texte du bouton - couleur de la police du bouton
• Couleur d'arrière-plan du bouton - couleur d'arrière-plan du bouton
• Texte 1, 2, 3 - champs de texte supplémentaires utilisés dans divers préréglages
• CSS personnalisé - styles CSS supplémentaires pour la bannière

9. configuration de la superposition

Une superposition est une couche affichée sur l'arrière-plan d'une bannière qui peut contribuer à améliorer la lisibilité du texte ou à créer un effet de fumée :

Types de superposition

• Pas de superposition - pas de couche supplémentaire sur l'arrière-plan
• Couleur - couche colorée avec transparence réglable
• Image - superposition graphique (par exemple, dégradé, motif, texture)

Paramètres de superposition des couleurs

• Couleur de l'incrustation - sélecteur de couleurs (supporte les formats HEX et RGBA)
• Transparence - valeur comprise entre 0,0 (totalement transparent) et 1,0 (opaque)

Paramètres de superposition d'images

• Image superposée - téléchargement d'une image à l'aide du bouton "Parcourir".
• Transparence - réglage de l'intensité du recouvrement de l'image

10. paramètres d'animation

Le module propose plusieurs effets d'animation qui sont appliqués lorsque la bannière est chargée :

Animation d'entrée

• Sans animation - la bannière apparaît immédiatement
• Aspect lisse - la bannière devient progressivement visible (effet de fondu)
• Entrée par la gauche - la bannière entre par la gauche de l'écran
• Entrée par la droite - la bannière entre par la droite de l'écran
• Entrée par le bas - la bannière entre par le bas de l'écran
• Augmentation - la bannière apparaît avec un effet de zoom à partir du centre
• Rebondir - la bannière apparaît avec un effet de rebond

Temps d'animation

• Valeur en millisecondes (de 100 à 10000)
• La valeur par défaut est de 1000ms (1 seconde).
• Temps plus court = animation plus rapide
• Temps plus long = animation plus lente et plus fluide

11. afficher le calendrier

La fonction de programmation permet d'allumer et d'éteindre automatiquement les bannières à une heure précise :

Paramètres du calendrier

• Activer l'horaire - activation de la fonction d'affichage temporisé
• Date de début - la date et l'heure à partir desquelles la bannière doit être affichée
• Date d'achèvement - la date et l'heure jusqu'à laquelle la bannière doit être affichée

Exemples d'utilisation

• Bannières promotionnelles à durée limitée (par exemple, Black Friday, ventes saisonnières)
• Informations sur les événements à venir
• Changement de bannières en fonction de l'heure de la journée (différentes bannières le matin, différentes le soir)
• Annonces périodiques aux clients

12. utilisation du module dans les modèles

Les bannières sont automatiquement affichées aux endroits spécifiés par les narguilés sélectionnés. Les narguilés disponibles sont les suivants :

Principaux sites

• displayHome - contenu principal de la page d'accueil
• displayTop - partie supérieure de la page (au-dessus de l'en-tête)
• displayNav1 - première barre de navigation (au-dessus du logo/de la boutique)
• displayNav2 - deuxième barre de navigation (souvent sous le logo)
• displayNavFullWidth - navigation complète (par exemple, menu mégadropdown)
• bannière d'affichage - bannière publicitaire au-dessus de l'en-tête
• afficher le pied de page - contenu principal du pied de page
• displayFooterBefore - section avant le pied de page (par exemple, liens supplémentaires)
• displayFooterAfter - section après le pied de page (par exemple, clauses de non-responsabilité, scripts)
• afficherColonneGauche - colonne de gauche de la page
• colonne de droite - colonne de droite de la page
• displayWrapperTop - haut du conteneur de la page principale
• affichage du bas de l'habillage - partie inférieure du conteneur de la page principale
• displayContentWrapperTop - haut du contenu principal
• displayContentWrapperBottom - partie inférieure du contenu principal
• displayBeforeBodyClosingTag - immédiatement avant de fermer la balise <body> (souvent sur les scripts)

Accrochage des pages de produits

• afficherlesinformationscomplémentairessurlesproduits - informations complémentaires sur la page du produit
• afficherListeProduitsRevues - les commentaires sur les produits dans la vue en liste (par exemple, les étoiles)
• afficherRassurance - bloc avec garanties/confiance
• displayAfterProductThumbs - éléments après les vignettes de l'image du produit

Accrochage des paniers et des commandes

• affichagePanier d'achat - le contenu de la page du panier d'achat
• displayShoppingCartFooter - ajouts dans le pied de page du panier d'achat (par exemple, boutons CTA)
• displayBeforeCarrier - avant de choisir le mode de livraison
• Affichage après le transporteur - section après la sélection du mode de livraison
• Affichage de la confirmation de commande - confirmation de commande

Raccordement des comptes clients

• afficherCompteClient - le contenu du client (par exemple, les liens, les modules)
• afficherMonBlocCompte - Bloc "Mon compte" (généralement dans l'en-tête ou la colonne latérale)

13 Dépannage

La bannière ne s'affiche pas

1. Vérifier que la bannière est active (statut "Actif" dans la liste des bannières)
2. S'assurer que la licence est active
3. Vérifier que le crochet auquel la bannière a été attribuée est présent dans le modèle actuel
4. Si un calendrier est activé, assurez-vous que la date actuelle se situe dans sa plage.
5. Effacer le cache de PrestaShop et du navigateur

La vidéo n'est pas lue automatiquement

1. Assurez-vous que l'option "Lecture automatique" est activée.
2. Vérifiez que le son de la vidéo est coupé (les navigateurs bloquent la lecture automatique des vidéos avec son).
3. Vérifier que l'URL de la vidéo est correcte (pour YouTube et Vimeo)
4. Vérifier que le fichier vidéo a été correctement téléchargé (dans le cas de votre propre fichier)

Problèmes d'affichage sur les appareils mobiles

1. Ajustez les dimensions de la bannière pour qu'elle soit réactive (par exemple, largeur : 100%).
2. Réduire la taille de la vidéo ou de la photo téléchargée pour une meilleure performance
3. Ajustez la quantité de texte - sur les petits écrans, un texte trop long peut être illisible.

14. LES FAQ

Puis-je avoir plus d'une bannière au même endroit (hookup) ?
Oui, le module permet d'attribuer plusieurs bannières à la même connexion. Les bannières seront affichées en fonction de la position définie (de la valeur la plus faible à la valeur la plus élevée).

Puis-je utiliser la même bannière dans différentes zones du magasin ?
Actuellement, une bannière ne peut être attribuée qu'à un seul narguilé. Si vous souhaitez afficher la même bannière à différents endroits, vous devez créer une copie de la bannière et l'attribuer à un narguilé différent.

Quelle est la taille des fichiers vidéo que je peux télécharger ?
Le module permet de télécharger des fichiers vidéo d'une taille maximale de 50 Mo. Pour des performances optimales, nous recommandons toutefois de compresser la vidéo au minimum nécessaire et d'utiliser le format MP4 avec le codec H.264.

Les bannières sont-elles réactives ?
Oui, les bannières s'adaptent à la largeur du conteneur dans lequel elles sont affichées. Pour garantir une réactivité totale, nous recommandons de fixer la largeur à 100% et une hauteur appropriée (vous pouvez utiliser les unités vh pour les écrans dont la hauteur dépend de la hauteur). écran en fonction de la hauteur).

Puis-je intégrer le formulaire dans une bannière ?
Dans sa version standard, le module ne prend pas directement en charge les formulaires. Si vous avez besoin d'inclure un formulaire dans une bannière, vous pouvez utiliser un code HTML personnalisé dans les champs de texte, mais la fonctionnalité du formulaire dépendra du modèle de votre boutique.

À quelle fréquence le module est-il mis à jour ?
Le module est mis à jour régulièrement pour assurer la compatibilité avec les dernières versions de PrestaShop et pour introduire de nouvelles fonctionnalités. Les détenteurs d'une licence valide ont accès à toutes les mises à jour.

Puis-je transférer la licence à un autre magasin ?
La licence est attribuée à un domaine. Si vous changez de domaine de boutique, veuillez contacter le support COCOS pour transférer la licence.

Le module affecte-t-il les performances de l'atelier ?
Le module a été optimisé pour la performance. Les fichiers vidéo ou image de grande taille sont ceux qui ont le plus d'impact sur la vitesse de chargement. Nous recommandons d'optimiser les fichiers multimédias avant de les utiliser dans les bannières.