Magento2 में उल्लू स्लाइडर को कैसे कॉल करें

11

अगर हम 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और कॉल जेएस और सीएसएस

और हम Magento 1.X साइट में कहीं भी उल्लू स्लाइडर का उपयोग कर सकते हैं।

इसलिए Magento 2 में हम उल्लू स्लाइडर को कैसे कॉल कर सकते हैं और इसे हर जगह साइट पर कॉल किया जाना चाहिए ताकि मैं जब चाहूं उपयोग कर सकूं।

इस समस्या के लिए मेरे पास इस लिंक का संदर्भ है, लेकिन यह निशान तक नहीं है और यह काम नहीं कर रहा है।

अभी मैंने उल्लू स्लाइडर जेएस रखा है, app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/jsलेकिन यह काम नहीं कर रहा है।

किसी भी सहायता की सराहना की जाएगी।

— धवल
स्रोत

2

हम भी इस गाइड का अनुसरण कर सकते हैं: boolfly.com/magento-2-slider-with-owl-carousel

— खोआ ट्रूंगडिनह

11

आपको requirejs-config.jsअपने विषय के अंदर एक फ़ाइल बनानी होगी, जैसे,

पहले Owlcarousel.js फ़ाइल को अंदर जोड़ें ,

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

अपने सीएसएस को अंदर जोड़ें,

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

अपने tempalte फ़ाइल के अंदर कॉल सीएसएस का उपयोग,

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

अब आवश्यकताjs-config.js फ़ाइल बनाएँ

Magento_Catalog/requirejs-config.js

अपने स्लाइडर को परिभाषित करें,

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

अब आप किसी भी 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कमांड चलाएँ।

— राकेश जेसादिया
स्रोत

लेकिन मैं सीएसएस कहां जोड़ सकता हूं? और मुझे आवश्यकता में सीएसएस जोड़ने की जरूरत है। जे एस फाइल ??

— धवल

आप आवश्यकता में सीएसएस जोड़ सकते हैं।

— जेएस

मैं 3 उल्लू स्लाइडर फ़ाइलों है owl.carousel.css , owl.carousel.js , owl.carousel.min इस सभी फाइलों को तो जोड़ने के लिए और की जरूरत है मैं कहाँ जोड़ सकते हैं और इन सभी फ़ाइलों को फोन तो मैं पूरे Magento साइट में उपयोग कर सकते हैं कर सकते हैं जहाँ भी मैं चाहते हैं?

— धवल

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

— राकेश जेसादिया

मेरे पास updatead answer plz check है

— राकेश जेसादिया

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'

        }
    }
};

Step3 : मैंने नीचे बेस्टसेलर फ़ाइल में उपयोग किया है जहाँ आपको स्लाइडर मैपिंग, थीमनेम / थीमन / 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/use-requirejs-in-magento-2-implementing-owl-slider/ http://cookie-code.net/magento-2 पर भी जा सकते हैं
/ का उपयोग कर-requirejs-इन-Magento-2-को लागू करने में जागने वाले-स्लाइडर /

— Rushvi
स्रोत

किसी भी समय। यह जानकर खुशी हुई कि यह आपके लिए काम कर रहा है :)

— रुसवी

क्या आप अहमदाबाद से हैं?

— धवल

मेरे पास आवश्यकता-config.js में उल्लू स्लाइडर जेएस हैं, लेकिन मेरा जेएस फ्रंटएंड में नहीं दिख रहा है। क्या तुम्हारे पास कोई विचार है?

— धवल

@ वाटसन पब / स्टैटिक फोल्डर कंटेंट को हटा दें और php bin / magento सेटअप को चलाएं: स्टैटिक-कंटेंट: परिनियोजित कमांड।

— रश्वी

मैं ऐसा कई बार करता हूं लेकिन काम नहीं किया।

— धवल

4

यदि आप रास्ते owl carouselमें जोड़ना चाहते हैं Magento 2, तो आपको इन चरणों का पालन करना चाहिए।

को कॉपी owl.carousel.jsकरें app/design/frontend/<pakage_name>/<theme_name>/web/js/owl-carousel/।

अपना requirejsमॉड्यूल जोड़ें app/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एक निश्चित तत्व में उल्लू हिंडोला सम्मिलित करने के लिए विशेषता का उपयोग करें :
```
<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' नहीं पढ़ सकता है। इसके अलावा, मैं सामग्री पृष्ठों पर केंद्रित एक विधि चाहता था।

तो यह संयुक्त विधि किसी की मदद कर सकती है

एप्लिकेशन / डिज़ाइन / फ्रंट / वेंडरोर्न / थीमनाम / Magento_Theme / वेब / js में उल्लू.कार्सेल कॉपी करें।

(अगर पहले से नहीं है तो डायरेक्टरी बनाएं)

अन्य सीएसएस समाधान के रूप में अच्छी तरह से काम कर सकता है, या आप उल्लू की नकल कर सकते हैं।
निम्नलिखित कोड को ऐप / डिज़ाइन / फ्रंटएंड / वेजेर्ननेम / थीमनेम /Magento_Theme/require-config.js पर कॉपी करें

(यदि आवश्यक हो तो फ़ाइल / निर्देशिका बनाएं, यह कोड "एफएन की संपत्ति नहीं पढ़ सकता है" मुद्दे को हल करने के लिए प्रकट होता है।)

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 सेटअप: static-content: तैनाती (इसे करने के लिए विभिन्न तरीके हैं जो कैश फ़ोल्डरों की मैन्युअल समाशोधन और php magento कैश: क्लीन कमांड को शामिल करते हैं)।
इसे वेबसाइट पर देखें

— शायर-बॉय
स्रोत

मैंने कोशिश की लेकिन स्लाइडर नहीं आ रहा है। हालांकि जब मैं तत्व उल्लू वर्ग का निरीक्षण करता

— हूं

-1

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

आपको owl.carousel.min.jsMagento2 पर जोड़ना चाहिए

— प्रकाश
स्रोत