Как позвонить в Owl Slider в Magento2

11

Если мы хотим добавить Owl Slider в Magento 1.X, мы следуем приведенным ниже шагам.

  1. Скопируйте owl.carousel.min.jsи owl.carousel.jsи вставить вskin/frontend/pakage_name/theme_name/js
  2. Скопируйте owl.carousel.cssи вставьте вskin/frontend/pakage_name/theme_name/css
  3. Перейти app/design/frontend/pakage_name/theme_name/layout/page.xmlи позвонить JS и CSS

И мы можем использовать Owl Slider где угодно на сайте Magento 1.X.

Итак, в Magento 2, как мы можем вызывать слайдер Owl, и его следует вызывать везде на сайте, чтобы я мог использовать его, когда захочу.

Для решения этой проблемы у меня есть ссылка, но она не на высоте и не работает.

Сейчас я поместил слайдер Owl js, app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/jsно он не работает.

Любая помощь будет оценена.

javascript theme magento-2.0.7 slider 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 внутри вашего временного файла, используя,

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

Удалите содержимое папки / статической папки и выполните php bin/magento setup:static-content:deployкоманду.

Ракеш Джесадия
источник
но где я могу добавить CSS? и мне нужно добавить CSS в файл require.js ??
Давал
Вы не можете добавить CSS в файл require.js
Ракеш Джезадия
У меня есть 3 файла слайдера совы owl.carousel.css , owl.carousel.js , owl.carousel.min, и мне нужно добавить все эти файлы, чтобы я мог добавлять и вызывать все эти файлы, чтобы я мог использовать их на всем сайте magento, где бы я ни находился хотеть?
Давал
app / design / frontend / pakage_name / theme_name / Magento_Catalog / web / css
Ракеш Джезадия,
у меня есть updatead ответ, пожалуйста, проверьте
Ракеш Джезадия
9

сначала нужно поставить слайдер на

Шаг 1 themename/themename/Magento_Theme/web/js/owl.carousel.js

Шаг 2 Выполните сопоставление для файла в themename / themename / 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 : Я использовал в файле бестселлера, как показано ниже, где вам нужно включить отображение слайдера, themename / themename / Magento_Catalog / templates / 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>

Шаг 4 : Для этой структуры должно быть, как показано ниже,

<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-в-Magento-2-реализации филин-слайдер /

Rushvi
источник
Любое время. Рад, что это сработало для вас :)
Rushvi
Вы из Ахмедабада?
Давал
У меня есть вызов ползунка совы js в requirejs-config.js, но мой js не отображается во внешнем интерфейсе. Есть ли у вас какие-либо идеи?
Давал
@watson Удалите содержимое папки pub / static и запустите php bin / magento setup: static-content: deploy.
Рушви
Я делаю это так много раз, но это не сработало.
Давал
4

Если вы хотите добавить owl carouselв Magento 2путь, вы должны выполнить следующие действия.

  1. Копировать owl.carousel.jsв app/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/.

  2. Добавьте свой requirejsмодуль app/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js.

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

  3. Добавить 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>
Владимир Лисняк
источник
0

Другие 2 ответа превосходны, и я скопировал элементы обоих, но я иногда обнаруживал проблемы с сообщениями об ошибках "$ не является функцией" и "Не удается прочитать свойство 'fn' из неопределенного". Также я хотел, чтобы метод был сосредоточен на содержательных страницах.

Так что этот комбинированный метод может помочь кому-то

  1. Скопируйте owl.carousel.js в app / design / frontend / vendorname / themename / Magento_Theme / web / js

(создайте каталог, если его там еще нет)

  1. Другое решение CSS может работать так же хорошо, или вы можете скопировать owl.carousel.css и owl.theme.default.css в файл .Less для темы и настроить стили в соответствии со своими предпочтениями.
  2. Скопируйте следующий код в app / design / frontend / vendorname / themename /Magento_Theme/require-config.js

(при необходимости создайте файл / каталог, этот код, по-видимому, решает проблему «не удается прочитать свойство FN».)

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

  1. В содержании страницы разместите следующий код для определения изображений карусели

    <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. После приведенного выше кода добавьте следующий код для карусели (это, по-видимому, устраняет ошибку «$ is not a function»)

    <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. Разверните статический контент, например, php magento setup: static-content: deploy (обратите внимание, что для этого есть различные способы, которые включают ручную очистку папок кеша и команду php magento cache: clean).

  4. Проверьте это на сайте

Графства-мальчик
источник
Я пытался, но слайдер не идет. хотя, когда я проверяю элемент совы, класс добавляется в div
surbhi agr
-1 
define([
    "jquery",
], function ($) {
    !function(a,b,c,d){function e(b,c)................................(window.Zepto||window.jQuery,window,document)
});

Вы должны добавить owl.carousel.min.jsна magento2

Пракаш
источник