2

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

0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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