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

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

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

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?

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

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

Source: Pure JS equivalent of Jquery eq().

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

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:

Version vanilla JS/ES6

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

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

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

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

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

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

Instruction initiale (en jQuery):

Boucle for:

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

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] 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 ↑