[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);

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

25/08/2020 / admin

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

<?php if ($_attributeValue) :?>
<div class="product attribute <?= $block->escapeHtmlAttr($_className) ?> is-hidden-if-product-is-configurable">
    <?php if ($renderLabel) :?>
        <strong class="type"><?= $block->escapeHtml($_attributeLabel) ?></strong>
    <?php endif; ?>
    <div id="productRef" class="value" <?= /* @noEscape */ $_attributeAddAttribute ?>><?= /* @noEscape */ $_attributeValue ?></div>
</div>
<?php endif; ?>

<?php if ($_attributeValue) :?>

<div class="product attribute <?= $block->escapeHtmlAttr($_className) ?> is-hidden-if-product-is-configurable">

<?php if ($renderLabel) :?>

<strong class="type"><?= $block->escapeHtml($_attributeLabel) ?></strong>

<?php endif; ?>

</div>

<?php endif; ?>

Rajout de l’observer JS

En toute fin de fichier:

<script>
    require([
        'jquery'
    ], function($){
        'use strict';

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

        // Selectionne le noeud dont les mutations seront observées (#productRef pour nous)
        var targetNode = document.getElementById('productRef');

        // Options de l'observateur (quelles sont les mutations à observer)
        // Il y a tout un tas de propriétés possibles ici; voir la documentation pour adapter ce code à votre besoin.
        // Pour ma part, je devais observer les changements de texte dans un noeud précis.
        // https://developer.mozilla.org/fr/docs/Web/API/MutationObserver#MutationObserverInit
        var config = { childList: true };

        // Fonction callback à éxécuter quand une mutation est observée
        var callback = function(mutationsList) {
            for(var mutation of mutationsList) {
                if (mutation.type == 'childList') {
                    // console.log('L_utilisateur a switché sur une autre référence produit.');
                    // Si changement sur le noeud #productRef, alors on supprime la classe .is-hidden-if-product-is-configurable du DOM!
                    $('#productRef').closest('.is-hidden-if-product-is-configurable').removeClass('is-hidden-if-product-is-configurable');
                }
            }
        };

        // Créé une instance de l'observateur lié à la fonction de callback
        var observer = new MutationObserver(callback);

        // Commence à observer le noeud cible pour les mutations précédemment configurées
        observer.observe(targetNode, config);

        // L'observation peut être arrêtée par la suite
        // observer.disconnect();

    });
</script>

require([

'jquery'

], function($){

'use strict';

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

// Selectionne le noeud dont les mutations seront observées (#productRef pour nous)

var targetNode = document.getElementById('productRef');

// Options de l'observateur (quelles sont les mutations à observer)

// Il y a tout un tas de propriétés possibles ici; voir la documentation pour adapter ce code à votre besoin.

// Pour ma part, je devais observer les changements de texte dans un noeud précis.

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

var config = { childList: true };

// Fonction callback à éxécuter quand une mutation est observée

var callback = function(mutationsList) {

for(var mutation of mutationsList) {

if (mutation.type == 'childList') {

// console.log('L_utilisateur a switché sur une autre référence produit.');

// Si changement sur le noeud #productRef, alors on supprime la classe .is-hidden-if-product-is-configurable du DOM!

$('#productRef').closest('.is-hidden-if-product-is-configurable').removeClass('is-hidden-if-product-is-configurable');

}

};

// Créé une instance de l'observateur lié à la fonction de callback

var observer = new MutationObserver(callback);

// Commence à observer le noeud cible pour les mutations précédemment configurées

observer.observe(targetNode, config);

// L'observation peut être arrêtée par la suite

// observer.disconnect();

});

</script>

Le reste du fichier demeure inchangé.

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

.page-product-configurable {
    .is-hidden-if-product-is-configurable {
        visibility: hidden;
    }
}

.page-product-configurable {

.is-hidden-if-product-is-configurable {

visibility: hidden;

}

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

24/08/2020 / admin

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:

$ n98-magerun2 db:import --compression=gz dumps/rc-11.sql.gz

1	$ n98-magerun2 db:import --compression=gz dumps/rc-11.sql.gz

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

$ gunzip rc-11.sql.gz

1	$ gunzip rc-11.sql.gz

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

$ sed -i 's/\/\*!50017 DEFINER=`magentoppr`@`%`\*\//   /g' rc-11.sql

1	$ sed -i 's/\/\!50017 DEFINER=`magentoppr`@`%`\\// /g' rc-11.sql

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

$ sed -i 's/\/\*![0-9]* DEFINER=[^\*]* \*\//    /g' rc-11.sql

1	$ sed -i 's/\/\![0-9] DEFINER=[^\] \*\// /g' rc-11.sql

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

$ n98-magerun2 db:import dumps/rc-11.sql

1	$ n98-magerun2 db:import dumps/rc-11.sql

[Javascript] Une alternative ES6+ à la méthode .remove() de jQuery avec querySelectorAll et parentNode.removeChild

23/08/2020 / admin

Source: Pure JavaScript alternative to jQuery’s .remove()

Instruction initiale (en jQuery):

$stock.find('.is-cell:empty').remove();

1	$stock.find('.is-cell:empty').remove();

Boucle for:

// use querySelectorAll to return all matching DOM elements
let $stockEmptyCell = $stock.querySelectorAll('.is-cell:empty');

for ( let i=0; i < $stockEmptyCell.length; i++ )
    if ( $stockEmptyCell[i].innerHTML.length === 0 )
        // use parentNode.removeChild to remove elements
        $stockEmptyCell[i].parentNode.removeChild( $stockEmptyCell[i] );

// use querySelectorAll to return all matching DOM elements

let $stockEmptyCell = $stock.querySelectorAll('.is-cell:empty');

for ( let i=0; i < $stockEmptyCell.length; i++ )

if ( $stockEmptyCell[i].innerHTML.length === 0 )

// use parentNode.removeChild to remove elements

$stockEmptyCell[i].parentNode.removeChild( $stockEmptyCell[i] );

Sous forme de fonction

function removeStockEmptyCells( childrenElement, parentElement ) {
    let $childrenElement = parentElement.querySelectorAll(childrenElement);
    for ( let i = 0; i < $childrenElement.length; i++ )
        if ( $childrenElement[i].innerHTML.length === 0 )
            $childrenElement[i].parentNode.removeChild( $childrenElement[i] );
}

function removeStockEmptyCells( childrenElement, parentElement ) {

let $childrenElement = parentElement.querySelectorAll(childrenElement);

for ( let i = 0; i < $childrenElement.length; i++ )

if ( $childrenElement[i].innerHTML.length === 0 )

$childrenElement[i].parentNode.removeChild( $childrenElement[i] );

}

removeStockEmptyCells( '.is-cell:empty', $stock );

1	removeStockEmptyCells( '.is-cell:empty', $stock );

[javaScript] Rechercher si une valeur est déjà présente dans un tableau bi-dimensionnel

21/08/2020 / admin

    // https://stackoverflow.com/questions/24943200/javascript-2d-array-indexof
    // https://stackoverflow.com/a/24943461
    // Rechercher si une valeur est déjà présente dans un tableau bi-dimensionnel
    function wasLetterAlreadyPushedInArray(array, value) {
        for (var i = 0; i < array.length; i++) {
            // This if statement depends on the format of your array
            for (var j = 0; j < array[i].length; j++) {
                if (array[i][j] === value) {
                    return true;   // Found it
                }
            }
        }
        return false;   // Not found
    }

// https://stackoverflow.com/questions/24943200/javascript-2d-array-indexof

// https://stackoverflow.com/a/24943461

// Rechercher si une valeur est déjà présente dans un tableau bi-dimensionnel

function wasLetterAlreadyPushedInArray(array, value) {

for (var i = 0; i < array.length; i++) {

// This if statement depends on the format of your array

for (var j = 0; j < array[i].length; j++) {

if (array[i][j] === value) {

return true; // Found it

}

return false; // Not found

}

if ( wasLetterAlreadyPushedInArray(arr_words, index) === false ) {
    inGameLetterCount = inGameLetterCount -1;
}

if ( wasLetterAlreadyPushedInArray(arr_words, index) === false ) {

inGameLetterCount = inGameLetterCount -1;

}

[Adobe Audition] Couper un fichier long en de multiples pistes

16/08/2020 / admin

Testé fonctionnel Adobe Audition 2020.

Cliquer sur l’onde, à l’endroit précis où vous souhaitez ajouter une marque (pensez à toujours ajouter une première marque au timestamp 0:00.000).
Appuyez F8 pour ajouter une marque.
Répétez l’opération pour chaque début d’une nouvelle piste.

Une fois toutes vos marques placées, allez dans le panneau des marques et double cliquez sur votre première marque. L’onde va se recentrer à l’endroit où cette dernière à été définie.
Clic droit sur la marque (juste au-dessus de l’onde), puis sélectionnez « Convertir en plage ».
Dans le panneau des marques, vous avez une colonne début et une colonne fin.
Editez la valeur dans la colonne fin pour y mettre le timestamp correspondant au début de la piste suivante.
Répétez l’opération pour chaque piste précédemment définies.

Dans le panneau des marques, Ctrl + a pour sélectionner toutes les marques.
Un bouton « Exporter l’audio des marques de plages sélectionnées dans des fichiers distincts » devrait apparaître. Cliquer dessus.

[Magento 2] Ajouter un block (une page) au compte client via un layout XML

29/07/2020 / admin

Dans votre module, dans view/frontend/layout/ ou dans un thème dans Vendor_Module/layout/, rajouter un layout XML contenant ceci:

<?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">
<update handle="customer_account"/>
    <body>
        <referenceContainer name="content">
            <!-- ici votre block -->
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<body>

</referenceContainer>

</body>

</page>

<update handle="customer_account"/> fait référence au layout global des pages du compte client (dans le module Customer, layout/customer_account.xml).

<referenceContainer name="content"> fait référence à la zone content de la page.

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

23/07/2020 / admin

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

<script>
    require([
        'jquery'
    ], function ($) {
        $('.product-item').on('click', function(){
            let quickviewRelatedProductURL = $(this).find('.product-item-link').attr('href');
            window.localStorage.setItem('quickviewRelatedProductURL', quickviewRelatedProductURL);
        });
    });
</script>

require([

'jquery'

], function ($) {

$('.product-item').on('click', function(){

let quickviewRelatedProductURL = $(this).find('.product-item-link').attr('href');

window.localStorage.setItem('quickviewRelatedProductURL', quickviewRelatedProductURL);

});

</script>

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

<div class="product-url">
    <a id="currentlyViewedProductURL" class="link-see-product"><?= __('link-see-product'); ?></a>
</div>
<script>
    require([
        'jquery'
    ], function ($) {
        const $currentlyViewedProductURL = $('#currentlyViewedProductURL');

        $currentlyViewedProductURL.on('click', function(){
            // ...on fait une redirection JS dans la fenêtre parente de l'iFrame (la quickview) qui contient une partie de la fiche produit
            window.top.location.href = window.localStorage.getItem('quickviewRelatedProductURL');

            // ...et seulement ensuite, on simule le click sur la croix de fermeture de la quickview.
            $('.action-close', parent.document).click();
        });
    });
</script>

</div>

require([

'jquery'

], function ($) {

const $currentlyViewedProductURL = $('#currentlyViewedProductURL');

$currentlyViewedProductURL.on('click', function(){

// ...on fait une redirection JS dans la fenêtre parente de l'iFrame (la quickview) qui contient une partie de la fiche produit

window.top.location.href = window.localStorage.getItem('quickviewRelatedProductURL');

// ...et seulement ensuite, on simule le click sur la croix de fermeture de la quickview.

$('.action-close', parent.document).click();

});

</script>

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

<div class="product-url">
    <a id="currentlyViewedProductURL" class="link-see-product"><?= __('link-see-product'); ?></a>
</div>
<script>
    require([
        'jquery'
    ], function ($) {
        const $currentlyViewedProductURL = $('#currentlyViewedProductURL');

        // On récupère l'URL de la fiche produit 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.
        // https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/
        let productDataStorageObject = JSON.parse(window.localStorage.getItem('product_data_storage')),
        // On récupère l'ID du produit dans le DOM.
            viewedProductID = $('.price-box').attr('data-product-id');

        // On assigne l'URL de la fiche produit à l'élément a#currentlyViewedProductURL via le pseudo attribut href.
        $currentlyViewedProductURL.attr('href', productDataStorageObject[viewedProductID].url);

        // Au clic sur l'élément a#currentlyViewedProductURL (le lien "Voir la fiche produit")...
        $currentlyViewedProductURL.on('click', function(){
            // ...on fait une redirection JS dans la fenêtre parente de l'iFrame (la quickview) qui contient une partie de la fiche produit
            // https://stackoverflow.com/questions/580669/redirect-parent-window-from-an-iframe-action
            window.top.location.href = productDataStorageObject[viewedProductID].url;

            // ...et seulement ensuite, on simule le click sur la croix de fermeture de la quickview.
            // https://stackoverflow.com/questions/23913951/how-to-get-an-element-outside-of-iframe-with-javascript-or-jquery/23914011
            $('.action-close', parent.document).click();
        });
    });
</script>

</div>

require([

'jquery'

], function ($) {

const $currentlyViewedProductURL = $('#currentlyViewedProductURL');

// On récupère l'URL de la fiche produit 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.

// https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/

let productDataStorageObject = JSON.parse(window.localStorage.getItem('product_data_storage')),

// On récupère l'ID du produit dans le DOM.

viewedProductID = $('.price-box').attr('data-product-id');

// On assigne l'URL de la fiche produit à l'élément a#currentlyViewedProductURL via le pseudo attribut href.

$currentlyViewedProductURL.attr('href', productDataStorageObject[viewedProductID].url);

// Au clic sur l'élément a#currentlyViewedProductURL (le lien "Voir la fiche produit")...

$currentlyViewedProductURL.on('click', function(){

// ...on fait une redirection JS dans la fenêtre parente de l'iFrame (la quickview) qui contient une partie de la fiche produit

// https://stackoverflow.com/questions/580669/redirect-parent-window-from-an-iframe-action

window.top.location.href = productDataStorageObject[viewedProductID].url;

// ...et seulement ensuite, on simule le click sur la croix de fermeture de la quickview.

// https://stackoverflow.com/questions/23913951/how-to-get-an-element-outside-of-iframe-with-javascript-or-jquery/23914011

$('.action-close', parent.document).click();

});

</script>

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

// https://stackoverflow.com/questions/42097143/how-to-get-first-key-pair-element-of-json-object-without-knowing-key-and-deletin
let firstKey = Object.keys(productDataStorageObject)[0];
$('#currentlyViewedProductURL').attr('href', productDataStorageObject[firstKey].url);

// https://stackoverflow.com/questions/42097143/how-to-get-first-key-pair-element-of-json-object-without-knowing-key-and-deletin

let firstKey = Object.keys(productDataStorageObject)[0];

$('#currentlyViewedProductURL').attr('href', productDataStorageObject[firstKey].url);

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

<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <referenceContainer name="content">
        <referenceContainer name="product.info.main">
            <container name="product.info.url" after="product.info">
                <block class="Magento\Framework\View\Element\Template" name="product.url" template="Magento_Catalog::product/view/product-url.phtml"/>
            </container>
        </referenceContainer>

<?xml version="1.0"?>

</container>

</referenceContainer>

Les styles:

.product-url {
    display: none;
    width: 100%;

    // On affiche le lien vers la fiche produit UNIQUEMENT dans la quickview
    .cartquickpro-catalog_product-view & {
        display: flex;
    }

    .link-see-product {
        text-decoration: underline;
        &:hover {
            text-decoration: none;
        }
    }
}

.product-url {

display: none;

width: 100%;

// On affiche le lien vers la fiche produit UNIQUEMENT dans la quickview

.cartquickpro-catalog_product-view & {

display: flex;

}

.link-see-product {

text-decoration: underline;

&:hover {

text-decoration: none;

}

Theme by Anders Norén — Up ↑

devfrontend.info

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

Articles récents

Catégories

Archives

Méta

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

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)

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

La méthode .eq() de jQuery

La même chose en ES6/vanilla JS

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

Version vanilla JS/ES6

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

La problématique:

La solution:

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

Rajout d’une classe CSS et d’un ID

Rajout de l’observer JS

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

Problème:

Description du problème:

Solution:

[Javascript] Une alternative ES6+ à la méthode .remove() de jQuery avec querySelectorAll et parentNode.removeChild

Sous forme de fonction

[javaScript] Rechercher si une valeur est déjà présente dans un tableau bi-dimensionnel

[Adobe Audition] Couper un fichier long en de multiples pistes

[Magento 2] Ajouter un block (une page) au compte client via un layout XML

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

Solution #2 (fonctionnelle)

Solution #1 (pas focntionnelle)

Le fichier template PHTML:

Bonus:

Le fichier layout XML:

Les styles:

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

Articles récents

Catégories

Tags

Archives

Méta

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

La problématique:

La solution:

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

Rajout d’une classe CSS et d’un ID

Rajout de l’observer JS

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

Problème:

Description du problème:

Solution:

Sous forme de fonction

Solution #2 (fonctionnelle)

Solution #1 (pas focntionnelle)

Le fichier template PHTML:

Bonus:

Le fichier layout XML:

Les styles:

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

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