app/design/frontend/MyVendor/default/Vendor_Catalog/web/js/collection-slider.js
Note: ce plugin utilise un autre plugin jQuery, à savoir Sly.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
(function ($) { 'use strict'; $.fn.collectionSlider = function (params) { // Alias du plugin: "collectionSlider". return this.each(function () { // Utiliser each() au cas où le plugin doit s'initialiser plusieurs fois dans la page. let element = $(this), sliderClass = '.ow-slider', sly = {}, [...] timerReload = 0, timerHeight = 0; init(); // IMPORTANT: appeler la fonction d'init() à la racine du return! // Fonctions: function init() { [...] } function initScroller() { sly = new Sly(scrollerWrapper, { horizontal: 1, itemNav: 'basic', smart: 1, mouseDragging: 1, touchDragging: 1, releaseSwing: 1, swingSpeed: 0.2, activateMiddle: 1, activateOn: 'focus', scrollBy: 0, speed: 0, // elasticBounds: 1, easing: 'easeInOutQuint', scrollBar: scrollbar, prevPage: btnPrev, nextPage: btnNext, dragHandle: 1, dynamicHandle: 1 }); sly.on('load', function () { setTimeout(function () { sly.set('speed', 1500); }, 500); }); sly.init(); } // Autres fonctions à la suite... }); }; })(jQuery); |
Exemple avec des paramètres:
1 2 3 4 5 6 7 8 9 10 11 12 |
(function($) { 'use strict'; $.fn.initOwMod13 = function(params) { var options = $.extend({ flag: true, gridMode: false, mainProductSku: '', loadMoreMobile: false, }, params); return this.each(function () { |
app/design/frontend/MyVendor/default/Vendor_Catalog/requirejs-config.js
Importance de shim
pour déclarer les différentes dépendances du plugin.
1 2 3 4 5 6 7 8 9 10 |
var config = { paths: { collectionSlider: 'Reflet_Catalog/js/collection-slider' }, shim: { 'collectionSlider': { deps: ['jquery', 'mage/translate', 'sly', 'matchHeight'] } } }; |
app/code/Vendor/Catalog/view/frontend/templates/category/whatever.phtml
Ici, veiller à bien re-lister toutes les dépendances à votre plugin (jQuery, sly, …)!
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> require([ 'jquery', 'collectionSlider', 'sly' ], function ($) { 'use strict'; $('.ow-collection__content').collectionSlider(); }); </script> |
Exemple avec des paramètres:
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript"> require([ 'jquery', 'owMod13' ], function ($) { 'use strict'; $('#<?= $moduleId ?>').initOwMod13({flag: true, gridMode:false, mainProductSku: '<?= $defaultSku; ?>'}); }); </script> |