javascript – devfrontend.info

Tagjavascript

[SEO] Obfuscation des liens pour le maillage interne

26/02/2021 / admin

Article ayant servi de source à ce billet: Comment faire de l’obfuscation de liens pour votre maillage interne ? et version PDF – 410-gone.fr-Comment faire de lobfuscation de liens pour votre maillage interne.

// Source/doc: https://www.410-gone.fr/seo/optimisation-on-site/maillage-interne/cocon-semantique/obfuscation.html

// HTML pour les liens à obfusquer (les URLs doivent être encodées en base-64):
// <span class="qcd" data-qcd="aHR0cHM6Ly93d3cuNDEwLWdvbmUuZnIvYS1wcm9wb3MuaHRtbA==">
//     mentions légales
// </span>

// Encodage en base-64 en PHP:
// https://www.php.net/manual/en/function.base64-encode.php

document.addEventListener("DOMContentLoaded", function(event) {
    var classname = document.getElementsByClassName("qcd");
    for (var i = 0; i < classname.length; i++) {
        //click gauche
        classname[i].addEventListener('click', myFunction, false);
        //click droit
        classname[i].addEventListener('contextmenu', myRightFunction, false);
    }
});

//fonction du click gauche
var myFunction = function(event) {
    var attribute = this.getAttribute("data-qcd");
    if(event.ctrlKey) {
        var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');
        newWindow.focus();
    } else {
        document.location.href= decodeURIComponent(window.atob(attribute));
    }
};

//fonction du click droit
var myRightFunction = function(event) {
    var attribute = this.getAttribute("data-qcd");
    if(event.ctrlKey) {
        var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');
        newWindow.focus();
    } else {
        window.open(decodeURIComponent(window.atob(attribute)),'_blank');
    }
}

// Source/doc: https://www.410-gone.fr/seo/optimisation-on-site/maillage-interne/cocon-semantique/obfuscation.html

// HTML pour les liens à obfusquer (les URLs doivent être encodées en base-64):

// <span class="qcd" data-qcd="aHR0cHM6Ly93d3cuNDEwLWdvbmUuZnIvYS1wcm9wb3MuaHRtbA==">

// mentions légales

// </span>

// Encodage en base-64 en PHP:

// https://www.php.net/manual/en/function.base64-encode.php

document.addEventListener("DOMContentLoaded", function(event) {

var classname = document.getElementsByClassName("qcd");

for (var i = 0; i < classname.length; i++) {

//click gauche

classname[i].addEventListener('click', myFunction, false);

//click droit

classname[i].addEventListener('contextmenu', myRightFunction, false);

}

});

//fonction du click gauche

var myFunction = function(event) {

var attribute = this.getAttribute("data-qcd");

if(event.ctrlKey) {

var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');

newWindow.focus();

} else {

document.location.href= decodeURIComponent(window.atob(attribute));

}

};

//fonction du click droit

var myRightFunction = function(event) {

var attribute = this.getAttribute("data-qcd");

if(event.ctrlKey) {

var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');

newWindow.focus();

} else {

window.open(decodeURIComponent(window.atob(attribute)),'_blank');

}

[Magento 2] Les bases et patterns de l’utilisation de javascript (AMD, requireJS, widget jQuery, plugin, module, x-magento-init, etc…)

26/02/2021 / admin

Intégrer et exploiter dans Magento 2 un plugin jQuery tiers dont le code source est structuré selon le pattern AMD

Pour illustrer cette partie, nous allons intégrer dans Magento 2 le plugin jQuery Slick Carousel, dont le code source est structuré selon le pattern AMD.

Remarque: l’intégration du plugin jQuery tiers va se faire dans un thème. Si vous comptez utiliser le plugin en question sur un projet multi-sites/multi-thèmes ou sur plusieurs projets, une meilleure stratégie consisterait à intégrer ce premier dans un nouveau module MyVendor_Slick qu’on placerait dans app/code/MyVendor/Slick.
Cette démarche n’est pas décrite ici, mais mériterait d’être envisagée en fonction de vos besoins.

Récupération du plugin sous Git et copie dans l’arborescence du thème

Récupérer la source minifiée du plugin Slick sous Git (tag v1.8.1 dans mon exemple, mais vous pouvez vérifier si il existe un tag plus récent) et copier-coller le fichier dans votre thème, au chemin suivant: app/design/frontend/MyVendor/mytheme/web/js/vendor/slick/slick.min.js.

Déclaration du plugin en tant que module via RequireJS

Dans le fichier 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: {
        'slick': 'js/vendor/slick/slick.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).
    shim: {
        'slick': {
            deps: ['jquery']
        }
    }
};

var config = {

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

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

paths: {

'slick': 'js/vendor/slick/slick.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).

shim: {

'slick': {

deps: ['jquery']

}

};

Création d’un fichier d’initialisation d’une instance du plugin

Dans votre thème, créer le fichier app/design/frontend/MyVendor/mytheme/web/js/init-slick.js qui va servir à appeller et à initialiser une instance du plugin javascript Slick et vous donnera accès à toutes les options de l’API originale:

define(['jquery','slick'], function($)
{
    return function(config, element)
    {
        $(element).slick(config);
    };
});

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

{

return function(config, element)

{

$(element).slick(config);

};

});

Petite subtilité: ajouter une configuration spécifique par défaut à toutes les instances de votre plugin

Dans l’exemple ci-dessous, le fichier app/design/frontend/MyVendor/mytheme/web/js/init-slick.js est agrémenté d’un objet defaults qui surcharge (via les settings proposés de base par le plugin Slick Carousel prevArrow et nextArrow) l’aspect graphique des chevrons « slide précédent/slide suivant ».

L’intérêt d’ajouter une configuration spécifique par défaut à toutes les instances de votre plugin réside, pour l’exemple du Carousel, dans le fait qui si la charte graphique de votre projet prévoit les mêmes chevrons spés pour tous les sliders du site, vous allez pouvoir tous les initialiser sans avoir besoin de re-préciser à chaque fois que vous voulez surcharger les pictos fournis de base par ceux de votre charte.

Vous pouvez, bien entendu, les re-surcharger et utiliser d’autres options du plugin à la demande pour chaque nouveau Carousel que vous allez mettre en place.

define(['jquery','slick'], function($)
{
    return function(config, element)
    {
        let defaults = {
            prevArrow: '<button type="button" class="btn-round slick-prev"><svg viewBox="0 0 100 100" class="icon icon-arrow-back-chevron"><use xlink:href="#icon-arrow-back-chevron"></use></svg></button>',
            nextArrow: '<button type="button" class="btn-round slick-next"><svg viewBox="0 0 100 100" class="icon icon-arrow-forward-chevron"><use xlink:href="#icon-arrow-forward-chevron"></use></svg></button>'
        };

        $(element).slick($.extend(defaults, config));
    };
});

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

{

return function(config, element)

{

let defaults = {

prevArrow: '<button type="button" class="btn-round slick-prev"><svg viewBox="0 0 100 100" class="icon icon-arrow-back-chevron"><use xlink:href="#icon-arrow-back-chevron"></use></svg></button>',

nextArrow: '<button type="button" class="btn-round slick-next"><svg viewBox="0 0 100 100" class="icon icon-arrow-forward-chevron"><use xlink:href="#icon-arrow-forward-chevron"></use></svg></button>'

};

$(element).slick($.extend(defaults, config));

};

});

Appeler et initialiser une instance du plugin sur un élément du DOM

Cette page de la documentation officielle vous expliquera comment appeler et initialiser une instance du plugin sur un élément du DOM dans Magento 2.

Elle aborde notamment la manière de procéder depuis un fichier template PHTML, depuis un fichier JS et comment exécuter data-amge-init et x-magento-init dans un cas où le DOM se met à jour dynamiquement.

Dans ce billet, je vais me contenter d’illustrer un exemple de notation déclarative avec x-magento-init depuis un fichier PHTML.

Exemple de notation déclarative avec `x-magento-init` depuis un fichier PHTML

Ici, j’initialise simplement mon module Slick sur l’élément du DOM qui porte l’ID home-slider. Le carousel va s’afficher soit avec les options de base fournies par le plugin Slick, soit avec les options de base fournies par le plugin Slick ET des pictos chevrons surchargés par ma configuration par défaut si j’en ai défini une.

<div id="home-slider">
    <div><a href="#">Slide one</a></div>
    <div><a href="#">Slide two</a></div>
    <div><a href="#">Slide three</a></div>
    <div><a href="#">Slide four</a></div>
    <div><a href="#">Slide five</a></div>
    <div><a href="#">Slide six</a></div>
</div>

<script type="text/x-magento-init">
    {
        "#home-slider": {
            "js/init-slick": {}
        }
    }
</script>

<div><a href="#">Slide one</a></div>

<div><a href="#">Slide two</a></div>

<div><a href="#">Slide three</a></div>

<div><a href="#">Slide four</a></div>

<div><a href="#">Slide five</a></div>

<div><a href="#">Slide six</a></div>

</div>

{

"#home-slider": {

"js/init-slick": {}

}

</script>

Même exemple avec ajout d’options

Ici, je choisis de paramétrer mon carousel afin qu’il affiche 4 slides à la fois et qu’on scrolle d’une slide à chaque fois qu’on active les boutons prev/next ou tout autre mode de navigation fourni par le plugin. Les options slidesToShow et slidesToScroll sont fournies par le plugin Slick et exploitables immédiatement grâce à la magie d’AMD, de RequireJs et de Magento.

<script type="text/x-magento-init">
    {
        "#home-slider": {
            "js/init-slick": {
                "slidesToShow": "4", // # of slides to show at a time
                "slidesToScroll": "1" // # of slides to scroll at a time
            }
        }
    }
</script>

{

"#home-slider": {

"js/init-slick": {

"slidesToShow": "4", // # of slides to show at a time

"slidesToScroll": "1" // # of slides to scroll at a time

}

</script>

Ressources en ligne:

Un excellent pense-bête sur l’intégration de code javascript dans Magento 2. Tout y est parfaitement structuré, clair, concis et illustré: initialisation imperative/declaration, plain modules, jQuery UI Widgets (add new method, override existing method, create new widget), UI components, etc… Version PDF pour la postérité – jason.codes-Magento 2 JavaScript CheatSheet. Voir aussi, les sous-articles connexes:

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

}

[javaScript] Quelques expressions régulières (Regex) utiles

15/01/2021 / admin

Source: Regex match string until whitespace Javascript.

Une regex qui extrait, à partir d’une chaîne de caractères de type level1 nav-1-1 category-item first active parent is-submenu-item is-drilldown-submenu-item la classe qui commence par nav- et se termine au prochain espacement (whitespace):

$('.level1', '#megaMenu').on('click', function(e){
    e.preventDefault();
    let $_THIS = $(this);

    $_THIS.removeClass(function () { // Select the element divs which has class that starts with "nav-"
        var className = this.className.match(/(nav-)[^\s]+/gi); // Get a match to match the pattern "Starts with nav- and until next whitespace" and extract that classname
        console.log(className); // ["nav-1-1"]
    });
});

$('.level1', '#megaMenu').on('click', function(e){

e.preventDefault();

let $_THIS = $(this);

$_THIS.removeClass(function () { // Select the element divs which has class that starts with "nav-"

var className = this.className.match(/(nav-)[^\s]+/gi); // Get a match to match the pattern "Starts with nav- and until next whitespace" and extract that classname

console.log(className); // ["nav-1-1"]

});

[Magento 2] Afficher/masquer le bouton « Effacer tous les filtres » dans la liste des catégories/produits

12/01/2021 / admin

Testé fonctionnel Magento 2.4!

Dans mon exemple, l’ID « narrow-by-list » est présent deux fois dans le DOM (ce qui n’est pas du tout une bonne pratique) car la liste des filtres s’affiche dans deux zones bien distinctes de la page: 1. en mode horizontal au-dessus de la liste des catégories/produits et dans un volet glissant qui ne s’affiche qu’au clic sur un bouton de type « Voir plus de filtres ».

Il faudra donc adapter un peu mon code à votre propre utilisation.

Chemin: app/design/frontend/MyVendor/MyTheme/Magento_LayeredNavigation/templates/layer/view.phtml.

Je désactive la condition PHP <?php if ($block->getLayer()->getState()->getFilters()) : ?> qui sette la visibilité du bouton « Effacer tout », mais uniquement au rechargement de la page.
J’ajoute un ID <div id="filterActions" class="block-actions filter-actions">.

            <?php //if ($block->getLayer()->getState()->getFilters()) : ?>
                <div id="filterActions" class="block-actions filter-actions">
                    <a href="<?= $block->escapeUrl($block->getClearUrl()) ?>" class="action secondary icon clear small filter-clear">
                        <span><?= $block->escapeHtml(__('Clear All')) ?></span>
                        <span class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20"><g><g><g><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="20" d="M1 6.99v0l3 4.5v0l3.5-4v0"/></g><g><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="20" d="M13.5 19.5A9.5 9.5 0 1 0 4 10v1.494"/></g></g></g></svg>
                        </span>
                    </a>
                </div>
            <?php //endif; ?>

<?php //if ($block->getLayer()->getState()->getFilters()) : ?>

<a href="<?= $block->escapeUrl($block->getClearUrl()) ?>" class="action secondary icon clear small filter-clear">

<span><?= $block->escapeHtml(__('Clear All')) ?></span>

</span>

</a>

</div>

<?php //endif; ?>

Dans le même fichier view.phtml, j’ajoute ce bout de code javaScript (il vous faudra probablement adapter le ciblage du selecteur suivant qui n’existera pas chez vous: let FILTER = $('#narrow-by-list.is-view-top').find('.active');):

<script>
    require([
        'jquery'
    ], function($){
        'use strict';

        // On vérifie dans le noeud '#narrow-by-list.is-view-top' (view-top.phtml)
        // qu'il y a au moins 1 filtre d'actif.
        function checkForActiveFilter() {
            let FILTER = $('#narrow-by-list.is-view-top').find('.active');

            if (FILTER.length >= 1) {
                return true;
            } else {
                return false;
            }
        }

        // On sette la visibilité du bouton "Effacer tout" en fonction du résultat
        // retourné par la fonction checkForActiveFilter().
        function setFilterActionsVisibility() {
            const $FILTER_ACTIONS = $('#filterActions');

            if ( checkForActiveFilter() == true ){
                $FILTER_ACTIONS.removeClass('no-active-filter');
            } else {
                $FILTER_ACTIONS.addClass('no-active-filter');
            }
        }

        // console.log("is any filter active? " + checkForActiveFilter());
        
        setFilterActionsVisibility();
    });
</script>

require([

'jquery'

], function($){

'use strict';

// On vérifie dans le noeud '#narrow-by-list.is-view-top' (view-top.phtml)

// qu'il y a au moins 1 filtre d'actif.

function checkForActiveFilter() {

let FILTER = $('#narrow-by-list.is-view-top').find('.active');

if (FILTER.length >= 1) {

return true;

} else {

return false;

}

// On sette la visibilité du bouton "Effacer tout" en fonction du résultat

// retourné par la fonction checkForActiveFilter().

function setFilterActionsVisibility() {

const $FILTER_ACTIONS = $('#filterActions');

if ( checkForActiveFilter() == true ){

$FILTER_ACTIONS.removeClass('no-active-filter');

} else {

$FILTER_ACTIONS.addClass('no-active-filter');

}

// console.log("is any filter active? " + checkForActiveFilter());

setFilterActionsVisibility();

});

</script>

On n’oublie pas le petit CSS qui va bien:

#filterActions.no-active-filter {
    display: none !important;
}

#filterActions.no-active-filter {

display: none !important;

}

[Magento 2] Etendre un composant JS natif

07/12/2020 / admin

Testé fonctionnel Magento 2.4. Source: Extending Magento 2 default JS components. Version PDF – inchoo.net-Extending Magento 2 default JS components.

Etendre le composant UI Tabs pour ajouter un effet de bordure animée sous les onglets:

app/design/frontend/MyVendor/mytheme/web/js/tabs-custom.js

define([
        'jquery',
        'jquery-ui-modules/widget',
        'jquery-ui-modules/core',
        'mage/mage',
        'mage/collapsible'],
    function($){
        $.widget('custom.tabs', $.mage.tabs, {
            options: {
                indicator: false
            },
            _create: function () {
                // IF NO options ARE POSSIBLE:
                // if ( $(".items.has-indicator").length > 0 ){
                //     this._addIndicator();
                // }
                if (this.options.indicator) {
                    this._addIndicator();
                }
            },
            _addIndicator: function () {
                var $menu = $(".items.has-indicator"),
                    indicator = $('<span class="indicator"></span>');

                $menu.append(indicator);

                position_indicator($menu.find("li.current"));

                setTimeout(function(){indicator.css("opacity", 1);}, 500);
                $menu.find("li").mouseenter(function(){
                    position_indicator($(this));
                });
                $menu.find("li").mouseleave(function(){
                    position_indicator($menu.find("li.current"));
                });

                $(window).on('resize', function(){
                    position_indicator($menu.find("li.current"));
                });

                function position_indicator(ele){
                    var left   = ele.position().left,
                        width  = ele.outerWidth(),
                        top    = ele.position().top,
                        height = ele.outerHeight();

                    if(window.matchMedia("(max-width:890px)").matches){
                        indicator.stop().animate({
                            top: top,
                            height: height,
                            width: 3,
                            left: 0
                        });
                    }
                    else{
                        indicator.stop().animate({
                            left: left,
                            width: width,
                            height: 3,
                            top: "100%"
                        });
                    }
                }
            }
        });
        return $.custom.tabs;
    });

define([

'jquery',

'jquery-ui-modules/widget',

'jquery-ui-modules/core',

'mage/mage',

'mage/collapsible'],

function($){

$.widget('custom.tabs', $.mage.tabs, {

options: {

indicator: false

_create: function () {

// IF NO options ARE POSSIBLE:

// if ( $(".items.has-indicator").length > 0 ){

// this._addIndicator();

// }

if (this.options.indicator) {

this._addIndicator();

}

_addIndicator: function () {

var $menu = $(".items.has-indicator"),

indicator = $('<span class="indicator"></span>');

$menu.append(indicator);

position_indicator($menu.find("li.current"));

setTimeout(function(){indicator.css("opacity", 1);}, 500);

$menu.find("li").mouseenter(function(){

position_indicator($(this));

});

$menu.find("li").mouseleave(function(){

position_indicator($menu.find("li.current"));

});

$(window).on('resize', function(){

position_indicator($menu.find("li.current"));

});

function position_indicator(ele){

var left = ele.position().left,

width = ele.outerWidth(),

top = ele.position().top,

height = ele.outerHeight();

if(window.matchMedia("(max-width:890px)").matches){

indicator.stop().animate({

top: top,

height: height,

width: 3,

left: 0

});

}

else{

indicator.stop().animate({

left: left,

width: width,

height: 3,

top: "100%"

});

}

});

return $.custom.tabs;

});

app/design/frontend/MyVendor/mytheme/requirejs-config.js

var config = {
    map: {
        '*' : {
            'tabs': 'js/tabs-custom'
        }
    }
};

var config = {

map: {

'*' : {

'tabs': 'js/tabs-custom'

}

};

app/design/frontend/MyVendor/mytheme/Magento_Theme/templates/html/sections.phtml

<div class="section-items <?= $block->escapeHtmlAttr($groupCss) ?>-items"
     data-mage-init='{"tabs":{"openedState":"active","indicator":"true"}}'>

1 2	<div class="section-items <?= $block->escapeHtmlAttr($groupCss) ?>-items" data-mage-init='{"tabs":{"openedState":"active","indicator":"true"}}'>

app/design/frontend/MyVendor/mytheme/web/css/source/tabs.less

@tab-item-height: 50px;
@tab-item-border-width: 3px;

.items:not(.nav) {
    border-bottom: none 0;
    display: flex;
    .nav.item {
        margin: 0;
        display: flex;
        > a,
        &.current > strong {
            padding: 0 @tab-item-height / 2.25;
            position: relative;
            display: flex;
            align-items: center;
        }
        &.current > strong {
            font-weight: 500;
            &:hover {
                color: @red;
            }
        }
    }
    &.has-indicator {
        position: relative;
        .indicator{
            left: 0;
            height: 3px;
            position: absolute;
            bottom: 0;
            width: 0;
            opacity: 0;
            background: @red;
            overflow: visible !important;

            &:before{
                content:"";
                position: absolute;
                bottom: 0;
                background-color: @red;
            }
        }
    }
}



//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .items:not(.nav) {
        flex-direction: column;
        background: linear-gradient(90deg, @greyLight 0%, @greyLight @tab-item-border-width, transparent @tab-item-border-width, transparent 100%);
        .nav.item {
            height: @tab-item-height;
        }
        &.has-indicator {
            .indicator {
                &:before{
                    width: 13px;
                    height: 2px;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%) translateX(0);
                }
            }
        }
    }
}



//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .items:not(.nav) {
        flex-direction: row;
        background: linear-gradient(180deg, transparent 0%, transparent @tab-item-height, @greyLight @tab-item-height, @greyLight 100%);
        .nav.item {
            // total height: @tab-item-height + @tab-item-border-width;
            height: @tab-item-height + @tab-item-border-width;
        }
        &.has-indicator {
            .indicator {
                transform: translateY(-3px);
                &:before{
                    width: 2px;
                    height: 13px;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
    }
}

@tab-item-height: 50px;

@tab-item-border-width: 3px;

.items:not(.nav) {

border-bottom: none 0;

display: flex;

.nav.item {

margin: 0;

display: flex;

> a,

&.current > strong {

padding: 0 @tab-item-height / 2.25;

position: relative;

display: flex;

align-items: center;

}

&.current > strong {

font-weight: 500;

&:hover {

color: @red;

}

&.has-indicator {

position: relative;

.indicator{

left: 0;

height: 3px;

position: absolute;

bottom: 0;

width: 0;

opacity: 0;

background: @red;

overflow: visible !important;

&:before{

content:"";

position: absolute;

bottom: 0;

background-color: @red;

}

// Mobile

// _____________________________________________

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

.items:not(.nav) {

flex-direction: column;

background: linear-gradient(90deg, @greyLight 0%, @greyLight @tab-item-border-width, transparent @tab-item-border-width, transparent 100%);

.nav.item {

height: @tab-item-height;

}

&.has-indicator {

.indicator {

&:before{

width: 13px;

height: 2px;

left: 0;

top: 50%;

transform: translateY(-50%) translateX(0);

}

// Desktop

// _____________________________________________

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

.items:not(.nav) {

flex-direction: row;

background: linear-gradient(180deg, transparent 0%, transparent @tab-item-height, @greyLight @tab-item-height, @greyLight 100%);

.nav.item {

// total height: @tab-item-height + @tab-item-border-width;

height: @tab-item-height + @tab-item-border-width;

}

&.has-indicator {

.indicator {

transform: translateY(-3px);

&:before{

width: 2px;

height: 13px;

left: 50%;

transform: translateX(-50%);

}

app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_info_links.xml et app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_guest_info_links.xml

<body>
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Html\Links" as="links" name="sales.order.info.links" before="-">
            <arguments>
                <argument name="css_class" xsi:type="string">items order-links has-indicator</argument>
            </arguments>

<body>

<argument name="css_class" xsi:type="string">items order-links has-indicator</argument>

</arguments>

[Javascript] Récupérer la largeur ou la hauteur d’un élément sans les padding, margin, bordure et scrollbar associés avec clientHeight, offsetHeight et parseFloat

24/11/2020 / admin

Sources:

Dégageage du padding avec `getComputedStyle`

Faire un console.log(computedStyle); vous donnera une liste de toutes les données récupérées via la méthode getComputedStyle et que vous pourrez exploiter ensuite.

var computedStyle = getComputedStyle(element);

elementHeight = element.clientHeight;  // height with padding
elementWidth = element.clientWidth;   // width with padding

elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

var computedStyle = getComputedStyle(element);

elementHeight = element.clientHeight; // height with padding

elementWidth = element.clientWidth; // width with padding

elementHeight -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);

elementWidth -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);

Dans la pratique:

Je veux récupérer la hauteur du contenu de l’élément de DOM .page-leftColumn sans le padding:

    let $leftColumn = document.querySelector('.page-leftColumn'),
        computedStyle = getComputedStyle($leftColumn),
        leftColumnHeight = $leftColumn.clientHeight - (parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom));
    // console.log(leftColumnHeight);

let $leftColumn = document.querySelector('.page-leftColumn'),

computedStyle = getComputedStyle($leftColumn),

leftColumnHeight = $leftColumn.clientHeight - (parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom));

// console.log(leftColumnHeight);

Tenir compte de la scrollbar

Voir aussi ici pour ce bout de code modifié pour tenir compte de la scrollbar:

var cs = getComputedStyle(element);

var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);
var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);

var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);
var borderY = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);

// Element width and height minus padding and border
elementWidth = element.offsetWidth - paddingX - borderX;
elementHeight = element.offsetHeight - paddingY - borderY;

var cs = getComputedStyle(element);

var paddingX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);

var paddingY = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom);

var borderX = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth);

var borderY = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth);

// Element width and height minus padding and border

elementWidth = element.offsetWidth - paddingX - borderX;

elementHeight = element.offsetHeight - paddingY - borderY;

[Magento 2] Etendre un mixin existant

26/10/2020 / admin

how to add methods to a javascript file by using mixins?. L’OP utilise un plug-in Amasty qui étend déjà du code standard via un mixin. Il souhaite ajouter des méthodes en étendant le mixin existant par un nouveau mixin.
Magento 2 DevDocs – JS Mixins

Etendre une extension de widget existante dans Magento 2 n’est pas possible. Il faut obligatoirement surcharger l’extension existante en déclarant l’extension initiale à false dans le fichier requirejs-config.js du module (pouvant être différent) qui contient la nouvelle extension:

var config = {
    config: {
        mixins: {
            'Magento_Checkout/js/view/shipping': {
                'Vendor_Module/js/new-widgetextension': true,
                'Vendor_Module/js/alreadyexisting-widgetextension': false
            }
        }
    }
};

var config = {

config: {

mixins: {

'Magento_Checkout/js/view/shipping': {

'Vendor_Module/js/new-widgetextension': true,

'Vendor_Module/js/alreadyexisting-widgetextension': false

}

};

Notes:

la bonne pratique consiste à placer les extensions de widgets dans des modules (app/code/...) plutôt que dans un thème.

[javascript] L’équivalent ES6/vanilla JS de la méthode .eq() de jQuery

28/08/2020 / admin

Source: Pure JS equivalent of Jquery eq().

La méthode .eq() de jQuery

$(".class1.class2").eq(0).text(1254);

1	$(".class1.class2").eq(0).text(1254);

La même chose en ES6/vanilla JS

document.querySelectorAll('.class1.class2')[0].textContent = 1254;
// ou
document.querySelectorAll('.class1.class2')[0].innerHTML = 1254;

document.querySelectorAll('.class1.class2')[0].textContent = 1254;

// ou

document.querySelectorAll('.class1.class2')[0].innerHTML = 1254;

[javascript] Corriger l’erreur « Uncaught TypeError: Cannot read property ‘getData’ of undefined » (ou ‘setData’) en déclarant un addEventListener correctement

26/08/2020 / admin

Source: Ondragstart Attribute doesn’t appear when created dynamically.

En essayant de convertir la génération d’un élément TD dans le DOM avec jQuery en code vanilla JS, je me suis heurté aux erreurs suivantes:

Uncaught TypeError: Cannot read property ‘getData’ of undefined
Uncaught TypeError: Cannot read property ‘setData’ of undefined

Le code jquery de départ:

$('<td id="' + i + '" title="' + i + '" class="is-cell" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"></td>').appendTo('#row_' + x);

1	$('<td id="' + i + '" title="' + i + '" class="is-cell" ondrop="drop_handler(event);" ondragover="dragover_handler(event);"></td>').appendTo('#row_' + x);

Version vanilla JS/ES6

On commence par créer l’élément TD:

let $cell = document.createElement('td');

1	let $cell = document.createElement('td');

Puis on lui assigne de multiples attributs (id, title, class) (source: Setting multiple attributes for an element at once with JavaScript):

Object.assign($cell, {
    id: i,
    title: i,
    className: "is-cell"
});

Object.assign($cell, {

id: i,

title: i,

className: "is-cell"

});

(pour n’ajouter qu’un seul attribut: $row.setAttribute("class", "is-row");)

Mais pour ajouter des attributs relatifs à des événements (ondrop, ondragover, …), il faut utiliser la méthode addEventListener:

// Ne fonctionne pas
$cell.addEventListener("drop", dragndrop.drop_handler(event));
$cell.addEventListener("dragover", dragndrop.dragover_handler(event));

// Ne fonctionne pas
$cell.ondrop = "drop_handler(event)";
$cell.ondragover = "dragover_handler(event)";

// Fonctionne
$cell.ondrop = dragndrop.drop_handler;
$cell.ondragover = dragndrop.dragover_handler;

// Fonctionne (et c'est une meilleure façon de déclarer)
$cell.addEventListener("drop", dragndrop.drop_handler);
$cell.addEventListener("dragover", dragndrop.dragover_handler);

// Ne fonctionne pas

$cell.addEventListener("drop", dragndrop.drop_handler(event));

$cell.addEventListener("dragover", dragndrop.dragover_handler(event));

// Ne fonctionne pas

$cell.ondrop = "drop_handler(event)";

$cell.ondragover = "dragover_handler(event)";

// Fonctionne

$cell.ondrop = dragndrop.drop_handler;

$cell.ondragover = dragndrop.dragover_handler;

// Fonctionne (et c'est une meilleure façon de déclarer)

$cell.addEventListener("drop", dragndrop.drop_handler);

$cell.addEventListener("dragover", dragndrop.dragover_handler);

Theme by Anders Norén — Up ↑

devfrontend.info

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

Articles récents

Catégories

Archives

Méta

Tagjavascript

[SEO] Obfuscation des liens pour le maillage interne

[Magento 2] Les bases et patterns de l’utilisation de javascript (AMD, requireJS, widget jQuery, plugin, module, x-magento-init, etc…)

Intégrer et exploiter dans Magento 2 un plugin jQuery tiers dont le code source est structuré selon le pattern AMD

Récupération du plugin sous Git et copie dans l’arborescence du thème

Déclaration du plugin en tant que module via RequireJS

Création d’un fichier d’initialisation d’une instance du plugin

Petite subtilité: ajouter une configuration spécifique par défaut à toutes les instances de votre plugin

Appeler et initialiser une instance du plugin sur un élément du DOM

Exemple de notation déclarative avec `x-magento-init` depuis un fichier PHTML

Même exemple avec ajout d’options

Ressources en ligne:

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

[javaScript] Quelques expressions régulières (Regex) utiles

[Magento 2] Afficher/masquer le bouton « Effacer tous les filtres » dans la liste des catégories/produits

[Magento 2] Etendre un composant JS natif

Etendre le composant UI Tabs pour ajouter un effet de bordure animée sous les onglets:

[Javascript] Récupérer la largeur ou la hauteur d’un élément sans les padding, margin, bordure et scrollbar associés avec clientHeight, offsetHeight et parseFloat

Dégageage du padding avec `getComputedStyle`

Dans la pratique:

Tenir compte de la scrollbar

[Magento 2] Etendre un mixin existant

[javascript] L’équivalent ES6/vanilla JS de la méthode .eq() de jQuery

La méthode .eq() de jQuery

La même chose en ES6/vanilla JS

[javascript] Corriger l’erreur « Uncaught TypeError: Cannot read property ‘getData’ of undefined » (ou ‘setData’) en déclarant un addEventListener correctement

Version vanilla JS/ES6

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

Articles récents

Catégories

Tags

Archives

Méta

Tagjavascript

Intégrer et exploiter dans Magento 2 un plugin jQuery tiers dont le code source est structuré selon le pattern AMD

Récupération du plugin sous Git et copie dans l’arborescence du thème

Déclaration du plugin en tant que module via RequireJS

Création d’un fichier d’initialisation d’une instance du plugin

Petite subtilité: ajouter une configuration spécifique par défaut à toutes les instances de votre plugin

Appeler et initialiser une instance du plugin sur un élément du DOM

Exemple de notation déclarative avec x-magento-init depuis un fichier PHTML

Même exemple avec ajout d’options

Ressources en ligne:

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!

Etendre le composant UI Tabs pour ajouter un effet de bordure animée sous les onglets:

Dégageage du padding avec getComputedStyle

Dans la pratique:

Tenir compte de la scrollbar

La méthode .eq() de jQuery

La même chose en ES6/vanilla JS

Version vanilla JS/ES6

Exemple de notation déclarative avec `x-magento-init` depuis un fichier PHTML

Dégageage du padding avec `getComputedStyle`