cache – devfrontend.info

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

04/06/2020 / admin

Quelques ressources pour comprendre:

Customer Data Management in Magento 2 – récupérer des infos sur le customer en cache (local storage) via l’objet customer déclaré dans le composant JS Magento_Customer/js/view/customer.
Sections in Magento 2 – Magento sets customer related data in local storage of browser in key value pair. Each key is known as section. In this post we will see How we can create custom section in our module and use the data in the section in our template file.

Choisissez votre méthode:

Je veux faire ça bien avec javascript (après tout, c’est l’auteur de ce blog qui a souffert pour mettre ça en place proprement; moi j’ai juste à suivre ses directives).
Je vais utiliser l'objectManager de Magento 2 dans un PHTML (paaaaaaaaaaas bien!).

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):

<span data-mage-init='{"js/customerGreeting":{}}'>

1	<span data-mage-init='{"js/customerGreeting":{}}'>

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

define([
    "jquery", "Magento_Customer/js/customer-data"
], function($, customerData) {
    "use strict";
    return function (config, element) {
        var firstname = customerData.get('customer')().firstname;
        if (typeof (firstname) === "undefined") {
            customerData.reload('customer');
        }
        var check = setInterval(function () {
            var firstname = customerData.get('customer')().firstname;
            if (firstname) {
                $(element).text('Hi, ' + firstname);
                clearInterval(check);
            }
        }, 500);
    };
});

define([

"jquery", "Magento_Customer/js/customer-data"

], function($, customerData) {

"use strict";

return function (config, element) {

var firstname = customerData.get('customer')().firstname;

if (typeof (firstname) === "undefined") {

customerData.reload('customer');

}

var check = setInterval(function () {

var firstname = customerData.get('customer')().firstname;

if (firstname) {

$(element).text('Hi, ' + firstname);

clearInterval(check);

}

}, 500);

};

});

…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:

<?php
/**
 * Copyright © 2020 Sodifrance. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace MyVendor\MyModule\Block;

use Magento\Framework\View\Element\Template;
use \Magento\Customer\Model\Session;

class ThemeHeader extends Template
{
    /**
     * @var Session $customerSession
     */
    protected $customerSession;

    public function __construct(Template\Context $context, Session $customerSession, array $data = [])
    {
        parent::__construct($context, $data);
        $this->customerSession = $customerSession;
    }

    public function getCustomerSession()
    {
        return $this->customerSession;
    }
}

<?php

/**

* See COPYING.txt for license details.

namespace MyVendor\MyModule\Block;

use Magento\Framework\View\Element\Template;

use \Magento\Customer\Model\Session;

class ThemeHeader extends Template

{

/**

* @var Session $customerSession

protected $customerSession;

public function __construct(Template\Context $context, Session $customerSession, array $data = [])

{

parent::__construct($context, $data);

$this->customerSession = $customerSession;

}

public function getCustomerSession()

{

return $this->customerSession;

}

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

        <!-- Récuperer la session client dans le header -->
        <referenceContainer name="header.container">
            <referenceBlock name="theme.headers" class="MyVendor\MyModule\Block\ThemeHeader"/>
        </referenceContainer>

</referenceContainer>

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

En en-tête de votre fichier PHTML:

    // Check whether a customer is logged in or not
    $customerSession = $block->getCustomerSession();

1 2	// Check whether a customer is logged in or not $customerSession = $block->getCustomerSession();

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

<?php if($customerSession->isLoggedIn()) : ?>
    <span class="label"><?= __('Hello') ?> <?= $customerSession->getCustomer()->getName(); ?></span>
<?php else : ?>
    <span class="label"><?= __('Customer account') ?></span>
<?php endif; ?>

<?php if($customerSession->isLoggedIn()) : ?>

<span class="label"><?= __('Hello') ?> <?= $customerSession->getCustomer()->getName(); ?></span>

<?php else : ?>

<?php endif; ?>

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:

<?php
    $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
    // Check whether a customer is logged in or not
    $customerSession = $objectManager->get('Magento\Customer\Model\Session');
?>

<?php

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();

// Check whether a customer is logged in or not

$customerSession = $objectManager->get('Magento\Customer\Model\Session');

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)

30/11/2018 / admin

An Extensive Guide To Progressive Web Applications. PWAs are built with technologies such as service workers, web app manifests, push notifications and IndexedDB/local data structure for caching. Let’s look into each in detail.

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)

02/08/2018 / admin

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/.

<ul class="level0">
  <li>level0
    <ul class="level1">
      <li>level1
        <ul class="level2">
          <li>level2</li>
          <li>level2</li>
          <li>level2</li>
          [...]
        </ul>
      </li>
  </li>
</ul>

<li>level0

<li>level1

<li>level2</li>

[...]

</ul>

</li>

</ul>

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:

// Mise en cache du niveau 2 (crash iOS)
var $cdDropdown = $('#cdDropdown');
$cdDropdown.find('.level2').each(function(){
    cachedMenuEntries.push($(this).detach());
});

$cdDropdown.on('DOMSubtreeModified', function(e) {
    if (e.target.innerHTML.length > 0) {
        $('a', '#cdDropdown').off('click', cachedMenu).on('click', cachedMenu);
    }
});
// end: Mise en cache du niveau 2 (crash iOS)

// Mise en cache du niveau 2 (crash iOS)

var $cdDropdown = $('#cdDropdown');

$cdDropdown.find('.level2').each(function(){

cachedMenuEntries.push($(this).detach());

});

$cdDropdown.on('DOMSubtreeModified', function(e) {

if (e.target.innerHTML.length > 0) {

$('a', '#cdDropdown').off('click', cachedMenu).on('click', cachedMenu);

}

});

// end: Mise en cache du niveau 2 (crash iOS)

function goBack(e) {
    var eClosestUl = e.closest('ul');
    if(eClosestUl.hasClass('level2')){
        eClosestUl.parent('.has-children').parent('ul').removeClass('move-out');
        eClosestUl.remove();
    }
    else{
        eClosestUl.addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out');
    }
}

function cachedMenu(e) {
    var element = $(e.currentTarget);
    if(!element.closest('li').hasClass('go-back') && element.closest('ul').hasClass('level1')) {
        var getEntryID = element.closest('li').attr('id');
        matchValue = getEntryID.split('li-')[1];
        $(cachedMenuEntries[searchStringInArray(matchValue, cachedMenuEntries)])
            .removeClass('is-hidden')
            .insertAfter(element);
    }
    if(element.closest('li').hasClass('go-back')) {
        goBack(element);
    }
}

function searchStringInArray (str, strArray) {
    for (var j=0; j<strArray.length; j++) {
        if (strArray[j].context.id == 'ul-'+str) return j;
    }
    return -1;
}

function goBack(e) {

var eClosestUl = e.closest('ul');

if(eClosestUl.hasClass('level2')){

eClosestUl.parent('.has-children').parent('ul').removeClass('move-out');

eClosestUl.remove();

}

else{

eClosestUl.addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out');

}

function cachedMenu(e) {

var element = $(e.currentTarget);

if(!element.closest('li').hasClass('go-back') && element.closest('ul').hasClass('level1')) {

var getEntryID = element.closest('li').attr('id');

matchValue = getEntryID.split('li-')[1];

$(cachedMenuEntries[searchStringInArray(matchValue, cachedMenuEntries)])

.removeClass('is-hidden')

.insertAfter(element);

}

if(element.closest('li').hasClass('go-back')) {

goBack(element);

}

function searchStringInArray (str, strArray) {

for (var j=0; j<strArray.length; j++) {

if (strArray[j].context.id == 'ul-'+str) return j;

}

return -1;

}

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

Les crashes peuvent provenir de transitions CSS mal paramétrées; CSS GPU Animation: Doing It Right.

[Magento] Méthodes de suppression des caches

07/11/2014 / admin

$ rm -fr var/cache/mage-*

1	$ rm -fr var/cache/mage-*

Pour les css, c’est ailleurs. Si elles sont compilées c’est dans media/css/.

$ rm -f media/css/*

1	$ rm -f media/css/*

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Archives

Méta

Tagcache

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

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

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

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

[Performances] Les Progressive Web Applications (PWAs)

Service workers

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

Axes d’amélioration

D’autres pistes si vous avez des crashes iOS

[Magento] Méthodes de suppression des caches

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Tags

Archives

Méta

Tagcache

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

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

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

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

[Performances] Les Progressive Web Applications (PWAs)

Service workers

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

Axes d’amélioration

D’autres pistes si vous avez des crashes iOS

[Magento] Méthodes de suppression des caches

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