Étiquette : theme

[Magento 2] Etendre ou surcharger des styles less parent, de composants ou de modules dans un thème

16/05/2022 / admin

Testé fonctionnel Magento 2.4

Sources: Best way to extend module less found in web/css/source/module, like _minicart.less? et Extend or override parent, components or modules styles in Magento 2 et version PDF pour la postérité.

Etendre les styles less d’un composant

Fichier parent: app/design/frontend/Vendor/default/Magento_Catalog/web/css/source/module/listings/_prod-small.less.

Son extension: app/design/frontend/Vendor/germany/Magento_Catalog/web/css/source/module/listings/_prod-small_extend.less

L’import de l’extension: app/design/frontend/Vendor/germany/Magento_Catalog/web/css/source/_extend.less

@import 'module/listings/_prod-small_extend.less';

1	@import 'module/listings/_prod-small_extend.less';

[Magento 2] Les fichiers styles-m.css ou styles-l.css ne se génèrent pas dans le cadre d’un thème qui hérite de Blank ou de Luma

20/01/2021 / admin

Quelques trucs à vérifier:

Le problème que j’ai rencontré:

Magento 2 ne parvient pas à me générer « styles-m.css » par exemple; j’ai ce message d’erreur lorsque j’essaye d’afficher dans le navigateur, la source du fichier http://mon-site.local/static/version1611129694/frontend/MyVendor/mytheme/fr_FR/css/styles-m.css

Notice: Trying to access array offset on value of type null in /home/mike/www/project/vendor/wikimedia/less.php/lib/Less/Tree/Variable.php on line 49
#1 Magento\Framework\View\Asset\PreProcessor\AlternativeSource->processContent() called at [vendor/magento/framework/View/Asset/PreProcessor/AlternativeSource.php:114]
#2 Magento\Framework\View\Asset\PreProcessor\AlternativeSource->process() called at [vendor/magento/module-developer/Model/View/Asset/PreProcessor/PreprocessorStrategy.php:78]
#3 Magento\Developer\Model\View\Asset\PreProcessor\PreprocessorStrategy->process() called at [vendor/magento/framework/View/Asset/PreProcessor/Pool.php:77]
#4 Magento\Framework\View\Asset\PreProcessor\Pool->process() called at [vendor/magento/framework/View/Asset/Source.php:152]
#5 Magento\Framework\View\Asset\Source->preProcess() called at [vendor/magento/framework/View/Asset/Source.php:105]
#6 Magento\Framework\View\Asset\Source->getFile() called at [vendor/magento/framework/View/Asset/File.php:158]
#7 Magento\Framework\View\Asset\File->getSourceFile() called at [vendor/magento/framework/App/StaticResource.php:146]
#8 Magento\Framework\App\StaticResource->launch() called at [vendor/magento/framework/App/Bootstrap.php:263]
#9 Magento\Framework\App\Bootstrap->run() called at [pub/static.php:13]

Notice: Trying to access array offset on value of type null in /home/mike/www/project/vendor/wikimedia/less.php/lib/Less/Tree/Variable.php on line 49

#1 Magento\Framework\View\Asset\PreProcessor\AlternativeSource->processContent() called at [vendor/magento/framework/View/Asset/PreProcessor/AlternativeSource.php:114]

#2 Magento\Framework\View\Asset\PreProcessor\AlternativeSource->process() called at [vendor/magento/module-developer/Model/View/Asset/PreProcessor/PreprocessorStrategy.php:78]

#3 Magento\Developer\Model\View\Asset\PreProcessor\PreprocessorStrategy->process() called at [vendor/magento/framework/View/Asset/PreProcessor/Pool.php:77]

#4 Magento\Framework\View\Asset\PreProcessor\Pool->process() called at [vendor/magento/framework/View/Asset/Source.php:152]

#5 Magento\Framework\View\Asset\Source->preProcess() called at [vendor/magento/framework/View/Asset/Source.php:105]

#6 Magento\Framework\View\Asset\Source->getFile() called at [vendor/magento/framework/View/Asset/File.php:158]

#7 Magento\Framework\View\Asset\File->getSourceFile() called at [vendor/magento/framework/App/StaticResource.php:146]

#8 Magento\Framework\App\StaticResource->launch() called at [vendor/magento/framework/App/Bootstrap.php:263]

#9 Magento\Framework\App\Bootstrap->run() called at [pub/static.php:13]

Vérifier l’héritage des thèmes via l’interface d’admin

CONTENU > Design > Configuration.
La première rangée doit être renseigner avec le thème dont vous héritez (si vous décidez d’hériter d’un thème). Ce n’est qu’à partir de la seconde rangée que vous assignerez votre ou vos thème(s) custom.

Exemple: première rangée du tableau (« Par défaut: Global », « Nom du thème: »), assigner le thème « Magento Blank » (ou Luma, selon celui duquel votre thème custom hérite).
A partir de la seconde rangée seulement, assignez votre ou vos thème(s) custom.

On n’oublie pas de vider tous les caches suite à cette modification!

Désactiver les caches Front-End

Via la commande bin/magento cache:disable full_page block_html layout

Désactiver le versionning des statiques

Via la commande bin/magento config:set dev/static/sign 0

Assigner les droits sur tous les fichiers de l’instance (sur tout le projet)

Deux commandes à saisir l’une après l’autre:

// pour le user et le groupe:
chmown -R user_www:groupe_www dossier_du_site
// pour donner à user et group (ug) les droits de lecture/écriture (+rw)
chmod -R ug+rw dossier_du_site

// pour le user et le groupe:

chmown -R user_www:groupe_www dossier_du_site

// pour donner à user et group (ug) les droits de lecture/écriture (+rw)

chmod -R ug+rw dossier_du_site

Vérifier l’arbo et les noms des fichiers dans votre thème custom

Ces derniers doivent correspondre au modèle Magento 2 afin que l’héritage se fasse correctement.

Exemple: lorsque vous héritez de Blank, un fichier web/css/source/_extend.less (ATTENTION pas de « s » à la fin de « extend »!!! doit vous servir à importer vos fichiers LESS spécifiques.

[Magento 2] Comment inclure et utiliser un fichier JS custom placé dans un thème depuis un template PHTML avec data-mage-init

04/06/2020 / admin

C’est par ici: [Magento 2] Vérifier qu’un utilisateur client est connecté à son compte et afficher son prénom dans un template PHTML.

Voir aussi: [Magento 2] Comment inclure et utiliser un fichier JS custom avec requireJS.

[Magento 2] Un menu de navigation drilldown en mobile avec Foundation 6 à partir du Topmenu.php natif

23/03/2020 / admin

Côté app/code, création d’un module Topmenu spécifique

En ligne de commande pour créer et activer un module qui s’appelle Topmenu:

$ n98-magerun2 dev:module:create [Name_Space] [Your_Module]

1

$ n98-magerun2 dev:module:create [Name_Space] [Your_Module]

…puis:

$ n98-magerun2 module:enable [Name_Space]_[Your_Module];

1

$ n98-magerun2 module:enable [Name_Space]_[Your_Module];

Créer un module et étendre le Block Topmenu.php

Référence: [Magento 2] Surcharger un Block ou un Model natif.

Les seuls fichiers à conserver après la création du module sont (depuis app/code/<MyNamespace>/Topmenu/):

/Block/Html/Topmenu.php (qu’on va créer juste après)

/etc/di.xml

/etc/module.xml

/registration.php

Modifier app/code/<MyNamespace>/Topmenu/etc/di.xml:

<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd"> <preference for="Magento\Theme\Block\Html\Topmenu" type="<MyNamespace>\Topmenu\Block\Html\Topmenu" /> </config>

1
2
3
4

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Theme\Block\Html\Topmenu" type="<MyNamespace>\Topmenu\Block\Html\Topmenu" />
</config>

Modifier app/code/<MyNamespace>/Topmenu/etc/module.xml:

On déclare hériter de <module name="Magento_Theme" />:

<?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="Vital_Topmenu" setup_version="1.0.0"> <sequence> <module name="Magento_Theme" /> </sequence> </module> </config>

1
2
3
4
5
6
7
8

<?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="Vital_Topmenu" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Theme" />
        </sequence>
    </module>
</config>

Créer app/code/<MyVendor>/Topmenu/Block/Html/Topmenu.php:

Dans notre exemple, il s’agit du fichier vendor/magento/module-theme/Block/Html/Topmenu.php que nous allons surcharger comme suit dans app/code/<MyNamespace>/Topmenu/Block/Html/Topmenu.php. Nous y ajoutons les classes CSS nécessaires au fonctionnement du composant Drilldown de Foundation 6:

<?php namespace Vital\Topmenu\Block\Html; use Magento\Framework\Data\Tree\Node; /** * Html page top menu block * * @api * @since 100.0.2 */ class Topmenu extends \Magento\Theme\Block\Html\Topmenu { /** * Add sub menu HTML code for current menu item * * @param Node $child * @param string $childLevel * @param string $childrenWrapClass * @param int $limit * @return string HTML code */ protected function _addSubMenu($child, $childLevel, $childrenWrapClass, $limit) { $html = ''; if (!$child->hasChildren()) { return $html; } $colStops = []; if ($childLevel == 0 && $limit) { $colStops = $this->_columnBrake($child->getChildren(), $limit); } $html .= '<ul class="level' . $childLevel . ' ' . $childrenWrapClass . ' menu vertical nested">'; $html .= $this->_getHtml($child, $childrenWrapClass, $limit, $colStops); $html .= '</ul>'; return $html; } /** * Returns array of menu item's classes * * @param Node $item * @return array */ protected function _getMenuItemClasses(Node $item) { $classes = [ 'level' . $item->getLevel(), $item->getPositionClass(), ]; if ($item->getIsCategory()) { $classes[] = 'category-item'; } if ($item->getIsFirst()) { $classes[] = 'first'; } if ($item->getIsActive()) { $classes[] = 'active'; } elseif ($item->getHasActive()) { $classes[] = 'has-active'; } if ($item->getIsLast()) { $classes[] = 'last'; } if ($item->getClass()) { $classes[] = $item->getClass(); } if ($item->hasChildren()) { $classes[] = 'parent'; } return $classes; } }

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

<?php

namespace Vital\Topmenu\Block\Html;

use Magento\Framework\Data\Tree\Node;

/**
* Html page top menu block
*
* @api
* @since 100.0.2
*/
class Topmenu extends \Magento\Theme\Block\Html\Topmenu
{
    /**
     * Add sub menu HTML code for current menu item
     *
     * @param Node $child
     * @param string $childLevel
     * @param string $childrenWrapClass
     * @param int $limit
     * @return string HTML code
     */
    protected function _addSubMenu($child, $childLevel, $childrenWrapClass, $limit)
    {
        $html = '';
        if (!$child->hasChildren()) {
            return $html;
        }

        $colStops = [];
        if ($childLevel == 0 && $limit) {
            $colStops = $this->_columnBrake($child->getChildren(), $limit);
        }

        $html .= '<ul class="level' . $childLevel . ' ' . $childrenWrapClass . ' menu vertical nested">';
        $html .= $this->_getHtml($child, $childrenWrapClass, $limit, $colStops);
        $html .= '</ul>';

        return $html;
    }

    /**
     * Returns array of menu item's classes
     *
     * @param Node $item
     * @return array
     */
    protected function _getMenuItemClasses(Node $item)
    {
        $classes = [
            'level' . $item->getLevel(),
            $item->getPositionClass(),
        ];

        if ($item->getIsCategory()) {
            $classes[] = 'category-item';
        }

        if ($item->getIsFirst()) {
            $classes[] = 'first';
        }

        if ($item->getIsActive()) {
            $classes[] = 'active';
        } elseif ($item->getHasActive()) {
            $classes[] = 'has-active';
        }

        if ($item->getIsLast()) {
            $classes[] = 'last';
        }

        if ($item->getClass()) {
            $classes[] = $item->getClass();
        }

        if ($item->hasChildren()) {
            $classes[] = 'parent';
        }

        return $classes;
    }
}

Côté app/design/frontend/<MyVendor>/<MyTheme> (theme)

Créer app/design/frontend/<MyVendor>/<MyTheme>/Sm_Venuse/templates/html/mobile/nav-mobile.phtml:

Référence: [Magento 2] Ajouter le framework Foundation 6 for sites dans un thème et rendre ses widgets javascript disponibles avec RequireJS.

Dans notre exemple, il s’agit du fichier app/design/frontend/Sm/venuse/Sm_Venuse/templates/html/mobile/nav-mobile.phtml que nous allons surcharger comme suit dans app/design/frontend/<MyVendor>/<MyModule>/Sm_Venuse/templates/html/mobile/nav-mobile.phtml:

<?php //Extends: app/design/frontend/Sm/venuse/Sm_Venuse/templates/html/mobile/nav-mobile.phtml ?> <?php /** * Copyright © 2016 Magento. All rights reserved. * See COPYING.txt for license details. */ // @codingStandardsIgnoreFile ?> <?php /** * Top menu for store * * @see \Magento\Theme\Block\Html\Topmenu */ ?> <?php $columnsLimit = $block->getColumnsLimit() ?: 0; $_menu = $block->getHtml('level-top', 'submenu', $columnsLimit); $_config = $this->helper('Sm\Themecore\Helper\Data'); $menuType = $_config->getGeneral('navigation_group/menu_style'); ?> <?php //<div class="nav-mobile-container sidebar-type"> // <nav id="navigation-mobile" class="navigation-mobile"> ?> <div class="nav-mobile-container sidebar-type"> <nav id="navigation-mobile-drilldown" class="navigation-mobile-drilldown"> <?php if ($menuType == 'css') { ?> <ul class="vertical menu drilldown"> <?php /* @escapeNotVerified */ echo $_menu; ?> </ul> <?php } ?> </nav> </div> <script type="text/javascript"> require([ 'jquery', 'foundation' ], function($, Foundation) { 'use strict'; // Avant d'initialiser notre Drilldown, on modifie l'option "backButton" du plugin pour permettre la traduction du libellé "Back/Retour" Foundation.Drilldown.defaults.backButton = '<li class="js-drilldown-back"><a tabindex="0"><?php echo __('Back') ?></a></li>'; var $drilldown = new Foundation.Drilldown($('#navigation-mobile-drilldown')); }); </script>

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

<?php //Extends: app/design/frontend/Sm/venuse/Sm_Venuse/templates/html/mobile/nav-mobile.phtml ?>

<?php
/**
* Copyright © 2016 Magento. All rights reserved.
* See COPYING.txt for license details.
*/

// @codingStandardsIgnoreFile

?>
<?php
/**
* Top menu for store
*
* @see \Magento\Theme\Block\Html\Topmenu
*/
?>

<?php
$columnsLimit = $block->getColumnsLimit() ?: 0;
$_menu        = $block->getHtml('level-top', 'submenu', $columnsLimit);
$_config      = $this->helper('Sm\Themecore\Helper\Data');
$menuType     = $_config->getGeneral('navigation_group/menu_style');
?>
<?php
//<div class="nav-mobile-container sidebar-type">
//    <nav id="navigation-mobile" class="navigation-mobile">
?>
<div class="nav-mobile-container sidebar-type">
    <nav id="navigation-mobile-drilldown" class="navigation-mobile-drilldown">
        <?php if ($menuType == 'css') { ?>
            <ul class="vertical menu drilldown">
                <?php /* @escapeNotVerified */
                echo $_menu; ?>
            </ul>
        <?php } ?>
    </nav>
</div>

<script type="text/javascript">
    require([
        'jquery',
        'foundation'
    ], function($, Foundation) {
        'use strict';

        // Avant d'initialiser notre Drilldown, on modifie l'option "backButton" du plugin pour permettre la traduction du libellé "Back/Retour"
        Foundation.Drilldown.defaults.backButton = '<li class="js-drilldown-back"><a tabindex="0"><?php echo __('Back') ?></a></li>';
        var $drilldown = new Foundation.Drilldown($('#navigation-mobile-drilldown'));
    });
</script>

Gestion des styles

On peut éclater les styles de Foundation en deux fichiers distincts qu’on va consigner dans un dossier components:

app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_menu.less

.menu { padding: 0; margin: 0; list-style: none; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } [data-whatinput='mouse'] .menu li { outline: 0; } .menu a, .menu .button { line-height: 1; text-decoration: none; display: block; padding: 0.7rem 1rem; } .menu input, .menu select, .menu a, .menu button { margin-bottom: 0; } .menu input { display: inline-block; } .menu, .menu.horizontal { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .menu.vertical { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .menu.expanded li { -webkit-box-flex: 1; -webkit-flex: 1 1 0px; -ms-flex: 1 1 0px; flex: 1 1 0px; } .menu.simple { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .menu.simple li + li { margin-left: 1rem; } .menu.simple a { padding: 0; } @media print, screen and (min-width: 40em) { .menu.medium-horizontal { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .menu.medium-vertical { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .menu.medium-expanded li { -webkit-box-flex: 1; -webkit-flex: 1 1 0px; -ms-flex: 1 1 0px; flex: 1 1 0px; } .menu.medium-simple li { -webkit-box-flex: 1; -webkit-flex: 1 1 0px; -ms-flex: 1 1 0px; flex: 1 1 0px; } } @media print, screen and (min-width: 64em) { .menu.large-horizontal { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .menu.large-vertical { -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .menu.large-expanded li { -webkit-box-flex: 1; -webkit-flex: 1 1 0px; -ms-flex: 1 1 0px; flex: 1 1 0px; } .menu.large-simple li { -webkit-box-flex: 1; -webkit-flex: 1 1 0px; -ms-flex: 1 1 0px; flex: 1 1 0px; } } .menu.nested { margin-right: 0; margin-left: 1rem; } .menu.icons a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .menu.icon-top a, .menu.icon-right a, .menu.icon-bottom a, .menu.icon-left a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .menu.icon-left li a { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .menu.icon-left li a img, .menu.icon-left li a i, .menu.icon-left li a svg { margin-right: 0.25rem; } .menu.icon-right li a { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row nowrap; -ms-flex-flow: row nowrap; flex-flow: row nowrap; } .menu.icon-right li a img, .menu.icon-right li a i, .menu.icon-right li a svg { margin-left: 0.25rem; } .menu.icon-top li a { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .menu.icon-top li a img, .menu.icon-top li a i, .menu.icon-top li a svg { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; margin-bottom: 0.25rem; text-align: center; } .menu.icon-bottom li a { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-flow: column nowrap; -ms-flex-flow: column nowrap; flex-flow: column nowrap; } .menu.icon-bottom li a img, .menu.icon-bottom li a i, .menu.icon-bottom li a svg { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; margin-bottom: 0.25rem; text-align: center; } .menu .is-active > a { background: @store_base-color; color: #fefefe; } .menu .active > a { background: @store_base-color; color: #fefefe; } .menu.align-left { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .menu.align-right li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: end; -webkit-justify-content: flex-end; -ms-flex-pack: end; justify-content: flex-end; } .menu.align-right li .submenu li { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .menu.align-right.vertical li { display: block; text-align: right; } .menu.align-right.vertical li .submenu li { text-align: right; } .menu.align-right .nested { margin-right: 1rem; margin-left: 0; } .menu.align-center li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .menu.align-center li .submenu li { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .menu .menu-text { padding: 0.7rem 1rem; font-weight: bold; line-height: 1; color: inherit; } .menu-centered > .menu { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .menu-centered > .menu li { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .menu-centered > .menu li .submenu li { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .no-js [data-responsive-menu] ul { display: none; } .menu-icon { position: relative; display: inline-block; vertical-align: middle; width: 20px; height: 16px; cursor: pointer; } .menu-icon::after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 2px; background: #fefefe; -webkit-box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe; box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe; content: ''; } .menu-icon:hover::after { background: #cacaca; -webkit-box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca; box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca; } .menu-icon.dark { position: relative; display: inline-block; vertical-align: middle; width: 20px; height: 16px; cursor: pointer; } .menu-icon.dark::after { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 2px; background: #0a0a0a; -webkit-box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a; box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a; content: ''; } .menu-icon.dark:hover::after { background: #8a8a8a; -webkit-box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a; box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a; }

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299

.menu {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
[data-whatinput='mouse'] .menu li {
    outline: 0; }
.menu a,
.menu .button {
    line-height: 1;
    text-decoration: none;
    display: block;
    padding: 0.7rem 1rem; }
.menu input,
.menu select,
.menu a,
.menu button {
    margin-bottom: 0; }
.menu input {
    display: inline-block; }
.menu, .menu.horizontal {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row; }
.menu.vertical {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column; }
.menu.expanded li {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0px;
    -ms-flex: 1 1 0px;
    flex: 1 1 0px; }
.menu.simple {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; }
.menu.simple li + li {
    margin-left: 1rem; }
.menu.simple a {
    padding: 0; }
@media print, screen and (min-width: 40em) {
    .menu.medium-horizontal {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row; }
    .menu.medium-vertical {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column; }
    .menu.medium-expanded li {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 0px;
        -ms-flex: 1 1 0px;
        flex: 1 1 0px; }
    .menu.medium-simple li {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 0px;
        -ms-flex: 1 1 0px;
        flex: 1 1 0px; } }
@media print, screen and (min-width: 64em) {
    .menu.large-horizontal {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
        flex-direction: row; }
    .menu.large-vertical {
        -webkit-flex-wrap: nowrap;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column; }
    .menu.large-expanded li {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 0px;
        -ms-flex: 1 1 0px;
        flex: 1 1 0px; }
    .menu.large-simple li {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 0px;
        -ms-flex: 1 1 0px;
        flex: 1 1 0px; } }
.menu.nested {
    margin-right: 0;
    margin-left: 1rem; }
.menu.icons a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
.menu.icon-top a, .menu.icon-right a, .menu.icon-bottom a, .menu.icon-left a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex; }
.menu.icon-left li a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap; }
.menu.icon-left li a img,
.menu.icon-left li a i,
.menu.icon-left li a svg {
    margin-right: 0.25rem; }
.menu.icon-right li a {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap; }
.menu.icon-right li a img,
.menu.icon-right li a i,
.menu.icon-right li a svg {
    margin-left: 0.25rem; }
.menu.icon-top li a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap; }
.menu.icon-top li a img,
.menu.icon-top li a i,
.menu.icon-top li a svg {
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    margin-bottom: 0.25rem;
    text-align: center; }
.menu.icon-bottom li a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-flow: column nowrap;
    -ms-flex-flow: column nowrap;
    flex-flow: column nowrap; }
.menu.icon-bottom li a img,
.menu.icon-bottom li a i,
.menu.icon-bottom li a svg {
    -webkit-align-self: stretch;
    -ms-flex-item-align: stretch;
    align-self: stretch;
    margin-bottom: 0.25rem;
    text-align: center; }
.menu .is-active > a {
    background: @store_base-color;
    color: #fefefe; }
.menu .active > a {
    background: @store_base-color;
    color: #fefefe; }
.menu.align-left {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
.menu.align-right li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end; }
.menu.align-right li .submenu li {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
.menu.align-right.vertical li {
    display: block;
    text-align: right; }
.menu.align-right.vertical li .submenu li {
    text-align: right; }
.menu.align-right .nested {
    margin-right: 1rem;
    margin-left: 0; }
.menu.align-center li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center; }
.menu.align-center li .submenu li {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
.menu .menu-text {
    padding: 0.7rem 1rem;
    font-weight: bold;
    line-height: 1;
    color: inherit; }

.menu-centered > .menu {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center; }
.menu-centered > .menu li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center; }
.menu-centered > .menu li .submenu li {
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start; }

.no-js [data-responsive-menu] ul {
    display: none; }

.menu-icon {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 16px;
    cursor: pointer; }
.menu-icon::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: #fefefe;
    -webkit-box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe;
    box-shadow: 0 7px 0 #fefefe, 0 14px 0 #fefefe;
    content: ''; }
.menu-icon:hover::after {
    background: #cacaca;
    -webkit-box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca;
    box-shadow: 0 7px 0 #cacaca, 0 14px 0 #cacaca; }

.menu-icon.dark {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 16px;
    cursor: pointer; }
.menu-icon.dark::after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 2px;
    background: #0a0a0a;
    -webkit-box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a;
    box-shadow: 0 7px 0 #0a0a0a, 0 14px 0 #0a0a0a;
    content: ''; }
.menu-icon.dark:hover::after {
    background: #8a8a8a;
    -webkit-box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a;
    box-shadow: 0 7px 0 #8a8a8a, 0 14px 0 #8a8a8a; }

app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_drilldown.less

.is-drilldown { position: relative; overflow: hidden; } .is-drilldown li { display: block; } .is-drilldown.animate-height { -webkit-transition: height 0.5s; transition: height 0.5s; } .drilldown a { padding: 0.7rem 1rem; background: #fefefe; } .drilldown .is-drilldown-submenu { position: absolute; top: 0; left: 100%; z-index: -1; width: 100%; background: #fefefe; -webkit-transition: -webkit-transform 0.15s linear; transition: -webkit-transform 0.15s linear; transition: transform 0.15s linear; transition: transform 0.15s linear, -webkit-transform 0.15s linear; } .drilldown .is-drilldown-submenu.is-active { z-index: 1; display: block; -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } .drilldown .is-drilldown-submenu.is-closing { -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } .drilldown .is-drilldown-submenu a { padding: 0.7rem 1rem; } .drilldown .nested.is-drilldown-submenu { margin-right: 0; margin-left: 0; } .drilldown .drilldown-submenu-cover-previous { min-height: 100%; } .drilldown .is-drilldown-submenu-parent > a { position: relative; } .drilldown .is-drilldown-submenu-parent > a::after { display: block; width: 0; height: 0; border: inset 6px; content: ''; border-right-width: 0; border-left-style: solid; border-color: transparent transparent transparent @store_base-color; position: absolute; top: 50%; margin-top: -6px; right: 1rem; } .drilldown.align-left .is-drilldown-submenu-parent > a::after { display: block; width: 0; height: 0; border: inset 6px; content: ''; border-right-width: 0; border-left-style: solid; border-color: transparent transparent transparent @store_base-color; right: 1rem; left: auto; } .drilldown.align-right .is-drilldown-submenu-parent > a::after { display: block; width: 0; height: 0; border: inset 6px; content: ''; border-left-width: 0; border-right-style: solid; border-color: transparent @store_base-color transparent transparent; right: auto; left: 1rem; } .drilldown .js-drilldown-back > a::before { display: block; width: 0; height: 0; border: inset 6px; content: ''; border-left-width: 0; border-right-style: solid; border-color: transparent @store_base-color transparent transparent; display: inline-block; vertical-align: middle; margin-right: 0.75rem; }

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

.is-drilldown {
    position: relative;
    overflow: hidden; }
.is-drilldown li {
    display: block; }
.is-drilldown.animate-height {
    -webkit-transition: height 0.5s;
    transition: height 0.5s; }

.drilldown a {
    padding: 0.7rem 1rem;
    background: #fefefe; }

.drilldown .is-drilldown-submenu {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: -1;
    width: 100%;
    background: #fefefe;
    -webkit-transition: -webkit-transform 0.15s linear;
    transition: -webkit-transform 0.15s linear;
    transition: transform 0.15s linear;
    transition: transform 0.15s linear, -webkit-transform 0.15s linear; }
.drilldown .is-drilldown-submenu.is-active {
    z-index: 1;
    display: block;
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%); }
.drilldown .is-drilldown-submenu.is-closing {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%); }
.drilldown .is-drilldown-submenu a {
    padding: 0.7rem 1rem; }

.drilldown .nested.is-drilldown-submenu {
    margin-right: 0;
    margin-left: 0; }

.drilldown .drilldown-submenu-cover-previous {
    min-height: 100%; }

.drilldown .is-drilldown-submenu-parent > a {
    position: relative; }
.drilldown .is-drilldown-submenu-parent > a::after {
    display: block;
    width: 0;
    height: 0;
    border: inset 6px;
    content: '';
    border-right-width: 0;
    border-left-style: solid;
    border-color: transparent transparent transparent @store_base-color;
    position: absolute;
    top: 50%;
    margin-top: -6px;
    right: 1rem; }

.drilldown.align-left .is-drilldown-submenu-parent > a::after {
    display: block;
    width: 0;
    height: 0;
    border: inset 6px;
    content: '';
    border-right-width: 0;
    border-left-style: solid;
    border-color: transparent transparent transparent @store_base-color;
    right: 1rem;
    left: auto; }

.drilldown.align-right .is-drilldown-submenu-parent > a::after {
    display: block;
    width: 0;
    height: 0;
    border: inset 6px;
    content: '';
    border-left-width: 0;
    border-right-style: solid;
    border-color: transparent @store_base-color transparent transparent;
    right: auto;
    left: 1rem; }

.drilldown .js-drilldown-back > a::before {
    display: block;
    width: 0;
    height: 0;
    border: inset 6px;
    content: '';
    border-left-width: 0;
    border-right-style: solid;
    border-color: transparent @store_base-color transparent transparent;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.75rem; }

On ajoute les deux composants dans _extend.less

…ou ailleurs dans une feuille de style de votre thème. Il faut juste que les deux fichiers soient importés. Veiller également à ce que les variables concernant les couleurs soient accessibles pour la compilation. Dans mon exemple, @store_base-color.

/* components */ @import 'components/_foundation_menu.less'; @import 'components/_foundation_drilldown.less';

1
2
3

/* components */
@import 'components/_foundation_menu.less';
@import 'components/_foundation_drilldown.less';

Gestion des JS

Dans mon exemple, je n’ai pas eu besoin de modifier le JS natif de Foundation. Je l’importe donc via le dossier vendor: app/design/frontend/<MyVendor>/<mytheme>/web/js/vendor/ (si vous avez bien suivi les directives données dans cet autre billet).

Ne pas oublier de créer app/design/frontend/<MyVendor>/<mytheme>/requirejs-config.js

var config = { // Paths defines associations from library name (used to include the library, // for example when using "define") and the library file path. paths: { 'foundation': 'js/vendor/foundation/foundation.min' }, // Shim: when you're loading your dependencies, requirejs loads them all // concurrently. You need to set up a shim to tell requirejs that the library // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends // on jQuery). // Exports: if the library is not AMD aware, you need to tell requirejs what // to look for so it knows the script has loaded correctly. You can do this with an // "exports" entry in your shim. The value must be a variable defined within // the library. shim: { 'foundation': { deps: ['jquery'], exports: 'Foundation' } } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

var config = {

    // Paths defines associations from library name (used to include the library,
    // for example when using "define") and the library file path.
    paths: {
        'foundation': 'js/vendor/foundation/foundation.min'
    },

    // Shim: when you're loading your dependencies, requirejs loads them all
    // concurrently. You need to set up a shim to tell requirejs that the library
    // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
    // on jQuery).
    // Exports: if the library is not AMD aware, you need to tell requirejs what
    // to look for so it knows the script has loaded correctly. You can do this with an
    // "exports" entry in your shim. The value must be a variable defined within
    // the library.
    shim: {
        'foundation': {
            deps: ['jquery'],
            exports: 'Foundation'
        }
    }

};

[Magento 2] Paramétrer les styles du theme Venuse (Theme Forest) via des fichiers config.xml plutôt que via l’interface d’administration

06/03/2020 / admin

Le thème Venuse pour Magento 2 est développé par Magentech et distribué par Theme Forest.

Créer un module MyVendor_Themecore en surcharge du module SM_Themecore

$ bin/magento dev:create:module MyVendor Themecore

1

$ bin/magento dev:create:module MyVendor Themecore

Fichier app/code/MyVendor/Themecore/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="MyVendor_Themecore" setup_version="1.0.0"> <sequence> <module name="Sm_Themecore"/> </sequence> </module> </config>

1
2
3
4
5
6
7
8

<?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="MyVendor_Themecore" setup_version="1.0.0">
        <sequence>
            <module name="Sm_Themecore"/>
        </sequence>
    </module>
</config>

Fichier app/code/MyVendor/Themecore/etc/config.xml

Copier/coller le fichier app/code/Sm/Themecore/etc/config.xml dans app/code/MyVendor/Themecore/etc/config.xml. C’est dans ce premier fichier que vous allez effectuer vos modifications custom.

Créer un module MyVendor_Venuse en surcharge du module SM_Venuse

$ bin/magento dev:create:module MyVendor Venuse

1

$ bin/magento dev:create:module MyVendor Venuse

Fichier app/code/MyVendor/Venuse/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="MyVendor_Venuse" setup_version="1.0.0"> <sequence> <module name="Sm_Venuse"/> </sequence> </module> </config>

1
2
3
4
5
6
7
8

<?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="MyVendor_Venuse" setup_version="1.0.0">
        <sequence>
            <module name="Sm_Venuse"/>
        </sequence>
    </module>
</config>

Fichier app/code/MyVendor/Venuse/etc/config.xml

Copier/coller le fichier app/code/Sm/Venuse/etc/config.xml dans app/code/MyVendor/Venuse/etc/config.xml. C’est dans ce second fichier que vous allez effectuer vos modifications custom.

Activation des nouveaux modules et prise en compte des modifications custom

$ bin/magento module:enable MyVendor_Themecore MyVendor_Venuse $ bin/magento setup:upgrade $ bin/magento app:config:import $ bin/magento cache:clean config

1
2
3
4

$ bin/magento module:enable MyVendor_Themecore MyVendor_Venuse
$ bin/magento setup:upgrade
$ bin/magento app:config:import
$ bin/magento cache:clean config

// Suppression des fichiers générés par le thème Venuse: $ rm -rf pub/media/sm/configed_css/* // Suppression des ressources front compilées du thème (celles générées via Grunt ou la commande setup:static-content:deploy): $ rm -rf pub/static/frontend/MyVendor/venuse-child/fr_FR/css/* // Suppression des sources LESS servant à la compilation des ressources front pré-citées: $ find var/view_preprocessed/pub/static/frontend/MyVendor/venuse-child/fr_FR -type f $ -name '*.css' -o -name '*.less' $ -delete

1
2
3
4
5
6
7
8

// Suppression des fichiers générés par le thème Venuse:
$ rm -rf pub/media/sm/configed_css/*

// Suppression des ressources front compilées du thème (celles générées via Grunt ou la commande setup:static-content:deploy):
$ rm -rf pub/static/frontend/MyVendor/venuse-child/fr_FR/css/*

// Suppression des sources LESS servant à la compilation des ressources front pré-citées:
$ find var/view_preprocessed/pub/static/frontend/MyVendor/venuse-child/fr_FR -type f $ -name '*.css' -o -name '*.less' $ -delete

Attention: à ce stade, vous verrez uniquement vos modifications en admin, dans les champs ciblés. Pour les voir également en front, il faut impérativement se rendre en admin sous Stores > Configuration > MAGENTECH.COM > Theme Core Configuration et cliquer sur le bouton « Save Config ».

Rafraîchissez votre front, ça fonctionne!

Choses à savoir

Les modifications que vous apporterez au thème depuis l’interface d’admin écraseront celles configurées dans les fichiers config.xml. Si vous commencez en paramétrant votre thème via ces fichiers, il faut poursuivre ainsi pour chaque modification ultérieure et NE PLUS UTILISER LE BACKOFFICE.

[Magento 2] Afficher un layout différent selon une catégorie spécifique

28/01/2020 / admin

Astuce testée fonctionnelle Magento 2.3!

Afficher un page layout différent selon une catégorie de produits spécifique

Ce que je veux: j’ai plusieurs catégories de produits dans ma boutique Magento 2. L’affichage des listes produits de l’une de ces catégories (la catégorie Abonnements dans ce tutoriel) doit bénéficier d’un affichage complètement différent par rapport aux listes produits des autres catégories de mon site Magento 2, dont l’affichage restera « standard ».

Nativement, c’est l’articulation du layout vendor/magento/module-catalog/view/frontend/layout/catalog_category_view.xml et du template vendor/magento/module-catalog/view/frontend/templates/product/list.phtml qui génèrent l’affichage de l’ensemble des listes produits dans les pages du catalogue d’une boutique Magento 2.

Nous allons créer un nouveau page layout XML qui servira à rediriger vers un template PHTML de liste spécifique. Une action en backoffice sera nécessaire pour affecter ce nouveau page layout aux catégories concernées.

Conventions pour ce tuto: je pars du principe qu’il existe un Vendor/theme Sodifrance/pdv dans votre arborescence de fichiers et que la catégorie pour laquelle nous cherchons à surcharger l’affichage s’appelle Abonnements.

Commencer par déclarer un nouveau page layout XML dans votre thème

Chemin vers ce fichier: app/design/frontend/Sodifrance/pdv/Magento_Theme/layouts.xml

<?xml version="1.0" encoding="UTF-8"?> <page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd"> <layout id="abonnements_subcategory"> <label translate="true">[PDV] Abonnements (sous-catégorie)</label> </layout> </page_layouts>

1
2
3
4
5
6

<?xml version="1.0" encoding="UTF-8"?>
<page_layouts xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/PageLayout/etc/layouts.xsd">
    <layout id="abonnements_subcategory">
        <label translate="true">[PDV] Abonnements (sous-catégorie)</label>
    </layout>
</page_layouts>

Créer ensuite le nouveau page layout XML abonnements_subcategory.xml correspondant

Source: Magento2: Add a new page layout.

Nous allons créer un page layout XML spécifique app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_subcategory.xml.

<?xml version="1.0"?> <layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd"> <update handle="empty"/> <referenceContainer name="page.wrapper"> <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/> <container name="page.top" as="page_top" label="After Page Header" after="header.container"/> <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/> </referenceContainer> </layout>

1
2
3
4
5
6
7
8
9

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
    </referenceContainer>
</layout>

L'<update handle="empty"/> et le contenu du <referenceContainer name="page.wrapper"> sont copiés/collés du page layout vendor/magento/module-theme/view/frontend/page_layout/1column.xml dont je veux reprendre les bases. Aucun merge n’étant prévu par Magento 2 à ce niveau (jusqu’à ce qu’on me contredise, je ne peux déclarer nulle part que mon nouveau layout abonnements_subcategory.xml doit hériter d’un parent existant column1.xml), je suis obligé de faire du copier/coller, sinon mon front-end n’affiche plus rien…

Créer un template PHTML custom list_abonnements.pthml dans votre thème

Ce template sera une surcharge du fichier vendor/magento/module-catalog/view/frontend/templates/product/list.phtml, située dans app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements.phtml et dans laquelle vous consignerez les spécificités d’affichage liées à la catégorie Abonnements de votre boutique.

Je ne vous mets pas d’exemple de code ici. Votre projet n’aura pas les mêmes spécificités que le mien.

Enfin, rajouter un referenceContainer à notre list_abonnements.phtml spécifique

Source: Different list.phtml for categorys in the backend of Magento 2.1.7.

Sur les bases du fichier app/design/frontend/Sodifrance/pdv/Magento_Theme/page_layout/abonnements_subcategory.xml crée précédemment, nous allons ajouter un referenceContainer à notre template PHTML de liste spécifique app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements.phtml.

<?xml version="1.0"?> <layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd"> <update handle="empty"/> <referenceContainer name="page.wrapper"> <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/> <container name="page.top" as="page_top" label="After Page Header" after="header.container"/> <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/> </referenceContainer> <referenceContainer name="columns.top"> <referenceBlock name="category.products.list"> <action method="setTemplate"> <argument name="template" xsi:type="string">Magento_Catalog::product/list_abonnements.phtml</argument> </action> </referenceBlock> </referenceContainer> </layout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_layout.xsd">
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container" htmlTag="header" htmlClass="page-header" before="main.content"/>
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htmlClass="page-footer"/>
    </referenceContainer>

    <referenceContainer name="columns.top">
        <referenceBlock name="category.products.list">
            <action method="setTemplate">
                <argument name="template" xsi:type="string">Magento_Catalog::product/list_abonnements.phtml</argument>
            </action>
        </referenceBlock>
    </referenceContainer>
</layout>

Affecter le nouveau layout à vos catégories via l’interface d’admin

En backoffice: Catalogue > Catégories > choisir une catégorie ou une sous-catégorie dans l’arborescence de votre catalogue > volet Design > champ Agencement > sélectionner votre page layout ([PDV] Abonnements (sous-catégorie) dans mon exemple).

Autre méthode

Source: Different template for different categories in magento 2 [category_id layout handle in M2].

Il ne s’agit pas à proprement parler d’un override. Il faut créer un fichier XML catalog_category_view_id_{{id}}.xml sous app/design/frontend/<vendorName>/<themeName>/Magento_Catalog/layout/, où {{id}} est l’ID de votre catégorie (visible en admin sous Catalogue > Catégories > choisir la catégorie/sous-catégorie).

Commande à exécuter pour voir les modifs en front: $ n98-magerun2 cache:clean.

[Drupal 7] Afficher une image dans un fichier node.tpl.php présent dans un thème

28/08/2017 / admin

Source . Ceci sous-entend de récupérer l’URL vers l’image stockée dans un thème.

<img src="<?php print base_path() . drupal_get_path('theme', 'roederer_main_theme'); ?>/images/bloc-homepage-entreprises-parapluie.png" alt="" />

1

<img src="<?php print base_path() . drupal_get_path('theme', 'roederer_main_theme'); ?>/images/bloc-homepage-entreprises-parapluie.png" alt="" />

[Drupal 7.x] Les formulaires

07/06/2017 / admin

Theming Forms

Drupal Facile – Episode 37 – Créer des formulaires sous Drupal 7 grâce au module Webform (première partie), Episode 37 – Créer des formulaires sous Drupal 7 grâce au module Webform (deuxième partie)

[Drupal 7.x] Ajouter de nouvelles variables à un thème qui peuvent être exploitées dans page.tpl.php

03/03/2017 / admin

Objectif: ajouter dans template.php une variable footer_message pour afficher une phrase dont l’intitulé change si l’internaute est loggué ou pas.

Déclarer la nouvelle variable footer_message

function <my_theme>_preprocess_page(&$variables) { // Add new variables to page.tpl $variables['footer_message'] = t('and all the roads we have to walk are winding'); }

1
2
3
4

function <my_theme>_preprocess_page(&$variables) {
  // Add new variables to page.tpl
  $variables['footer_message'] = t('and all the roads we have to walk are winding');
}

Un petit kpr($variables); pour vérifier en front que la variable a été créée :

kpr($variables);

1

  kpr($variables);

Dans le code HTML (page.tpl.php) :

<div class="footer-message"><?php print $footer_message; ?></div>

1

<div class="footer-message"><?php print $footer_message; ?></div>

Ajouter la condition if($variables[‘logged_in’])

function <my_theme>_preprocess_page(&$variables) { // Add new variables to page.tpl if($variables['logged_in']) { $variables['footer_message'] = t('logged in'); } else { $variables['footer_message'] = t('logged out'); } }

1
2
3
4
5
6
7
8
9

function <my_theme>_preprocess_page(&$variables) {
  // Add new variables to page.tpl
  if($variables['logged_in']) {
    $variables['footer_message'] = t('logged in');
  }
  else {
    $variables['footer_message'] = t('logged out');
  }
}

Ajouter le nom de l’utilisateur loggué :

function ninesixtyrobots_preprocess_page(&$variables) { // Add new variables to page.tpl if($variables['logged_in']) { $variables['footer_message'] = t('welcome @username !', array('@username' => $variables['user']->name)); } else { $variables['footer_message'] = t('logged out'); } }

1
2
3
4
5
6
7
8
9

function ninesixtyrobots_preprocess_page(&$variables) {
  // Add new variables to page.tpl
  if($variables['logged_in']) {
    $variables['footer_message'] = t('welcome @username !', array('@username' => $variables['user']->name));
  }
  else {
    $variables['footer_message'] = t('logged out');
  }
}

[Drupal 7.x] Le fichier *.info : le point de départ pour intialiser un thème

02/03/2017 / admin

name = My theme description = bla, bla, bla... core = 7.x ; CSS stylesheets[all][] = css/reset.css stylesheets[all][] = css/960.css stylesheets[all][] = css/main.css ; JS scripts[] = js/jquery.autofill.js scripts[] = js/javascript.js ; Regions regions[header] = Header regions[content] = Content regions[sidebar_first] = First Sidebar regions[sidebar_second] = Second Sidebar regions[page_top] = Page Top regions[page_bottom] = Page Bottom regions[footer_left] = Footer left regions[footer_right] = Footer right regions[help] = Help

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

name = My theme
description = bla, bla, bla...
core = 7.x

; CSS
stylesheets[all][] = css/reset.css
stylesheets[all][] = css/960.css
stylesheets[all][] = css/main.css

; JS
scripts[] = js/jquery.autofill.js
scripts[] = js/javascript.js

; Regions
regions[header] = Header
regions[content] = Content
regions[sidebar_first] = First Sidebar
regions[sidebar_second] = Second Sidebar
regions[page_top] = Page Top
regions[page_bottom] = Page Bottom
regions[footer_left] = Footer left
regions[footer_right] = Footer right
regions[help] = Help

Etendre les styles less d’un composant

Le problème que j’ai rencontré:

Vérifier l’héritage des thèmes via l’interface d’admin

Désactiver les caches Front-End

Désactiver le versionning des statiques

Assigner les droits sur tous les fichiers de l’instance (sur tout le projet)

Vérifier l’arbo et les noms des fichiers dans votre thème custom

Côté app/code, création d’un module Topmenu spécifique

Créer un module et étendre le Block Topmenu.php

Modifier app/code/<MyNamespace>/Topmenu/etc/di.xml:

Modifier app/code/<MyNamespace>/Topmenu/etc/module.xml:

Créer app/code/<MyVendor>/Topmenu/Block/Html/Topmenu.php:

Côté app/design/frontend/<MyVendor>/<MyTheme> (theme)

Créer app/design/frontend/<MyVendor>/<MyTheme>/Sm_Venuse/templates/html/mobile/nav-mobile.phtml:

Gestion des styles

app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_menu.less

app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_drilldown.less

On ajoute les deux composants dans _extend.less

Gestion des JS

Ne pas oublier de créer app/design/frontend/<MyVendor>/<mytheme>/requirejs-config.js

Créer un module MyVendor_Themecore en surcharge du module SM_Themecore

Fichier app/code/MyVendor/Themecore/etc/module.xml

Fichier app/code/MyVendor/Themecore/etc/config.xml

Créer un module MyVendor_Venuse en surcharge du module SM_Venuse

Fichier app/code/MyVendor/Venuse/etc/module.xml

Fichier app/code/MyVendor/Venuse/etc/config.xml

Activation des nouveaux modules et prise en compte des modifications custom

Choses à savoir

Afficher un page layout différent selon une catégorie de produits spécifique

Commencer par déclarer un nouveau page layout XML dans votre thème

Créer ensuite le nouveau page layout XML abonnements_subcategory.xml correspondant

Créer un template PHTML custom list_abonnements.pthml dans votre thème

Enfin, rajouter un referenceContainer à notre list_abonnements.phtml spécifique

Affecter le nouveau layout à vos catégories via l’interface d’admin

Autre méthode

Déclarer la nouvelle variable footer_message

Ajouter la condition if($variables[‘logged_in’])

Côté `app/code`, création d’un module Topmenu spécifique

Créer un module et étendre le Block `Topmenu.php`

Modifier `app/code/<MyNamespace>/Topmenu/etc/di.xml`:

Modifier `app/code/<MyNamespace>/Topmenu/etc/module.xml`:

Créer `app/code/<MyVendor>/Topmenu/Block/Html/Topmenu.php`:

Côté `app/design/frontend/<MyVendor>/<MyTheme>` (theme)

Créer `app/design/frontend/<MyVendor>/<MyTheme>/Sm_Venuse/templates/html/mobile/nav-mobile.phtml`:

`app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_menu.less`

`app/design/frontend/<MyVendor>/<mytheme>/web/css/source/components/_foundation_drilldown.less`

On ajoute les deux composants dans `_extend.less`

Ne pas oublier de créer `app/design/frontend/<MyVendor>/<mytheme>/requirejs-config.js`

Créer un module `MyVendor_Themecore` en surcharge du module `SM_Themecore`

Fichier `app/code/MyVendor/Themecore/etc/module.xml`

Fichier `app/code/MyVendor/Themecore/etc/config.xml`

Créer un module `MyVendor_Venuse` en surcharge du module `SM_Venuse`

Fichier `app/code/MyVendor/Venuse/etc/module.xml`

Fichier `app/code/MyVendor/Venuse/etc/config.xml`

Créer ensuite le nouveau page layout XML `abonnements_subcategory.xml` correspondant

Créer un template PHTML custom `list_abonnements.pthml` dans votre thème

Enfin, rajouter un `referenceContainer` à notre `list_abonnements.phtml` spécifique