Magento 2 – How to Implement Swiper Plugin

javascriptjquerymagento2pluginrequirejs

I'm trying to convert html template to Magento 2.1.3. I started my conversion using blank-sass from Snowdog. Some CSS was sucessfully implemented but I can't figure out many points. One of them is how to implement Idangero.us Swiper to show some promotions in frontend.

Here is what I did:

I created a swiper.phtml file in /Magento_Theme/templates

He is how it looks like: 

<my_theme_root>/Magento_Theme/templates/swiper.phtml
------------
<section id="home" class="home section image-slider">
   <div class= "home-slider text-center swiper-container-horizontal">
     <!-- Additional required wrapper -->
       <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px)$
         <!-- Slides -->
         <div class="swiper-slide swiper-slide-active" (...)
         <img src='<?php echo $this->getViewFileUrl('images/slider/slide1.jp
         </div>
         <div class="swiper-slide swiper-slide-active" (...) same as above for slide 2
         </div>
      </div>
      <!-- If we need pagination -->
      <div class="swiper-pagination"></div>

      <!-- If we need navigation buttons -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

       <!-- If we need scrollbar -->
      <div class="swiper-scrollbar"></div>                           
</div>
</section>

<script>
    require([
        'js/main.js',
        ‘js/vendor',
    ], function ($) {
        jQuery(document).ready(function () {
          var swiper = new Swiper ('.home.slider', {
              pagination: '.home-pagination',
              paginationClickable: true,
              nextButton: '.home-slider-next',
              prevButton: '.home-slider-prev'
            });
        });
</script>
---------------

I also provided a requirejs-config.js in the root of my theme:

/requirejs-config-js

He is how it looks like:

-----------------
var config = {

    deps:[
      "js/main",
    ],
    paths: {
        "home-slider": {
            “swiper”:            "Magento_Theme/js/vendor”,
        }
    },
    shim: {
        'home-slider': {
            deps: ['jquery']
        }
    }
};
-----------------

I edited main.js in my web/js/main.js like this:

require(['jquery', 'home-slider'],function($){
    $(document).ready(function() {
        $("after.body.starts").addClass("home.slider").Swiper({items: 1});
    });
})
------------------

Inside default.xml I placed this code:

--------------
<referenceContainer name="home.slider">
            <block class="Magento\Framework\View\Element\Template" name="swiper.js" template="Magento_Theme::swiper.phtml" />
      </referenceContainer>
------------------

And in 1column.xml inside Magento_Theme/page_layout/1column.xml I wrote:

--------------------
<?xml version="1.0"?>

<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Mag$
    <update handle="empty"/>
    <referenceContainer name="page.wrapper">
        <container name="header.container" as="header_container" label="Page Header Container"  htmlTag="header" htmlClass="page-h$
        <container name="page.top" as="page_top" label="After Page Header" after="header.container"/>
        <container name="home.slider" as="Swiper" label="Slider box container" after="page.top" htmlTag="div" htmlClass="home-slid$
        <container name="footer-container" as="footer" before="before.body.end" label="Page Footer Container" htmlTag="footer" htm$
    </referenceContainer>

</layout>
------------------

In web/js I have main.js and vendor folder containing:

bootstrap.js      
jquery-1.11.2.min.js  
jquery.countdown.min.js  
jquery.inview.js  
swiper.min.js
bootstrap.min.js  
jquery.countdown.js   
jquery.countTo.js        
swiper.js         
wow.js

I aditionally checked pub/static/frontend/vendor/theme/en_US and my struture there is as follow:

Magento_modules
jquery
js
images
fonts
web

In web folder, I can only find css folder. My js are in the root of en_US folder.

I don't know what I'm possibly doing wrong. I used gulp deploy to deploy the theme after adding all the files in source folder as instructions on blank-sass.

If someone can help me to achieve that, I read the documents about requirejs but I'm not sure I totally understand it.

Thank you,
Gabriela

Best Answer

I found a better way. It is as described bellow.

First create a module. I assume you know how to create a basic module. Then in vendor/module/view/frontend create requirejs-config.js with following code:

 var config = {
    "map": {
        "*": {

            "swiper": "Vendor_Module/js/swiper",
            "swiper_init": "Vendor_Module/js/swiper_init"


        }
    },
    "shim":{

        "Vendor_Module/js/swiper": ["jquery"]
    }
};

Then place swiper.js and swiper_init.js in vendor/module/view/frontend/web/js

Swiper.js is the file you downloaded from Swiper repository and in swiper_init.js place following code:

define([
    "jquery",
    "Vendor_Module/js/swiper"

], function($, Swiper){

     $.widget('vendor.module',{
     options: {


      },

     _create:function(config, element){
     //this.enableSwiper(false);

     var widget = this,
     options = this.getOptions(),
     swiper = new Swiper(this.element, options);


     swiper.init();

     },

    getOptions: function(){
        return this.options; 
     },

     });
    return $.vendor.module;
});

After that, add required classes to you phtml file

 <div class="swiper-container" data-mage-init='{"swiper_init":{
            "direction": "horizontal",
              "slidesPerView": 4, 
              "spaceBetween": 40,
              "centeredSlides": true,
              "centeredSlidesBounds": true,
            "breakpoints":{"375":{"slidesPerView":1},"768":{"slidesPerView":2},"1024":{"slidesPerView":1}}
            }
         }'
 <div class="product-items swiper-wrapper"> 
   <div class="product-item-info swiper-slide>
     .....your code to get products/images etc ......
   </div>
   </div>
</div>

Save everything and setup:upgrade and all relevant Magento2 commands

You can also use it in any of your products widgets phtml files by declaring 

<script type="text/x-magento-init">
{
    "#swiper-container": {
        "swiper_init": :{
                "direction": "horizontal",
                  "slidesPerView": 4, 
                  "spaceBetween": 40,
                  "centeredSlides": true,
                  "centeredSlidesBounds": true,
                "breakpoints":{"375":{"slidesPerView":1},"768":{"slidesPerView":2},"1024":{"slidesPerView":1}}
                }
             }
    }

}
</script>

Hope this help everyone. The best thing about this method is that it doens't use inline javascript. Also don't forget to create a default.xml file in layout folder to declare swipper.css. Most relevant code you can find in nolimitsforweb repository in Github.

Related Topic