FC_strapi_sliders.md

Problème :

Sur la homepage, le premier bloc Strapi (bannières) ne se comporte pas comme attendu. Lorsqu'il est en mode carrousel, il affiche trois images côte à côte, sans mise en page au lieu d'un encart dans lequel les trois images défilent sur toute la largeur.

Transit des données

Route : app/routes/_main._index.tsx Composant appelé : app/theme/pages/Home/Home.tsx

Les données de Strapi sont appelées via la query StrapiPageBySlug : app/theme/queries/strapi/StrapiPageQuery.gql. Dans cette query, le fragment StrapiWidgets (même fichier), détaille les infos récupérables. TODO: trouver l'extension et l'index.ts associés

Dans StrapiWidgets, on fait appel au widgetNameComponentMapper (app/theme/components/organisms/Strapi/StrapiWidgets/mapping.ts). Si le widget a tel-type, alors on utilise tel-composant auquel on envoie le widget en props.

export const widgetNameComponentMapper = {
  ComponentCommunCarousel: StrapiCarousel,
  ComponentCommunSlider: StrapiSlider, // Celui qui nous intéresse
  ComponentCommunWysiwyg: StrapiWysiwyg,
  ComponentCommunEncart: StrapiEncart,
  ComponentCommunBlocRicheTexte: StrapiBlocRicheTexte,
  ComponentFaqItemQuestion: StrapiItemQuestion,
  ComponentFaqItemFaq: StrapiFAQItem,
  ComponentCommunEntete: StrapiEntete
};

Dans l'atome StrapiSlider, isCarousel est un booléen qui suit le champ carousel de ce fragment (toujours dans StrapiPageBySlug) :

... on ComponentCommunSlider {
    slider {
      data {
        attributes {
          rayon
          carousel
          fondCouleur
          menu
          sliderItems {
            data {
              attributes {
                titre
                url
                image {
                  data {
                    attributes {
                      url
                    }
                  }
                }
                imageMobile {
                  data {
                    attributes {
                      url
                    }
                  }
                }
                boutonEnrichis {
                  data {
                    attributes {
                      titre
                      lien
                      actif
                      positionVertical
                      positionHorizontal
                      couleur
                      couleur
                    }
                  }
                }
              }
            }
          }
          entete {
            ...Entete
          }
        }
      }
    }
  }

C'est l'organisme DiscoverCardList qui distingue les différents sliders mais il manque de précision : par défaut, si le carrousel est activé, il met 3 items (const minItems = 3;) car il considère que c'est un carrousel de type rayon (comme sur la route /livres, bloc "Notre univers livres").

Problème identifié :

Le même widget Strapi est utilisé pour afficher :

• une bannière en toute largeur (slider avec un seul item)
• un slider avec plusieurs petites bannières (carrousel true, type rayon)
• plusieurs bannières côte à côte en HP (carrousel false, plusieurs items)
• un slider en toute largeur (carrousel true, plusieurs items) ⛔ ne fonctionne pas actuellement

Solution : différencier le slider des rayons et le slider type HP. Actuellement FC ne fait pas la différence entre un slider de type HomePage et un slider de type Rayon, le style s'applique de la même façon pour les deux alors qu'on en attend deux comportements différents.