Як викликати повзунок сови у Magento2

11

Якщо ми хочемо додати повзунок Owl в 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

І ми можемо використовувати повзунок сови в будь-якому місці Magento 1.X на сайті.

Тож у Magento 2, як ми можемо викликати повзунок «Сова», і це повинно бути дзвонити скрізь на сайті, щоб я міг використовувати коли завгодно.

Для своєї проблеми я посилаюсь на це посилання, але це не до позначки, і воно не працює.

Зараз я розмістив повзунок сови js, app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/jsале він не працює.

Будь-яка допомога буде вдячна.

javascript  theme  magento-2.0.7  slider 
— Дхаваль
джерело
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>

Тепер створіть файл Requjs-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 у файл Requ.js ??
— Дхаваль
Ви не можете додати css у файл Requ.js
— Ракеш Єсадія
У мене є 3 файли слайдера сови owl.carousel.css , owl.carousel.js , Owl.carousel.min і мені потрібно додати до цього всі файли, щоб де я можу додати і зателефонувати всі ці файли, щоб я міг використовувати цілий сайт Magento, де б я не міг хочете?
— Дхаваль
app / design / frontend / pakage_name / topic_name / Magento_Catalog / web / css
— Ракеш Jesadiya
У мене є оновлення відповіді на плз перевірку
— Ракеш Єсадія
9

спочатку потрібно поставити слайдер,

Крок 1 themename/themename/Magento_Theme/web/js/owl.carousel.js

Крок 2 Зробити відображення для файлу в імені теми / імені теми / 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'

        }
    }
};

Крок 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>

Крок 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 / використовуючи-Requjs-in-magento-2-Implement-сова-повзунок /

— Рушві
джерело
У будь-який час. Рада знати, що це працювало для вас :)
— Rushvi
Ви з Ахмедабада?
— Дхаваль
У мене є слайдер сови для виклику js у Requjs-config.js, але мій js не відображається у фронтені. У вас є ідея?
— Дхаваль
@watson Видаліть паб / статичний вміст папки та запустіть php bin / magento setup: static-content: команда розгортання.
— Рушві
Я роблю це стільки разів, але не працювало.
— Дхаваль
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 у певний елемент:

    <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 в додаток / дизайн / інтерфейс / Імя_вендора / THEMENAME / Magento_Theme / веб / JS

(створити каталог, якщо його ще немає)

  1. Інше рішення css може працювати так само добре, або ви можете скопіювати owl.carousel.css та owl.theme.default.css у файл .Less для теми та налаштувати стилізацію під свої вподобання.
  2. Скопіюйте наступний код в додаток / дизайн / інтерфейс / Імя_вендор / 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. Після вищевказаного коду додайте наступний код для каруселі (це, мабуть, вирішує помилку "$ не функція")

    <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: static-content: розгортання (зауважте, для цього є різні методи, які включають в себе очищення папок кешу вручну та кеш php magento: clean команда).

  4. Перевірте це на веб-сайті

— ширес-хлопчик
джерело
я намагався, але слайдер не йде. хоча, коли я перевіряю клас сови класу, я все-таки
— додаюсь
-1 
define([
    "jquery",
], function ($) {
    !function(a,b,c,d){function e(b,c)................................(window.Zepto||window.jQuery,window,document)
});

Вам слід додати owl.carousel.min.jsна magento2

— Пракаш
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.