devfrontend.info – Le bloc-notes professionnel d'un développeur front-end senior

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

21/10/2020 / admin

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:

sudo find . -name "auth.json"

1	sudo find . -name "auth.json"

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

./home/intlangf/.composer/auth.json

1	./home/intlangf/.composer/auth.json

Faites:

cat ./home/intlangf/.composer/auth.json

1	cat ./home/intlangf/.composer/auth.json

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

13/10/2020 / admin

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

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="checkout_cart_item_renderers"/>
    <body>
            <container name="cart.product.slider.container" htmlTag="div" htmlClass="page-bottom" before="page.bottom.container">
                <block class="Magento\Cms\Block\Block" name="cart.product.slider">
                    <arguments>
                        <argument name="block_id" xsi:type="string">cart-product-slider</argument>
                    </arguments>
                </block>
            </container>
    </body>
</page>

<?xml version="1.0"?>

<body>

<argument name="block_id" xsi:type="string">cart-product-slider</argument>

</arguments>

</block>

</container>

</body>

</page>

Bon:

L’attribut before fonctionnera!

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <update handle="checkout_cart_item_renderers"/>
    <body>
        <referenceContainer name="content">
            <container name="cart.product.slider.container" htmlTag="div" htmlClass="page-bottom" before="page.bottom.container">
                <block class="Magento\Cms\Block\Block" name="cart.product.slider">
                    <arguments>
                        <argument name="block_id" xsi:type="string">cart-product-slider</argument>
                    </arguments>
                </block>
            </container>
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<body>

<argument name="block_id" xsi:type="string">cart-product-slider</argument>

</arguments>

</block>

</container>

</referenceContainer>

</body>

</page>

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)

08/10/2020 / admin

Testé fonctionnel Magento 2.3.4 et 2.4.0.

Documentation officielle Magento 2: Create cms-page/product/category-specific layouts
Tutoriel Amasty: How to add the Custom Layout Update on Magento 2.3.4?

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.

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="sidebar.main">
            <!--Remove default compare functionnality-->
            <referenceBlock name="catalog.compare.sidebar" remove="true"/>
            <!--Remove default wishlist functionnality-->
            <referenceBlock name="wishlist_sidebar" remove="true" />
            <referenceBlock name="multiple-wishlist_sidebar" remove="true" />

            <!--Add some block-->
            <block class="Magento\Cms\Block\Block" name="block.karine">
                <arguments>
                    <argument name="block_id" xsi:type="string">block-karine</argument>
                </arguments>
            </block>
        </referenceContainer>

        <referenceContainer name="sidebar.additional">
        </referenceContainer>

        <referenceContainer name="content">
            <referenceBlock name="cms_page"/>
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<body>

<argument name="block_id" xsi:type="string">block-karine</argument>

</arguments>

</block>

</referenceContainer>

</referenceContainer>

</referenceContainer>

</body>

</page>

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

08/10/2020 / admin

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:

                        if (optionPriceDiff !== 0) {
                            options[i].label += ' ' + priceUtils.formatPrice(
                                optionPriceDiff,
                                this.options.priceFormat,
                                true
                            );
                        }

if (optionPriceDiff !== 0) {

options[i].label += ' ' + priceUtils.formatPrice(

optionPriceDiff,

this.options.priceFormat,

true

);

}

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

06/10/2020 / admin

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

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'NakedUi_LayeredNavigation', __DIR__);

<?php

use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'NakedUi_LayeredNavigation', __DIR__);

./etc/module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="NakedUi_LayeredNavigation">
        <sequence>
            <module name="Magento_LayeredNavigation" />
        </sequence>
    </module>
</config>

<?xml version="1.0"?>

</sequence>

</module>

</config>

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

catalog_category_view_type_layered.xml et catalogsearch_result_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="catalog.leftnav">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">NakedUi_LayeredNavigation::layer/view.phtml</argument>
            </action>
        </referenceBlock>
    </body>
</page>

<?xml version="1.0"?>

<body>

<argument name="template" xsi:type="string">NakedUi_LayeredNavigation::layer/view.phtml</argument>

</action>

</referenceBlock>

</body>

</page>

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

02/10/2020 / admin

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.

[HTML] Exploiter les microformats pour baliser une zone de contact (h-card) de la manière la plus sémantique possible

29/09/2020 / admin

Ressources officielles sur les Microformats et outils de test en ligne

Page Wiki d’accueil des microformats 2 (documentation officielle) – mise à jour le 18 juillet 2020
h-card is a simple, open format for publishing people and organisations on the web. et h-card examples in the wild – mise à jour le 20 août 2020
Outil de test des données structurées de Google
Microformats Parser (PHP) 0.4.6 – Pour tester la pertinence de votre code balisé avec les Microformats (retourne un objet JSON)

Demo

La démo comprend la sématique HTML et les microformats pour une société qui possède plusieurs agences réparties dans plusieurs villes.

Demo CodePen.io

[Ligne de commande] Utiliser grep pour manipuler des données

30/08/2020 / admin

Rassembler les résultats d’une rechercher `grep` dans un nouveau fichier

Source: Output grep results to text file, need cleaner output

$ grep -n "YOUR SEARCH STRING" * > output-file

1	$ grep -n "YOUR SEARCH STRING" * > output-file

Compter le nombre de mots de x lettres dans un fichier TXT

Source: How can I count the amount of five letter words in a txt file using grep?

$ grep -o -w "\w\{5\}" your_file

1	$ grep -o -w "\w\{5\}" your_file

Remplacement des diacritiques (les accents, cédilles, etc… sur les lettres)

# Remplacement des diacritiques 
# https://fr.wikipedia.org/wiki/Diacritiques_utilis%C3%A9s_en_fran%C3%A7ais#Combinaisons

sed -e "s/à/a/g" \
    -e "s/â/a/g" \
    -e "s/ç/c/g" \
    -e "s/é/e/g" \
    -e "s/è/e/g" \
    -e "s/ê/e/g" \
    -e "s/ë/e/g" \
    -e "s/ô/o/g" \
    -e "s/ù/u/g" \
    -e "s/û/u/g" \
    -e "s/ü/u/g" \
    input-file.txt > output-file.txt

# Remplacement des diacritiques

# https://fr.wikipedia.org/wiki/Diacritiques_utilis%C3%A9s_en_fran%C3%A7ais#Combinaisons

sed -e "s/à/a/g" \

-e "s/â/a/g" \

-e "s/ç/c/g" \

-e "s/é/e/g" \

-e "s/è/e/g" \

-e "s/ê/e/g" \

-e "s/ë/e/g" \

-e "s/ô/o/g" \

-e "s/ù/u/g" \

-e "s/û/u/g" \

-e "s/ü/u/g" \

input-file.txt > output-file.txt

[javascript] L’équivalent ES6/vanilla JS de la méthode .eq() de jQuery

28/08/2020 / admin

Source: Pure JS equivalent of Jquery eq().

La méthode .eq() de jQuery

$(".class1.class2").eq(0).text(1254);

1	$(".class1.class2").eq(0).text(1254);

La même chose en ES6/vanilla JS

document.querySelectorAll('.class1.class2')[0].textContent = 1254;
// ou
document.querySelectorAll('.class1.class2')[0].innerHTML = 1254;

document.querySelectorAll('.class1.class2')[0].textContent = 1254;

// ou

document.querySelectorAll('.class1.class2')[0].innerHTML = 1254;

[javascript] Corriger l’erreur « Uncaught TypeError: Cannot read property ‘getData’ of undefined » (ou ‘setData’) en déclarant un addEventListener correctement

26/08/2020 / admin

Source: Ondragstart Attribute doesn’t appear when created dynamically.

En essayant de convertir la génération d’un élément TD dans le DOM avec jQuery en code vanilla JS, je me suis heurté aux erreurs suivantes:

Uncaught TypeError: Cannot read property ‘getData’ of undefined
Uncaught TypeError: Cannot read property ‘setData’ of undefined

Le code jquery de départ:

$('<td id="' + i + '" title="' + i + '" class="is-cell" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"></td>').appendTo('#row_' + x);

1	$('<td id="' + i + '" title="' + i + '" class="is-cell" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"></td>').appendTo('#row_' + x);

Version vanilla JS/ES6

On commence par créer l’élément TD:

let $cell = document.createElement('td');

1	let $cell = document.createElement('td');

Puis on lui assigne de multiples attributs (id, title, class) (source: Setting multiple attributes for an element at once with JavaScript):

Object.assign($cell, {
    id: i,
    title: i,
    className: "is-cell"
});

Object.assign($cell, {

id: i,

title: i,

className: "is-cell"

});

(pour n’ajouter qu’un seul attribut: $row.setAttribute("class", "is-row");)

Mais pour ajouter des attributs relatifs à des événements (ondrop, ondragover, …), il faut utiliser la méthode addEventListener:

// Ne fonctionne pas
$cell.addEventListener("drop", dragndrop.drop_handler(event));
$cell.addEventListener("dragover", dragndrop.dragover_handler(event));

// Ne fonctionne pas
$cell.ondrop = "drop_handler(event)";
$cell.ondragover = "dragover_handler(event)";

// Fonctionne
$cell.ondrop = dragndrop.drop_handler;
$cell.ondragover = dragndrop.dragover_handler;

// Fonctionne (et c'est une meilleure façon de déclarer)
$cell.addEventListener("drop", dragndrop.drop_handler);
$cell.addEventListener("dragover", dragndrop.dragover_handler);

// Ne fonctionne pas

$cell.addEventListener("drop", dragndrop.drop_handler(event));

$cell.addEventListener("dragover", dragndrop.dragover_handler(event));

// Ne fonctionne pas

$cell.ondrop = "drop_handler(event)";

$cell.ondragover = "dragover_handler(event)";

// Fonctionne

$cell.ondrop = dragndrop.drop_handler;

$cell.ondragover = dragndrop.dragover_handler;

// Fonctionne (et c'est une meilleure façon de déclarer)

$cell.addEventListener("drop", dragndrop.drop_handler);

$cell.addEventListener("dragover", dragndrop.dragover_handler);

Theme by Anders Norén — Up ↑

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

Articles récents

Catégories

Tags

Archives

Méta

En cherchant dans votre profil sur marketplace.magento.com

En cherchant dans le fichier auth.json de Composer:

Pas bon:

Bon:

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

Pour une page CMS:

Dans le code source du projet:

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

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

Erreur « Error NOSPC »

Ressources officielles sur les Microformats et outils de test en ligne

Demo

Rassembler les résultats d’une rechercher grep dans un nouveau fichier

Compter le nombre de mots de x lettres dans un fichier TXT

Remplacement des diacritiques (les accents, cédilles, etc… sur les lettres)

La méthode .eq() de jQuery

La même chose en ES6/vanilla JS

Version vanilla JS/ES6

En cherchant dans le fichier `auth.json` de Composer:

Rassembler les résultats d’une rechercher `grep` dans un nouveau fichier