Bagaimana cara memanggil Owl Slider di Magento2

11

Jika kita ingin menambahkan Owl Slider di Magento 1.X maka kita ikuti langkah-langkah di bawah ini.

  1. Copy owl.carousel.min.jsdan owl.carousel.jspaste ke dalamskin/frontend/pakage_name/theme_name/js
  2. Salin owl.carousel.cssdan tempel keskin/frontend/pakage_name/theme_name/css
  3. Goto app/design/frontend/pakage_name/theme_name/layout/page.xmldan panggil js dan css

Dan kita dapat menggunakan Owl Slider di mana saja di situs Magento 1.X.

Jadi di Magento 2 bagaimana kita bisa memanggil slider Owl dan itu harus memanggil mana-mana di situs jadi saya bisa menggunakan kapan saja saya mau.

Untuk masalah saya ini, saya telah merujuk tautan ini tetapi tidak sesuai standar dan tidak berfungsi.

Saat ini saya telah menempatkan slider Owl js di app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/jstetapi tidak berfungsi.

Bantuan apa pun akan dihargai.

javascript  theme  magento-2.0.7  slider 
— Dhaval
sumber
2
Kami juga dapat mengikuti panduan ini: boolfly.com/magento-2-slider-with-owl-carousel
— Khoa TruongDinh

Jawaban:

11

Anda harus membuat satu requirejs-config.jsfile di dalam tema Anda seperti,

Pertama Tambahkan file owlcarousel.js di dalam,

app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/js

Tambahkan css Anda di dalam,

app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/css

panggil css di dalam file tempalte Anda menggunakan,

<link rel="stylesheet" type="text/css" href="<?php echo $block->getViewFileUrl('Magento_Catalog::css/owlcarousel.css')?>">

atau panggil css di dalam file tata letak (praktik terbaik), tergantung pada kebutuhan Anda:

  • seluruh situs : default.xmlmisalnyaapp/design/frontend/pakage_name/theme_name/Magento_Catalog/layout/default.xml
  • Home page :cms_index_index.xml
<page ...>
<head>
     <css src="Magento_Catalog::css/owlcarousel.css"/>
</head>
<body>...</body> </page>

Sekarang buat file requireejs-config.js

Magento_Catalog/requirejs-config.js

Tentukan slider Anda,

var config = {
    paths: {            
            'owlcarousel': "Magento_Catalog/js/owlcarousel"
        },   
    shim: {
        'owlcarousel': {
            deps: ['jquery']
        }
    }
};

Sekarang Anda dapat menggunakan owlcarousel di bawah file phtml apa pun,

<div id="owlslider" class="products list items product-items">
   <ul>
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>       
  </ul>
</div>
    <script>
    (function  () {
        require(["jquery","owlcarousel"],function($) {
            $(document).ready(function() {
                $("#owlslider").owlCarousel({
                    navigation : true, // Show next and prev buttons
                    autoPlay: false, //Set AutoPlay to 3 seconds 
                    items : 5
                });
            });
        });
    })();
    </script>

Hapus pub / konten folder statis dan jalankan php bin/magento setup:static-content:deployperintah.

— Rakesh Jesadiya
sumber
tetapi di mana saya bisa menambahkan css? dan saya perlu menambahkan css di file require.js ??
— Dhaval
Anda tidak dapat menambahkan css ke file require.js
— Rakesh Jesadiya
Saya memiliki 3 file slider burung hantu owl.carousel.css , owl.carousel.js , owl.carousel.min dan perlu menambahkan ini semua file sehingga di mana saya dapat menambahkan dan memanggil semua file ini sehingga saya dapat menggunakan seluruh situs magento di mana pun saya ingin?
— Dhaval
app / design / frontend / pakage_name / theme_name / Magento_Catalog / web / css
— Rakesh Jesadiya
saya punya updatead jawab tlg cek
— Rakesh Jesadiya
9

pertama Anda harus meletakkan slider,

Langkah 1 themename/themename/Magento_Theme/web/js/owl.carousel.js

Langkah 2 Lakukan pemetaan untuk file dalam nama file / nama file / Magento_Theme / requireejs-config.js

/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

var config = {
    map: {
        '*': {


            owlcarouselslider:        'Magento_Theme/js/owl.carousel'

        }
    }
};

Langkah 3 : Saya telah menggunakan file bestseller seperti di bawah ini di mana Anda perlu memasukkan pemetaan slider, namafile / namafile / Magento_Catalog / templates / produk / bestseller_list.phtml:

<script>

    require([
        'jquery',
        'owlcarouselslider'
        ], function () {
            'use strict';
            jQuery.noConflict();
                jQuery("#best-seller-carousel").owlCarousel({
                autoPlay: 3000, //3000 Set AutoPlay to 3 seconds
                margin:5,
                items : 5,
                itemsDesktop : [1199,5],
                itemsDesktopSmall : [979,5],
                itemsTablet : [768,5],
                navigation : true,
                pagination : false
          });
    });
</script>

Step4 : Untuk struktur itu harus seperti di bawah ini,

<div id="demo">
<div id="best-seller-carousel">
    <div class="item"><h1>1</h1></div>
    <div class="item"><h1>2</h1></div>
    <div class="item"><h1>3</h1></div>
    <div class="item"><h1>4</h1></div>
    <div class="item"><h1>5</h1></div>
    <div class="item"><h1>6</h1></div>
    <div class="item"><h1>7</h1></div>
    <div class="item"><h1>8</h1></div>
</div>
</div>


Anda juga dapat mengunjungi lebih banyak tautan @ http://cookie-code.net/magento-2/using-requirejs-in-magento-2-implementing-owl-slider/
http://cookie-code.net/magento-2 / using-requireejs-in-magento-2-implement-owl-slider /

— Rushvi
sumber
Kapan saja. Senang mengetahui itu bekerja untuk Anda :)
— Rushvi
Apakah Anda dari ahmedabad?
— Dhaval
Saya telah memanggil jsl owl slider di requireejs-config.js tetapi js saya tidak muncul di frontend. Apakah kamu punya ide?
— Dhaval
@watson Hapus konten pub / folder statis dan jalankan setup php bin / magento: static-content: deploy command.
— Rushvi
Saya melakukannya berkali-kali tetapi tidak berhasil.
— Dhaval
4

Jika Anda ingin menambahkan owl carouseldi Magento 2jalan, Anda harus mengikuti langkah-langkah ini.

  1. Salin owl.carousel.jske app/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/.

  2. Tambahkan requirejsmodul Anda app/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js.

    define([
    'jquery',
    'owlCarousel'
], function($) {
    return function(config, element) {
        $(element).owlCarousel(config);
    };
});

  3. Tambahkan requirejsconfig ke app/design/frontend/<pakage_name>/<theme_name>/requirejs-config.js.

    var config = {
    map: {
        '*': {
            'carousel': 'js/carousel',
            'owlCarousel': 'js/owl-carousel/owl.carousel'
        }
    }
};

Cara Penggunaan:

  • gunakan data-mage-initatribut untuk memasukkan Owl Carousel ke elemen tertentu:

    <div class="owl-carousel" data-mage-init='{"carousel":{"option": value}}'>
    <div class="item">Item 1</div>
    ...
    <div class="item">Item n</div>
</div>

  • gunakan dengan <script type="text/x-magento-init" />:

    <div id="owl-carousel" class="owl-carousel">
    <div class="item">Item 1</div>
    ...
    <div class="item">Item n</div>
</div>

<script type="text/x-magento-init">
{
    "#owl-carousel": {
        "carousel": {"option": value}
    }
}
</script>
— Volodymyr Lisniak
sumber
0

2 jawaban lainnya sangat baik, dan saya telah menyalin elemen keduanya, tetapi saya kadang-kadang menemukan masalah dengan pesan kesalahan "$ bukan fungsi" dan "Tidak dapat membaca properti 'fn' of undefined". Saya juga ingin metode yang berpusat pada halaman konten.

Jadi metode gabungan ini dapat membantu seseorang

  1. Salin owl.carousel.js ke aplikasi / desain / frontend / vendorname / themename / Magento_Theme / web / js

(buat direktori jika belum ada di sana)

  1. Solusi css lainnya dapat bekerja dengan baik, atau Anda dapat menyalin owl.carousel.css dan owl.theme.default.css ke file .Less untuk tema, dan sesuaikan gaya dengan preferensi Anda.
  2. Salin kode berikut ke app / design / frontend / vendorname / themename /Magento_Theme/require-config.js

(buat file / direktori jika perlu, kode ini muncul untuk menyelesaikan masalah "tidak dapat membaca properti FN".)

var config = {
paths: {            
        'owlcarousel': "Magento_Theme/js/owl.carousel"
    },   
shim: {
    'owlcarousel': {
        deps: ['jquery']
    }
}
};

  1. Di halaman konten tempatkan kode berikut untuk menentukan gambar carousel

    <div class="owl-carousel owl-theme">
  <div><img src="{blah blah}"/></div>
  <div><img src="{blah blah}"/></div>
  <div><img src="{blah blah}"/></div>
  <div><img src="{blah blah}"/></div>
</div>

  2. Setelah kode di atas, tambahkan kode berikut untuk carousel (ini muncul untuk menyelesaikan kesalahan "$ bukan fungsi")

    <script>
    require([
        'jquery',
        'owlcarousel'
        ], function () {
            'use strict';
            jQuery.noConflict();
                jQuery(".owl-carousel").owlCarousel({
                    nav: true, // Show next and prev buttons
                    navText:["<",">"], //show prev next
                    loop: true,
                    autoplay: true, //Set AutoPlay  
                    autoplayHoverPause: true, //stop when mouse on carousel
                    items : 1
          });
    });
</script>

  3. Menyebarkan konten statis, mis. Setup php magento: static-content: deploy (perhatikan ada berbagai metode untuk melakukan ini yang melibatkan pembersihan manual folder cache dan cache php magento: perintah bersih).

  4. Lihat di situs web

— anak laki-laki shires
sumber
saya mencoba tetapi slider tidak datang. walaupun ketika saya memeriksa elemen elemen owl ditambahkan ke div
— surbhi agr
-1 
define([
    "jquery",
], function ($) {
    !function(a,b,c,d){function e(b,c)................................(window.Zepto||window.jQuery,window,document)
});

Anda harus menambahkan owl.carousel.min.jsdi magento2

— Prakash
sumber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.