Étiquette : carousel

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

[jQuery] Un carousel avec visuel en pleine page avec n’importe quel plug-in

16/08/2017 / admin

Le but de ce billet n’est pas de donner une solution toute faite mais plutôt une méthode pour étendre rapidement et efficacement les fonctionnalités de n’importe que plug-in jQuery de slider.

HTML

On crée un container dans lequel on place une balise <img> aux attributs non renseignés. Cette balise va servir à accueillir l’image « en cours ».

<!-- Full-page carousel -->
<div id="fullPageCarousel" class="full-page-carousel is-image">
    <img src="" alt="" />
</div>

</div>

jQuery avec la méthode Bind et l’événement DOMSubtreeModified

On crée une fonction qui surveille en temps réel quelle image du carousel est affichée (celle qui possède la plupart du temps une classe .current) et on stocke son URL dans une variable. On assigne ensuite le contenu de cette variable à l’attribut src de notre image en haut de page.

On exécute la fonction au chargement de la page, puis à chaque fois que le DOM relatif au carousel évolue (passage d’une slide à l’autre).

/*
 * full page Carousel
 */
// Use 'default' view of slick carousel
function switchImg(){
  var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-current img').attr('src');
  $('#fullPageCarousel img').attr('src', '').attr('src', getActiveImgURL);
}
switchImg();
$('#block-views-home-slider-block').bind('DOMSubtreeModified', switchImg);

* full page Carousel

// Use 'default' view of slick carousel

function switchImg(){

var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-current img').attr('src');

$('#fullPageCarousel img').attr('src', '').attr('src', getActiveImgURL);

}

switchImg();

$('#block-views-home-slider-block').bind('DOMSubtreeModified', switchImg);

Cas du Slick Carousel (Drupal 7)

Utiliser la méthode .bind() sur l’événement DOMSubtreeModified ne fonctionne pas dans le cas où un changement de slide utilise plusieurs événements. (En réalité,
ça fonctionne, mais le console.log() imprime plusieurs fois l’URL récupérée).

    /*
     * full page Carousel
     */
    // Use 'default' view of slick carousel
    function switchImg(slideIndex){
      if($('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' img').length > 0){
        var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' img').first().attr('src');
        $('#fullPageCarousel img').attr('src', '').attr('src', getActiveImgURL);
      }
    }
    switchImg(0);
    jQuery(document).on('beforeChange', '#slick-views-home-slider-1-slider', function (event, slick, currentSlide, nextSlide) {
      switchImg(nextSlide);
    });

* full page Carousel

// Use 'default' view of slick carousel

function switchImg(slideIndex){

if($('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' img').length > 0){

var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' img').first().attr('src');

$('#fullPageCarousel img').attr('src', '').attr('src', getActiveImgURL);

}

switchImg(0);

jQuery(document).on('beforeChange', '#slick-views-home-slider-1-slider', function (event, slick, currentSlide, nextSlide) {

switchImg(nextSlide);

});

SCSS

On masque les images par défaut du carousel. On met en place quelques styles pour afficher les visuels en pleine page et pour les caler en haut de la fenêtre.

//
// full page carousel
#block-views-home-slider-block {
  img {
    display: none;
  }
}
.full-page-carousel {
  &.is-image {
    img {
      position: absolute;
      z-index: -1;
      top: 0;
    }
  }
}

// full page carousel

#block-views-home-slider-block {

img {

display: none;

}

.full-page-carousel {

&.is-image {

img {

position: absolute;

z-index: -1;

top: 0;

}

Une alternative où l’image est placée en background-image de l’élément body

    /*
     * full page Carousel
     */
    // Use 'default' view of slick carousel
    function switchImg(slideIndex){
      if($('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' .views-field-field-image img').length > 0){
        var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' .views-field-field-image img').first().attr('src');
        $('body')
          .attr('style', '')
          .css({
            'background-image': 'url("'+ getActiveImgURL +'")',
            'background-position': 'top center',
            'background-repeat': 'no-repeat'
          });
      }
    }
    switchImg(0);
    jQuery(document).on('beforeChange', '#slick-views-home-slider-1-slider', function (event, slick, currentSlide, nextSlide) {
      switchImg(nextSlide);
    });

* full page Carousel

// Use 'default' view of slick carousel

function switchImg(slideIndex){

if($('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' .views-field-field-image img').length > 0){

var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' .views-field-field-image img').first().attr('src');

$('body')

.attr('style', '')

.css({

'background-image': 'url("'+ getActiveImgURL +'")',

'background-position': 'top center',

'background-repeat': 'no-repeat'

});

}

switchImg(0);

jQuery(document).on('beforeChange', '#slick-views-home-slider-1-slider', function (event, slick, currentSlide, nextSlide) {

switchImg(nextSlide);

});

[Magento 1.x] Un slider multi-produits responsive avec le plugin jQuery Cycle (fourni avec le thème Rwd)

03/03/2017 / admin

Source : http://jsfiddle.net/kRs2N/6/ et mon fork avec des marges entre les slides http://jsfiddle.net/frontenddeveloper/L3bpavzc/1/.

HTML

<ul class="slideshow">
    <li><img alt="" src="http://malsup.github.io/images/beach1.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach2.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach3.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach4.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong> </div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach5.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach6.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach7.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
    <li><img alt="" src="http://malsup.github.io/images/beach8.jpg" />
    <div class="caption">Head 1<br />
    <strong>Sub 1</strong></div>
    </li>
</ul>
<div class="prevnext"> <a href="#" id="prev4" class="skew-backward">PREV</a> <a href="#" id="next4" class="skew-forward">NEXT</a> </div>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</li>

</ul>

CSS

/* Slider */

ul.slideshow {
  overflow: hidden;
    margin:0;
    padding:0;
    list-style-type:none;
    margin-bottom:-80px;
    margin-left: -10px;
    margin-right: -10px;
    }
li.cycle-slide
{
     text-align:center;
     position:relative;
     text-align:center;
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
}
.cycle-slide div
{
    bottom:100px;
    color:#FFF;
    position:relative;
    left:0; right:0;
    font-size:24px;
    font-weight:300;
    text-transform:uppercase;
}
.cycle-slide div strong
{
    font-weight:700;
}
.cycle-slide img
{
    width: 100%; 
}
.slider {
    position:relative;
}
.prevnext
{
    position:absolute;
    top:50%;
    width:100%;
    margin-top:-90px;
}
#prev4
{ 
    position:absolute;
    left:40px;
    background-image:url(../images/prev.png);
    width:70px;
    height:140px;
}
#next4
{
    position:absolute;
    right:0;
    background-image:url(../images/next.png);
    width:70px;
    height:140px;
}

/* Slider */

ul.slideshow {

overflow: hidden;

margin:0;

padding:0;

list-style-type:none;

margin-bottom:-80px;

margin-left: -10px;

margin-right: -10px;

}

li.cycle-slide

{

text-align:center;

position:relative;

text-align:center;

border-left: 10px solid transparent;

border-right: 10px solid transparent;

}

.cycle-slide div

{

bottom:100px;

color:#FFF;

position:relative;

left:0; right:0;

font-size:24px;

font-weight:300;

text-transform:uppercase;

}

.cycle-slide div strong

{

font-weight:700;

}

.cycle-slide img

{

width: 100%;

}

.slider {

position:relative;

}

.prevnext

{

position:absolute;

top:50%;

width:100%;

margin-top:-90px;

}

#prev4

{

position:absolute;

left:40px;

background-image:url(../images/prev.png);

width:70px;

height:140px;

}

#next4

{

position:absolute;

right:0;

background-image:url(../images/next.png);

width:70px;

height:140px;

}

jQuery

function buildCarousel(visibleSlides) {
    $('.slideshow').cycle({
        fx: 'carousel',
        speed: 600,
        slides: 'li',
        carouselVisible: visibleSlides,
        carouselFluid: true,
        swipe:true,
        swipefx:'scrollHorz',
        next: '#next4',
        prev: '#prev4',
        pager: '#gallery-chooser ul',
    });
    $('.slideshow li img').css('opacity','1');
}


function initCycle() {
    var width = $(document).width();
    var visibleSlides = 4;
    
    if ( width < 400 ) {visibleSlides = 1}
    else if(width < 700) {visibleSlides = 2}
    else if(width < 1024) {visibleSlides = 3}
    else if(width < 1400) {visibleSlides = 4}
    else {visibleSlides = 5};

    buildCarousel(visibleSlides);
}

function reinit_cycle() {
    var width = $(window).width();
    
    
    var destroyCarousel = function() { 
        $('.slideshow').cycle('destroy');
    }

    if (width < 400) {
        destroyCarousel(); // call the function
        reinitCycle(1);
    } else if (width > 400 && width < 700) {
        destroyCarousel();
        reinitCycle(2);
    } else if (width > 700 && width < 1024) {
        destroyCarousel();
        reinitCycle(3);
        } else if (width > 1024 && width < 1400) {
        destroyCarousel();
        reinitCycle(4);
    } else {
        destroyCarousel();
        reinitCycle(5);
    }
}

function reinitCycle(visibleSlides) {
    buildCarousel(visibleSlides);
}
var reinitTimer;
$(window).resize(function() {
    clearTimeout(reinitTimer);
    reinitTimer = setTimeout(reinit_cycle, 100);
});

$(document).ready(function(){
    initCycle();    
});

function buildCarousel(visibleSlides) {

$('.slideshow').cycle({

fx: 'carousel',

speed: 600,

slides: 'li',

carouselVisible: visibleSlides,

carouselFluid: true,

swipe:true,

swipefx:'scrollHorz',

next: '#next4',

prev: '#prev4',

pager: '#gallery-chooser ul',

});

$('.slideshow li img').css('opacity','1');

}

function initCycle() {

var width = $(document).width();

var visibleSlides = 4;

if ( width < 400 ) {visibleSlides = 1}

else if(width < 700) {visibleSlides = 2}

else if(width < 1024) {visibleSlides = 3}

else if(width < 1400) {visibleSlides = 4}

else {visibleSlides = 5};

buildCarousel(visibleSlides);

}

function reinit_cycle() {

var width = $(window).width();

var destroyCarousel = function() {

$('.slideshow').cycle('destroy');

}

if (width < 400) {

destroyCarousel(); // call the function

reinitCycle(1);

} else if (width > 400 && width < 700) {

destroyCarousel();

reinitCycle(2);

} else if (width > 700 && width < 1024) {

destroyCarousel();

reinitCycle(3);

} else if (width > 1024 && width < 1400) {

destroyCarousel();

reinitCycle(4);

} else {

destroyCarousel();

reinitCycle(5);

}

function reinitCycle(visibleSlides) {

buildCarousel(visibleSlides);

}

var reinitTimer;

$(window).resize(function() {

clearTimeout(reinitTimer);

reinitTimer = setTimeout(reinit_cycle, 100);

});

$(document).ready(function(){

initCycle();

});

Articles récents

Catégories

Archives

Méta

Étiquette : carousel

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

[jQuery] Un carousel avec visuel en pleine page avec n’importe quel plug-in

HTML

jQuery avec la méthode Bind et l’événement DOMSubtreeModified

Cas du Slick Carousel (Drupal 7)

SCSS

Une alternative où l’image est placée en background-image de l’élément body

[Magento 1.x] Un slider multi-produits responsive avec le plugin jQuery Cycle (fourni avec le thème Rwd)

HTML

CSS

jQuery

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:

HTML

jQuery avec la méthode Bind et l’événement DOMSubtreeModified

Cas du Slick Carousel (Drupal 7)

SCSS

Une alternative où l’image est placée en background-image de l’élément body

HTML

CSS

jQuery

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