Monthmars 2020

[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

Trouver les captchas dans l’admin Magento 2

Doc officielle: User Guide 2.3 – CAPTCHA.

Se rendre dans STORES > Configuration [Settings] > CUSTOMERS > Customer Configuration > CAPTCHA (dernier volet sur ma page).

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

}

[Magento 2] js-translation.json Localisation de chaînes de caractères récalcitrantes (qui restent en anglais) dans les notifications messages d’alerte

03/03/2020 / admin

Bug inhérent à Magento 2. Les chaînes non-traduites sont dasn des fichiers javaScript. Un fichier js-translation.json contenant les traductions nécessaires est généré en front au chargement de la page, mais il est incomplet!

The cause of issue is: Sometime file js-translation.json is loaded slower or later than other javascript file (I assume file a.js contain some texts need to translate) which contains some texts need to translate so at this time translated texts still not push to storage. Source: Magento 2 javascript translation sometime translate sometime not work – Why and how to fix?.

Voir ici:

[Ouvert][Remonté le 10 oct 2018] magento generate a broken js-translation.json file while deploying locale
[Ouvert][Remonté le 5 juil 2018] Problem with the translations from javascript in Magento 2.2.2
[Fermé][Remonté le 12 déc 2018] Strings not translated in all email templates, keep curly braces around string
- Proposition de solution – sezio commented on 21 Jan 2019
[Fermé][Remonté le 9 juil 2018] 2.2.4 to 2.2.5 js-translation.json gets messed up
[Fermé (non reproductible)][Remonté le 31 mar 2017] js-translation.json generation incomplete.

Attention: les solutions 1 à 4 ont été testées alors qu’aucun language pack pour le core de Magento 2 n’avait été installé. Il se trouve que les clés de traduction n’étaient présentes qu’en anglais dans le projet. Le front ne pouvait de ce fait pas afficher de libellés en français. Il est impératif d’avoir installé un language pack au préalable, avant de procéder à des tests sur les problèmes de build du fichier js-translation.json.

Solution #1 (testée Magento 2.3.4, non fonctionnelle)

Dans la DB, virer les rangées de inline translation qui sont importées dans la table core_config_data:

delete from core_config_data where path like 'dev/translate_inline/active';
delete from core_config_data where path like 'dev/translate_inline/active_admin';

1 2	delete from core_config_data where path like 'dev/translate_inline/active'; delete from core_config_data where path like 'dev/translate_inline/active_admin';

Puis:

disable the inline translation
rm your pub/static/frontend directory
redeploy the frontend

Solution #2 (non testée)

Il faut impérativement qu’on ait un environnement où les traductions fonctionnent pour mettre en place cette solution: Magento 2 – Translations : how does js-translation.json get populated? Mine is empty!

Solution #3 (testée Magento 2.3.4, non fonctionnelle)

Magento 2 Knockout Translation Bug

Solution #4 (non testée)

js-translation.json fails to generated

Solution #5 (testée non fonctionnelle Magento 2.3.3, 2.3.4)

Problème de traductions dans Magento 2: les traductions ne fonctionnent pas.

Packs de langues (traductions)

Installer mageplazza

Créer un token depuis Github

Vous logguer sur votre compte GitHub
Settings > Developer settings > Personal access tokens
Button « Generate new token »
Cocher la case read:packages
Copier-coller le token généré. Il vous sera demandé au composer require

$ composer require mageplaza/magento-2-french-language-pack
$ php -d memory_limit=-1 bin/magento setup:static-content:deploy -f fr_FR
$ n98-magerun2 indexer:reindex
$ n98-magerun2 cache:flush

$ composer require mageplaza/magento-2-french-language-pack

$ php -d memory_limit=-1 bin/magento setup:static-content:deploy -f fr_FR

$ n98-magerun2 indexer:reindex

$ n98-magerun2 cache:flush

Outils

AOEpeople/grunt-magento-translation-to-json – Parses magento translation csv files and builds json for required keys (including fallback if no translation file available).

ATTENTION: Magento 2 est très buggué au niveau des localisations traductions, notamment lorsque celles-ci reposent sur JavaScript. La solution ci-dessous permet de contourner le problème mais n’est pas propre. Dans le fichier app/design/frontend/MyVendor/myTheme/Magento_Theme/templates/messages.phtml, rajouter à la fin:

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

                var listeners = [],
                    doc = win.document,
                    MutationObserver = win.MutationObserver || win.WebKitMutationObserver,
                    observer;

                function ready(selector, fn) {
                    // Store the selector and callback to be monitored
                    listeners.push({
                        selector: selector,
                        fn: fn
                    });
                    if (!observer) {
                        // Watch for changes in the document
                        observer = new MutationObserver(check);
                        observer.observe(doc.documentElement, {
                            childList: true,
                            subtree: true
                        });
                    }
                    // Check if the element is currently in the DOM
                    check();
                }

                function check() {
                    // Check the DOM for elements matching a stored selector
                    for (var i = 0, len = listeners.length, listener, elements; i < len; i++) {
                        listener = listeners[i];
                        // Query for elements matching the specified selector
                        elements = doc.querySelectorAll(listener.selector);
                        for (var j = 0, jLen = elements.length, element; j < jLen; j++) {
                            element = elements[j];
                            // Make sure the callback isn't invoked with the
                            // same element more than once
                            if (!element.ready) {
                                element.ready = true;
                                // Invoke the callback with the element
                                listener.fn.call(element, element);
                            }
                        }
                    }
                }

                // Expose `ready`
                win.ready = ready;

            })(this);

            // Select the node that will be observed for mutations and translate english text to page lang
            const htmlLang = $('html').attr('lang'),
                pageMainID = $('.page-main').attr('id'),
                targetNode = document.getElementById(pageMainID);

            ready('.text[data-bind="html: message.text"]', function(targetNode) {
                var thisObj = $(this),
                    alertText = thisObj.text();

                if (alertText === 'The account sign-in was incorrect or your account is disabled temporarily. Please wait and try again later.') {
                    if (htmlLang === 'fr') {
                        thisObj.text('La connexion au compte était incorrecte ou votre compte est temporairement désactivé. Veuillez patienter et réessayer plus tard.');
                    }
                }
            });
        })(jQuery);

    });
</script>

require([

'jquery'

], function(jQuery){

(function($) {

(function(win) {

'use strict';

var listeners = [],

doc = win.document,

MutationObserver = win.MutationObserver || win.WebKitMutationObserver,

observer;

function ready(selector, fn) {

// Store the selector and callback to be monitored

listeners.push({

selector: selector,

fn: fn

});

if (!observer) {

// Watch for changes in the document

observer = new MutationObserver(check);

observer.observe(doc.documentElement, {

childList: true,

subtree: true

});

}

// Check if the element is currently in the DOM

check();

}

function check() {

// Check the DOM for elements matching a stored selector

for (var i = 0, len = listeners.length, listener, elements; i < len; i++) {

listener = listeners[i];

// Query for elements matching the specified selector

elements = doc.querySelectorAll(listener.selector);

for (var j = 0, jLen = elements.length, element; j < jLen; j++) {

element = elements[j];

// Make sure the callback isn't invoked with the

// same element more than once

if (!element.ready) {

element.ready = true;

// Invoke the callback with the element

listener.fn.call(element, element);

}

// Expose `ready`

win.ready = ready;

})(this);

// Select the node that will be observed for mutations and translate english text to page lang

const htmlLang = $('html').attr('lang'),

pageMainID = $('.page-main').attr('id'),

targetNode = document.getElementById(pageMainID);

ready('.text[data-bind="html: message.text"]', function(targetNode) {

var thisObj = $(this),

alertText = thisObj.text();

if (alertText === 'The account sign-in was incorrect or your account is disabled temporarily. Please wait and try again later.') {

if (htmlLang === 'fr') {

thisObj.text('La connexion au compte était incorrecte ou votre compte est temporairement désactivé. Veuillez patienter et réessayer plus tard.');

}

});

})(jQuery);

});

</script>

Axes d’amélioration: améliorer le code en le séparant en 2 plugins. Les mutation observers et le traducteur.

Theme by Anders Norén — Up ↑

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

Articles récents

Catégories

Tags

Archives

Méta

Monthmars 2020

Pour un attribut de type text

Pour un attribut de type dropdown

Trouver les captchas dans l’admin Magento 2

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)

Solution #1 (testée Magento 2.3.4, non fonctionnelle)

Solution #2 (non testée)

Solution #3 (testée Magento 2.3.4, non fonctionnelle)

Solution #4 (non testée)

Solution #5 (testée non fonctionnelle Magento 2.3.3, 2.3.4)

Packs de langues (traductions)

Installer mageplazza

Créer un token depuis Github

Outils

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`