CategoryMagento 2

[Magento 2] Authentication required (repo.magento.com) lors d’un composer install

Attention: Il faut avoir un compte sur marketplace.magento.com.

En cherchant dans votre profil sur marketplace.magento.com

Récupérer le login (clé publique) et le mot de passe (clé privée) sous My Profile > My Products > Access Keys. Il sera peut-être nécessaire de générer une paire de clé.

Le Username demandé correspond à la clé publique. Le Password demandé correspond à la clé privée. Et PAS aux username et password de votre compte marketplace.magento.com!

En cherchant dans le fichier auth.json de Composer:

Aller tout à la racine de sa machine (dossier parent de « /home ») et taper:

Le résultat devrait vous afficher une ligne de ce type:

Faites:

Le fichier vous révèle les Username et Password pour repo.magento.com.

La procédure d’install va ensuite vous demander:

Do you want to store credentials for repo.magento.com in /root/.composer/auth.json ?

Si vous être sur votre machine, répondez: Y. Dans un container, répondez: n.

[Magento 2] Utilisation de before et after sur les containers dans les layout xml

Doc officielle: Layout instructions

Le truc à retenir est que les attributs before et after applicables sur les balises container et block des layouts XML de Magento 2 ont BESOIN d’un contexte pour fonctionner. Exemple:

Pas bon:

L’attribut before ne fonctionnera PAS! Votre block cart.product.slider ne s’affichera pas ou s’affichera au mauvais endroit (ou au bon endroit sur un malentendu… jusqu’à la prochaine modification de layout que vous effectuerez).

Bon:

L’attribut before fonctionnera!

Vous avez saisi la différence entre les deux samples de code ci-dessus?

La ligne <referenceContainer name="content"> précise un contexte, une parenté. Les containers cart.product.slider.container et page.bottom.container sont des enfants directs du container content.

[Magento 2] Ajouter une mise à jour de layout pour une page CMS (custom layout update)

Testé fonctionnel Magento 2.3.4 et 2.4.0.

Pour une page CMS:

Dans le code source du projet:

Le fichier à utiliser comme modèle est le suivant: vendor/magento/module-cms/view/frontend/layout/cms_page_view.xml.

Pour une page CMS, créer un fichier app/design/frontend/Vendor/theme/Magento_Cms/layout/cms_page_view_selectable_<clé d'URL>_<libellé de votre layout update tel qu'il apparaît dans le champ en BO>.xml.

Exemple: pour une page CMS dont la clé d’URL est « test-karine » (en front: https://agriculture-vitalconcept-prod.sodicloud.fr/test-karine):

Si une page avec la même clé d’URL existe sur tous vos stores: app/design/frontend/Vital/vital/Magento_Cms/layout/cms_page_view_selectable_test-karine_TestKarine.xml.

Si la page n’existe que sur un store en particulier (agriculture dans mon exemple): app/design/frontend/Vital/agriculture/Magento_Cms/layout/cms_page_view_selectable_test-karine_TestKarine.xml.

Depuis le BO:

Créer une page (dans mon exemple, dont la clé d’URL est « test-karine »)

Dans le détail de cette page, dans le volet Design, champ custom layout update, on sélectionne « TestKarine »

Pour personnaliser le contenu de la sidebar, créer un block (dans mon exemple, dont l’identifier est « block-karine »)

[Magento 2] Supprimer le supplément de prix du champ Select pour un produit configurable

Testé fonctionnel sur une version 2.3. Source: MAGENTO 2 – REMOVE PRICE FROM SELECT DROPDOWN ON CONFIGURABLE PRODUCTS.

Partie à commenter dans la surcharge que vous ferez du fichier vendor/magento/module-configurable-product/view/frontend/web/js/configurable.js dans votre thème:

[Magento 2] Utiliser action method= »setTemplate » pour surcharger un fichier PHTML dans app/code/Vendor/Module plutôt que dans un thème

Je veux surcharger app/code/Magento/LayeredNavigation/view/frontend/templates/layer/view.phtml dans app/code/NakedUi/LayeredNavigation/view/frontend/layer/view.phtml. Source: How to Override a phtml File Using a Custom Module in Magento 2.

Créer un module NakedUi_LayeredNavigation qui contient au minimum les fichiers suivants:

./registration.php

./etc/module.xml

Puis dans ./view/frontend/layout, créer les deux fichiers suivants:

catalog_category_view_type_layered.xml et catalogsearch_result_index.xml

Ne pas oublier de surcharger ./view/frontend/templates/layer/view.phtml

[Magento 2] un assistant qui surveille les changements de code et vide les caches en fonction des types de fichiers modifiés

Magento 2 Cache Clean – A faster drop in replacement for bin/magento cache:clean with a file watcher.

L’outil marchotte sans plus. Je travaille sous Linux, dans un environnement de dev Dockerisé. J’ai rencontré plusieurs problèmes avant de pouvoir l’utiliser:

Erreur « Error NOSPC »

(Si sudo n’est pas installé dans votre container (il vous le fera comprendre…)) Sortir du container et exécuter la commande: echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p.

[Magento 2] Utiliser les Mutation Observers de javascript pour détecter les changement dans le DOM suite à une action utilisateur

Attention: Ces sources concernent l’observation de modifications dans le DOM une fois que la page est chargée et/ou qu’un utilisateur effectue des actions. Voir aussi l’article qui consiste à tester la présence de certains éléments dans le DOM au chargement de la page.

Attention #2: bien que préfixé Magento 2, cette astuce fonctionnera également en dehors de la solution e-commerce d’Adobe. Dans mon cas, c’est de cette manière que j’ai dû la mettre en place donc c’est comme ça que je la documente. Donc lisez le billet, car vous êtres peut-être quand même au bon endroit 🙂

Source: https://developer.mozilla.org/fr/docs/Web/API/MutationObserver.

La problématique:

Au chargement de la fiche produit d’un produit configurable dans Magento 2, la référence par défaut s’affiche sous le libellé produit alors qu’aucune option n’a encore été sélectionnée par l’utilisateur.

Ce dernier à la possibilité de changer (la couleur du produit dans notre exemple ci dessous) via une liste de sélection <select>.

Nous cherchons à masquer l’affichage de la référence jusqu’à ce qu’une option ait été sélectionnée par l’utilisateur.

La solution:

Surcharge d’un fichier PHTML pour y ajouter un observer via les Mutation Observers de Javascript

Nous allons surcharger, dans notre thème custom, le fichier vendor/magento/module-catalog/view/frontend/templates/product/view/attribute.phtml qui contient le markup permettant l’affichage de la référence dans la fiche produit.

Exemple de chemin vers le fichier surchargé: app/design/frontend/MyVendor/mytheme/Magento_Catalog/templates/product/view/attribute.phtml.

Rajout d’une classe CSS et d’un ID

Par rapport au fichier original, nous rajoutons la classe CSS is-hidden-if-product-is-configurable à la ligne <div class="product attribute <?= $block->escapeHtmlAttr($_className) ?>"> et un ID productRef à la ligne <div  class="value" <?= /* @noEscape */ $_attributeAddAttribute ?>><?= /* @noEscape */ $_attributeValue ?></div>.

Rajout de l’observer JS

En toute fin de fichier:

Le reste du fichier demeure inchangé.

Le style qui va venir masquer la référence au chargement de la page

[Magento 2] Corriger l’erreur 1227 (42000) à l’import d’un dump SQL avec la commande db:import

Attention: remplacer rc-11.sql.gz et rc-11.sql dans mon exemple par le libellé de votre propre base de données.

Problème:

Lorsque je tente d’importer un dump de base de données:

…j’obtiens le message d’erreur suivant:

Import MySQL Database

Importing SQL dump dumps/rc-11.sql.gz to database magento
ERROR 1227 (42000) at line 1388: Access denied; you need (at least one of) the SUPER privilege(s) for this operation

gzip: stdout: Broken pipe

Finished

Description du problème:

MySQL Error 1227 Access denied; you need (at least one of) the SUPER privilege(s) for this operation.

Solution:

Attention: toujours penser à remplacer rc-11.sql.gz et rc-11.sql dans mon exemple par le libellé de votre propre base de données.

Dégage tous les trucs comme ça : /*!50017 DEFINER=<code>magentoppr@%*/:

Si ça ne fonctionne pas, élargir en ne discriminant plus sur le début (juste /*! suivi de chiffres puis de DEFINER= jusqu’au premier */):

Puis relancer la commande d’import légèrement modifiée:

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

© 2020 devfrontend.info

Theme by Anders NorénUp ↑