Cách gọi Owl Slider trong Magento2

11

Nếu chúng tôi muốn thêm Owl Slider trong Magento 1.X thì chúng tôi làm theo các bước dưới đây.

  1. Sao chép owl.carousel.min.jsvà owl.carousel.jsvà dán vàoskin/frontend/pakage_name/theme_name/js
  2. Sao chép owl.carousel.cssvà dán vàoskin/frontend/pakage_name/theme_name/css
  3. Đi app/design/frontend/pakage_name/theme_name/layout/page.xmlvà gọi js và css

Và chúng ta có thể sử dụng Owl Slider ở bất cứ đâu trong trang web Magento 1.X.

Vì vậy, trong Magento 2, làm thế nào chúng ta có thể gọi thanh trượt Owl và nó sẽ được gọi ở mọi nơi trong trang web để tôi có thể sử dụng bất cứ khi nào tôi muốn.

Đối với vấn đề này, tôi đã giới thiệu liên kết này nhưng nó không đúng với nhãn hiệu và nó không hoạt động.

Ngay bây giờ tôi đã đặt Owl trượt js vào app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/jsnhưng nó không hoạt động.

Bất kỳ trợ giúp sẽ được đánh giá cao.

javascript  theme  magento-2.0.7  slider 
— Pháp thân
nguồn
2
Chúng tôi cũng có thể làm theo hướng dẫn này: boolfly.com/magento-2-slider-with-owl-carousel
— Khoa TruongDinh

Câu trả lời:

11

Bạn phải tạo một requirejs-config.jstệp trong chủ đề của bạn như,

Đầu tiên Thêm tệp Owlcarousel.js bên trong,

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

Thêm css của bạn vào bên trong,

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

gọi css bên trong tập tin tempalte của bạn bằng cách sử dụng,

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

hoặc gọi css bên trong tệp bố cục (thực tiễn tốt nhất), tùy thuộc vào nhu cầu của bạn:

  • toàn bộ trang web : default.xmlví dụapp/design/frontend/pakage_name/theme_name/Magento_Catalog/layout/default.xml
  • Trang chủ :cms_index_index.xml
<page ...>
<head>
     <css src="Magento_Catalog::css/owlcarousel.css"/>
</head>
<body>...</body> </page>

Bây giờ hãy tạo tập tin allowjs-config.js

Magento_Catalog/requirejs-config.js

Xác định thanh trượt của bạn,

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

Bây giờ bạn có thể sử dụng Owlcarousel dưới bất kỳ tệp phtml nào,

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

Xóa nội dung thư mục pub / static và chạy php bin/magento setup:static-content:deploylệnh.

— Rakesh Jesadiya
nguồn
nhưng tôi có thể thêm css ở đâu? và tôi cần thêm css trong tập tin allow.js ??
— Dhaval
bạn không thể thêm css vào tệp
— request.js
Tôi có 3 tệp thanh trượt cú Owl.carousel.css , Owl.carousel.js , Owl.carousel.min và cần thêm tất cả các tệp này để tôi có thể thêm và gọi tất cả các tệp này để tôi có thể sử dụng trong toàn bộ trang web magento ở bất cứ đâu muốn gì
— Dhaval
ứng dụng / thiết kế / frontend / pakage_name / theme_name / Magento_Catalog / web / css
— Rakesh Jesadiya
tôi có cập nhật câu trả lời plz check
— Rakesh Jesadiya
9

đầu tiên bạn cần đặt thanh trượt tại,

Bước 1 themename/themename/Magento_Theme/web/js/owl.carousel.js

Bước2 Thực hiện ánh xạ cho tệp trong themename / themename / Magento_Theme / allowjs-config.js

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

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


            owlcarouselslider:        'Magento_Theme/js/owl.carousel'

        }
    }
};

Bước 3 : Tôi đã sử dụng trong tệp bán chạy nhất như bên dưới, nơi bạn cần bao gồm ánh xạ thanh trượt, themename / themename / Magento_Catalog / samples / product / 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>

Bước 4 : Đối với cấu trúc đó nên như dưới đây,

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


Bạn cũng có thể truy cập thêm các liên kết @ http://cookie-code.net/magento-2/using-requirejs-in-magento-2-implementing-owl-slider/
http://cookie-code.net/magento-2 / bằng cách sử dụng-notifyjs-in-magento-2-hiện-cú-trượt /

— Rushvi
nguồn
Bất cứ lúc nào. Vui mừng khi biết nó hoạt động cho bạn :)
— Rushvi
Bạn đến từ ahmedabad?
— Dhaval
Tôi đã gọi js thanh trượt con cú trong requestjs-config.js nhưng js của tôi không hiển thị ở lối vào. Bạn còn ý kiến ​​nào không?
— Dhaval
@watson Xóa nội dung thư mục pub / static và chạy php bin / magento setup: static-content: triển khai lệnh.
— Rushvi
Tôi làm điều đó rất nhiều lần nhưng không được.
— Dhaval
4

Nếu bạn muốn thêm owl carouseltheo Magento 2cách, bạn nên làm theo các bước sau.

  1. Sao chép owl.carousel.jsvào app/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/.

  2. Thêm requirejsmô-đun của bạn app/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js.

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

  3. Thêm requirejscấu hình vào app/design/frontend/<pakage_name>/<theme_name>/requirejs-config.js.

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

Cách sử dụng:

  • sử dụng data-mage-initthuộc tính để chèn Owl Carousel trong một yếu tố nhất định:

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

  • sử dụng với <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
nguồn
0

Hai câu trả lời khác là tuyệt vời và tôi đã sao chép các yếu tố của cả hai, nhưng đôi khi tôi gặp vấn đề với thông báo lỗi "$ không phải là hàm" và "Không thể đọc thuộc tính 'fn' không xác định". Ngoài ra tôi muốn một phương pháp tập trung vào các trang nội dung.

Vì vậy, phương pháp kết hợp này có thể giúp ai đó

  1. Sao chép Owl.carousel.js vào ứng dụng / thiết kế / frontend / pursorname / themename / Magento_Theme / web / js

(tạo thư mục nếu chưa có)

  1. Giải pháp css khác cũng có thể hoạt động tốt hoặc bạn có thể sao chép Owl.carousel.css và Owl.theme.default.css vào tệp .Less cho chủ đề và điều chỉnh kiểu dáng theo sở thích của bạn.
  2. Sao chép mã sau đây vào ứng dụng / thiết kế / frontend / pursorname / themename /Magento_Theme/require-config.js

(tạo tệp / thư mục nếu cần, mã này xuất hiện để giải quyết vấn đề "không thể đọc thuộc tính của FN".)

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

  1. Trong nội dung trang đặt mã sau đây để xác định hình ảnh băng chuyền

    <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. Sau đoạn mã trên, hãy thêm đoạn mã sau cho băng chuyền (điều này xuất hiện để giải quyết lỗi "$ không phải là hàm")

    <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. Triển khai nội dung tĩnh, ví dụ: thiết lập php magento: static-content: triển khai (lưu ý có nhiều phương pháp khác nhau để thực hiện việc này bao gồm xóa thủ công các thư mục bộ đệm và bộ đệm php magento: lệnh Clean).

  4. Kiểm tra nó trên trang web

— cậu bé
nguồn
tôi đã thử nhưng thanh trượt không đến. mặc dù khi tôi kiểm tra lớp con cú nguyên tố được thêm vào div
— surbhi agr
-1 
define([
    "jquery",
], function ($) {
    !function(a,b,c,d){function e(b,c)................................(window.Zepto||window.jQuery,window,document)
});

Bạn nên thêm owl.carousel.min.jsvào magento2

— Prakash
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.