novembre 2019 – devfrontend.info

Monthnovembre 2019

[Magento 2] Astuces d’utilisation du thème Supro

15/11/2019 / admin

Eviter des conflits d’édition entre le FO et le BO
Après l’import d’une base de données, pour retrouver le paramètrage backoffice et l’aspect visuel frontoffice
Modifier le logo du site sans passer par l’interface d’édition des pages en front
Composer un habillage depuis le code source (et pas depuis l’interface d’admin)
- Fallback héritage CSS dans le thème Supro
Surcharger (override) les valeurs de style par défaut (ou celles définies depuis l’interface d’admin)
- Pattern utilisé par le thème Supro pour la nomenclature de ses variables LESS
Surcharge d’une classe PHP située dans app/code/Vendor/Module/Model/Config/Source via un namespace spécifique
Créer un Source Model custom

Eviter des conflits d’édition entre le FO et le BO

Selon la doc officielle du thème Supro, veiller à bien désactiver le cache « full_page »:

$ n98-magerun2 cache:disable full_page

1	$ n98-magerun2 cache:disable full_page

MAIS en procédant ainsi, les modification appliquées via le BO ne sont pas remontées en FO. Le seule solution semble être de désactiver TOUS LES CACHES:

$ n98-magerun2 cache:disable

1	$ n98-magerun2 cache:disable

Après l’import d’une base de données, pour retrouver le paramètrage backoffice et l’aspect visuel frontoffice

$ n98-magerun2 cache:clean

1	$ n98-magerun2 cache:clean

Puis se rendre en BO > MGS > Theme Setting [MGS Theme] > et cliquer sur le bouton « Save Config » sans faire de modif.

Modifier le logo du site sans passer par l’interface d’édition des pages en front

Fichier à remplacer (en conservant le même libellé et la même extension): Z:\magento2\pdv\pub\static\frontend\Mgs\supro\fr_FR\images\logo.svg

Composer un habillage depuis le code source (et pas depuis l’interface d’admin)

Il est possible de composer un habillage du thème Supro depuis le code source. Supro fournit 2 moyens bien distincts d’agir sur le front:

En remplissant les champs prévus depuis l’interface d’admin
En remplissant les (mêmes) champs prévus depuis l’options « Customize » en front-office

Il y a une différence de fonctionnement très importante entre ces 2 modes (edit: vérifier que l’édition depuis l’admin génère bien uniquement des CSS et l’édition depuis le front uniquement des fichiers XML):

L’édition admin stocke les valeurs saisies en base de données et des fichiers CSS sont générés via le fichier <votre_projet>\app\code\MGS\ThemeSettings\Helper\Config.php.

Les fichiers CSS, générés à partir du contenu renseigné en BO dans le champ MGS > Page Builder Setting [Page Builder] > Font & Style > Custom Style, sont les suivants:
- pub/media/mgs/fbuilder/css/<store_id>/fbuilder_config.css
- pub/media/mgs/fbuilder/css/<store_id>/fbuilder_config.min.css: ce fichier est une copie de celui déclaré juste au-dessus. Le code est probablement sensé être minifié mais ce n’est pas le cas sur l’instance où j’ai effectué mes tests… C’est cependant lui qui est utilisé en front. Il est chargé en tout dernier.
- A noter, dans certains cas, la génération des fichiers pub/media/mgs/fbuilder/css/blocks.css et pub/media/mgs/fbuilder/css/blocks.min.css
L’édition front-office stocke les valeurs saisies dans un fichier <votre_projet>\pub\media\mgs\customize\<store_id>\settings.xml

Note: dans le chemin vers le fichier settings.xml, le store_id vous permet de retrouver à quel store le fichier va s’appliquer. Le store « 1 » (<votre_projet>\pub\media\mgs\customize\1\settings.xml) correspond à la configuration par défaut de votre Magento. Voir ici comment retrouver rapidement des informations comme le store_id dans Magento 2.

Lorsque vous éditez un fichier settings.xml, vos modifications ne seront visibles en front qu’à partir du moment ou vous aurez cliqué sur le bouton « Customize » puis sur le bouton Save for « Vue magasin » (pour une store view donnée) ou « Configuration par défaut » (pour le store par défaut, duquel l’ensemble des stores de votre instance de Magento 2 hérite) et que vous aurez rechargé la page avec un Ctrl + F5.

ATTENTION:

Si vous souhaitez éditer un habillage via ces fichiers settings.xml, n’utilisez pas les fonctionnalités d’habillage proposées dans l’interface d’admin!
(Si vous avez plusieurs stores) lorsque vous procédez à des modifications pour le store par défaut et que vos autres stores doivent en hériter, il faudra ré-effectuer chaque modiifcation à la main dans autant de fichiers settings.xml que vous avez de stores.

Fallback héritage CSS dans le thème Supro

Voici l’ordre de priorité (fallback/héritage) dans lequel les feuilles de styles sont déclarées en front, de la plus prioritaire à la moins prioritaire.
(notez comment procéder si vous souhaitez déclarer une CSS qui prendra le pas sur toutes les autres – cette feuille de style n’est pas listée ci-dessous)

/static/frontend/Mgs/supro/fr_FR/mage/calendar.css »
/static/frontend/Mgs/supro/fr_FR/css/styles-m.css »
/static/frontend/Mgs/supro/fr_FR/MGS_AjaxCart/css/style.css »
/static/frontend/Mgs/supro/fr_FR/mage/gallery/gallery.css »
/static/frontend/Mgs/supro/fr_FR/MGS_ExtraGallery/css/style.css »
/static/frontend/Mgs/supro/fr_FR/MGS_GDPR/css/gdpr.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Lookbook/css/theme.default.min.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Lookbook/css/styles.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Mmegamenu/css/megamenu.css »
/static/frontend/Mgs/supro/fr_FR/MGS_ThemeSettings/css/theme_setting.css »
/static/frontend/Mgs/supro/fr_FR/MGS_InstantSearch/css/styles.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/fontawesome.v4.7.0/fontawesome.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/owl.carousel.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/animate.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/magnific-popup.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/pbanner.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Fbuilder/css/styles.css »
media= »screen and (min-width: 768px) » /static/frontend/Mgs/supro/fr_FR/css/styles-l.css »
media= »print » /static/frontend/Mgs/supro/fr_FR/css/print.css »
/static/frontend/Mgs/supro/fr_FR/css/mgs_theme_style_guide.css »
/static/frontend/Mgs/supro/fr_FR/css/mgs_theme_fonts.css »
/static/frontend/Mgs/supro/fr_FR/css/mgs_theme.css »
/static/frontend/Mgs/supro/fr_FR/css/mgs_theme_responsive.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Aquickview/css/aquickview.css »
/static/frontend/Mgs/supro/fr_FR/MGS_Brand/css/mgs_brand.css »
media= »all » /media/mgs/fbuilder/css/blocks.min.css »
media= »all » /media/mgs/fbuilder/css/1/fbuilder_config.min.css »

Surcharger (override) les valeurs de style par défaut (ou celles définies depuis l’interface d’admin)

Astuce testée fonctionnelle.

Les fichiers concernés dans votre thème qui doit logiquement être enfant de Supro

<Vendor_name>
    |_ <theme_name>
        |_ MGS_Fbuilder
            |_ templates
                |_ html
                    |_ head.phtml
        |_ MGS_ThemeSettings
            |_ templates
                |_ html
                    |_ head.phtml
        |_ web
            |_ css
                |_ source
                    |_ _extend.less
                    |_ _theme-variables.less
                |_ supro-override.less

<Vendor_name>

|_ <theme_name>

|_ MGS_Fbuilder

|_ templates

|_ html

|_ head.phtml

|_ MGS_ThemeSettings

|_ templates

|_ html

|_ head.phtml

|_ web

|_ css

|_ source

|_ _extend.less

|_ _theme-variables.less

|_ supro-override.less

app/design/frontend/Sodifrance/pdv/MGS_Fbuilder/templates/html/head.phtml

<!--app/design/frontend/Sodifrance/pdv/MGS_Fbuilder/templates/html/head.phtml-->

<link  rel="stylesheet" type="text/css" media="all" href="<?php echo $this->getMediaUrl() ?>mgs/fbuilder/css/blocks.min.css" />
<link  rel="stylesheet" type="text/css" media="all" href="<?php echo $this->getMediaUrl() ?>mgs/fbuilder/css/<?php echo $this->getStoreId() ?>/fbuilder_config.min.css" />

<!-- SUPRO theme style override  -->
<!-- Path to file: app/design/frontend/Sodifrance/pdv/web/css/supro-override.less -->
<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('css/supro-override.css')?>" />

app/design/frontend/Sodifrance/pdv/MGS_ThemeSettings/templates/html/head.phtml

<!--app/design/frontend/Sodifrance/pdv/MGS_ThemeSettings/templates/html/head.phtml-->

<link  rel="stylesheet" type="text/css" media="all" href="<?php echo $this->getMediaUrl() ?>mgs/fbuilder/css/blocks.min.css" />
<link  rel="stylesheet" type="text/css" media="all" href="<?php echo $this->getMediaUrl() ?>mgs/fbuilder/css/<?php echo $this->getStoreId() ?>/fbuilder_config.min.css" />
<?php if($this->isCustomize()): ?>
	<style type="text/css" id="themesetting_customize_temp"><?php echo $this->getStyleInline() ?></style>
<?php endif ?>

<!-- SUPRO theme style override  -->
<!-- Path to file: app/design/frontend/Sodifrance/pdv/web/css/supro-override.less -->
<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('css/supro-override.css')?>" />

<?php if($this->isCustomize()): ?>

<?php endif ?>

app/design/frontend/Sodifrance/pdv/web/css/source/_extend.less

@import '_theme-variables.less';

// your custom styles here...

@import '_theme-variables.less';

// your custom styles here...

app/design/frontend/Sodifrance/pdv/web/css/source/_theme-variables.less

Dans ce fichier, vos variables LESS. Il n’existe pas de variables LESS parentes dans le thème Supro (la feuille de style étant générée via le fichier app/code/MGS/ThemeSettings/Helper/Config.php). Il ne s’agit donc pas de surcharges et vous pouvez les nommer comme bon vous semble (sachant que Supro fournit quand même un pattern dans le fichier Config.php dont le chemin a été communiqué juste au-dessus).

// DON'T NAME THIS FUCKING FILE '_variables.less' OR IT WILL ERASE MUCH NEEDED PARENT'S THEME '_variables.less'!

@blockMarginBottom: 60px;
@brandColor: #e10f21;
@brandColor-darken: #b10c1a;
@buttonHeight: 45px;

// DON'T NAME THIS FUCKING FILE '_variables.less' OR IT WILL ERASE MUCH NEEDED PARENT'S THEME '_variables.less'!

@blockMarginBottom: 60px;

@brandColor: #e10f21;

@brandColor-darken: #b10c1a;

@buttonHeight: 45px;

Pattern utilisé par le thème Supro pour la nomenclature de ses variables LESS

Le pattern utilisé est $<scope><LibelléDeLaVariable>. Un exemple ci-dessous ou la valeur de $mainPriceColor est directement injectée dans la feuille de style:

/* Price color */
$mainPriceColor = $this->getStoreConfig('themesettings/main/price_color', $storeId);
if($mainPriceColor!=''){
    $html .= '.price-box .price, .price{color:'.$mainPriceColor.'}';
}

/* Price color */

$mainPriceColor = $this->getStoreConfig('themesettings/main/price_color', $storeId);

if($mainPriceColor!=''){

$html .= '.price-box .price, .price{color:'.$mainPriceColor.'}';

}

Ici, $mainPriceColor pourrait devenir, dans vos sources LESS: @mainPriceColor: <valeur>;

app/design/frontend/Sodifrance/pdv/web/css/supro-override.less

/*
 * SUPRO theme style override
 * Path to original PHP generated file: app/code/MGS/Fbuilder/view/frontend/web/css/styles.css
 */

@import 'source/_theme-variables.less';

.btn.btn-primary, .action.primary {
  background: @brandColor;
  border: 2px solid @brandColor;
  &:hover {
    background-color: @brandColor-darken;
    border: 2px solid @brandColor-darken;
  }
}

* SUPRO theme style override

* Path to original PHP generated file: app/code/MGS/Fbuilder/view/frontend/web/css/styles.css

@import 'source/_theme-variables.less';

.btn.btn-primary, .action.primary {

background: @brandColor;

border: 2px solid @brandColor;

&:hover {

background-color: @brandColor-darken;

border: 2px solid @brandColor-darken;

}

Les fichiers concernés hors thème

dev/tools/grunt/configs/local-themes.js

On y déclare la feuille de style supro-override.less.

    <theme_name>: {
        area: 'frontend',
        name: '<Vendor_name>/<theme_name>',
        locale: 'fr_FR',
        files: [
            'css/supro-override'
        ],
        dsl: 'less'
    },

<theme_name>: {

area: 'frontend',

locale: 'fr_FR',

files: [

'css/supro-override'

dsl: 'less'

[Magento 2] Les commandes Magerun du développeur Front-End

14/11/2019 / admin

Ressources en ligne:

Clear directories during development (quels dossiers vider, dans quels cas).

Notes valables pour la version 2.3.x

Accéder au bash d’un container Docker en tant qu’utilisateur www-data: docker exec -tiu www-data {container name} bash.

Exécuter une commande Magento 2 dans le container Docker « web » en tant qu’utilisateur www-data: docker exec -tiu www-data {web container name} n98-magerun2 {commande}.

Certaines commandes Magento (Magerun) ne fonctionnent plus?

Erreur: There are no commands defined in the « app:config » namespace.

Mettre à jour l’autoloading composer:

$ composer dump

1	$ composer dump

Changement de mode

$ bin/magento deploy:mode:show Display the current mode.
$ bin/magento deploy:mode:set {mode} [-s|--skip-compilation] Change mode (les différents modes dans Magento 2).

Déployer les sample datas

$ bin/magento sampledata:deploy, puis $ bin/magento setup:upgrade Install sample data using Composer.

Nettoyer les caches

$ bin/magento cache:clean ($ bin/magento cache:flush pour un nettoyage plus radical qui va impacter les caches d’autres sites/applications -> à n’exécuter que si cache:clean n’a pas fonctionné)
rm -rf pub/static/*; rm -rf var/view_preprocessed/* Vider les caches statiques du thème (pas utile en mode developer à priori).

Désactiver les caches pour le front-end

bin/magento cache:disable full_page block_html layout

1	bin/magento cache:disable full_page block_html layout

Nettoyer les caches CSS (moins bourrin que le `rm -rf pub/static/...` de Magento 2)

Attention: ces commandes ne concernent que les ressources CSS (pas les JS).

$ find pub/static/frontend/MyVendor -type f \( -name '*.css' \) -delete; find var/view_preprocessed/pub/static/frontend/MyVendor -type f \( -name '*.css' -o -name '*.less' \) -delete

1	$ find pub/static/frontend/MyVendor -type f $ -name '.css' $ -delete; find var/view_preprocessed/pub/static/frontend/MyVendor -type f $ -name '.css' -o -name '*.less' $ -delete

Ces commandes expliquées:

// Suppression des ressources CSS front compilées du thème (celles générées via Grunt ou la commande setup:static-content:deploy):
$ find pub/static/frontend/MyVendor -type f \( -name '*.css' \) -delete
 
// Suppression des sources LESS servant à la compilation des ressources front pré-citées:
$ find var/view_preprocessed/pub/static/frontend/MyVendor -type f \( -name '*.css' -o -name '*.less' \) -delete

// Suppression des ressources CSS front compilées du thème (celles générées via Grunt ou la commande setup:static-content:deploy):

$ find pub/static/frontend/MyVendor -type f $ -name '*.css' $ -delete

// Suppression des sources LESS servant à la compilation des ressources front pré-citées:

$ find var/view_preprocessed/pub/static/frontend/MyVendor -type f $ -name '*.css' -o -name '*.less' $ -delete

Attention: en cas de modification dans la hiérarchie des thèmes ou d’ajout d’un nouveau thème un rm -rf pub/static/*; rm -rf var/view_preprocessed/* reste conseillé.

Nettoyer les caches JS

$ bin/magento cache:clean full_page block_html

1	$ bin/magento cache:clean full_page block_html

Les commandes de compilation des assets front-end

grunt clean && grunt exec && grunt less && grunt watch La commande grunt à lancer le matin.

Aide au développement/debug

$ bin/magento dev:template-hints:enable; bin/magento cache:clean et $ bin/magento dev:template-hints:disable; bin/magento cache:clean pour activer/désactiver les templates hints.
- $ n98-magerun2 dev:template-hints:enable; n98-magerun2 cache:clean
- $ n98-magerun2 dev:template-hints:disable; n98-magerun2 cache:clean

Faire un backup (dump) de la base de données et des médias

Il existe deux commandes magerun pour ça:

$ bin/magento db:dump
$ bin/magento media:dump

1 2	$ bin/magento db:dump $ bin/magento media:dump

Importer un backup (dump) de la base de données et des médias

$ bin/magento db:import [<nom_du_fichier_dump>]
# Exemple: bin/magento db:import backup/my-project.sql

1 2	$ bin/magento db:import [<nom_du_fichier_dump>] # Exemple: bin/magento db:import backup/my-project.sql

Importer un backup (dump) de la base de données gzippé

$ n98-magerun2 db:import --compression=gz [<nom_du_fichier_dump>]
# Exemple: n98-magerun2 db:import --compression=gz release-candidate-1.sql.gz

1 2	$ n98-magerun2 db:import --compression=gz [<nom_du_fichier_dump>] # Exemple: n98-magerun2 db:import --compression=gz release-candidate-1.sql.gz

Si erreur You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near '' at line 1:

n98-magerun2 db:import --drop --compression=gz release-candidate-1.sql.gz

1	n98-magerun2 db:import --drop --compression=gz release-candidate-1.sql.gz

Appliquer les changements après import d’une nouvelle base de données

$ n98-magerun s:d:c

1	$ n98-magerun s:d:c

Appliquer les modifications des fichiers `app/etc/config.php` et `app/etc/env.php`

$ bin/magento app:config:import

1	$ bin/magento app:config:import

Appliquer les changements de schéma en base de données

$ bin/magento setup:upgrade

1	$ bin/magento setup:upgrade

Déployer le thème `adminhtml` en langue anglaise

Si les pages de votre interface d’admin sont très lentes à se charger:

$ bin/magento setup:static-content:deploy -f --area=adminhtml en_US

1	$ bin/magento setup:static-content:deploy -f --area=adminhtml en_US

Déployer tous les thèmes `frontend` en langue française

…sans se taper une erreur d'allowed memory size en plein milieu du déploiement:

$ php -dmemory_limit=-1 bin/magento setup:static-content:deploy -f --area=frontend fr_FR

1	$ php -dmemory_limit=-1 bin/magento setup:static-content:deploy -f --area=frontend fr_FR

`setup:di:compile`

Si erreur: PHP Fatal error: Allowed memory size ... bytes exhausted...:

$ php -dmemory_limit=-1 bin/magento setup:di:compile

1	$ php -dmemory_limit=-1 bin/magento setup:di:compile

Créer un compte admin

// Les caractères spéciaux ($) doivent être quotés (cf. exemple de password)
$ bin/magento admin:user:create --admin-user=someone@something.com --admin-password=1234'$'Aqwx --admin-email=someone@something.com --admin-firstname=Someone --admin-lastname=Something

1 2	// Les caractères spéciaux ($) doivent être quotés (cf. exemple de password) $ bin/magento admin:user:create --admin-user=someone@something.com --admin-password=1234'$'Aqwx --admin-email=someone@something.com --admin-firstname=Someone --admin-lastname=Something

Modifier le mot de passe du compte admin

$ n98-magerun2 admin:user:change-password admin nouveaupasse

1	$ n98-magerun2 admin:user:change-password admin nouveaupasse

Dévérouiller le compte admin

$ bin/magento admin:user:unlock admin

1	$ bin/magento admin:user:unlock admin

Faire un dump de la toute la config BO (fichier généré: config.php)

ATTENTION AVANT DE LANCER CETTE COMMANDE, FAITES UNE COPIE DE VOTRE FICHIER config.php INITIAL CAR IL SERA ECRASE!

$ n98-magerun2 app:config:dump

1	$ n98-magerun2 app:config:dump

Pour prise en compte des modifications effectuées dans le fichier config.php:

$ n98-magerun2 app:config:import

1	$ n98-magerun2 app:config:import

Ré-indexer le catalogue

$ n98-magerun2 indexer:reindex

1	$ n98-magerun2 indexer:reindex

Si vous n’avez pas de produits en front après avoir lancé la commande de réindexation, vous pouvez tenter ceci:

$ n98-magerun2 indexer:reset && php -dmemory_limit=-1 bin/magento indexer:reindex

1	$ n98-magerun2 indexer:reset && php -dmemory_limit=-1 bin/magento indexer:reindex

Manipuler les données des comptes clients (customers)

Lister les comptes clients

$ n98-magerun2 customer:list

1	$ n98-magerun2 customer:list

Changer le mot de passe d’un compte client

$ n98-magerun2 customer:reset-password [email] [nouveau mot de passe]

1	$ n98-magerun2 customer:reset-password [email] [nouveau mot de passe]

[Magento 2] Utiliser Grunt pour compiler les assets front-end

06/11/2019 / admin

Utilisation de Grunt lorsque le mode developer de Magento 2 est activé
Créer une tâche custom dans Grunt
Ajouter un plugin pour grunt-contrib-less
Supprimer la sous-tâche Grunt less:documentation du process de compilation des assets front-end de Magento 2
Ne pas compiler certains thèmes
Grunt dans Magento 2 – Troubleshooting

Difference between static content deploy & grunt exec.

Utilisation de Grunt lorsque le mode `developer` de Magento 2 est activé

Activer le mode developer de Magento 2

Activer le mode Developer de Magento 2: $ bin/magento deploy:mode:set developer.

Se rendre en backoffice dans Stores > Configuration [Settings] > ADVANCED > Developer. Dans Frontend Development Workflow > champ Workflow type > sélectionner « Client side less compilation » (au besoin, décocher la case « Use system value »). Bouton « Save Config » en haut à droite.

Préparer les fichiers de config nécessaires à l’utilisation de Grunt dans Magento 2

$ cp package.json.sample package.json; cp Gruntfile.js.sample Gruntfile.js; cp grunt-config.json.sample grunt-config.json; cp dev/tools/grunt/configs/themes.js dev/tools/grunt/configs/local-themes.js

Nous allons partir du principe que nous utilisons Grunt pour processer les fichiers source d’un thème enfant « luma-child ». C’est la raison pour laquelle nous créons un fichier dev/tools/grunt/configs/local-themes.js qui contient donc ceci:

module.exports = {
    blank: {
        area: 'frontend',
        name: 'Magento/blank',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l',
            'css/email',
            'css/email-inline'
        ],
        dsl: 'less'
    },
    luma: {
        area: 'frontend',
        name: 'Magento/luma',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    },
    backend: {
        area: 'adminhtml',
        name: 'Magento/backend',
        locale: 'en_US',
        files: [
            'css/styles-old',
            'css/styles'
        ],
        dsl: 'less'
    },
    luma_child: {
        area: 'frontend',
        name: 'Magento/luma-child',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    }
};

module.exports = {

blank: {

area: 'frontend',

locale: 'en_US',

files: [

'css/styles-m',

'css/styles-l',

'css/email',

'css/email-inline'

dsl: 'less'

luma: {

area: 'frontend',

locale: 'en_US',

files: [

'css/styles-m',

'css/styles-l'

dsl: 'less'

backend: {

area: 'adminhtml',

locale: 'en_US',

files: [

'css/styles-old',

'css/styles'

dsl: 'less'

luma_child: {

area: 'frontend',

locale: 'en_US',

files: [

'css/styles-m',

'css/styles-l'

dsl: 'less'

}

};

Lancer les tâches Grunt et commencer à développer

Lancer la commande $ grunt clean && grunt exec && grunt watch. Lorsque Grunt est arrivé au bout des tâches clean, et exec, la tâche watch débute et vos fichiers sont surveillés. Désormais, à chaque fois que vous souhaiterez tester une modification en front pendant que la tâche watch tourne, il faudra lancer la commande $ rm -rf pub/static/*; rm -rf var/view_preprocessed/* avant de rafraîchir la fenêtre de votre navigateur.

Remarque: si vous rencontrez une erreur (dans l’exécution des tâches précédant le grunt watch) qui stoppe le process, le grunt watch ne fonctionnera pas correctement.

Remarque #2: la tâche $ grunt watch semble fonctionner uniquement si elle est exécutée précédée des tâches $ grunt clean && grunt exec.

Remarque #3: pour la surveillance des fichiers *.less, elle semble concerner l’ensemble des fichiers présents dans le scope du dossier /app/design/frontend/<Vendor>/theme/web/css/source. Autrement dit, pas besoin de déclarer ces fichiers dans /dev/tools/grunt/configs/local-theme.js. Exemple ci-dessous avec un thème luma_child:

module.exports = {
    luma_child: {
        area: 'frontend',
        name: 'Magento/luma-child',
        locale: 'en_US',
        files: [
            'css/styles-m',
            'css/styles-l'
        ],
        dsl: 'less'
    }
};

module.exports = {

luma_child: {

area: 'frontend',

locale: 'en_US',

files: [

'css/styles-m',

'css/styles-l'

dsl: 'less'

}

};

A savoir: La présence des fichiers css/styles-m et css/styles-l n’est pas obligatoire dans votre thème, mais les déclarer dans votre fichier /dev/tools/grunt/configs/local-theme.js permet à Grunt de bien prendre en compte les fichiers de base d’un thème Magento 2 (_theme.less, _extend.less, etc…). J’ai eu, par exemple, un cas où la tâche grunt watch ne surveillait pas le code que j’écrivais et les fichiers que j’importais depuis le fichier natif _extend.less dans mon thème enfant. Après avoir signalé la présence des fichiers css/styles-m et css/styles-l dans mon fichier /dev/tools/grunt/configs/local-theme.js, le fichier _extend.less et tous les fichiers importés depuis ce dernier étaient surveillés.

Créer une tâche custom dans Grunt

Testé fonctionnel. Source: How to create a custom Grunt task in Magento 2 et version PDF pour la postérité.

Ajouter un plugin pour grunt-contrib-less

Attention: WiP pas fonctionnel…

Attention #2: pensez à vérifier la compatibilité de votre plugin avec la version de grunt-contrib-less déclarée dans le fichier package.json à la racine de votre projet Magento 2!

$ npm install --save-dev less-plugin-lists

Modifier <project_root_folder>\dev\tools\grunt\configs\less.js en déclarant le plugin less-plugin-lists via l’option plugins de grunt-contrib-less:

var lessOptions = {
    options: {
        sourceMap: true,
        strictImports: false,
        sourceMapRootpath: '/',
        dumpLineNumbers: false, // use 'comments' instead false to output line comments for source
        ieCompat: false,
        plugins: [
            new (require('less-plugin-lists'))()
        ]
    },

var lessOptions = {

options: {

sourceMap: true,

strictImports: false,

sourceMapRootpath: '/',

dumpLineNumbers: false, // use 'comments' instead false to output line comments for source

ieCompat: false,

plugins: [

new (require('less-plugin-lists'))()

]

$ grunt clean && grunt exec && grunt less && grunt watch

Supprimer la sous-tâche Grunt `less:documentation` du process de compilation des assets front-end de Magento 2

Lorsque le process Grunt en arrive à la sous-tâche less:documentation, j’obtiens ce message d’erreur (Magento 2.3):

Running "less:documentation" (less) task
>> SyntaxError: variable @_icon-font-text-hide is undefined in lib/web/css/docs/source/_icons.less on line 31, column 5:
>> 30 .example-icon-2 {
>> 31     .lib-icon-image(
>> 32         @_icon-image: '@{baseDir}images/blank-theme-icons.png',
Warning: Error compiling lib/web/css/docs/source/docs.less Use --force to continue.

Aborted due to warnings.

Running "less:documentation" (less) task

>> SyntaxError: variable @_icon-font-text-hide is undefined in lib/web/css/docs/source/_icons.less on line 31, column 5:

>> 30 .example-icon-2 {

>> 31 .lib-icon-image(

>> 32 @_icon-image: '@{baseDir}images/blank-theme-icons.png',

Warning: Error compiling lib/web/css/docs/source/docs.less Use --force to continue.

Aborted due to warnings.

Il s’agit d’une variable less qui n’est pas définie. On peut donc corriger les fichier less en définissant cette variable manquante, mais on peut aussi supprimer la sous-tache Grunt qui consiste à générer la documentation. Pour ce faire, éditer le fichier dev\tools\grunt\configs\less.js pour mettre les lignes suivantes en commentaire:

    // ,
    // documentation: {
    //     files: {
    //         '<%= path.doc %>/docs.css': '<%= path.doc %>/source/docs.less'
    //     }
    // }

// ,

// documentation: {

// files: {

// '<%= path.doc %>/docs.css': '<%= path.doc %>/source/docs.less'

// }

Ne pas compiler certains thèmes

Dans le fichier dev/tools/grunt/configs/less.js, ajouter une condition à la fonction _each et y lister les thèmes qui ne doivent pas être compilés:

_.each(themes, function(theme, name) {
    if(name == 'backend' || name == 'luma') {
        return false
    } else {
        themeOptions[name] = {
            files: combo.lessFiles(name)
        };
    }
});

_.each(themes, function(theme, name) {

if(name == 'backend' || name == 'luma') {

return false

} else {

themeOptions[name] = {

files: combo.lessFiles(name)

};

}

});

Grunt dans Magento 2 – Troubleshooting

Erreur `SyntaxError: unexpected token -"` au lancement d’une tâche Grunt

ATTENTION: n’utilisez pas le caractère « tiret du 6 » (-) pour déclarer le libellé du thème dans le fichier dev/tools/grunt/configs/local-themes.js; préférez l’underscore (_) pour ne pas obtenir l’erreur SyntaxError: unexpected token -" au lancement de vos tâches Grunt!

Example de mauvaise pratique dans la déclaration d’un thème:

module.exports = {
    luma-child: {
    }
};

module.exports = {

luma-child: {

}

};

Example de bonne pratique dans la déclaration d’un thème:

module.exports = {
    luma_child: {
    }
};

module.exports = {

luma_child: {

}

};

En backoffice, la colonne de gauche est tassée

Les libellés des onglets s’affichent un caractère par ligne. Solution: lancer les processes Grunt avec la commande $ grunt clean && grunt exec && grunt less && grunt watch. Laisser terminer. Lorsque Grunt est en watch, taper dans un terminal la commande de suppression des fichiers statiques: $ rm -rf pub/static/*; rm -rf var/view_preprocessed/*. Rafraîchir votre page.

Theme by Anders Norén — Up ↑

devfrontend.info

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

Articles récents

Catégories

Tags

Archives

Méta

Monthnovembre 2019

[Magento 2] Astuces d’utilisation du thème Supro

Eviter des conflits d’édition entre le FO et le BO

Après l’import d’une base de données, pour retrouver le paramètrage backoffice et l’aspect visuel frontoffice

Modifier le logo du site sans passer par l’interface d’édition des pages en front

Composer un habillage depuis le code source (et pas depuis l’interface d’admin)

Fallback héritage CSS dans le thème Supro

Surcharger (override) les valeurs de style par défaut (ou celles définies depuis l’interface d’admin)

Les fichiers concernés dans votre thème qui doit logiquement être enfant de Supro

app/design/frontend/Sodifrance/pdv/MGS_Fbuilder/templates/html/head.phtml

app/design/frontend/Sodifrance/pdv/MGS_ThemeSettings/templates/html/head.phtml

app/design/frontend/Sodifrance/pdv/web/css/source/_extend.less

app/design/frontend/Sodifrance/pdv/web/css/source/_theme-variables.less

Pattern utilisé par le thème Supro pour la nomenclature de ses variables LESS

app/design/frontend/Sodifrance/pdv/web/css/supro-override.less

Les fichiers concernés hors thème

dev/tools/grunt/configs/local-themes.js

[Magento 2] Les commandes Magerun du développeur Front-End

Certaines commandes Magento (Magerun) ne fonctionnent plus?

Erreur: There are no commands defined in the « app:config » namespace.

Changement de mode

Déployer les sample datas

Nettoyer les caches

Désactiver les caches pour le front-end

Nettoyer les caches CSS (moins bourrin que le rm -rf pub/static/... de Magento 2)

Nettoyer les caches JS

Les commandes de compilation des assets front-end

Aide au développement/debug

Faire un backup (dump) de la base de données et des médias

Importer un backup (dump) de la base de données et des médias

Importer un backup (dump) de la base de données gzippé

Appliquer les changements après import d’une nouvelle base de données

Appliquer les modifications des fichiers app/etc/config.php et app/etc/env.php

Appliquer les changements de schéma en base de données

Déployer le thème adminhtml en langue anglaise

Déployer tous les thèmes frontend en langue française

setup:di:compile

Créer un compte admin

Modifier le mot de passe du compte admin

Dévérouiller le compte admin

Faire un dump de la toute la config BO (fichier généré: config.php)

Ré-indexer le catalogue

Manipuler les données des comptes clients (customers)

Lister les comptes clients

Changer le mot de passe d’un compte client

[Magento 2] Utiliser Grunt pour compiler les assets front-end

Utilisation de Grunt lorsque le mode developer de Magento 2 est activé

Activer le mode developer de Magento 2

Préparer les fichiers de config nécessaires à l’utilisation de Grunt dans Magento 2

Lancer les tâches Grunt et commencer à développer

Créer une tâche custom dans Grunt

Ajouter un plugin pour grunt-contrib-less

Supprimer la sous-tâche Grunt less:documentation du process de compilation des assets front-end de Magento 2

Ne pas compiler certains thèmes

Grunt dans Magento 2 – Troubleshooting

Erreur SyntaxError: unexpected token -" au lancement d’une tâche Grunt

Example de mauvaise pratique dans la déclaration d’un thème:

Example de bonne pratique dans la déclaration d’un thème:

En backoffice, la colonne de gauche est tassée

Nettoyer les caches CSS (moins bourrin que le `rm -rf pub/static/...` de Magento 2)

Appliquer les modifications des fichiers `app/etc/config.php` et `app/etc/env.php`

Déployer le thème `adminhtml` en langue anglaise

Déployer tous les thèmes `frontend` en langue française

`setup:di:compile`

Utilisation de Grunt lorsque le mode `developer` de Magento 2 est activé

Supprimer la sous-tâche Grunt `less:documentation` du process de compilation des assets front-end de Magento 2

Erreur `SyntaxError: unexpected token -"` au lancement d’une tâche Grunt