Prérequis

Pour pouvoir utiliser le carrousel de marques, il faut avoir créer ses marques au préalable dans le back office d'Oasis.

Cliquez ici pour consulter la documentation. 

Introduction

Ce module vous permet d’intégrer un carrousel de marques au sein d’une page de contenu.

Il fonctionne avec la gestion des marques déjà disponible dans OASIS Commerce.

AU SOMMAIRE : 

• Prérequis
• Introduction
• 1- Paramétrage d’une marque (back office)
• 2- Intégration du carrousel de marques sur une page (front office)
  • 2.1 Insertion du module « Carrousel de marques » sur une page
  • 2.2 Paramétrage du module « Carrousel de marques »
    • 2.2.1 Configuration du module
    • 2.2.2 Défilement
    • 2.2.4 Aspect

Pour utiliser le module « Carrousel de marques », il est impératif d’utiliser la gestion des marques.

Dans la rubrique « Catalogue > Paramétrage > Marques », créez une nouvelle marque ou cliquez sur une marque à mettre en avant dans le carrousel.

Allez ensuite dans la section « Paramètres pour le module Carrousel de marques » :

• Logo de la marque (obligatoire) :

Cette image est dédiée au carrousel, elle est complémentaire au logo de la marque et peut donc être différente si besoin. Ses dimensions doivent être de 250x250 pixels minimum et il est préférable qu’elle soit au format PNG transparent pour un meilleur rendu dans le carrousel.

• Image de fond (facultatif) :

Cette image s’affiche dans le fond du bloc de la marque. Les dimensions minimales sont de 500x500 pixels et l’image sera centrée en mode « couvrir la zone » (elle est donc susceptible d’être tronquée sur les bords selon le contexte).

• Texte au survol (facultatif) :

Le module offre la possibilité d’afficher un court texte au survol du bloc de la marque. Si le site est multilingue, utilisez les onglets pour basculer sur chaque langue afin de rentrer le texte correspondant.

2- Intégration du carrousel de marques sur une page (front office)

Pour ajouter le module « Carrousel de marques » sur une page, ouvrez l’éditeur sur la page sur laquelle vous souhaitez afficher le module.

Un nouveau module « Carrousel de marques » est disponible dans la section e-commerce.

2.1 Insertion du module « Carrousel de marques » sur une page

Cliquez sur le bouton « + » et ouvrez la section « E-commerce » de l’onglet « Modules ».

Glissez-déposez le module « Carrousel de marques » à l’endroit souhaité sur la page.

2.2 Paramétrage du module « Carrousel de marques »

Après l’insertion du module sur la page, plusieurs paramètres sont à effectuer.

2.2.1 Configuration du module

La section « Configuration » vous permet de sélectionner les marques que vous souhaitez afficher dans le carrousel de marques.

Vous pouvez utiliser le champ de recherche pour trouver une marque (3 caractères minimum) puis cliquez dessus pour l’ajouter.

Si vous souhaitez supprimer une marque, cliquez sur le picto « X ».

A savoir : seules les marques actives sont sélectionnables ici. Si une marque n'est pas trouvable avec le champ de recherche, vérifiez si le paramètre "Actif" est bien sur "oui" dans le back office.

2.2.2 Défilement

La section « Défilement » intègre divers paramètres permettant de régler l’animation du carrousel. 

• Type de navigation :

Active des flèches latérales ou des points pour naviguer dans le carrousel. Dans tous les cas, le défilement peut aussi se faire en faisant glisser le carrousel avec la souris ou le doigt sur mobile.

• Lancement automatique :

Si réglé sur « non », l’internaute doit forcément utiliser la navigation pour faire défiler le carrousel.

• Temps d’affichage :

Durée (en secondes) durant laquelle le carrousel reste fixe (valable uniquement sir le lancement automatique est activé).

• Temps de transition :

Durée (en secondes) du mouvement entre 2 blocs lors du défilement.

• Nombre d’éléments affichés :

Détermine le nombre de marques que l’on voit à l’écran (maximum 6 sur bureau, 4 sur tablette et 2 sur mobile).

2.2.3 Forme

La section « Forme » permet de régler la forme des blocs qui apparaissent dans le carrousel de marques.

• Hauteur du carrousel :

Fixer la hauteur des blocs entre 150 et 500 pixels.

• Coins arrondis :

Mettre des coins arrondis sur chaque bloc de marque (30 pixels maximum).

• Marge entre les éléments :

Régler l’espacement horizontal entre chaque bloc (mettre 0px pour tout coller).

• Position du logo :

Positionner le logo de marque en haut, au milieu ou en bas du bloc.

2.2.4 Aspect

La section « Aspect » permet de paramétrer le style graphique des blocs de marque.

• Bordures :

Épaisseur de la bordure du bloc (mettre 0px pour ne pas avoir de bordure).

• Couleur des bordures :

Code couleur de la bordure du bloc (peut être défini via la palette).

• Couleur de fond du logo :

Couleur qui apparaît derrière le logo, sur toute la surface du bloc.
 En mettant une opacité inférieure à 1, on peut laisser apparaître l’image de fond de la marque (définie au chapitre 1).

• Couleur de fond (si pas d’image) :

Couleur de fond du bloc qui sera visible uniquement si la marque n’a pas d’image de fond définie.

2.2.5 Survol

La section « Survol » permet de régler le comportement au survol des blocs de marque.

• Afficher le texte au survol :

Le bloc laisse apparaître un texte (défini au chapitre 1) au survol du logo.

• Inclure le nom de la marque :

Affiche un titre (nom de de la marque) au-dessus du texte.

• Inclure un lien d’action :

Affiche un lien « Voir les produits » sous le texte.

• Couleur du texte :

Définit la couleur de tout le texte (Titre, texte de la marque et lien).

• Couleur de fond au survol :

Permet de changer la couleur de fond du logo au survol.

En mettant une opacité inférieure à 1, on peut laisser apparaître l’image de fond de la marque (définie au chapitre 1).

Exemple d’affichage

Exemple d’affichage au survol