Page 2 of 61

[Magento 2] Ajouter un lien de déconnexion dans le menu du dashboard compte client

Ajouter le fichier Magento_Customer/layout/customer_account.xml dans le dossier de votre thème et y placer le code suivant:

[Magento 2] Comment inclure et utiliser un fichier JS custom placé dans un thème depuis un template PHTML avec data-mage-init

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

Voir aussi: [Magento 2] Comment inclure et utiliser un fichier JS custom avec requireJS.

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

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

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é).

[crossbrowsertesting.com] Effectuer des tests dans un environnement local sous Linux (Ubuntu) avec la fonctionnalité Local connection

Au moment où j’écris cet article, le plug-in pour Chrome ne fonctionne pas sous Ubuntu. Il faut donc passer par l’outil packagé de connexion locale. Documentation complète ici.

Commencer par récupérer l’outil cbt_tunnel-linux-x64 en cliquant sur le lien « Latest Releases for cbt_tunnels » dans la section « Binaries » de la page « Local Connection Overview ». Au moment où j’écris ces lignes, la dernière release est le tag v1.2.2, mais vérifiez qu’il n’y ait pas eu de release plus récente depuis.

Dézippez le fichier téléchargé dans un dossier auquel vous aurez accès depuis un bash. Ouvrez un bash et placez vous à la racine du dossier qui contient le fichier cbt_tunnel-linux-x64 dézippé, puis exécutez le en tapant la commande:

Il y a plusieurs types de connexion disponibles, mais l’outil vous demandera toujours un username et une authkey. Ces deux arguments de la commande font référence à des informations de votre compte crossbrowsertesting. Vous les trouverez sur le site, dans la page « Manage Account » sous la section « User Profile ». Le username est votre email (votre username apparaît en haut à droite de l’interface crossbrowsertesting lorsque vous êtes connecté) et l’authkey se trouve juste en-dessous de votre email sous la forme o8s9a4f2sm86w34 (fake authkey).

La commande à taper en bash pour ouvrir un tunnel de connexion local est donc un truc qui ressemble à ceci:

Patientez quelques secondes… « Connected for internal websites »!

[jQuery][CSS] Etendre le fond d’un mega menu déroulant sur toute la largeur de la fenêtre du navigateur

Souvent, le fond d’un menu déroulant occupe l’espace dans la limite de l’élément .container d’une page.

La classe .nav-open sur l’élément body permet de placer un overflow-x: hidden; qui va venir empêcher l’apparition d’un scroll horizontal dans le fenêtre de votre navigateur lorsque le menu sera ouvert.

[Magento 2] Les dimensions des images visuels produit

Magento v2.3.3, v2.3.4

view.xml de votre thème

Pour les visuels de la fiche produit, que votre thème hérite de blank ou de luma, voici les dimensions à surcharger dans le fichier app/design/frontend/VotreVendor/votretheme/etc/view.xml (ne tenez pas compte des valeurs que j’ai mis, surtout pour le thumbnail) :

  • product_page_main_image: ???
  • product_page_main_image_default: ???
  • product_page_image_large: les dimensions des visuels zoomés du carousel. Remarque: ne pas surcharger permet, il me semble, d’afficher l’image dans sa taille d’origine dans le zoom.
  • product_page_image_medium: les dimensions des visuels qui s’affichent en carousel
  • product_page_image_small: les dimensions des visuels des miniatures (thumbnails) du carousel

Puis en bash:

Modifier le taux de compression (la qualité) des images

En BO:

Stores > Configuration > Advanced > System > Images Upload Configuration > Quality > 100

Dans le code en créant un module (pas testé):

File : {Vendor}/{Module}/etc/di.xml

File : {Vendor}/{Module}/Model/Product You can set the quality to whatever you want. Then flush image cache.

Utilisation dans un PHTML (pas testé):

Image ID could be used in .phtml template like this:

You can set custom dimensions directly in template file:

You can modify other image options in template file. In order to do it in you need to inject image helper class (\Magento\Catalog\Helper\Image) in your block class.

[Bonnes pratiques] Un peu de documentation sur les images Retina (ou HD Haute Densité)

Du bon paramétrage de la balise meta name="viewport":

Il existe à peu près 50.000 tutos sur le web qui vous apprennent comment mettre en place des images responsive et adaptatives en fonction des résolutions d’écran. Je n’en ai trouvé aucun qui évoque la NéCESSITé ABSOLUE d’avoir une balise meta name="viewport" dans les en-têtes de vos pages afin que les media queries utilisées dans l’élément source (enfant de l’élément picture) soient prises ne compte correctement!

Foutez-moi ça dans les en-têtes de vos pages!:

Afficher des images Retina ou non dans le contenu de vos pages et en fonction du support (smartphone, tablette, ordinateur)

Code testé fonctionnel! Petite archive ZIP pour tester ça de suite.

[Magento 2] Des images au survol hover dans la liste produit en ajoutant un attribut custom

Testé fonctionnel Magento 2.3, 2.4!

Attention: j’ai trouvé plusieurs tutos sur le net qui m’ont mis sur la bonne voie, mais seul celui-ci comporte l’ensemble des éléments qui permettra de mettre en place la fonctionnalité voulue: How to change product image on hover?.

En backoffice:

Créer un attribut custom hover_image

  • boutiques > attributs > produit
  • ajouter un attribut
  • propriétés de l’attribut:
    • libellé par défaut: « hover_image »
    • type d’entrée…: « image »
  • Propriétés avancée des attributs:
    • code: « hover_image »
    • ajouter aux option de colonne: « non »
    • utiliser dans les options de filtrage: « non »
  • Propriétés du front office: (se référer au paragraphe ATTENTION juste en-dessous)
    • Visible sur les pages du catalogue de la boutique: oui
    • Utiliser dans les listes de produits: oui
  • bouton enregistrer l’attribut

ATTENTION

Là, vous vous dites probablement: « Mais où qu’il est ce menu Propriétés du front office??? ». Il y a un bug dans le BO de Magento 2 qui applique un display: none; sur cette entrée de menu, mais elle est bien présente!!! Supprimer le display: none; avec l’inspecteur d’éléments pour pouvoir accéder à ce menu.

Sinon, vous pouvez également suivre la méthode suivante et appliquer directement la modification en base de données:

Now we have to use this attribute in the listing page. So we have to make used_in_product_listing to 1. We can do that by using MySQL.

You need to take hover_image Attribute_ID from admin. You can go to your hover_image attribute page in admin and get its ID from URL.

Suppose that Attribute_ID is 99 in our case. Now, go to the database and select the catalog_eav_attribute table. Select the attribute with id 99 and change the value of the used_in_product_listing column to 1.

Or use below MySQL query :

Plaçons notre attribut custom hover_image dans le bon groupe d’attributs (images)

  • boutiques > attributs > jeu d’attributs
  • choisir le jeu d’attributs (« default » si il n’y a que celui là)
  • dans la colonne « groupes » glisser le nouvel attribut hover_image dans le dossier « images » (normalement, vous le trouverez tout en bas de l’arbre)
  • bouton enregistrer

Affectons une image hover à l’un de nos produits

  • catalogue > produits
  • éditer un produit
  • boutons ajouter un attribut
  • cocher hover_image
  • bouton ajouter la sélection
  • section Images et vidéos
  • accéder à la configuration de l’image que vous souhaitez voir apparaître au hover en cliquant sur la petite icône en forme de damier située en haut à gauche du visuel
  • Dans Role, sélectionner hover_image
  • cliquez sur la croix pour fermer
  • bouton enregistrer

Dans le code source:

app/design/frontend/VendorName/themename/etc/view.xml

app/design/frontend/VendorName/themename/Magento_Catalog/templates/product/list.phtml

app/design/frontend/VendorName/themename/Magento_Catalog/web/css/source/_modules.less

En bash:


Une autre source (incomplète) m’ayant mis sur la voie: How to make a Product Listing with Hover images on Magento 2 et version PDF de l’article, pour la postérité.

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑