Mois : janvier 2021

[Magento 2] Afficher le formulaire de connexion client dans n’importe quel template PHTML

29/01/2021 / admin

Testé fonctionnel Magento 2.4 CE. Source: Magento 2: Call customer login page in other phtml.

<?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login")->setTemplate("Magento_Customer::form/login.phtml")->toHtml();?>
<?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login\Info")->setTemplate("Magento_Customer::newcustomer.phtml")->toHtml(); ?>

1 2	<?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login")->setTemplate("Magento_Customer::form/login.phtml")->toHtml();?> <?php echo $this->getLayout()->createBlock("Magento\Customer\Block\Form\Login\Info")->setTemplate("Magento_Customer::newcustomer.phtml")->toHtml(); ?>

[Magento 2] Utiliser Knockout JS pour ajouter un message dans le minicart lorsque ce dernier est vide

29/01/2021 / admin

Dans le fichier de surcharge app/design/frontend///Magento_Checkout/web/template/minicart/content.html, immédiatement sous la condition:

<if args="getCartParam('cart_empty_message')">
    <p class="minicart empty text" text="getCartParam('cart_empty_message')"/>
    <div class="actions">
        <div class="secondary">
            <a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
                <span translate="'View and Edit Cart'"/>
            </a>
        </div>
    </div>
</if>

</a>

</div>

</if>

…ajouter la nouvelle condition:

<ifnot args="getCartParam('cart_empty_message')">
    <p class="minicart empty text"
       translate="'Why not give a couple of our fresh arrivals a try ?'"
    />
    <div class="minicart-wrapper-bottom-actions">
        <a class="btn-plain btn-has-icon-right" data-bind="attr: {href: shoppingCartUrl}">
            <span translate="'Add some products'" />
            <svg viewbox="0 0 100 100" class="icon icon-shopping-basket">
                <use xlink:href="#icon-shopping-basket"></use>
            </svg>
        </a>
    </div>
</ifnot>

<p class="minicart empty text"

translate="'Why not give a couple of our fresh arrivals a try ?'"

</svg>

</a>

</div>

</ifnot>

[Magento 2] Un module Javascript embarqué via RequireJS pour bloquer le scroll de la page à l’affichage d’un élément en surimpression

29/01/2021 / admin

Testé fonctionnel Magento 2.4 CE. L’idée de ce billet est surtout de montrer comment Magento 2 permet l’accès à de petites fonctionnalités écrites en Javascript/jQuery de manière modulaire via RequireJS.

Le code source du plugin:

app/design/frontend///web/js/utils/page-scroll-state.js

Retenez le nom de la fonction handle() du plugin, car elle nous servira plus bas.

define(['jquery'], function($) {
    'use strict';

    let PAGE_SCROLL_STATE = {};

    PAGE_SCROLL_STATE.handle = function() {
        const $_HTML = $('html');
        if ($_HTML.hasClass('is-disabled-page-scroll')) {
            $_HTML.removeClass('is-disabled-page-scroll');
        } else {
            $_HTML.addClass('is-disabled-page-scroll');
        }
    }

    return PAGE_SCROLL_STATE;

});

define(['jquery'], function($) {

'use strict';

let PAGE_SCROLL_STATE = {};

PAGE_SCROLL_STATE.handle = function() {

const $_HTML = $('html');

if ($_HTML.hasClass('is-disabled-page-scroll')) {

$_HTML.removeClass('is-disabled-page-scroll');

} else {

$_HTML.addClass('is-disabled-page-scroll');

}

return PAGE_SCROLL_STATE;

});

Déclarer le plugin via RequireJS:

app/design/frontend///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: {
        'page-scroll-state': 'js/utils/page-scroll-state'
    }

};

var config = {

// Paths defines associations from library name (used to include the library,

// for example when using "define") and the library file path.

paths: {

'page-scroll-state': 'js/utils/page-scroll-state'

}

};

A noter: si l’on souhaite rendre notre plug-in disponible immédiatement dans toutes les pages du site, nous pouvons ajouter ceci au fichier requirejs-config.js (je ne sais pas si la présence d’une virgule en fin de ligne peut poser problème):

    // In this case, the scripts we have connected will work on all pages of the module.
    // Usually, some third-party libraries are connected in this way.
    deps: [
        'page-scroll-state': 'js/utils/page-scroll-state',
    ]

// In this case, the scripts we have connected will work on all pages of the module.

// Usually, some third-party libraries are connected in this way.

deps: [

'page-scroll-state': 'js/utils/page-scroll-state',

]

Exploiter le plugin dans un autre fichier JS, un PHTML, etc…:

ligne 3: on requiert notre plugin tel que déclaré dans la partie paths: du fichier app/design/frontend///requirejs-config.js
(ligne 2: on n’oublie pas la dépendance à jquery ou autre si besoin…)
ligne 4: on définit un alias pour notre plugin, à invoquer par la suite dans le code qui est encapsulé dans la fonction que nous ouvrons
lignes 10 et 18: on invoque la fonction .handle() de notre plugin, via l’alias pageScrollState (défini comme argument de la fonction en ligne 4)

    require([
        'jquery',
        'page-scroll-state'
    ], function($, pageScrollState) {
        'use strict';

        // A l'ouverture de $_OFFCANVAS_LEFT_PRIMARY...
        $_OFFCANVAS_LEFT_PRIMARY.on('opened.zf.offCanvas', function() {
            // Disable page scroll
            pageScrollState.handle();
        });

        // A la fermeture de $_OFFCANVAS_LEFT_PRIMARY...
        $_OFFCANVAS_LEFT_PRIMARY.on('closed.zf.offCanvas', function() {
            // Closes all open elements, and returns to root menu.
            $_MEGAMENU.foundation('_hideAll');
            // Re-enable page scroll
            pageScrollState.handle();
        });

    });

require([

'jquery',

'page-scroll-state'

], function($, pageScrollState) {

'use strict';

// A l'ouverture de $_OFFCANVAS_LEFT_PRIMARY...

$_OFFCANVAS_LEFT_PRIMARY.on('opened.zf.offCanvas', function() {

// Disable page scroll

pageScrollState.handle();

});

// A la fermeture de $_OFFCANVAS_LEFT_PRIMARY...

$_OFFCANVAS_LEFT_PRIMARY.on('closed.zf.offCanvas', function() {

// Closes all open elements, and returns to root menu.

$_MEGAMENU.foundation('_hideAll');

// Re-enable page scroll

pageScrollState.handle();

});

Bonus: les styles!

//
//  Common (styles-m.css)
//  _____________________________________________

& when (@media-common = true) {
    .is-disabled-page-scroll {
        margin: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
    }
}

// Common (styles-m.css)

// _____________________________________________

& when (@media-common = true) {

.is-disabled-page-scroll {

margin: 0 !important;

height: 100% !important;

overflow: hidden !important;

}

[Magento 2] Déplacer l’affichage du nombre de produits au panier de minicart.phtml vers un autre template

29/01/2021 / admin

Testé fonctionnel Magento 2.4 CE. Voici le code à déplacer (bloc de code minicart-counter):

<div class="minicart-trigger">
    <button type="button" class="clear" data-toggle="offCanvasRightMiniCart">
        <span class="button-icon-wrapper">
            <svg viewbox="0 0 100 100" class="icon icon-shopping-basket">
                <use xlink:href="#icon-shopping-basket"></use>
            </svg>
            <span class="minicart-counter data-block="minicart">
                <span data-bind="scope: 'minicart_content'">
                    <span class="counter qty empty">
                        <span class="counter-number"><!-- ko text: getCartParam('summary_count') --><!-- /ko --></span>
                    </span>
                </span>
            </span>
        </span>
        <span class="button-label"><?= __('Panier') ?></span>
    </button>
</div>

</svg>

</span>

</button>

</div>

Suggestion de styles:

button {
    display: inline-flex;
    align-items: center;
    .button-icon-wrapper {
        position: relative;
    }
}

button {

display: inline-flex;

align-items: center;

.button-icon-wrapper {

position: relative;

}

//
//  Common (styles-m.css)
//  _____________________________________________

& when (@media-common = true) {
    .minicart-trigger {
        .minicart-counter {
            position: absolute;
            top: -12px;
            right: -12px;
            display: inline-flex;
            align-items: center;
            min-width: 2.8rem;
            height: 2rem;
            padding: 0 7px;
            font-weight: 700;
            font-size: 1.2rem;
            line-height: 1.68rem;
            color: #ffffff;
            background-color: @theme__color__accent;
            border-radius: 50%;
        }
    }
}

// Common (styles-m.css)

// _____________________________________________

& when (@media-common = true) {

.minicart-trigger {

.minicart-counter {

position: absolute;

top: -12px;

right: -12px;

display: inline-flex;

align-items: center;

min-width: 2.8rem;

height: 2rem;

padding: 0 7px;

font-weight: 700;

font-size: 1.2rem;

line-height: 1.68rem;

color: #ffffff;

background-color: @theme__color__accent;

border-radius: 50%;

}

[Magento 2] Modifier le positionnement des messages d’erreur lors de la validation d’un formulaire

27/01/2021 / admin

Testé fonctionnel Magento 2.4 CE. Source: form-validation-with-custom-error-placement-magento-2.

The function errorPlacement is a function of the mage.validation widget in Magento 2 and can be found under vendor/magento/magento2-base/lib/web/mage/validation.js

Je suis parti, pour mon exemple ci-dessous, d’une surcharge du template PHTML subscribe.phtml issu du module Newsletter.

J’ai ajouté un élément <div id="custom-newsletter-validate-detail-error-message-container"></div> avec un ID à l’endroit où je souhaitais voir se positionner mon message d’erreur. Puis j’ai rajouté le contenu sous la seconde balise <script> dans mon exemple ci-dessous (utilisation de la fonction errorPlacement de validation.js.

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

/** @var \Magento\Newsletter\Block\Subscribe $block */
?>
<div class="block-wrapper newsletter">
    <div class="newsletter-container">
        <div class="content">
            <form class="form subscribe"
                  novalidate
                  action="<?= $block->escapeUrl($block->getFormActionUrl()) ?>"
                  method="post"
                  data-mage-init='{"validation": {"errorClass": "mage-error"}}'
                  id="newsletter-validate-detail">
                <div class="field">
                    <div class="control">
                        <label for="newsletter">
                        <div class="newsletter-tagline">
                            <?= $block->escapeHtml(__('Soyez les premiers à recevoir nos offres et notre actualité')) ?>
                        </div>
                            <span class="newsletter-input-wrapper">
                                <input name="email" type="email" id="newsletter" class="newsletter-input"
                                       placeholder="<?= $block->escapeHtml(__('@Votre email')) ?>"
                                       data-mage-init='{"mage/trim-input":{}}'
                                       data-validate="{required:true, 'validate-email':true}"
                                />
                                <button class="button-subscribe"
                                        title="<?= $block->escapeHtmlAttr(__('Je m\'inscris')) ?>"
                                        type="submit"
                                        aria-label="Subscribe">
                                    <span class="button-subscribe-label"><?= $block->escapeHtml(__('Je m\'inscris')) ?></span>
                                    <svg viewbox="0 0 100 100" class="icon icon-send">
                                        <use xlink:href="#icon-send"></use>
                                    </svg>
                                </button>
                            </span>
                        </label>
                    </div>
                </div>
                <div id="custom-newsletter-validate-detail-error-message-container"></div>
            </form>
        </div>
    </div>
</div>
<script type="text/x-magento-init">
    {
        "*": {
            "Magento_Customer/js/block-submit-on-send": {
                "formId": "newsletter-validate-detail"
            }
        }
    }
</script>
<script>
    require([
        "jquery",
        "mage/mage"
    ], function($){
        var dataForm = $('#newsletter-validate-detail');
        dataForm.mage('validation', {
            errorPlacement: function(error, element) {
                if (element.is('#newsletter')) {
                    error.appendTo('#custom-newsletter-validate-detail-error-message-container');
                } else {
                    element.after(error);
                }
            },
        });
    });
</script>

<?php

/**

* See COPYING.txt for license details.

/** @var \Magento\Newsletter\Block\Subscribe $block */

<form class="form subscribe"

novalidate

action="<?= $block->escapeUrl($block->getFormActionUrl()) ?>"

method="post"

data-mage-init='{"validation": {"errorClass": "mage-error"}}'

id="newsletter-validate-detail">

<?= $block->escapeHtml(__('Soyez les premiers à recevoir nos offres et notre actualité')) ?>

</div>

<input name="email" type="email" id="newsletter" class="newsletter-input"

placeholder="<?= $block->escapeHtml(__('@Votre email')) ?>"

data-mage-init='{"mage/trim-input":{}}'

data-validate="{required:true, 'validate-email':true}"

<button class="button-subscribe"

title="<?= $block->escapeHtmlAttr(__('Je m\'inscris')) ?>"

type="submit"

aria-label="Subscribe">

<span class="button-subscribe-label"><?= $block->escapeHtml(__('Je m\'inscris')) ?></span>

</svg>

</button>

</span>

</label>

</div>

</form>

</div>

{

"*": {

"Magento_Customer/js/block-submit-on-send": {

"formId": "newsletter-validate-detail"

}

</script>

require([

"jquery",

"mage/mage"

], function($){

var dataForm = $('#newsletter-validate-detail');

dataForm.mage('validation', {

errorPlacement: function(error, element) {

if (element.is('#newsletter')) {

error.appendTo('#custom-newsletter-validate-detail-error-message-container');

} else {

element.after(error);

}

});

</script>

[Magento 2] Ajouter des polices Google Fonts

26/01/2021 / admin

Testé fonctionnel Magento 2.4. Source: Add Google Fonts using Google’s new URL format.

[Magento 2] Depuis un template PHTML, détecter si la page sur laquelle nous nous trouvons est la homepage, une page produit, une page catégorie

21/01/2021 / admin

Source: How to check IsHomePage in Magento 2? Are we on the homepage?

<?php if ($this->getRequest()->getFullActionName() == 'cms_index_index') : ?>
    <h1>you are on the homepage</h1>
<?php endif; ?>

<?php if ($this->getRequest()->getFullActionName() == 'cms_index_index') : ?>

<h1>you are on the homepage</h1>

<?php endif; ?>

if ($this->getRequest()->getFullActionName() == 'cms_index_index') {
    //you are on the homepage
}
if ($this->getRequest()->getFullActionName() == 'catalog_product_view') {
    //you are on the product page
}
if ($this->getRequest()->getFullActionName() == 'catalog_category_view') {
    //you are on the category page
}

if ($this->getRequest()->getFullActionName() == 'cms_index_index') {

//you are on the homepage

}

if ($this->getRequest()->getFullActionName() == 'catalog_product_view') {

//you are on the product page

}

if ($this->getRequest()->getFullActionName() == 'catalog_category_view') {

//you are on the category page

}

[CSS] Désactiver le scroll dans la page lorsqu’un élément en position absolue (de type Modale, Off-Canvas, …) est ouvert en sur-impression

21/01/2021 / admin

ATTENTION: cette solution testée fonctionnelle est plus simple à mettre en place que les solutions précédemment citées sur ce blog:

Source: Disable Scrolling on Body

// Bloquer le scroll de la page lorsqu'un élément en position absolute (off-canvas, modale...) est ouvert:
function handlePageScrollState() {
    const $_HTML = $('html');
    if ($_HTML.hasClass('is-disabled-page-scroll')) {
        $_HTML.removeClass('is-disabled-page-scroll');
    } else {
        $_HTML.addClass('is-disabled-page-scroll');
    }
}

// Bloquer le scroll de la page lorsqu'un élément en position absolute (off-canvas, modale...) est ouvert:

function handlePageScrollState() {

const $_HTML = $('html');

if ($_HTML.hasClass('is-disabled-page-scroll')) {

$_HTML.removeClass('is-disabled-page-scroll');

} else {

$_HTML.addClass('is-disabled-page-scroll');

}

.is-disabled-page-scroll {
    margin: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

.is-disabled-page-scroll {

margin: 0 !important;

height: 100% !important;

overflow: hidden !important;

}

[Magento 2] Créer un thème enfant du thème Blank, astuces et bonnes pratiques

20/01/2021 / admin

Astuces éprouvées sur un Magento 2 CE, version 2.4.
Billet qui sera probablement encore mis à jour.

Architecture de votre thème

Architecture globale d’un thème Magento 2 enfant de Blank

A partir de app/code/design/frontend/Vendor/theme/

composer.json
registration.php
requirejs-config.js
theme.xml

composer.json

{
    "name": "Vendor/theme",
    "description": "N/A",
    "require": {
        "php": "~5.5.0|~5.6.0|~7.0.0",
        "magento/theme-frontend-blank": "*",
        "magento/framework": "100.0.*"
    },
    "type": "magento2-theme",
    "version": "1.0.0",
    "license": [

    ],
    "autoload": {
        "files": [
            "registration.php"
        ]
    }
}

{

"name": "Vendor/theme",

"description": "N/A",

"require": {

"php": "~5.5.0|~5.6.0|~7.0.0",

"magento/theme-frontend-blank": "*",

"magento/framework": "100.0.*"

"type": "magento2-theme",

"version": "1.0.0",

"license": [

"autoload": {

"files": [

"registration.php"

]

}

registration.php

<?php

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::THEME,
    'frontend/Vendor/theme',
    __DIR__
);

<?php

\Magento\Framework\Component\ComponentRegistrar::register(

\Magento\Framework\Component\ComponentRegistrar::THEME,

'frontend/Vendor/theme',

__DIR__

);

requirejs-config.js

Pas obligatoire…

theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
    <title>Mon thème enfant de Blank</title>
    <parent>Magento/blank</parent>
</theme>

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">

<title>Mon thème enfant de Blank</title>

<parent>Magento/blank</parent>

</theme>

Les styles/fichiers LESS

Ressources en ligne:

Working with CSS in your first Magento 2 project et version PDF pour la postérité: inchoo.net-Working with CSS in your first Magento 2 project

Dans les thèmes Magento 2, certains fichiers LESS (_extend.less, _theme.less, critical.css, …),ont des noms/libellés et des fonctions prédéfinies qu’il convient de conserver. Le développeur de thèmes n’est pas obligé de tous les avoir dans son thème. Mais dès qu’il à recours à l’une ou l’autre des fonctionnalités que ces fichiers couvrent, il faut utiliser ces derniers.

A partir de app/code/design/frontend/Vendor/theme/web/css/

source/
- _extend.less Doit contenir tous les @import vers les fichiers LESS spécifiques au thème que vous allez créer. Vous pouvez organiser ces fichiers comme bon vous semble.
- _theme.less Doit contenir uniquement des surcharges de variables déjà déclarées précédemment dans les thèmes parent ou dans le dossier lib de Magento. Ce fichier écrase le fichier du même nom situé dans le thème parent (Blank dans notre exemple).
- _variables.less Doit contenir uniquement des variables propres au thème auquel ce fichier appartient. Ce fichier écrase le fichier du même nom situé dans le thème parent (Blank dans notre exemple).

Mediaqueries

Pour des recettes qui fonctionnent: [Magento 2] Mediaqueries LESS avec les mixins du core.

[Magento 2] Mediaqueries LESS avec les mixins du core

20/01/2021 / admin

Pour utiliser min-width et max-width dans la même déclaration, voir l’exemple donné pour Tablet
Pour soustraire 1px à une valeur déclarée dans une variable du core (@screen__xl par exemple), se référer à l’exemple donné pour Tablet. L’utilisation de calc() est obligatoire car les valeurs des variables du core incluent l’unité (@screen__xl: 1440px par exemple) et que, contrairement à ce qu’indique la documentation officielle (dont l’exemple est FAUX!!!), il ne faut pas déclarer (max-width: @screen__xl - 1) mais bien (max-width: calc(@screen__xl ~"- 1px")). Merci les gars pour le mal de tête, hein.

/*
 * Out-of-the-box MEDIAQUERIES
 * https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/responsive-web-design/rwd_css.html
 * Responsive mixins usage documentation: lib/web/css/docs/source/_responsive.less
 */

//  # Consider out-of-the-box Magento 2 responsive breakpoints
//  In Magento UI library there are predefined variables for breakpoints.
//  ```css
//  @screen__xxs: 320px;
//  @screen__xs: 480px;
//  @screen__s: 640px;
//  @screen__m: 768px;
//  @screen__l: 1024px;
//  @screen__xl: 1440px;



//
//  Common (styles-m.css)
//  _____________________________________________

& when (@media-common = true) {
    // your code
}



//
//  Mobile (styles-m.css)
//  _____________________________________________

// From 0px to 640px
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
    // your code
}

// From 0px to 768px
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    // your code
}



//
//  Mobile + Tablet
//  _____________________________________________

// From 0px to 1439px
& when (@media-target = 'mobile'), (@media-target = 'all') {
    @media only screen and (max-width: calc(@screen__xl ~"- 1px")) {
        // your code
    }
}



//
//  Tablet + Desktop
//  _____________________________________________

// From 768px to ∞ (overrides ALL Tablet!)
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    // your code
}

// From 1024px to ∞ (overrides big Tablet only!)
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    // your code
}



//
//  Tablet ONLY
//  _____________________________________________

// This will add styles for tablet devices. When using native media-queries, we recommend wrapping your media-queries with media-width Magento mixins or media-target
// Between 768px and 1439px
& when (@media-target = 'desktop'), (@media-target = 'all') {
    @media only screen and (min-width: @screen__m) and (max-width: calc(@screen__xl ~"- 1px")) {
        // your code
    }
}



//
//  Desktop (style-l.css)
//  _____________________________________________

// From 1440px to ∞
.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {
    // your code
}

/*
 * End: Out-of-the-box MEDIAQUERIES
 */

* Out-of-the-box MEDIAQUERIES

* https://devdocs.magento.com/guides/v2.4/frontend-dev-guide/responsive-web-design/rwd_css.html

* Responsive mixins usage documentation: lib/web/css/docs/source/_responsive.less

// # Consider out-of-the-box Magento 2 responsive breakpoints

// In Magento UI library there are predefined variables for breakpoints.

// ```css

// @screen__xxs: 320px;

// @screen__xs: 480px;

// @screen__s: 640px;

// @screen__m: 768px;

// @screen__l: 1024px;

// @screen__xl: 1440px;

// Common (styles-m.css)

// _____________________________________________

& when (@media-common = true) {

// your code

}

// Mobile (styles-m.css)

// _____________________________________________

// From 0px to 640px

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {

// your code

}

// From 0px to 768px

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {

// your code

}

// Mobile + Tablet

// _____________________________________________

// From 0px to 1439px

& when (@media-target = 'mobile'), (@media-target = 'all') {

@media only screen and (max-width: calc(@screen__xl ~"- 1px")) {

// your code

}

// Tablet + Desktop

// _____________________________________________

// From 768px to ∞ (overrides ALL Tablet!)

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

// your code

}

// From 1024px to ∞ (overrides big Tablet only!)

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {

// your code

}

// Tablet ONLY

// _____________________________________________

// This will add styles for tablet devices. When using native media-queries, we recommend wrapping your media-queries with media-width Magento mixins or media-target

// Between 768px and 1439px

& when (@media-target = 'desktop'), (@media-target = 'all') {

@media only screen and (min-width: @screen__m) and (max-width: calc(@screen__xl ~"- 1px")) {

// your code

}

// Desktop (style-l.css)

// _____________________________________________

// From 1440px to ∞

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__xl) {

// your code

}

* End: Out-of-the-box MEDIAQUERIES

Articles récents

Catégories

Archives

Méta

Mois : janvier 2021

[Magento 2] Afficher le formulaire de connexion client dans n’importe quel template PHTML

[Magento 2] Utiliser Knockout JS pour ajouter un message dans le minicart lorsque ce dernier est vide

[Magento 2] Un module Javascript embarqué via RequireJS pour bloquer le scroll de la page à l’affichage d’un élément en surimpression

Le code source du plugin:

Déclarer le plugin via RequireJS:

Exploiter le plugin dans un autre fichier JS, un PHTML, etc…:

Bonus: les styles!

[Magento 2] Déplacer l’affichage du nombre de produits au panier de minicart.phtml vers un autre template

[Magento 2] Modifier le positionnement des messages d’erreur lors de la validation d’un formulaire

[Magento 2] Ajouter des polices Google Fonts

[Magento 2] Depuis un template PHTML, détecter si la page sur laquelle nous nous trouvons est la homepage, une page produit, une page catégorie

[CSS] Désactiver le scroll dans la page lorsqu’un élément en position absolue (de type Modale, Off-Canvas, …) est ouvert en sur-impression

[Magento 2] Créer un thème enfant du thème Blank, astuces et bonnes pratiques

Architecture de votre thème

Architecture globale d’un thème Magento 2 enfant de Blank

composer.json

registration.php

requirejs-config.js

theme.xml

Les styles/fichiers LESS

Mediaqueries

[Magento 2] Mediaqueries LESS avec les mixins du core