Mois : juillet 2020

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

[Docker] Stopper et supprimer tous les containers et images Docker

Sources: Stop and remove all docker containers and images et I have a helper function to nuke everything so that our Continuous blah, cycle can be tested, erm… continuously.

To clear containers:

docker rm -f $(docker ps -a -q)

To clear images:

docker rmi -f $(docker images -a -q)

To clear volumes:

docker volume rm $(docker volume ls -q)

To clear networks:

docker network rm $(docker network ls | tail -n+2 | awk '{if($2 !~ /bridge|none|host/){ print $1 }}')

List all containers (only IDs)

Stop all running containers

Remove all containers

Remove all images

[Docker][NodeJS] Utiliser Docker pour créer un environnement de développement NodeJS

Source: Use Docker to Create a Node Development Environment et version PDF pour la postérité. Tutoriel (en anglais) extrêmement détaillé et très bien expliqué.

Repo Git: Use Docker to Create a Front-End Node JS Development Environment.

Ce tutoriel m’a permis:

  • d’exécuter NPM depuis un container Docker sans avoir à procéder à une installation locale de NodeJS (écarte les problèmes liés à l’obligation de jongler avec différentes version de Node/NPM en fonction de l’âge du projet).
  • de lancer un serveur Node JS via Express.
  • d’accéder à localhost dans un navigateur.

Pour aller encore plus loin (pas lu l’article en entier, mais il est ressorti dans mes résultats de recherche lorsque j’ai trouvé le tuto dont je parle juste au-dessus et me paraît intéressant à conserver pour améliorer ma pratique de Docker): A Better Way to Develop Node.js with Docker (I’ve seen a lot of articles lately suggesting how to use Docker for development. I haven’t seen one yet that does it correctly). Version PDF pour la postérité.