Étiquette : cache

[Magento 2] Vérifier qu’un utilisateur client est connecté à son compte et afficher son prénom dans un template PHTML

Quelques ressources pour comprendre:

Choisissez votre méthode:

Avec javascript (pour afficher le prénom de l’utilisateur)

Source: Magento 2: get customer().lastname in header.phtml (le titre n’étant pas tout-à-fait juste puisqu’on récupère bien le firstName du customer.

Pas besoin de créer un module et de faire de l’injection de dépendances (comme on le voit sur les 36 fils de discussion stack overflow ou sur les 52 blogs qui sont proposés dans les premiers résultats Google…).

Dans votre fichier PHTML, initialisez votre JS sur un élément (span dans mon exemple, mais utilisez l’élément qui vous arrange):

…puis créez un fichier app/design/frontend/VotreVendor/votretheme/web/js/customerGreeting.js et mettez-y ceci:

…et en fait, bin, ça fonctionne 🙂

Pour détecter si l’utilisateur est connecté, créer un Block et le déclarer dans un Layout

app/code/MyVendor/MyModule/Block/ThemeHeader.php:

app/design/frontend/MyVendor/mytheme/Magento_Theme/layout/default.xml:

app/design/frontend/MyVendor/mytheme/Magento_Theme/layout/default.xml:

En en-tête de votre fichier PHTML:

Dans le même fichier PHTML, à l’endroit où vous souhaitez afficher le prénom lorsque l’utilisateur est connecté:

MAUVAISE PRATIQUE La même chose via l'objectManager:

La création du Block et la déclaration de celui-ci dans un Layout comme vu plus haut est inutile si on invoque l'objectManager. Invoquer constamment l’objectManager va poser des problèmes de performances.

En en-tête de votre fichier PHTML:

Vous allez trouver beaucoup de solutions proposant d’utiliser l’objectManager sur le net (stack overflow, autres…). Si elles ne sont pas optimales, elles peuvent quand-même vous apporter une information intéressante à savoir le Model à utiliser si vous souhaitez faire ça bine et créer un Block (dans notre exemple: Magento\Customer\Model\Session. Regardez dans le code du block, plus haut dans ce billet, comment ce Model est déclaré puis exploité).

[Performances] Les Progressive Web Applications (PWAs)

Service workers

Un Service Worker est un script chargé parallèlement aux scripts de votre page et qui va s’exécuter en dehors du contexte de votre page web. Bien que le Service Worker n’ait pas accès au DOM ou aux interactions avec l’utilisateur, il va pouvoir communiquer avec vos scripts via l’API postMessage. Il se place en proxy de votre Web App, interceptant toutes les requêtes serveur et propose par exemple d’y répondre avec un cache ou en récupérant des données du LocalStorage ou d’IndexedDB. Il rend donc votre application disponible offline.

Tableau de support des Service Workers par navigateur sur caniuse.com.

[javaScript] Mettre en cache un sous-niveau de navigation pour éviter un crash du navigateur sous iOS (iPhone)

Inspiration pour ce code:


Je pars d’un menu dont la structure HTML est la suivante (une liste imbriquée simple) : https://jsfiddle.net/xpvt214o/513005/.

Sous iPhone, le menu a visiblement trop d’entrées. En tout cas lorsqu’on l’affiche, le navigateur Safari crashe et recharge la page. J’ai remarqué au cours de mes tests qu’en supprimant le dernier sous-niveau d’arborescence (.level2 dans mon exemple), le navigateur ne crashait plus. J’ai donc mis en place un système de cache du dernier sous-niveau d’arborescence de mon menu.

Ce système consiste à mettre en cache dans un tableau javaScript array et à l’aide des méthodes .push() et .detach() (jQuery) tous les derniers sous-niveaux d’arborescence. Ils ne sont, de cette manière, plus présents dans le DOM lorsqu’on ouvre le menu qui se trouve ainsi beaucoup plus léger à manipuler.

A l’activation d’un sous-menu mis en cache, on le fait ré-apparaître dans le DOM en le sortant du tableau. On fait le lien entre la rubrique activée et la sous-rubrique correspondante via un système d’IDs:

On invoque la fonction searchStringInArray pour rechercher dans l’intégralité des entrées du tableau cachedMenuEntries l’information [*].context.id qui va matcher avec l’ID de la rubrique que nous venons d’activer:

Axes d’amélioration

  • Utiliser un tableau clé/valeur (key/value)

D’autres pistes si vous avez des crashes iOS