Magento2 içinde Owl Slider nasıl aranır

11

Magento 1.X'e Baykuş Kaydırıcısı eklemek istiyorsak aşağıdaki adımları takip ediyoruz.

Kopyalayın owl.carousel.min.jsve owl.carousel.jsiçine yapıştırınskin/frontend/pakage_name/theme_name/js
Kopyalayın owl.carousel.cssve içine yapıştırınskin/frontend/pakage_name/theme_name/css
Git app/design/frontend/pakage_name/theme_name/layout/page.xmlve çağrı js ve css

Ve Baykuş Slider'ı Magento 1.X sitesinde herhangi bir yerde kullanabiliriz.

Magento 2'de Baykuş kaydırıcısını nasıl çağırabileceğimizi ve sitenin her yerinde aramamız gerektiğini, böylece ne zaman istersem kullanabiliyorum.

Bu sorunum için bu bağlantıya baktım ama işarete bağlı değil ve çalışmıyor.

Şu anda Baykuş kaydırıcı js yerleştirdim app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/jsama çalışmıyor.

Herhangi bir yardım mutluluk duyacağız.

— Dhaval
kaynak

2

Bu kılavuzu da takip edebiliriz: boolfly.com/magento-2-slider-with-owl-carousel

— Khoa TruongDinh

11

requirejs-config.jsTemanızın içinde aşağıdaki gibi bir dosya oluşturmanız gerekir,

Önce içine owlcarousel.js dosyası ekleyin ,

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

Css'nizi içine ekleyin,

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

kullanarak tempalte dosyanızın içinde css arayın,

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

veya gereksinimlerinize bağlı olarak bir düzen dosyası içinde css'i arayın (en iyi uygulama):

tüm site : default.xmlörneğinapp/design/frontend/pakage_name/theme_name/Magento_Catalog/layout/default.xml
Ana sayfa :cms_index_index.xml

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

Şimdi requirjs-config.js dosyası oluşturun

Magento_Catalog/requirejs-config.js

Kaydırıcınızı tanımlayın,

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

Artık herhangi bir phtml dosyasının altında baykuşlu kullanabilirsiniz,

<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 / statik klasör içeriğini kaldırın ve php bin/magento setup:static-content:deploykomutu çalıştırın .

— Rakesh Jesadiya
kaynak

ama css'i nereye ekleyebilirim? ve requir.js dosyasında css eklemek gerekir ??

— Dhaval

css requir.js dosyasına ekleyemezsiniz

— Rakesh Jesadiya

3 baykuş kaymak dosyaları var owl.carousel.css , owl.carousel.js , owl.carousel.min ve bu tüm dosyaları eklemeniz gerekiyor, böylece nereye gidersem gideyim tüm magento sitesinde bu dosyaları ekleyebilir ve çağırabilirim istemek?

— Dhaval

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

— Rakesh Jesadiya

Ben updatead cevap plz kontrol var

— Rakesh Jesadiya

9

önce kaydırıcıyı

Aşama 1 themename/themename/Magento_Theme/web/js/owl.carousel.js

Adım 2 Dosya adı / tema adı / Magento_Theme / requirjs-config.js dosyasında eşleme yapın

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

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


            owlcarouselslider:        'Magento_Theme/js/owl.carousel'

        }
    }
};

Adım3 : Kaydırma eşlemesini, tema adını / tema adını / Magento_Catalog / templates / product / bestseller_list.phtml eklemeniz gereken aşağıdaki gibi en çok satanlar dosyasında kullandım:

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

Adım 4 : Bu yapı aşağıdaki gibi olmalıdır,

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

Daha fazla bağlantıyı da ziyaret edebilirsiniz @ http://cookie-code.net/magento-2/using-requirejs-in-magento-2-implementing-owl-slider/
http://cookie-code.net/magento-2 / kullanarak-requirejs-in-magento-2-uygulanması-baykuş sürgüsü /

— Rushvi
kaynak

İstediğin zaman. Sizin için çalıştığını bilmek sevindim :)

— Rushvi

Ahmedabad'dan mısın?

— Dhaval

Requijs-config.js çağrı baykuş kaymak js var ama benim js ön uçta göstermiyor. Herhangi bir fikrin var mı?

— Dhaval

@watson Pub / statik klasör içeriğini kaldırın ve php bin / magento kurulum: static-content: deploy komutunu çalıştırın.

— Rushvi

Bunu birçok kez yaptım ama işe yaramadı.

— Dhaval

4

Eklemek istediğiniz takdirde owl carouselde Magento 2yol, aşağıdaki adımları izlemeniz gerekir.

Kopya owl.carousel.jsiçin app/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/.

requirejsModülünüzü ekleyin app/design/frontend/<pakage_name>/<theme_name>/web/js/carousel.js.

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

İçin requirejsyapılandırma ekle app/design/frontend/<pakage_name>/<theme_name>/requirejs-config.js.

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

Nasıl kullanılır:

data-mage-initBelirli bir öğeye Owl Carousel eklemek için özelliği kullanın:

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

ile kullanmak <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
kaynak

0

Diğer 2 cevap mükemmel, ve her ikisinin de öğeleri kopyaladım, ama bazen "$ bir işlev değil" ve "undefined 'fn' özelliği okunamıyor" hata iletileri ile sorunlar buluyordu. Ayrıca içerik sayfalarına odaklanmış bir yöntem istedim.

Yani bu birleşik yöntem birine yardımcı olabilir

Owl.carousel.js dosyasını app / design / frontend / vendorname / themename / Magento_Theme / web / js içine kopyalayın

(henüz orada değilse dizin oluşturun)

Diğer css çözümü de işe yarayabilir ya da tema için .Less dosyasına owl.carousel.css ve owl.theme.default.css kopyalayabilir ve stil tercihlerinize göre ayarlayabilirsiniz.
Aşağıdaki kodu app / design / frontend / vendorname / themename /Magento_Theme/require-config.js içine kopyalayın

(gerekirse dosya / dizin oluşturun, bu kod "FN özelliğini okuyamıyor" sorununu çözüyor gibi görünüyor.)

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

Sayfa içeriğine, atlıkarınca resimlerini tanımlamak için aşağıdaki kodu yerleştirin

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

Yukarıdaki koddan sonra, karusel için aşağıdaki kodu ekleyin (bu, "$ bir işlev değildir" hatasını çözmek için görünür)

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

Statik içeriği dağıtın, örneğin php magento setup: static-content: deploy (bunun için önbellek klasörlerinin manuel olarak temizlenmesini ve bir php magento cache: clean komutunu içeren çeşitli yöntemler olduğunu unutmayın).
Web sitesinde kontrol edin

— shires-boy
kaynak

denedim ama kaydırıcı gelmiyor. Her ne kadar i element baykuş sınıf div

— incelediğinizde

-1

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

Sen eklemek gerekir owl.carousel.min.jsmagento2 üzerinde

— Prakash
kaynak