Jak wywołać Owl Slider w Magento2

11

Jeśli chcemy dodać Owl Slider w Magento 1.X, wykonujemy poniższe kroki.

Kopiowanie owl.carousel.min.jsi owl.carousel.jsi wkleić doskin/frontend/pakage_name/theme_name/js
Skopiuj owl.carousel.cssi wklej doskin/frontend/pakage_name/theme_name/css
Idź app/design/frontend/pakage_name/theme_name/layout/page.xmli dzwoń do js i css

I możemy użyć Owl Slider w dowolnym miejscu na stronie Magento 1.X.

Więc w Magento 2, jak możemy wywołać suwak Owl i powinien on być wywoływany wszędzie na stronie, aby móc korzystać z niego, kiedy chcę.

W przypadku mojego problemu odsyłam ten link, ale nie jest to zgodne z oznaczeniem i nie działa.

W tej chwili umieściłem suwak Owl js w, app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/jsale to nie działa.

Każda pomoc będzie mile widziana.

— Dhaval
źródło

2

Możemy również postępować zgodnie z tym przewodnikiem: boolfly.com/magento-2-slider-with-owl-carousel

— Khoa TruongDinh

11

Musisz utworzyć jeden requirejs-config.jsplik wewnątrz motywu, taki jak:

Najpierw dodaj plik owlcarousel.js wewnątrz,

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

Dodaj swój css wewnątrz,

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

wywołaj css wewnątrz pliku tempalte, używając,

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

lub wywołaj css wewnątrz pliku układu (najlepsza praktyka), w zależności od potrzeb:

cała strona : default.xmlna przykładapp/design/frontend/pakage_name/theme_name/Magento_Catalog/layout/default.xml
Strona główna :cms_index_index.xml

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

Teraz utwórz plik requjs-config.js

Magento_Catalog/requirejs-config.js

Zdefiniuj suwak,

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

Teraz możesz używać owlcarousel pod dowolnym plikiem 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>

Usuń zawartość folderu pub / static i uruchom php bin/magento setup:static-content:deploypolecenie.

— Rakesh Jesadiya
źródło

ale gdzie mogę dodać css? i muszę dodać css w pliku Require.js?

— Dhaval

nie możesz dodać css do pliku

— wymagania.js

Mam 3 pliki z suwakami owl.carousel.css , owl.carousel.js , owl.carousel.min i muszę dodać to wszystkie pliki, więc gdzie mogę dodać i wywołać te wszystkie pliki, aby móc używać ich w całej witrynie Magento, gdziekolwiek ja chcieć?

— Dhaval

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

— Rakesh Jesadiya

mam updatead odpowiedź plz sprawdź

— Rakesh Jesadiya

9

najpierw musisz ustawić suwak,

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

Krok 2 Wykonaj mapowanie pliku w themename / themename / Magento_Theme / Requjs-config.js

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

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


            owlcarouselslider:        'Magento_Theme/js/owl.carousel'

        }
    }
};

Krok 3 : Użyłem w pliku bestsellera, jak poniżej, gdzie musisz dołączyć mapowanie suwaka, nazwa_imienna / nazwa_imienna / Katalog_Mentent / szablony / produkt / lista_ bestsellerów.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>

Krok 4 : Dla tej struktury powinno być jak poniżej,

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

Możesz również odwiedzić więcej linków @ http://cookie-code.net/magento-2/using-requirejs-in-magento-2-implementing-owl-slider/
http://cookie-code.net/magento-2 / using-requjs-in-magento-2-Implementing-owl-slider /

— Rushvi
źródło

W dowolnym momencie Cieszę się, że to zadziałało :)

— Rushvi

Czy jesteś z Ahmedabadu?

— Dhaval

Mam slider wywołania sowy js w Requjs-config.js, ale mój js nie wyświetla się w interfejsie użytkownika. Masz jakiś pomysł?

— Dhaval

@watson Usuń zawartość folderu pub / static i uruchom komendę php bin / magento setup: static-content: deploy.

— Rushvi

Robię to wiele razy, ale nie działało.

— Dhaval

4

Jeśli chcesz dodać owl carouselw Magento 2drogę, należy wykonać następujące kroki.

Skopiuj owl.carousel.jsdo app/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/.

Dodaj swój requirejsmoduł app/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js.

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

Dodaj requirejskonfigurację do app/design/frontend/<pakage_name>/<theme_name>/requirejs-config.js.

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

Jak używać:

użyj data-mage-initatrybutu, aby wstawić karuzelę Owl w określonym elemencie:

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

używać z <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>

— Włodzimierz Lisniak
źródło

0

Pozostałe 2 odpowiedzi są doskonałe i skopiowałem elementy obu, ale czasami znajdowałem problemy z komunikatami o błędach „$ nie jest funkcją” i „Nie można odczytać właściwości„ fn ”niezdefiniowanej”. Chciałem też metody wyśrodkowanej na stronach z treścią.

Tak więc ta łączona metoda może komuś pomóc

Skopiuj plik owl.carousel.js do aplikacji / design / frontend / vendorname / themename / Magento_Theme / web / js

(utwórz katalog, jeśli jeszcze go nie ma)

Inne rozwiązanie css może równie dobrze działać lub możesz skopiować owl.carousel.css i owl.theme.default.css do pliku .Less motywu i dostosować styl do swoich preferencji.
Skopiuj następujący kod do app / design / frontend / vendorname / themename /Magento_Theme/require-config.js

(w razie potrzeby utwórz plik / katalog, ten kod wydaje się rozwiązać problem „nie można odczytać właściwości FN”).

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

W treści strony umieść następujący kod, aby zdefiniować obrazy karuzeli

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

Po powyższym kodzie dodaj następujący kod karuzeli (wydaje się, że to rozwiązuje błąd „$ nie jest funkcją”)

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

Wdróż zawartość statyczną, np. Konfiguracja php magento: static-content: deploy (zauważ, że istnieją różne metody, które polegają na ręcznym czyszczeniu folderów pamięci podręcznej i komendzie php magento cache: clean).
Sprawdź to na stronie internetowej

— shires-boy
źródło

próbowałem, ale suwak nie nadchodzi. chociaż kiedy sprawdzam element, klasa sowa zostaje dodana do div

— surbhi agr

-1

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

Powinieneś dodać owl.carousel.min.jsna magento2

— Prakash
źródło