Cum instalez plugin-uri și biblioteci terțe pentru frontend în Magento 2?

Bibliotecile JS/CSS terțe (ex. un plugin de modal precum remodal) se integrează în Magento 2 prin RequireJS. Iată pașii principali.

1. Adaugă fișierele bibliotecii în temă

Plasează fișierele JS și CSS ale pluginului în directoarele temei, într-un folder vendor separat, pentru a nu le amesteca cu fișierele proprii:

<theme>/web/js/vendor/<plugin>.js
<theme>/web/css/vendor/<plugin>/...

Dacă folosești LESS/SASS, importă stilurile în fișierul principal de stiluri:

@import 'vendor/remodal/remodal';

2. Înregistrează biblioteca în RequireJS

În requirejs-config.js (în rădăcina temei sau modulului), mapează aliasul la calea fișierului:

var config = {
    map: {
        '*': {
            remodal: 'js/vendor/remodal'
        }
    }
};

3. Inițializează pluginul

Într-un fișier JS al modulului/temei, cere dependența și inițializeaz-o:

require(['jquery', 'remodal'], function ($) {
    $(function () {
        $('[data-remodal-id=modal]').remodal();
    });
});

În modul developer, golește pub/static și var/view_preprocessed pentru ca noua configurație RequireJS să fie preluată.