Magento2 এ আউল স্লাইডারকে কীভাবে কল করবেন

11

আমরা যদি ম্যাজেন্টো 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 সাইটে যে কোনও জায়গায় আউল স্লাইডার ব্যবহার করতে পারি।

সুতরাং ম্যাজেন্টো 2 তে আমরা আউল স্লাইডারটি কীভাবে কল করতে পারি এবং এটি সাইটের সর্বত্রই কল করা উচিত যাতে আমি যখনই চাই ব্যবহার করতে পারি।

আমার এই সমস্যার জন্য আমি এই লিঙ্কটি উল্লেখ করেছি তবে এটি চিহ্নিত নয় এবং এটি কাজ করছে না।

এই মুহূর্তে আমি আউল স্লাইডার js এ রেখেছি app/design/frontend/pakage_name/theme_name/Magento_Catalog/web/jsতবে এটি কাজ করছে না।

কোন সাহায্য প্রশংসা করা হবে।

— 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

আপনার সিএসএস ভিতরে যুক্ত করুন,

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

আপনার টেম্পলেট ফাইলের অভ্যন্তরে সিএসএস কল করুন,

<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']
        }
    }
};

এখন আপনি যে কোনও পিএইচটিএমএল ফাইলের অধীনে আউলকারোসেল ব্যবহার করতে পারেন,

<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কমান্ড সরান ।

— রাকেশ জেসাদিয়া
সূত্র

তবে আমি কোথায় সিএসএস যুক্ত করতে পারি? এবং আমার দরকার .js ফাইলে সিএসএস যুক্ত করা দরকার ??

— ধাওয়াল

আপনি

— প্রযোজনীয়

আমি 3 পেঁচা স্লাইডার ফাইল আছে owl.carousel.css , owl.carousel.js , owl.carousel.min এই সমস্ত ফাইল তাই যোগ করার জন্য এবং প্রয়োজন আমি কোথায় জুড়তে এবং এই সমস্ত ফাইল কল তাই আমি পুরো Magento সাইটে ব্যবহার করতে পারেন যেখানেই আমি চাও?

— ধাওয়াল

অ্যাপ / ডিজাইন / সীমা / পকেজ_নাম / থিম_নাম / ম্যাজেন্টো_ক্যাটালগ / ওয়েব / সিএসএস

— রাকেশ জেসাদিয়া

আমার কাছে আপডেট প্লাজ চেক রয়েছে

— রাকেশ জেসাদিয়া

9

প্রথমে আপনাকে স্লাইডার লাগাতে হবে,

ধাপ 1 themename/themename/Magento_Theme/web/js/owl.carousel.js

Step2 THEMENAME / THEMENAME / Magento_Theme / requirejs-config.js ফাইল জন্য Do ম্যাপিং

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

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


            owlcarouselslider:        'Magento_Theme/js/owl.carousel'

        }
    }
};

স্টিপি 3 : আমি নীচে বেস্টসেলার ফাইলটি ব্যবহার করেছি যেখানে আপনাকে স্লাইডার ম্যাপিং, থিমেণাম / থেনাম / ম্যাজেন্টো_গ্যাটালগ / টেম্পলেট / পণ্য / বেস্টসেলার_লিস্ট.পিএফটিএমএল অন্তর্ভুক্ত করতে হবে:

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

পদক্ষেপ :: যে কাঠামোটি নীচের মতো হওয়া উচিত,

<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
সূত্র

যে কোনো সময়। এটি আপনার জন্য কাজ করে জেনে খুশি হয়েছিল :)

— রুশভি

আপনি কি আহমদাবাদ থেকে এসেছেন?

— ধাওয়াল

আমার কাছে পেছনের স্লাইডার জেএসগুলিকে প্রয়োজনীয়js-config.js এ কল করা আছে তবে আমার জেএসগুলি সম্মুখভাগে প্রদর্শিত হচ্ছে না। যদি আপনার কোন ধারণা আছে?

— ধাওয়াল

@ ওয়াটসন পাব / স্ট্যাটিক ফোল্ডার সামগ্রী সরান এবং পিএইচপি বিন / ম্যাজেন্টো সেটআপ চালান: স্থির-সামগ্রী: কমান্ড মোতায়েন করুন।

— রুশভি

আমি এটি বহুবার করেছি তবে এটি কাজ করে নি।

— ধাওয়াল

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 টি উত্তর দুর্দান্ত, এবং আমি উভয়ের উপাদানগুলির অনুলিপি করেছি, তবে আমি মাঝে মাঝে ত্রুটি বার্তাগুলি "a একটি ফাংশন নয়" এবং "অপরিজ্ঞাতকৃত সম্পত্তি 'fn' পড়তে পারি না" নিয়ে সমস্যাগুলি খুঁজে পেয়েছি। এছাড়াও আমি সামগ্রী পাতাগুলি কেন্দ্রিক একটি পদ্ধতি চেয়েছিলাম।

সুতরাং এই সম্মিলিত পদ্ধতি কারও সাহায্য করতে পারে

/ ডিজাইন / ফ্রন্টএন্ড / অ্যাপ্লিকেশান মধ্যে owl.carousel.js কপি vendorname / THEMENAME / Magento_Theme / ওয়েব / JS

(ইতিমধ্যে সেখানে না থাকলে ডিরেক্টরি তৈরি করুন)

অন্যান্য CSS সমাধানটি ঠিক তেমন কাজ করতে পারে, বা আপনি থিমের জন্য .Lss ফাইলটিতে আউল.ক্যারোসেল সিএসএস এবং পেঁচা.থেম.ডেফল্ট সিএসএস অনুলিপি করতে এবং আপনার পছন্দগুলিতে স্টাইলিং সামঞ্জস্য করতে পারেন।
অ্যাপ্লিকেশন নিম্নলিখিত কোড কপি করুন / ডিজাইন / ফ্রন্টএন্ড / vendorname / THEMENAME /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>

উপরের কোডের পরে, কারাউসেলের জন্য নিম্নলিখিত কোড যুক্ত করুন (এটি "a কোনও ফাংশন নয়" ত্রুটি সমাধান করার জন্য উপস্থিত হয়)

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

স্থির বিষয়বস্তু স্থাপন করুন, যেমন পিএইচপি ম্যাজেন্টো সেটআপ: স্ট্যাটিক-সামগ্রী: মোতায়েন করুন (নোট করুন এটি করার বিভিন্ন পদ্ধতি রয়েছে যা ক্যাশে ফোল্ডারগুলির ম্যানুয়াল ক্লিয়ারিং এবং একটি পিএইচপি ম্যাজেন্টো ক্যাশে: ক্লিন কমান্ড জড়িত)।
ওয়েবসাইটে এটি পরীক্ষা করে দেখুন

— shires-ছেলে
সূত্র

আমি চেষ্টা করেছি কিন্তু স্লাইডার আসছে না। যদিও আমি মৌলিক

— পেখার

-1

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

আপনি owl.carousel.min.jsmagento2 যোগ করা উচিত

— প্রকাশ
সূত্র