Admin, backoffice
Trouver et activer l’extension Google Tag Manager
Dans STORES > Configuration > SALES > Google API > Google Analytics. Mettre enable à « Yes ».
Le bloc-notes professionnel d'un développeur front-end senior
Dans STORES > Configuration > SALES > Google API > Google Analytics. Mettre enable à « Yes ».
Magento 2 supprime de manière radicale toutes les balises HTML que vous pourriez renseigner dans des champs du BO. Dans notre exemple, le champ à renseigner affiche un titre en front et si on renseigne ceci: 50<sup>th</sup> Anniversary
, l’élément <sup>
est automatiquement supprimé.
Pour éviter ceci, on peut déclarer(1) et exploiter l’Escaper dans les fichiers PHTML en listant dans un tableau(2) l’ensemble des balises HTML à conserver:
1 |
/** @var \Magento\Framework\Escaper $escaper */ |
1 |
<h1><?= $escaper->escapeHtml($story->getName(), ['sup']); ?></h1> |
Valable également en cas d’utilisation d’une clé de traduction (fichiers CSV):
1 |
"Related news & stories","Related<sup>TH</sup> news & stories" |
1 |
<?= $escaper->escapeHtml(__('Related news & stories'), ['sup']) ?> |
Documentation officielle du Page Builder Adobe Commerce (ex Magento 2).
C’est en fait dans un fichier title-tag-escaper.js qu’on liste les tags HTML à ne pas échapper:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/** * Strip html tags except strong|em|span|br|sup * * @param {string} name * @param {Object} data * @returns {string} */ ; _proto.toDom = function toDom(name, data) { var input = ((0, _object.get)(data, name)); return this.stripTags(input, '<strong><em><span><br><sup>'); }; |
Dans app/code/MyVendor/PageBuilder/view/adminhtml/pagebuilder/content_type/module_XX, afin que la liste des balises autorisées soit prise en compte il faut ajouter un attribut converter
pour l’élément (le champ du formulaire d’édition en BO) ciblé:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd"> <type name="module_21" label="Text" menu_section="add_content" component="Magento_PageBuilder/js/content-type" preview_component="MyVendor_PageBuilder/js/content-type/module-21/preview" master_component="Magento_PageBuilder/js/content-type/master-collection" form="pagebuilder_module_21_form" icon="icon-pagebuilder-module-21" sortOrder="21" translate="label"> <parents default_policy="deny"> <parent name="root-container" policy="allow"/> <parent name="row" policy="allow"/> </parents> <children default_policy="deny"/> <appearances> <appearance name="theme_01" default="true" preview_template="MyVendor_PageBuilder/content-type/module-21/theme-01/preview" master_template="MyVendor_PageBuilder/content-type/module-21/theme-01/master" reader="Magento_PageBuilder/js/master-format/read/configurable"> <elements> <element name="title"> <html name="title" converter="MyVendor_PageBuilder/js/converter/html/title-tag-escaper"/> <attribute name="title_italic" source="data-italic"/> <attribute name="title_tag" source="data-tag"/> </element> |
Sources:
foreach
Extrait du fichier: app/design/frontend/Vendor/theme/Magento_Checkout/web/js/view/address-renderer-mixin.js
1 2 3 4 5 6 |
/** * @return {string} */ formatStreet: function (str) { return String(str).replace(/,(?=[^\s])/g, ", "); }, |
Extrait du fichier: app/design/frontend/Vendor/theme/Magento_Checkout/web/template/shipping-information/address-renderer/default.html
1 |
<text args="formatStreet(address().street)"></text> |
Résultat en front:
Street 1,Street 2,Street 3
1 2 3 4 |
<each args="data: address().street, as: 'streetLine'"> <text args="streetLine"></text> <br> </each> |
Résultat en front:
Street 1
Street 2
Street 3
Par défaut, l’éditeur WYSIWYG TinyMCE 4 proposé par Magento 2 n’inclut pas une bonne partie des fonctionnalités embarquées par la librairie TinyMCE 4 (couleur du texte, du fond, …) qui peuvent être utiles pour un rédacteur de contenu. Je prends pour exemple les Custom Formats (Demo CodePen), très utiles lorsque vous créez des styles qui reposent sur un assemblage d’éléments HTML et de classes.
Testé fonctionnel Magento 2.3.3. Attention: le plugin ne fournissant aucune licence, il est déconseillé de l’utiliser sur des projets que vous vendez.
Vous pouvez utiliser le plugin Better Magento 2 WYSIWYG TinyMCE4 Editor par Magefan.
Testé fonctionnel Magento 2.3.3. Source: Magento 2.3 – TinyMCE4 Toolbar and Plugin Configuration. Créer plusieurs fichiers:
Convention: dans notre exemple, Project
et project
sont à remplacer par le libellé de votre Vendor.
1 2 3 4 5 6 7 |
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <type name="Magento\Ui\Component\Wysiwyg\ConfigInterface"> <plugin name="project_customtinymce_config" type="Project\Customtinymce\Plugin\Config" sortOrder="10"/> </type> </config> |
1 2 3 4 5 |
<?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="Project_Customtinymce" setup_version="0.1.0"/> </config> |
1 2 3 4 5 6 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Project_Customtinymce', __DIR__ ); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<?php namespace Project\Customtinymce\Plugin; class Config { protected $activeEditor; public function __construct(\Magento\Ui\Block\Wysiwyg\ActiveEditor $activeEditor) { $this->activeEditor = $activeEditor; } /** * Return WYSIWYG configuration * * @param \Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface * @param \Magento\Framework\DataObject $result * @return \Magento\Framework\DataObject */ public function afterGetConfig( \Magento\Ui\Component\Wysiwyg\ConfigInterface $configInterface, \Magento\Framework\DataObject $result ) { // Get current wysiwyg adapter's path $editor = $this->activeEditor->getWysiwygAdapterPath(); // Is the current wysiwyg tinymce v4? if(strpos($editor,'tinymce4Adapter')){ if (($result->getDataByPath('settings/menubar')) || ($result->getDataByPath('settings/toolbar')) || ($result->getDataByPath('settings/plugins'))){ // do not override ui_element config (unsure if this is needed) return $result; } $settings = $result->getData('settings'); if (!is_array($settings)) { $settings = []; } // configure tinymce settings $settings['menubar'] = true; $settings['toolbar'] = 'undo redo | styleselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | image | code'; $settings['plugins'] = 'textcolor image code'; $result->setData('settings', $settings); return $result; } else{ // don't make any changes if the current wysiwyg editor is not tinymce 4 return $result; } } } |
Remarque: dans ce fichier Config.php
, si on désactive tous les $settings[''] = ;
(comme ci-dessous), c’est les fonctionnalités prévues par défaut dans Magento 2 qui s’afficheront dans vos champs d’éditeurs WYSIWYG en admin.
1 2 3 4 |
// configure tinymce settings // $settings['menubar'] = true; // $settings['toolbar'] = 'undo redo | styleselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | table | image | code'; // $settings['plugins'] = 'textcolor image code'; |
1 2 |
$ n98-magerun2 module:enable Project_Customtinymce // où "Project" est le libellé de votre Vendor $ n98-magerun2 setup:upgrade; n98-magerun2 setup:di:compile; n98-magerun2 cache:clean; n98-magerun2 cache:flush |
Disponibles ici: Commandes Magento 2 Magerun développeur front-end.
Problème: j’essaye d’installer les sample datas de Magento 2 via Composer, mais lorsque je tape la commande $ bin/magento sampledata:deploy
, j’obtiens un message Authentication required (repo.magento.com): Username Password.
Solution: Il faudra créer un compte sur marketplace.magento.com et 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 ligne de commande: $ n98-magerun2 dev:module:create
Tips: les sources d’un starter-theme Luma Child sont disponibles en suivant ce lien.
Partie conf à ajouter dans <project_root>\dev\tools\grunt\configs\local-themes.js
:
1 2 3 4 5 6 7 8 9 10 |
luma_child: { area: 'frontend', name: 'Magento/luma-child', locale: 'en_US', files: [ 'css/styles-m', 'css/styles-l' ], dsl: 'less' }, |
Sinon, si vous souhaitez débuter +/- from-scratch, vous pouvez suivre la documentation officielle de Magento 2 pour créer un nouveau thème.
Dans cet ordre (et PAS dans un autre ordre, sinon ça ne fonctionne pas) :
app/design/frontend/<Vendor_name>/<theme_name>
Content > Design > Configuration > (Select Edit on your Store View) > Default Theme > Applied Theme > "<your_new_theme_name>"
$ n98-magerun2 cache:flush
$ grunt clean && grunt exec && grunt less && grunt watch
$ rm -rf pub/static/*; rm -rf var/view_preprocessed/
Deux notions bien distinctes à intégrer: l’extension et la surcharge de styles.
L’extension permet de conserver, pour le fichier qui est étendu, les styles déclarés dans le(s) thème(s) parent(s) et d’en écrire des supplémentaires. Cette méthode est pratique lorsque votre thème hérite d’un thème parent dont les styles vous conviennent déjà. Elle s’utilise pour apporter des modifications mineures à l’existant.
La surcharge écrase, pour le fichier qui est surchargé, l’intégralité des styles déclarés dans le(s) thème(s) parent(s) pour repartir d’une base neutre. Cette dernière demande beaucoup plus de travail côté front-end.
Tips: Magento naming convention for the Less variables et Modifier les valeurs des variables par défaut d’un thème parent (blank/luma).
_theme.less
. Ce fichier doit contenir uniquement des déclarations concernant des variables déjà existantes dans des thèmes parents._variables_extend.less
qu’il faudra importer depuis le fichier _extend.less
_variables.less
qui va faire exploser votre affichage!) et dans lequel vous consignerez vos nouvelles variablesapp/design/frontend/<Vendor_name>/<Luma_child_theme_name>/css/source/_variables_extend.less
, lui-même importé via @import '_variables_extend.less';
depuis app/design/frontend/<Vendor_name>/<Luma_child_theme_name>/css/source/_extend.less
.app/design/frontend/<Vendor_name>/<Blank_child_theme_name>/css/source/_variables_extend.less
, lui-même importé via @import '_variables_extend.less';
depuis app/design/frontend/<Vendor_name>/<Blank_child_theme_name>/css/source/_extend.less
.Luma nous donne un bon exemple de comment doit être organisée cette feuille de styles. Les grandes parties (Typography, Icons, …) contiennent des surcharges des valeurs de variables existantes déclarées respectivement au minimum dans lib/web/css/source/lib/variables/_typography.less et dans lib/web/css/source/lib/variables/_icons.less.
« Au minimum« car elles peuvent déjà être surchargées une première fois dans le thème Blank (intermédiaire). @font-family-name__base
est, en effet, déclarée pour la première fois dans vendor/magento/theme-frontend-blank/web/css/source/_variables.less.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// /** // * Copyright © Magento, Inc. All rights reserved. // * See COPYING.txt for license details. // */ // // Luma theme variables // _____________________________________________ // // Typography // --------------------------------------------- // Fonts @font-family-name__base: 'Open Sans'; // Hérité de: Blank @font-family__base: @font-family-name__base, @font-family__sans-serif; // Hérité de: Blank < Core // Colors nesting @page__background-color: @color-white; // Hérité de: Core // // Icons // --------------------------------------------- @icon-success: '\e60e'; @icon-error: '\e61f'; [...] |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// /** // * Copyright © Magento, Inc. All rights reserved. // * See COPYING.txt for license details. // */ // // Variables // _____________________________________________ // Nouvelles variables qui seront exploitées uniquement dans ce fichier! @legend-border-bottom: 1px solid @color-gray-light6; @form-field__vertical-indent__desktop: 29px; @form-calendar-icon__color: @primary__color; // // Common // _____________________________________________ & when (@media-common = true) { .fieldset { [...] |
Une série d’aliases à ajouter au fichier .bashrc.
$ vim ~/.bashrc
$ source ~/.bashrc
1 2 3 4 |
# Magento 2 aliases # Vider les caches statiques des thèmes alias m2_rmstatic='rm -rf pub/static/*; rm -rf var/view_preprocessed/*' |
Magento2 : How to disable product image slider on detail page. Dans /theme_folder/etc/view.xml
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<vars module="Magento_Catalog"> <!-- Gallery and magnifier theme settings. Start --> <var name="gallery"> <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) --> <var name="loop">true</var> <!-- Gallery navigation loop (true/false) --> <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) --> <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) --> <var name="caption">false</var> <!-- Display alt text as image title (true/false) --> <var name="allowfullscreen">true</var> <!-- Turn on/off fullscreen (true/false) --> <var name="navdir">horizontal</var> <!-- Sliding direction of thumbnails (horizontal/vertical) --> <var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides (true/false) --> <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) --> <var name="transition"> <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) --> <var name="duration">500</var> <!-- Sets transition duration in ms --> </var> <var name="fullscreen"> <var name="nav">thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) --> <var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) --> <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false/null) --> <var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview (true/false/null) --> <var name="caption">false</var> <!-- Display alt text as image title (true/false) --> <var name="navdir">horizontal</var> <!--Sliding direction of thumbnails in full screen(horizontal/vertical) --> <var name="thumbwidth">150</var> <!-- Width of thumbnails in fullscreen --> <var name="thumbheight">150</var> <!-- Height of thumbnails in fullscreen --> <var name="navigation_carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) --> <var name="transition"> <var name="effect">dissolve</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) --> <var name="duration">500</var> <!-- Sets transition duration in ms --> <var name="carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) --> </var> </var> </var> |