ম্যাজেন্টো 2 এ কীভাবে কাস্টম মডিউল জেএস ফাইল লোড করবেন?

Question

আমি ম্যাজেন্টো ২ এর জন্য ব্যানার স্লাইডার মডিউল তৈরি করেছি আমি নিম্নলিখিত উপায়গুলি এবং এর কাজ সূক্ষ্ম ব্যবহার করে জেএস ফাইল কল করেছি। ব্লক ক্লাসে আমি নিম্নলিখিত ফাংশন তৈরি করেছি

public function getBaseJs($fileName){

        return $this->_storeManager->getStore()->getBaseUrl(
                \Magento\Framework\UrlInterface::URL_TYPE_MEDIA
            ).'bannerslider/js/'.$fileName;
    }

এবং এই ফাংশনটি bannerslider.phtmlনিম্নলিখিত পদ্ধতিতে ফাইলে ডাকা হয়।

<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery-1.7.min.js') ?>"></script>
<script type="text/javascript" src="<?php echo $this->getBaseJs('jquery.flexslider.js') ?>"></script>

তবে, require.jsআমি কীভাবে এটি করতে পারি তার jQuery নির্ভরতা মেকানিজম অনুসারে ?

Answer 1

অবশেষে, আমি আমার প্রশ্নের সমাধান পেয়েছি। আমি নীচে হিসাবে বিশদ এটি ভাগ করতে চাই।

পদক্ষেপ 1: এর অধীনে আপনার মডিউল জেএস ফাইল যুক্ত করুন<Vendor>/<Module_Name>/view/<area>/web/js/

যেমন <Vendor>/<Module_Name>/view/<area>/web/js/flexslider.js

পদক্ষেপ 2: এরrequirejs-config.js অধীনে ফাইল তৈরি করুন<Vendor>/<Module_Name>/view/<area>/

যেমন <Vendor>/<Module_Name>/view/<frontend>/requirejs-config.js

নিম্নলিখিত কোড যুক্ত করুন requirejs-config.js

var config = {
    map: {
        '*': {
            bannerslider: 'VendorName_ModuleName/js/flexslider'
        }
    }
};

দ্রষ্টব্য: আপনি নিজের পছন্দ অনুযায়ী আপনার বস্তুর নাম সেট করতে পারেন। আমার ক্ষেত্রে আমি সেট করে রেখেছি bannersliderএবং ফাইলের নামের সাথে .js এক্সটেনশন যুক্ত করব নাVendorName_ModuleName/js/flexslider

পদক্ষেপ 3: নিম্নলিখিত পদ্ধতিতে functionআপনার মডিউল জেএসকে কল করুন .phtml।

<script type="text/javascript">
    require(['jquery','bannerslider'],function($){
        $(window).load(function() {
            $('.flexslider-8').flexslider({
                animation: "fade",
                controlNav: "thumbnails",
                slideshowSpeed: 2000,
                minItems: 2,
                maxItems: 4
            });
        });

    });
</script>

এটা আমার জন্য কাজ করে।

ট্রেস: Netজেএস ফাইলের অনুরোধ করা URL টি লোড হয়েছে কিনা তা দেখতে ট্যাব ব্যবহার করুন ।

Comments

'domReady' ব্যবহার করা আরও ভাল! প্লাগইন $ (উইন্ডো)। লোড () এর পরিবর্তে, উদাহরণস্বরূপ (['jquery', 'ব্যানারস্লাইডার', 'domReady!], ফাংশন ($) {... কোড কেবলমাত্র ডোম লোডের পরে কার্যকর করা হবে})

— কেন্ডি

হ্যাঁ, এটি খুব কার্যকর হবে।

— প্রফুল রাজপুত

@ কেডি এটি নির্ভর করে, আপনি যদি স্ক্রিপ্টটি শেষের দিকে চালিত করতে চান তবে $ (উইন্ডো) ব্যবহার করা ভাল না? স্ক্রিপ্টটি কেবল ডম পড়ার সময় চালিত করতে সক্ষম করে না, তবে সমস্ত স্ক্রিপ্টগুলি কার্যকর করা হলে?

— লাচেজার রায়চেভ

এবং সেভাবে আমার পক্ষে কাজ করছে না ... স্ট্যাটিক / অ্যাডমিনিটিএমএল / ম্যাজেন্টো / ব্যাকএন্ড / এন_ইউস / গিফট.জেএস 404 (পাওয়া যায়নি) আমি ক্যাশে এবং পাব / স্থির সাফ করে দিয়েছি ... বট নোপ .. কাজ করছে না

— লাচেজার রায়চেভ

স্ক্র্যাচ যে, এটি কাজ করছে ... domReady! যদিও কাজ করছে না ... অন্য স্ক্রিপ্টগুলি লোড হয়ে যাওয়ার পরে আমি কীভাবে কোনও স্ক্রিপ্ট চালাতে বলতে পারি, বা এটি বর্তমান ম্যাজেন্ট 2 পদ্ধতিতে বিদ্যমান নেই?

— লাচেজার রায়চেভ

Answer 2

আমার উপায়:

ধাপ 1

বিন্যাস নির্দেশাবলী ব্যবহার করে একটি এক্সটেনশনের বেস জাভাস্ক্রিপ্ট ফাইল অন্তর্ভুক্ত করুন।

ধাপ ২

আবশ্যকজেএস এর সাথে বেস ফাইল থেকে এক্সটেনশনের অন্যান্য জাভাস্ক্রিপ্ট ফাইলগুলি প্রয়োজন:

require(
    [
      'jquery', 
      '{VendorName}_{ModuleName}{path_to_js_file/relative_to/view/web/no_js_at_end}'
     // ex. Magento/Ui/view/base/web/js/grid/sticky/sticky.js
     // became Magento_Ui/js/grid/sticky/stick
    ], 
    function($, someOtherLibrary) {
        // custom code here...
    );
});

Comments

প্রয়োজনীয় একটি ত্রুটি সংজ্ঞায়িত করা হয়নি, কারণ আমার জেএসজেজেজেডের আগে লোড করা হয়েছে

— সহজ লোক