[Magento 2] Ajouter des paramètres de configuration des thèmes de la table core_config_data au fichier config.php

01/04/2020 / admin

Dans le cas d’un site qui dispose de plusieurs store views (un Magento 2 multi-sites) la commande app:config:dump ne réalise pas un dump complet de la configuration faite en Admin de l’ensemble de vos sites. Le fichier config.php généré ne contient que les informations du scope Default Config (mon exemple ci-dessous):

<?php
return [
    'system' => [
        'default' => [
            'themecore' => [
                'general' => [
                    'primary_color' => [
                        'theme_color' => 'ED8B00',
                        'text_on_theme_color' => 'FFFFFF',
                        'link_on_theme_color' => 'FFFFFF',
                        'linkhover_on_theme_color' => 'FFFFFF',
                    ],
                ],
            ],
        ],
    ]
];

<?php

return [

'system' => [

'default' => [

'themecore' => [

'general' => [

'primary_color' => [

'theme_color' => 'ED8B00',

'text_on_theme_color' => 'FFFFFF',

'link_on_theme_color' => 'FFFFFF',

'linkhover_on_theme_color' => 'FFFFFF',

]

];

La valeur de la clé theme_color est pourtant redéfinie pour chacun de mes store view!

Nous pouvons compléter ce fichier config.php à la main en allant récupérer les informations manquantes en base de données, dans la table core_config_data.

Dans l’illustration ci-dessus, j’ai par exemple effectué une recherche sur une valeur de la clé theme_color (qui représente un champ en BO) qui n’a pas été dumpée via la commande app:config:dump.

Pour répercuter ces informations dans le fichier app/etc/config.php, je me suis servi du scope (stores) et du path (themecore/general/primary_color/theme_color) stockés dans la table pour reconstituer le chemin au bon endroit:

<?php
return [
    'system' => [
        'stores' => [
            'fr_paysage' => [
                'design' => [
                    'theme' => [
                        'theme_id' => 'frontend/Vendor/themetwo',
                    ],
                ],
                'themecore' => [
                    'general' => [
                        'primary_color' => [
                            'theme_color' => '99cc00',
                        ],
                    ],
                ],
            ],
            'default' => [
                'design' => [
                    'theme' => [
                        'theme_id' => 'frontend/Vendor/themethree',
                    ],
                ],
                'themecore' => [
                    'general' => [
                        'primary_color' => [
                            'theme_color' => '936037',
                        ],
                    ],
                ],
            ],
        ]
    ]
];

<?php

return [

'system' => [

'stores' => [

'fr_paysage' => [

'design' => [

'theme' => [

'theme_id' => 'frontend/Vendor/themetwo',

'themecore' => [

'general' => [

'primary_color' => [

'theme_color' => '99cc00',

'default' => [

'design' => [

'theme' => [

'theme_id' => 'frontend/Vendor/themethree',

'themecore' => [

'general' => [

'primary_color' => [

'theme_color' => '936037',

]

];

[Magento 2] Récupérer la valeur d’un attribut produit dans une page category, product list, product

26/03/2020 / admin

Les codes des attributs sont visibles en backoffice en se rendant dans STORES > Product [Attributes].

Attention: de manière générale votre attribut ne sera pas visible en front si il n’est pas configuré comme tel en admin. STORES > Product [Attributes]. Editez l’attribut de votre choix. Dans la partie Storefront Properties, vous pouvez configurer la visibilité de votre attribut pour les pages du catalogue, son utilisation pour la recherche, la focntionnalité de comparaison, etc…

Pour un attribut de type `text`

// Pour un attribut donc le code name est "test_frank":
// solution 1.
<?php echo $_product->getData('test_frank'); ?>
// solution 2.
<?php echo $_product->getTestFrank(); ?>

// Pour un attribut donc le code name est "test_frank":

// solution 1.

<?php echo $_product->getData('test_frank'); ?>

// solution 2.

<?php echo $_product->getTestFrank(); ?>

// solution 3.
<?php
$customAttribute = $_product->getData('test_frank');
?>
<span><?= $customAttribute ?></span>

// solution 3.

<?php

$customAttribute = $_product->getData('test_frank');

Pour un attribut de type `dropdown`

<?= $_product->getAttributeText('test_frank'); ?>

1	<?= $_product->getAttributeText('test_frank'); ?>

En BO, mettre « Used in Product Listing » à « Yes » dans ATTRIBUTE INFORMATION > Storefront Properties.

[Magento 2] Login client et création de compte sur la même page

24/03/2020 / admin

Bonne méthode

Source: CAPTCHA form not visible, after applying theme et Magento 2.3 DevDocs – Layout instructions.

…car OUI, il y a une mauvaise méthode (voir ci-dessous) avec laquelle, notamment, la fonctionnalité de CAPTCHA sur le formulaire de login ne fonctionnera plus.

La bonne méthode pour le fichier app/design/frontend/<MyVendor>/<mytheme>/Magento_Customer/layout/customer_account_login.xml:

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block
                class="Magento\Customer\Block\Form\Register"
                name="customer.register.container"
                as="customer_register_container"
                template="form/register.phtml"
                before="customer.login.container">
            </block>
        </referenceContainer>
        <referenceBlock name="page.main.title" display="false" />
        <referenceBlock name="customer.new" remove="true" />
    </body>
</page>

<?xml version="1.0"?>

<!--

/**

* See COPYING.txt for license details.

-->

<body>

<block

class="Magento\Customer\Block\Form\Register"

name="customer.register.container"

as="customer_register_container"

template="form/register.phtml"

before="customer.login.container">

</block>

</referenceContainer>

</body>

</page>

Mauvaise méthode

Laissée ici à des fins docuemntaires, mais NE PAS APPLIQUER!

Source: how to create login and create account page in same page in magento 2.

app/design/frontend/<MyVendor>/mytheme/Magento_Customer/layout/customer_account_login.xml:

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <title>Customer Login</title>
    </head>
    <body>
        <referenceContainer name="content">
            <!-- customer.form.login.extra -->
            <container name="customer.login.container" label="Customer Login Container" htmlTag="div" htmlClass="login-container">
                <block class="Magento\Customer\Block\Form\Login" name="customer_form_login" template="Magento_Customer::form/login.phtml">
                    <container name="form.additional.info" as="form_additional_info"/>
                </block>
                <block class="Magento\Customer\Block\Form\Register" name="customer_form_register" template="Magento_Customer::form/register.phtml">
                    <arguments>
                        <argument name="attribute_data" xsi:type="object">Magento\Customer\Block\DataProviders\AddressAttributeData</argument>
                    </arguments>
                    <container name="form.additional.info" as="form_additional_info"/>
                    <container name="customer.form.register.fields.before" as="form_fields_before" label="Form Fields Before" htmlTag="div" htmlClass="customer-form-before"/>
                </block>
            </container>
            <block class="Magento\Cookie\Block\RequireCookie" name="require-cookie" template="Magento_Cookie::require_cookie.phtml">
                <arguments>
                    <argument name="triggers" xsi:type="array">
                        <item name="loginButton" xsi:type="string">.action.login</item>
                    </argument>
                </arguments>
            </block>
        </referenceContainer>
        <referenceContainer name="form.additional.info">
            <block class="Magento\Framework\View\Element\Template" name="form_additional_info_customer" template="Magento_Customer::additionalinfocustomer.phtml"/>
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<!--

/**

* See COPYING.txt for license details.

-->

<head>

<title>Customer Login</title>

</head>

<body>

</block>

<argument name="attribute_data" xsi:type="object">Magento\Customer\Block\DataProviders\AddressAttributeData</argument>

</arguments>

</block>

</container>

<item name="loginButton" xsi:type="string">.action.login</item>

</argument>

</arguments>

</block>

</referenceContainer>

</referenceContainer>

</body>

</page>

$ magento cache:clean layout

1	$ magento cache:clean layout

[Magento 2] Résolution des messages d’erreur en frontoffice, en admin et en bash

24/03/2020 / admin

[Magento 2] Résolution des messages d’erreur en frontoffice

Votre site ne s’affiche pas car vous avez l’erreur suivante:

Exception #0 (Magento\Framework\Exception\RuntimeException): Type Error occurred when creating object: Sodifrance\Topmenu\Block\Html\Topmenu\Interceptor

Vider le dossier generated car le constructeur a changé (vous avez créé ou modifié un fichier di.xml?).

$ rm -rf generated/*

1	$ rm -rf generated/*

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

<?xml version="1.0"?>

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

<?xml version="1.0"?>

</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;
    }
}

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

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

<?php

/**

* 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">

<?php if ($menuType == 'css') { ?>

<?php /* @escapeNotVerified */

echo $_menu; ?>

</ul>

<?php } ?>

</nav>

</div>

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; }

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; }

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

/* 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'
        }
    }

};

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] DropdownDialog widget

19/03/2020 / admin

Attention: le code sample du widget DropdownDialog fourni dans la documentation officielle de Magento 2 (v2.3) génère des bugs à l’utilisation.

Résolution du problème: le <div class="block block-minicart"> doit être inséré immédiatement sous le <button>:

    <div data-block="dropdown" class="minicart-wrapper">
        <button type="button" class="action customer-action-button" data-trigger="trigger">
            <i class="icon-user1"></i>
        </button>
        <div class="block block-minicart"
            data-mage-init='{
                "dropdownDialog": {
                    "appendTo": "[data-block=dropdown]",
                    "triggerTarget":"[data-trigger=trigger]",
                    "timeout": 2000,
                    "closeOnMouseLeave": false,
                    "closeOnEscape": true,
                    "autoOpen": true,
                    "triggerClass": "active",
                    "parentClass": "active",
                    "buttons": [],
                    "triggerEvent": "hover"
                }
            }'>
            <div id="minicart-content-wrapper">
                <div class="customer-links" data-move="customer-mobile">
                    <?php echo $this->getChildHtml("header.links"); ?>
                </div>
            </div>
        </div>
    </div>

</button>

<div class="block block-minicart"

data-mage-init='{

"dropdownDialog": {

"appendTo": "[data-block=dropdown]",

"triggerTarget":"[data-trigger=trigger]",

"timeout": 2000,

"closeOnMouseLeave": false,

"closeOnEscape": true,

"autoOpen": true,

"triggerClass": "active",

"parentClass": "active",

"buttons": [],

"triggerEvent": "hover"

}

}'>

<?php echo $this->getChildHtml("header.links"); ?>

</div>

Par ailleurs, le paramètre closeOnEscape semble déprécié ou n’est pas détaillé dans la documentation.

[Magento 2] Récupérer dans un template PHTML des informations sur les différentes boutiques de votre site (ID, code, nom, URL, …)

10/03/2020 / admin

Sources: magento 2 How to get store Id phtml et How to get store information in Magento 2.

Exemple d’informations exploitables dans un fichier PHTML:

echo $block->getStoreId() . '<br />';
echo $block->getStoreCode() . '<br />';
echo $block->getWebsiteId() . '<br />';
echo $block->getStoreName() . '<br />';
echo $block->getStoreUrl() . '<br />';
echo $block->isStoreActive() . '<br />';

echo $block->getStoreId() . '<br />';

echo $block->getStoreCode() . '<br />';

echo $block->getWebsiteId() . '<br />';

echo $block->getStoreName() . '<br />';

echo $block->getStoreUrl() . '<br />';

echo $block->isStoreActive() . '<br />';

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

<?xml version="1.0"?>

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

<?xml version="1.0"?>

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

$ 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

// 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] Accélérer la régénération de vos pages: quels dossiers ou caches vider, à quel moment et avec quelle ligne de commande bash?

06/03/2020 / admin

Accélérer vos développements front-end avec Magento 2 en sachant quels dossiers ou caches vider, à quel moment et avec quelle ligne de commande bash.

Ressources en ligne:

Clear directories during development. The following table provides guidelines on what you should clear and when.

Vider uniquement les ressources statiques de style (fichiers CSS, LESS) pour accélérer la régénération des pages de votre site Magento 2

Remarque: certaines commandes vont concerner le thème payant Venuse. Ce dernier est développé par Magentech et distribué par Theme Forest. Il intègre des fonctionnalités d’habillage d’une boutique via l’interface d’administration de Magento 2. Les fichiers de styles qui en découlent sont générés de façon un peu particulière et ne sont pas stockés au même endroit que ceux des thèmes « traditionnels ».

On part du principe que le thème « traditionnel » est un thème enfant de Venuse.

Dans le cas où le thème enfant ne génère par de spécificités, ne pas exécuter la première commande et remplacer venuse-child par le nom de votre thème.

// 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 CSS et 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

// 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 CSS et 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

[Magento 2] Surcharger un UI Component pour augmenter le temps d’affichage des messages de notification alerte

04/03/2020 / admin

Sources:

How to increase notification message display time?
Override Magento UI js file, ainsi que le dernier commentaire:

Two comments, just in case: Magento_Ui should be only once. And you shouldn’t put .js on the file. So it should be: 'Magento_Ui/js/view/messages':'[Namespace]_[Module]/js/view/messages' – pinicio Jun

Core de Magento 2

Remarque: cette méthode de surcharge est valable pour l’ensemble des UI Components de Magento 2.

Créer le fichier app/code/Pdv/Ui/view/frontend/requirejs-config.js

var config = {
    map: {
        '*': {
            'Magento_Ui/js/view/messages':'YourVendor_Ui/js/view/messages'
        }
    }
};

var config = {

map: {

'*': {

'Magento_Ui/js/view/messages':'YourVendor_Ui/js/view/messages'

}

};

Surcharger vendor/magento/module-ui/view/frontend/web/js/view/messages.js dans app/code/YourVendor/Ui/view/frontend/web/js/view/messages.js. La valeur qui nous intéresse est le 5000 dans la fonction onHiddenChange.

        onHiddenChange: function (isHidden) {
            var self = this;
            // Hide message block if needed
            if (isHidden) {
                setTimeout(function () {
                    $(self.selector).hide('blind', {}, 500)
                }, 5000);
            }
        }

onHiddenChange: function (isHidden) {

var self = this;

// Hide message block if needed

if (isHidden) {

setTimeout(function () {

$(self.selector).hide('blind', {}, 500)

}, 5000);

}

Surcharger vendor/magento/module-ui/view/frontend/web/js/model/messages.js dans app/code/YourVendor/Ui/view/frontend/web/js/view/messages.js et vendor/magento/module-ui/view/frontend/web/js/model/messageList.js dans . Aucune modification de code n’est à apporter à ces deux fichiers.

En bash, exécuter les commandes: $ rm -rf pub/static/*; rm -rf var/view_preprocessed/* && grunt less.

Dans le cas de notifications surchargées (comme dans le thème payant Supro par exemple)

Surcharger app/design/frontend/Mgs/supro/Magento_Theme/web/js/view/messages.js dans app/design/frontend/YourVendor/yourTheme/Magento_Theme/web/js/view/messages.js.

La méthode RemoveMessage prévoit initialement une animation bounceOutRight qui provoque un bug d’affichage de la notification (elle disparaît une première fois, puis réapparaît furtivement avant de disparaître pour de bon. J’ai donc remplacé la classe bounceOutRight par une classe nada qui ne se réfère à rien dans le code LESS/CSS.

		RemoveMessage: function () {
			var el = $(this.selector);
			// el.toggleClass('bounceInRight bounceOutRight');
			el.addClass('bounceInRight');
			setTimeout(function () {
				el.hide()
			}, 2000);
                        el.removeClass('bounceInRight');
		},

RemoveMessage: function () {

var el = $(this.selector);

// el.toggleClass('bounceInRight bounceOutRight');

el.addClass('bounceInRight');

setTimeout(function () {

el.hide()

}, 2000);

el.removeClass('bounceInRight');

La valeur qui nous intéresse est le 5000 dans la fonction onHiddenChange.

		onHiddenChange: function (isHidden) {
			var self = this;
			if (isHidden) {
				setTimeout(function () {
					self.RemoveMessage();
				}, 5000);
			}
			this.isHidden(false);
		}

onHiddenChange: function (isHidden) {

var self = this;

if (isHidden) {

setTimeout(function () {

self.RemoveMessage();

}, 5000);

}

this.isHidden(false);

}

Theme by Anders Norén — Up ↑

Juste quelques bonnes pratiques pour faire de votre site une usine à gaz :)

Articles récents

Catégories

Tags

Archives

Méta

Pour un attribut de type text

Pour un attribut de type dropdown

Bonne méthode

Mauvaise méthode

[Magento 2] Résolution des messages d’erreur en frontoffice

Exception #0 (Magento\Framework\Exception\RuntimeException): Type Error occurred when creating object: Sodifrance\Topmenu\Block\Html\Topmenu\Interceptor

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

Vider uniquement les ressources statiques de style (fichiers CSS, LESS) pour accélérer la régénération des pages de votre site Magento 2

Core de Magento 2

Dans le cas de notifications surchargées (comme dans le thème payant Supro par exemple)

Pour un attribut de type `text`

Pour un attribut de type `dropdown`

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`