CategoryMagento 2

[Magento 2] Afficher un lien vers la fiche produit depuis la quickview en exploitant le localStorage

edit: je me suis rendu compte que la solution #1 n’était pas fonctionnelle. En effet, à l’utilisation, le local storage (clé: product_data_storage) était vide/n’avait aucune valeur!

Solution #2 (fonctionnelle)

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/list.phtml: au clic sur un item produit (parce qu’au clic sur le trigger de la quickview, il ne se passait rien), on cherche dans le markup enfant le lien vers la fiche produit cible et on le stocke dans le local storage via window.localStorage.setItem('clé', valeur);.

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/view/product-url.phtml: au clic sur le lien « voir la fiche produit », on récupère l’URL dans le local storage (clé quickviewRelatedProductURL):

Le layout XML et les styles de la solution #1 restent valables. Merci de vous y référer.


Solution #1 (pas focntionnelle)

Quickview rattachée au module CartQuickPro fourni avec le thème Venuse.

La quickview s’affiche en cliquant sur un item produit dans le listing produit (page catégorie) du site Magento 2. Elle affiche, dans une iFrame, une partie des éléments de la fiche produit (c’est le même code qui est utilisé pour la quickview et la fiche produit).

Le fichier template PHTML:

  • Objectif: placer un lien vers la fiche produit dans la page.
  • On récupère l’URL de la fiche produit en consultation dans le localStorage (clé: product_data_storage) sous forme de chaîne JSON. Il faut convertir cette chaîne JSON en objet JavaScript pour pouvoir l’exploiter.
  • On récupère l’ID du produit dans le DOM.
  • Au clic sur l’élément a#currentlyViewedProductURL (le lien « Voir la fiche produit »)…
    • …on fait une redirection JS dans la fenêtre parente de l’iFrame (la quickview) qui contient une partie de la fiche produit
    • …et seulement ensuite, on simule le click sur la croix de fermeture de la quickview.

app/design/frontend/Vendor/theme/Magento_Catalog/templates/product/view/product-url.phtml

Bonus:

(inutile pour ce qu’on essaye de faire, mais bon à savoir) Récupérer la première clé d’un objet JSON sans connaître le libellé de cette clé:

Le fichier layout XML:

On s’en sert pour positionner le template PHTML dans la page.

app/design/frontend/Vendor/theme/Magento_Catalog/layout/catalog_product_view.xml

Les styles:

[Magento 2][SEO] Configurer le fichier robots.txt et la Meta robots depuis l’interface d’administration

Empêcher des pages d’être vues par les moteurs de recherche:

Cette fonctionnalité va nous être utile pour toutes les pages de notre site que nous ne souhaitons PAS voir référencées par les moteurs de recherche (exemple: landing pages).

Intervenir sur le fichier robots.txt (qui contient des directives destinées aux moteurs de recherche pour l’indexation des pages de votre site) pour empêcher le référencement de certaines pages:

  • CONTENU > Design > Configuration
  • Cliquer sur « Modifier » pour la ligne « Global – Main website » (seule ligne disponible normalement)
  • Scroller un peu vers le bas, ouvrir le volet « Moteurs de recherche »
  • Dans le champ « Modifier les instructions personnalisées du fichier robots.txt », ajouter le code suivant:

Ce code empêche le référencement des pages /abonnements-landing.html et /landing-test-1.html de votre site.

Trouver les URLS des pages:

  • CATALOGUE > Catégories
  • Choisir une landing page dans l’arborescence en colonne de gauche (par exemple Abonnements landing > Landing test #1)
  • Ouvrir le volet « Optimisations pour les moteurs de recherche »
  • Le champ « Clé d’URL » contient la valeur « landing-test-1 ». C’est une partie de l’URL à déclarer.
  • Il suffit de rajouter une ligne {{Disallow: /}} + la valeur du champ « Clé d’URL » + {{.html}} dans le champ « Modifier les instructions personnalisées du fichier robots.txt » vu plus haut pour rajouter une page à exclure du référencement de votre site.

Ne pas oublier de vider les caches après chaque modification du champ « Modifier les instructions personnalisées du fichier robots.txt »:

  • SYSTEME > Outils > Gestion du cache
  • Cocher la ligne « Configuration » (la 1ère ligne normalement)
  • Sélectionner « Rafraîchir » dans la liste des actions et cliquer sur le bouton « Envoyer »

[Magento 2] Mise à jour du prix final dans une fiche produit lorsqu’on vide dynamiquement via javascript une option sous forme de champ texte

Je me suis retrouvé dans un cas extrêmement particulier dans lequel l’utilisateur pouvait, depuis une fiche produit, rajouter des options en cascade: il pouvait en premier lieu choisir une couleur de papier cadeau (+2,00 €).

Une fois le papier cadeau sélectionné (et seulement à cette condition), il pouvait choisir d’ajouter une étiquette avec un prénom (+0,50 €).

Ce champ étiquette était limité à 14 caractères. La fonctionnalité était gérée via un widget remaining-characters.js fourni dans Magento 2.

Problème: lorsque l’utilisateur avait renseigné choisi un papier cadeau et renseigné un prénom, le prix total s’incrémentait de la somme des deux options (+2,00 € +0,50 €). Mais lorsque l’utilisateur décidait finalement de ne pas prendre de papier cadeau en décochant l’option de couleur, seul le prix du papier se décrémentait (-2,00 €) et le prix total comprenait encore celui de l’option étiquette (+0,50 €).

Solution: le plug-in qui compte le nombre de caractères présents dans le champ écoute les événements change keyup paste:

Lorsqu’un utilisateur décoche l’option papier cadeau, on vide l'input text de l’option étiquette avec la méthode .val(''), mais de cette manière le plug-in qui écoute les événements change keyup paste n’a pas « capté » que le champ a été vidé et, de ce fait, ne remet pas le pric total à jour correctement.

Pour lui signifier que le champ a été vidé de manière dynamique, il faut chaîner notre déclaration avec la méthode .trigger() qui contient en argument l’événement change:

Le code complet pour gérer les deux options en cascade

La deuxième contrainte était de faire fonctionner des checkboxes un peu comme des boutons radio (un seul des x checkboxes devait pouvoir être sélectionné à la fois), mais de pouvoir n’en sélectionner aucune.

[Magento 2] Un champ Date de Naissance custom avec validation côté javascript, placeholder et masque de saisie avec le plugin Cleave

Testé fonctionnel Magento 2.3, 2.4

Nous allons supprimer le widget calendar du champ date de naissance du formulaire de création de compte de Magento 2.
Attention: le champ Date de Naissance n’apparaît pas par défaut! Il faut l’activer via l’interface d’administration (Google est ton ami).

Demo en ligne de Cleave.js.

app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml:

Apporter plus d’attention au passages suivants:

  • data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' sur l'input type="text" permet la bonne validation de votre champ Date de Naissance
  • <script>require(['cleave'... qui initialise le masque de saisie sur le champ via le plugin Cleave.js

app/design/frontend/MyVendor/mytheme/requirejs-config.js:

Import des sources de Cleave.js dans le projet:

Au moment où j’ai mise en place cette fonctionnalité, la dernière version tagguée de Cleave.js était la v1.6.0, mais n’hésitez pas à mettre à jour avec une version supérieure si existante!

Placez la source minifiée dans app/design/frontend/MyVendor/mytheme/web/js/vendor/cleave/dist/cleave.min.js.

[Magento 2] Un plugin jQuery custom pour rendre cliquable une zone complète plutôt que le seul lien qu’elle renferme avec x-magento-init et requireJS

Exemple d’utilisation: les cartes (items) catégories ou produits du listing catégories ou produits.

Rendre toute une zone cliquable, plutôt qu’uniquement le lien qu’elle contient. Exemple: une carte produit dans le listing produit. app/design/frontend/MyVendor/mytheme/Magento_Catalog/templates/product/list.phtml.

Utilisation dans un fichier PHTML:

Détail des fichiers à mettre en place:

app/web/app/design/frontend/MyVendor/mytheme/web/js/zone-click.js

Note: pour être sûr de ce que vous allez renseigner en paramètre exclude, vous pouvez ajouter dans le code ci-dessus un console.log($clickedElement.attr('class'));. Puis allez en front et cliquez sur les éléments à exclure. Les classes qui leur sont affectées apparaîtront en console (F12).

Déclaration via requireJS: app/design/frontend/MyVendor/mytheme/requirejs-config.js

app/design/frontend/MyVendor/mytheme/Magento_Catalog/templates/product/list.phtml

[Magento 2] Des cases à cocher et des boutons radio sexy dans vos formulaires avec le markup HTML du core

ATTENTION: les input et label doivent respectivement avoir des attributs for et id ayant une valeur identique afin que les styles fonctionnent correctement!

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

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑