วิธีการเรียก Owl Slider ใน Magento2

11

ถ้าเราต้องการเพิ่มOwl Sliderใน Magento 1.X เราก็ทำตามขั้นตอนด้านล่าง

คัดลอกowl.carousel.min.jsและowl.carousel.jsและวางลงskin/frontend/pakage_name/theme_name/js
คัดลอกowl.carousel.cssและวางลงในskin/frontend/pakage_name/theme_name/css
ไปที่app/design/frontend/pakage_name/theme_name/layout/page.xmlแล้วเรียก js และ css

และเราสามารถใช้ Owl Slider ได้ทุกที่ใน Magento 1.X site

ดังนั้นใน Magento 2 เราจะเรียกแถบเลื่อนนกฮูกได้อย่างไรและควรจะโทรไปที่ใดก็ได้ในไซต์เพื่อให้ฉันสามารถใช้ได้ทุกเมื่อที่ต้องการ

สำหรับปัญหาของฉันฉันได้อ้างอิงลิงค์นี้แต่มันไม่ได้ขึ้นกับเครื่องหมายและมันไม่ทำงาน

ตอนนี้ฉันได้วางแถบเลื่อน js ของ Owl app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/jsแต่มันไม่ทำงาน

ความช่วยเหลือใด ๆ ที่จะได้รับการชื่นชม

— Dhaval
แหล่งที่มา

2

นอกจากนี้เรายังสามารถปฏิบัติตามคำแนะนำนี้: boolfly.com/magento-2-slider-with-owl-carousel

— Khoa TruongDinh

11

คุณต้องสร้างrequirejs-config.jsไฟล์เดียวภายในธีมของคุณเช่น

ก่อนเพิ่มไฟล์owlcarousel.jsข้างใน

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

เพิ่ม CSS ของคุณภายใน

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

โทร css ในไฟล์ tempalte ของคุณโดยใช้

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

หรือโทร css ภายในไฟล์เลย์เอาต์ (แนวปฏิบัติที่เหมาะสม) ขึ้นอยู่กับความต้องการของคุณ:

ทั้งไซต์ : default.xmlตัวอย่างเช่นapp/design/frontend/pakage_name/theme_name/Magento_Catalog/layout/default.xml
หน้าแรก :cms_index_index.xml

<page ...>
<head>
     <css src="Magento_Catalog::css/owlcarousel.css"/>
</head>
<body>...</body> </page>

ตอนนี้สร้างไฟล์ requirejs-config.js

Magento_Catalog/requirejs-config.js

กำหนดตัวเลื่อนของคุณ

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

ตอนนี้คุณสามารถใช้ owlcarousel ภายใต้ไฟล์ phtml ใด ๆ

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

ลบเนื้อหาโฟลเดอร์ pub / static และรันphp bin/magento setup:static-content:deployคำสั่ง

— Rakesh Jesadiya
แหล่งที่มา

แต่ฉันจะเพิ่ม CSS ได้ที่ไหน และฉันต้องการเพิ่ม CSS ในไฟล์ require.js หรือไม่

— Dhaval

คุณไม่สามารถเพิ่ม css ลงในไฟล์ require.js ได้

— Rakesh Jesadiya

ฉันมีไฟล์ตัวเลื่อนนกฮูก 3 ไฟล์owl.carousel.css , owl.carousel.js , owl.carousel.minและจำเป็นต้องเพิ่มไฟล์ทั้งหมดนี้เพื่อที่ฉันจะสามารถเพิ่มและเรียกไฟล์ทั้งหมดเหล่านี้เพื่อที่ฉันสามารถใช้ในเว็บไซต์คุณภาพเยี่ยมทั้งหมด ต้องการ?

— Dhaval

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

— Rakesh Jesadiya

ฉันมีคำตอบตรวจสอบการอัปเดตโปรด

— Rakesh Jesadiya

9

ก่อนอื่นคุณต้องใส่สไลเดอร์

ขั้นตอนที่ 1 themename/themename/Magento_Theme/web/js/owl.carousel.js

ขั้นที่ 2ทำการจับคู่ไฟล์ในชื่อไฟล์ / ชื่อไฟล์ / Magento_Theme / requirejs-config.js

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

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


            owlcarouselslider:        'Magento_Theme/js/owl.carousel'

        }
    }
};

ขั้นตอนที่ 3 : ฉันใช้ในไฟล์ที่ขายดีที่สุดด้านล่างซึ่งคุณต้องมีการแมปตัวเลื่อน, ชื่อผู้ใช้ / ชื่อผู้ใช้ / Magento_Catalog / แม่แบบ / ผลิตภัณฑ์ / 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 : สำหรับโครงสร้างนั้นควรจะเป็นด้านล่าง

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

นอกจากนี้คุณยังสามารถเยี่ยมชมลิงก์เพิ่มเติมได้ที่ @ http://cookie-code.net/magento-2/using-requirejs-in-magento-2-implementing-owl-slider/
http://cookie-code.net/magento-2 / ใช้-requirejs ในวีโอไอพี-2-ดำเนิน-นกฮูกเลื่อน /

— Rushvi
แหล่งที่มา

ทุกที่ทุกเวลา ดีใจที่รู้ว่ามันได้ผลกับคุณ :)

— Rushvi

คุณมาจากอาเมดาบัดหรือไม่

— Dhaval

ฉันมีแถบเลื่อนนกฮูก js ใน requirejs-config.js แต่ js ของฉันไม่แสดงในส่วนหน้า คุณมีความคิดใด ๆ

— Dhaval

@watson ลบเนื้อหาโฟลเดอร์ pub / static และเรียกใช้การตั้งค่า php bin / magento: static-content: คำสั่ง deploy

— Rushvi

ฉันทำไปหลายครั้ง แต่ไม่ได้ผล

— Dhaval

4

หากคุณต้องการที่จะเพิ่มowl carouselในMagento 2วิธีที่คุณควรทำตามขั้นตอนเหล่านี้

คัดลอกไปowl.carousel.jsapp/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/

เพิ่มของคุณโมดูลrequirejsapp/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js

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

เพิ่มrequirejsการapp/design/frontend/<pakage_name>/<theme_name>/requirejs-config.jsกำหนดค่า

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

วิธีใช้:

ใช้data-mage-initคุณลักษณะเพื่อแทรก Owl Carousel ในองค์ประกอบบางอย่าง:

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

ใช้กับ<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
แหล่งที่มา

0

อีก 2 คำตอบนั้นยอดเยี่ยมและฉันได้คัดลอกองค์ประกอบของทั้งคู่ แต่บางครั้งฉันก็พบปัญหาเกี่ยวกับข้อความแสดงข้อผิดพลาด "$ ไม่ใช่ฟังก์ชั่น" และ "ไม่สามารถอ่านคุณสมบัติ 'fn' ที่ไม่ได้กำหนด" นอกจากนี้ฉันต้องการวิธีที่อยู่ตรงกลางของหน้าเนื้อหา

ดังนั้นวิธีการรวมนี้อาจช่วยใครซักคน

คัดลอก owl.carousel.js ลงในแอพ / ออกแบบ / frontend / vendorname / themename / Magento_Theme / web / js

(สร้างไดเรกทอรีหากยังไม่มี)

โซลูชัน css อื่นสามารถทำงานได้เช่นกันหรือคุณสามารถคัดลอก owl.carousel.css และ owl.theme.default.css ลงในไฟล์. น้อยกว่าสำหรับธีมและปรับสไตล์ตามความต้องการของคุณ
คัดลอกรหัสต่อไปนี้ลงในแอพ / ออกแบบ / ส่วนหน้า / vendorname / themename /Magento_Theme/require-config.js

(สร้างไฟล์ / ไดเรกทอรีหากจำเป็นรหัสนี้จะปรากฏขึ้นเพื่อแก้ปัญหา "ไม่สามารถอ่านคุณสมบัติของ FN")

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

ในเนื้อหาของหน้าให้วางรหัสต่อไปนี้เพื่อกำหนดภาพแบบหมุน

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

หลังจากรหัสด้านบนเพิ่มรหัสต่อไปนี้สำหรับม้าหมุน (ซึ่งจะปรากฏขึ้นเพื่อแก้ไขข้อผิดพลาด "$ ไม่ใช่ฟังก์ชั่น")

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

ปรับใช้เนื้อหาสแตติกเช่นการตั้งค่า php magento: เนื้อหาคงที่: ปรับใช้ (โปรดทราบว่ามีวิธีการต่าง ๆ สำหรับการทำเช่นนี้ซึ่งเกี่ยวข้องกับการล้างโฟลเดอร์แคชด้วยตนเองและ php magento แคช: คำสั่ง clean)
ลองดูที่เว็บไซต์

— shires-boy
แหล่งที่มา

ฉันพยายาม แต่ตัวเลื่อนไม่มา แม้ว่าเมื่อฉันตรวจสอบชั้นนกฮูกองค์ประกอบจะได้รับการเพิ่มลงใน div

— surbhi

-1

define([
    "jquery",
], function ($) {
    !function(a,b,c,d){function e(b,c)................................(window.Zepto||window.jQuery,window,document)
});

คุณควรเพิ่มowl.carousel.min.jsใน magento2

— Prakash
แหล่งที่มา