Études de cas Popover

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X LinkedIn
Saurabh Rajpal
Saurabh Rajpal
X LinkedIn

Les pop-ups sont omniprésentes sur le Web. Vous pouvez les voir dans les menus, les info-bulles et les boîtes de dialogue, utilisées pour des fonctionnalités telles que les paramètres de compte, les widgets de divulgation et les aperçus de fiches produit. Malgré la prévalence de ces composants, leur création dans les navigateurs reste étonnamment complexe. Pour résoudre ce problème, un nouvel ensemble d' API HTML déclaratives pour la création de pop-ups est en cours de développement pour les navigateurs. La première d' entre elles est l'API Popover.

Une pop-up est souvent confondue avec une boîte de dialogue. Toutefois, leur comportement présente quelques différences clés. Un élément dialog ouvert avec dialog.showModal (une boîte de dialogue modale) est une expérience qui nécessite une interaction explicite de l'utilisateur pour fermer la fenêtre modale. Une popover est compatible avec la fermeture légère. Une dialog modale ne l'est pas. Une boîte de dialogue modale rend le reste de la page inerte. Une popover ne le fait pas. En savoir plus sur les différences.

Cet article fait partie d'une série qui explique comment les entreprises d'e-commerce ont amélioré leur site Web à l'aide de nouvelles fonctionnalités CSS et d'interface utilisateur. Dans cet article, découvrez comment Tokopedia a implémenté l'API Popover et en a tiré parti.

Tokopedia

L'utilisation d'attributs de pop-up a permis de réduire jusqu'à 70% le nombre de lignes de code dans React. La fenêtre modale peut être contrôlée de manière native par HTML au lieu de nécessiter la gestion des événements en JavaScript et d'utiliser React.createPortal pour déplacer le DOM modal à la fin de document.body. Nous pouvons également utiliser @starting-style pour animer l' ouverture et la fermeture de la pop-up.—Andy Wihalim, ingénieur logiciel senior chez Tokopedia.

Les pages de détails produit (PDP) de Tokopedia contiennent plusieurs images pour chaque produit. Lorsque l'utilisateur clique sur la miniature du produit, une fenêtre modale s'ouvre pour afficher l'image agrandie. Il s'agit d'un modèle courant utilisé sur les sites Web d'e-commerce.

Code

Tokopedia utilise React pour le développement de son frontend. Avant d'implémenter l'API Popover pour cette fenêtre modale, l'entreprise utilisait une fenêtre modale DOM et un bouton. Le bouton modifiait l'état React pour ouvrir la fenêtre modale. Avec l'API Popover, elle spécifie un attribut popovertarget dans l'élément qui ouvre la pop-up avec une valeur identique à l'ID de l'élément de pop-up.

Avec cette implémentation de base, la pop-up fonctionne, mais apparaît et disparaît sans aucune animation. Pour créer une animation d'entrée et de sortie fluide pour la pop-up, utilisez :popover-open et @starting-style, et autorisez l'animation de propriétés discrètes. Dans l'exemple de code suivant, la pop-up s'affiche et disparaît à l'aide de la transform: 'scale()'propriété.

Cet exemple de code montre comment implémenter des animations d'entrée et de sortie pour l'API Popover.

<Thumbnail popovertarget="medialightbox" />
<MediaLightbox popover id="medialightbox" />

export const cssModalWrapper = css({
  background: NN0,
  border: 'none',
  borderRadius: '.625rem',
  width: 1024,
  padding: 24,

  '&::backdrop': {
    opacity: 0,
    transitionProperty: 'opacity, display',
    transition: '.25s ease-out',
    transitionBehavior: 'allow-discrete',
  },

  transitionProperty: 'transform, opacity, display',
  transition: '.25s ease-out',
  transitionBehavior: 'allow-discrete',

  transform: 'scale(0.8)',
  opacity: 0,
  '@starting-style': {
    transform: 'scale(1)',
    opacity: 1,
  },

  '&:popover-open': {
    transform: 'scale(1)',
    opacity: 1,
    '@starting-style': {
      transform: 'scale(0.8)',
      opacity: 0,
    },
  },
});

Pour s'adapter aux navigateurs qui ne sont pas compatibles avec l'API Popover, Tokopedia a implémenté le polyfill de pop-up par oddbird, qui ne pèse que 3,2 Ko avec la compression gzip. L'entreprise était satisfaite du polyfill, car il fonctionnait bien et n'entraînait pas de régression des performances. Dans l'ensemble, elle a pu réduire jusqu'à 70% le nombre de lignes de code dans React avec l'API Popover.

Éléments à prendre en compte lors de l'utilisation de l'API Popover

Tokopedia utilise React. L'équipe a divisé le code en démontant le composant de pop-up pour les pages qui ne l'utilisent pas, puis en divisant le code pour le contenu de la pop-up. De cette façon, elle a réduit la taille de sa requête initiale.

Envisagez de combiner les pop-ups avec le positionnement d'ancrage CSS (bientôt disponible dans Chrome) pour les positionner par rapport à d'autres éléments. Cela est utile pour les menus et les info-bulles, par exemple.

Ressources

Découvrez les autres articles de cette série qui expliquent comment les entreprises d'e-commerce ont bénéficié de l'utilisation de nouvelles fonctionnalités CSS et d'interface utilisateur telles que les animations pilotées par le défilement, les pop-ups, les requêtes de conteneur et le sélecteur has().