3

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

2 Answers 2

1

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.

0
-2

You can check this solution, I implemented it for own project. https://drive.google.com/open?id=0B0RPgoCrwp8tdTZnSzJZdC1QWkE

and template example

<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
            SLIDE 1
        </div>

        <div class="swiper-slide">
            SLIDE 2
        </div>

        <div class="swiper-slide">
            SLIDE 3
        </div>
    </div>
    <div class="swiper-pagination"></div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

<script type="text/x-magento-init">
     {
         ".swiper-container": {
             "IdangerousSwiper": {
                "nextButton": ".swiper-button-next",
                "prevButton": ".swiper-button-prev",
                "pagination": ".swiper-pagination"
             }
         }
     }
 </script>
2
  • Link is not working, answer is useless without it.
    – Asitis
    Sep 3, 2019 at 16:12
  • Please check my answer
    – Gabriela
    Nov 17, 2019 at 1:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.