js – devfrontend.info

Tagjs

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

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

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

04/06/2020 / admin

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

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

[Magento 2] Comment inclure et utiliser un fichier JS custom avec requireJS

29/10/2019 / admin

Source: How to include and use custom js file with require js in magento2.

Source: Four Ways to Add JavaScript to Magento 2.

En-dehors d’un thème, en créant un module

Se référer à la documentation officielle de Magento 2 pour voir comment créer un nouveau module. Dans mon exemple, le vendor s’appelle Naked et le module s’appelle HelloWorld.

Dans app/code/Naked/HelloWorld/ créer une arborescence de dossiers et les trois fichiers suivants:

view/frontend/requirejs-config.js
view/frontend/web/js/hello-world.js
view/frontend/web/js/methods.js

view/frontend/requirejs-config.js

var config = {

    // You can also set the map property and define the prefixes for various modules.
    // In future, we can use these prefixes to connect the required JS modules in other modules.
    map: {
        '*': {
            helloWorld: 'Naked_HelloWorld/js/hello-world',
            methods: 'Naked_HelloWorld/js/methods',
        }
    },

    // 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: [
        'Naked_HelloWorld/js/hello-world',
    ]
};

var config = {

// You can also set the map property and define the prefixes for various modules.

// In future, we can use these prefixes to connect the required JS modules in other modules.

map: {

'*': {

helloWorld: 'Naked_HelloWorld/js/hello-world',

methods: 'Naked_HelloWorld/js/methods',

}

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

'Naked_HelloWorld/js/hello-world',

]

};

Les scripts déclarés sous la variable deps vont fonctionner immédiatement et sur toutes les pages du site. Inutile d’initialiser quoi que ce soit dans un fichier *.phtml.

view/frontend/web/js/hello-world.js

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

    console.log('hello world!');

    $('a.logo').on('click', function(e){
        e.preventDefault();
        methods.showAlert('Logo clicked!');
    });
});

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

"use strict";

console.log('hello world!');

$('a.logo').on('click', function(e){

e.preventDefault();

methods.showAlert('Logo clicked!');

});

view/frontend/web/js/methods.js

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

    var methods = {};

    methods.showAlert = function(arg) {
        alert(arg);
    }

    return methods;

});

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

var methods = {};

methods.showAlert = function(arg) {

alert(arg);

}

return methods;

});

[javascript] Importer des breakpoints CSS

17/10/2019 / admin

Article de lullabot.com: Importing CSS Breakpoints Into JavaScript. Demo Codepen.

Version PDF pour la postérité.

Animation CSS et JS, ressources en ligne, astuces, bonnes pratiques

17/01/2018 / admin

ANIMISTA IS A PLACE WHERE YOU CAN PLAY WITH A COLLECTION OF PRE-MADE CSS ANIMATIONS, TWEAK THEM AND GET ONLY THOSE YOU WILL ACTUALLY USE.
Animate.css – A cross-browser library of CSS animations. As easy to use as an easy thing.
Motion UI – A Sass library for creating flexible CSS transitions and animations.

[Drupal 7] Les différentes techniques pour ajouter/supprimer des ressources CSS/JS

06/07/2017 / admin

Ressources généralistes sur le sujet :

Drupal 7: Taking control of CSS and JS aggregation

Supprimer les CSS Core :

Peut se faire par le biais du hook_css_alter via le fichier template.php du thème.

Attention: dans le cas ou certaines CSS sont déclarées comme étant des dépendances du module contrib, il ne faut pas déclarer le module contrib mais ce qui semblent être des sous-modules… (en commentaires dans l’exemple ci-dessous, les déclarations qui ne fonctionnent pas) :

    // unset($css[drupal_get_path('module', 'contrib').'/date/date_api/date.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/date/date_popup/themes/datepicker.1.7.css']);
    unset($css[drupal_get_path('module', 'date').'/date_api/date.css']);
    unset($css[drupal_get_path('module', 'date').'/date_popup/themes/datepicker.1.7.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/logintoboggan/logintoboggan.css']);
    unset($css[drupal_get_path('module', 'logintoboggan').'/logintoboggan.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/css/views.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/css/ckeditor.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/media/modules/media_wysiwyg/css/media_wysiwyg.base.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/admin_menu/admin_menu.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/admin_menu/admin_menu.uid1.css']);
    unset($css[drupal_get_path('module', 'views').'/css/views.css']);
    unset($css[drupal_get_path('module', 'ckeditor').'/css/ckeditor.css']);
    unset($css[drupal_get_path('module', 'media_wysiwyg').'/css/media_wysiwyg.base.css']);
    unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.css']);
    unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.uid1.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/css/ctools.css']);
    unset($css[drupal_get_path('module', 'ctools').'/css/ctools.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/adminimal_admin_menu/adminimal_admin_menu.css']);
    // unset($css[drupal_get_path('module', 'contrib').'/adminimal_admin_menu/js/slicknav/slicknav.css']);
    unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/adminimal_admin_menu.css']);
    unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/js/slicknav/slicknav.css']);

// unset($css[drupal_get_path('module', 'contrib').'/date/date_api/date.css']);

// unset($css[drupal_get_path('module', 'contrib').'/date/date_popup/themes/datepicker.1.7.css']);

unset($css[drupal_get_path('module', 'date').'/date_api/date.css']);

unset($css[drupal_get_path('module', 'date').'/date_popup/themes/datepicker.1.7.css']);

// unset($css[drupal_get_path('module', 'contrib').'/logintoboggan/logintoboggan.css']);

unset($css[drupal_get_path('module', 'logintoboggan').'/logintoboggan.css']);

// unset($css[drupal_get_path('module', 'contrib').'/css/views.css']);

// unset($css[drupal_get_path('module', 'contrib').'/css/ckeditor.css']);

// unset($css[drupal_get_path('module', 'contrib').'/media/modules/media_wysiwyg/css/media_wysiwyg.base.css']);

// unset($css[drupal_get_path('module', 'contrib').'/admin_menu/admin_menu.css']);

// unset($css[drupal_get_path('module', 'contrib').'/admin_menu/admin_menu.uid1.css']);

unset($css[drupal_get_path('module', 'views').'/css/views.css']);

unset($css[drupal_get_path('module', 'ckeditor').'/css/ckeditor.css']);

unset($css[drupal_get_path('module', 'media_wysiwyg').'/css/media_wysiwyg.base.css']);

unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.css']);

unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.uid1.css']);

// unset($css[drupal_get_path('module', 'contrib').'/css/ctools.css']);

unset($css[drupal_get_path('module', 'ctools').'/css/ctools.css']);

// unset($css[drupal_get_path('module', 'contrib').'/adminimal_admin_menu/adminimal_admin_menu.css']);

// unset($css[drupal_get_path('module', 'contrib').'/adminimal_admin_menu/js/slicknav/slicknav.css']);

unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/adminimal_admin_menu.css']);

unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/js/slicknav/slicknav.css']);

…ce qui nous donne au propre :

function my_theme_css_alter(&$css)
{
    /**
    * Drupal Tutorial: Remove System CSS and JS files
    * https://www.jnorton.co.uk/drupal-tutorial-remove-system-css-js-files
    */
    unset($css[drupal_get_path('module', 'system').'/system.base.css']);
    unset($css[drupal_get_path('module', 'system').'/system.menus.css']);
    unset($css[drupal_get_path('module', 'system').'/system.messages.css']);
    unset($css[drupal_get_path('module', 'system').'/system.theme.css']);
    
    unset($css[drupal_get_path('module', 'contextual').'/contextual.css']);

    unset($css[drupal_get_path('module', 'comment').'/comment.css']);
    unset($css[drupal_get_path('module', 'date').'/date_api/date.css']);
    unset($css[drupal_get_path('module', 'date').'/date_popup/themes/datepicker.1.7.css']);
    unset($css[drupal_get_path('module', 'field').'/theme/field.css']);
    unset($css[drupal_get_path('module', 'logintoboggan').'/logintoboggan.css']);
    unset($css[drupal_get_path('module', 'node').'/node.css']);
    unset($css[drupal_get_path('module', 'search').'/search.css']);
    unset($css[drupal_get_path('module', 'user').'/user.css']);
    unset($css[drupal_get_path('module', 'views').'/css/views.css']);
    unset($css[drupal_get_path('module', 'ckeditor').'/css/ckeditor.css']);
    unset($css[drupal_get_path('module', 'media_wysiwyg').'/css/media_wysiwyg.base.css']);
    unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.css']);
    unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.uid1.css']);

    unset($css[drupal_get_path('module', 'ctools').'/css/ctools.css']);
    unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/adminimal_admin_menu.css']);
    unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/js/slicknav/slicknav.css']);
}

function my_theme_css_alter(&$css)

{

/**

* Drupal Tutorial: Remove System CSS and JS files

* https://www.jnorton.co.uk/drupal-tutorial-remove-system-css-js-files

unset($css[drupal_get_path('module', 'system').'/system.base.css']);

unset($css[drupal_get_path('module', 'system').'/system.menus.css']);

unset($css[drupal_get_path('module', 'system').'/system.messages.css']);

unset($css[drupal_get_path('module', 'system').'/system.theme.css']);

unset($css[drupal_get_path('module', 'contextual').'/contextual.css']);

unset($css[drupal_get_path('module', 'comment').'/comment.css']);

unset($css[drupal_get_path('module', 'date').'/date_api/date.css']);

unset($css[drupal_get_path('module', 'date').'/date_popup/themes/datepicker.1.7.css']);

unset($css[drupal_get_path('module', 'field').'/theme/field.css']);

unset($css[drupal_get_path('module', 'logintoboggan').'/logintoboggan.css']);

unset($css[drupal_get_path('module', 'node').'/node.css']);

unset($css[drupal_get_path('module', 'search').'/search.css']);

unset($css[drupal_get_path('module', 'user').'/user.css']);