ম্যাজেন্টো 2: থিমগুলির মধ্যেjj-config.js প্রয়োজন?


19

requirejs-config.jsম্যাজেন্টো থিমের মাধ্যমে কোনও ফাইল (বা অন্যথায় প্রয়োজনীয় জেএস কনফিগার করা) অন্তর্ভুক্ত করা কি সম্ভব ? বা সামর্থ্য কি ম্যাজেন্টো মডিউলগুলির জন্য সংরক্ষিত আছে? থিম কাঠামো দেব ডক্স তথ্য এই বিন্দু থেকে অস্পষ্ট।

ডেভ ডক্সে রিকোয়ারজেজেএস সম্পর্কে কিছু উল্লেখ করা হয়নি - তবে থিমগুলিতে এমন একটি অন্তর্ভুক্ত রয়েছে webযার অর্থ জাভাস্ক্রিপ্ট তাদের সাথে বান্ডেল করা যায়। জাভাস্ক্রিপ্টটি যদি কোনও থিমের সাথে বান্ডেল করা যায়, তার অর্থ একটি প্রয়োজনীয় জেএস মডিউলটি একটি থিমের সাথে বান্ডেল করা যেতে পারে এবং যদি কোনও ডিওয়ার্ডজেএস মডিউল কোনও থিমের সাথে বান্ডেল করা যায় তবে মডিউলটির একটি নির্দিষ্ট প্রয়োজনীয় জেএস কনফিগারেশন প্রয়োজন হতে পারে।

আমার নিষ্পাপ ধারণাটি থিমগুলির এই দক্ষতাটি হবে তবে আমি এই এক বা অন্য কোনও উপায়ে কোনও ডকুমেন্টেশন সন্ধান করতে সক্ষম হইনি, এবং ম্যাগেন্টোর requirejs-config.jsফাইলগুলিতে প্রয়োজনীয় কোড স্পেলিংকিং করতে ব্যয় করতে একটি বিকেলও ফ্রি করতে পারিনি ।


হাই @ অ্যালান আপনি কি দয়া করে এটি দেখতে পারেন? => magento.stackexchange.com/ দাবী
রোহান হাপানী

1
@ রোহনহাপানি এই দিনগুলিতে সত্যিই এম 2 বিকাশ করছে না তাই মাথার উপরে আমি বলতে পারি না।
অ্যালান ঝড়

উত্তর:


10

আপনি প্রকৃতপক্ষে আপনার থিমগুলিতে মডিউল ডায়ারগুলিতে একটি কনফিগারেশন.জেইজ অন্তর্ভুক্ত করতে পারেন।

সমস্যাটি হ'ল (আসলে আমাদের সীমান্ত দলের জন্য) যে কনফিগারেশনটিকে ওভাররাইড করা, তবে কনফিগারেশনটি প্রসারিত করার কোনও সম্ভাবনা নেই।

সুতরাং, উদাহরণস্বরূপ এখানে ম্যাজেন্টো_থেম মডিউলটি নিতে, আপনি যদি ডিয়ারের অধীনে একটি প্রয়োজনীয়- <theme_base_dir>/Magento_Themeকনফিগারেশন.জগুলি যুক্ত করেন তবে কনফিগারেশনটি জেনারেটেড কনফিগারেশন.জেইএস ফাইলটিতে যুক্ত করা হবে এবং এছাড়াও ম্যাগানোটোমেজ মডিউল থেকে কনফিগারেশন যুক্ত করা হবে।

আপনার প্রশ্নের উত্তর দেওয়ার জন্য আমি থিমস ডিয়ারের অধীনে এবং থিম মূলের ডায়ারের অধীনে একটি প্রয়োজনীয় কনফিগারেশন.জেগুলি যুক্ত করার চেষ্টা করেছি <theme_base_dir>/web। দুজনেরই কাজ হয়নি। আপডেট: প্রকৃতপক্ষে নীচের উত্তর অনুসারে এটি থিম বেস ডিয়ারে স্থাপন করে এটি সম্ভব

সুতরাং উত্তরটি হ্যাঁ হ্যাঁ, যেহেতু আপনি কোনও মডিউলে কোনও জেএস প্রয়োজনীয়তা যুক্ত করতে পারেন (থিম সম্পর্কিত জেএস ফাইলগুলি ডিয়ারের নীচে সবচেয়ে ভালভাবে স্থাপন করা যেতে পারে <theme_base_dir>/Magento_Theme)

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

উভয়ই এটিএম সম্ভব না বলে মনে হচ্ছে।

=== আপডেট ===

প্রকৃতপক্ষে কোনও থিম নির্দিষ্ট-কনফিগার করা দরকার বলে মনে হয় config নীচে @ গ্যারেথ ডাইনের উত্তর দেখুন


পুনঃ: "ম্যাজেন্টো_ধর্মের অধীনে" আপনি আরও স্পষ্ট করে বলতে পারেন - কোনও থিম এবং / অথবা মডিউলটিতে কোন ফোল্ডারটি আপনি উল্লেখ করছেন তা 100% পরিষ্কার নয়। স্পষ্ট অর্থpath/to/theme/files/[etc/Magento_Theme
অ্যালান ঝড়

আমি আপনার থিমটিতে একিউটাল মডিউলটিকে ওভাররাইড বলতে চাইছিলাম। সুতরাং ম্যাগেন্তো / থিমের মডিউলটির জন্য প্রয়োজনীয় কনফিগারেশনগুলি হবে <থেমি_বেস_ডির> / ম্যাজেন্টো_থিম / রিকায়ার- কনফিগ.জেএস যেখানে ম্যাজেন্টো_থেমটি আসল মডিউলটির নাম
ডেভিড ভারহোলেন

সুন্দর, এটি আরও পরিষ্কার করার জন্য উত্তর আপডেট করেছেন
ডেভিড ভারহোলেন

সুতরাং, আমি কি এই ভেবে ঠিক আছি যে একটি প্রয়োজনীয়js-config.js ফাইল অ্যাপ / ডিজাইন / ফ্রন্টএন্ড / <ভেন্ডর> / <থিম> / ওয়েব / জেএস এর অধীনে কাজ করে না?
গ্যারেথ ডেইন

এটি ডক্সে বলেছে যে অ্যাপ্লিকেশন / ডিজাইন / {অঞ্চল} / {বিক্রেতা} / {থিম} / ওয়েবের সমস্ত লাইব্রেরির জন্য জাভাস্ক্রিপ্ট সংস্থানগুলি থিম স্তরে নির্দিষ্ট করা যেতে পারে।
গ্যারেথ ডেইন

15

ঠিক আছে, আমি মনে করি আমি এটি সমাধান করেছি এবং আমি বিশ্বাস করি যে ডকুমেন্টেশনটি অস্পষ্ট এবং প্রক্রিয়াটি পরিষ্কার করার জন্য আপডেট করার প্রয়োজন।

আমি উভয়টির জন্য যথাক্রমে ডিরেক্টরি এবং ডিরেক্টরিগুলির requirejs-config.jsমধ্যে থেকে আমার থিমের মূল থেকে সরানো হয়েছিল এবং এখন আমার আবশ্যকজেএস কনফিগারেশনটি অন্য সমস্ত অন্তর্ভুক্তের সাথে মুখ্যতে মিশে গেছে ।web/jswebMagento_Theme<Vendor>/<theme>requirejs-config.js

সুতরাং, এটি requirejs-config.jsথিম / মডিউল প্রয়োজনীয়তার উপর ভিত্তি করে আপনাকে নিম্নলিখিত অবস্থানগুলিতে ফাইলটি অন্তর্ভুক্ত করতে হবে appears

থিম স্তর

app/design/frontend/<Vendor>/<theme>/requirejs-config.js

মডিউল স্তর

app/design/frontend/<Vendor>/<theme>/<Module_Name>/requirejs-config.js

সুতরাং, requirejs-config.jsআপনার থিমের জন্য আপনার নিজের উপাদানটিকে একটি পথে মানচিত্র করা উচিত এবং তারপরে shimকোনও নির্ভরতা ঘোষণা করতে ব্যবহার করতে হবে:

var config = {
    map: {
        'component': 'js/component'
    },
    shim: {
        'component': {
            deps: ['jquery']
        }
    }
};

তারপরে আপনাকে কোনও <script>ট্যাগের মাধ্যমে উপাদানগুলির সূচনাটি ধরে রাখতে একটি টেমপ্লেট তৈরি করতে হবে (যদি আপনি এটি একটি .phtml ফাইলের মধ্যে কোনও উপাদানের সাথে সরাসরি সংযুক্ত না করেন) আপনি যদি নীচে যেতে চান এই পথটি, নিম্নলিখিত বিষয়বস্তু অন্তর্ভুক্ত করুন:

<script type="text/x-magento-init">
    {
        "*": {
            "js/component": {} // Not entirely sure what {} is and what I'm passing here
        }
    }
</script>

বিকল্পভাবে, এটি একটি উপাদান আবদ্ধ:

<script type="text/x-magento-init">
    {
        "#element": {
            "js/component": {} // Not entirely sure what {} is and what I'm passing here
        }
    }
</script>

তারপরে আপনার লেআউট নির্দেশাবলীর মধ্যে কেবল। Phtml টেম্পলেটটি অন্তর্ভুক্ত করুন, উদাহরণস্বরূপ, আমি আমার দেহ নোডের নীচে default.xmlঅবস্থিত মধ্যে রেখেছি app/design/frontend/<Vendor>/<theme>/Magento_Theme/layoutএবং রেফারেন্স করেছি:

<block class="Magento\Framework\View\Element\Template" name="theme.js" template="Magento_Theme::html/js.phtml" />


"জেএস ​​/ উপাদান": {} এ component component উপাদানটির বিকল্পগুলি পাস করার জন্য ব্যবহৃত হয়
ভিনসেন্ট হর্নিক্স

2

এটিতে মন্তব্য করার মতো পর্যাপ্ত প্রতিনিধি নেই, তবে কেবল লক্ষ্য করার জন্য যে গ্যারেথের উত্তর আমার পক্ষে যথেষ্ট কার্যকর হয়নি।

var config = {
    map: {
        '*': {
            'component': 'js/component'
        }
    },
    shim: {
        'component': {
            deps: ['jquery']
        }
    }
};

'উপাদান' মোড়ানো: 'জেএস / উপাদান' দিয়ে '*':{}কৌতুকটি করে।

এছাড়াও একটি টেমপ্লেট ফাইল তৈরি করার পরিবর্তে নীচের কোডটি উপরে রেখেছি app/design/frontend/<Vendor>/<theme>/Magento_Theme/layout/default.xml

    <referenceContainer name="after.body.start">
        <block class="Magento\Framework\View\Element\Text" name="jquery.bootstrap">
            <arguments>
                <argument translate="true" name="text" xsi:type="string"><![CDATA[<script type="text/x-magento-init">{"*":{"jquery.bootstrap":{}}}</script>]]></argument>
            </arguments>
        </block>
    </referenceContainer>

1

হ্যাঁ requirejs-config.jsঅনুসরণ হিসাবে থিম যোগ করা যেতে পারে। এইভাবে আমি আমার ম্যাজেন্টো 2 কাস্টম থিমটিতে ডটডটড লাইব্রেরি যুক্ত করি।

1. আপনার থিমটিতে জেএস লাইব্রেরিটি ডাউনলোড করুন এবং অনুসরণ করুন:

// app/design/frontend/Namespace/themename/web/js/jquery.dotdotdot.min.js

২. কোনও থিমের প্রয়োজনীয়জেএস ফাইল অনুসরণ করুন এবং অনুসরণকারীদের নতুন যুক্ত হওয়া লাইব্রেরিটি জানুন।

// app/design/frontend/Namespace/themename/requirejs-config.js
var config = {
   map: {
       '*': {
           dotdotdot: 'js/jquery.dotdotdot.min',
       }
   }
};

৩. আপনার থিমের মূল জেএস ফাইলগুলিতে যুক্ত গ্রন্থাগারটি অনুসরণ হিসাবে ব্যবহার করুন:

// app/design/frontend/Namespace/themename/web/js/main.js
require([ 'jquery' , 'dotdotdot' , 'domReady!'],function($){
    $(window).load(function() {
        //custom js code
        /* $(".product-item-name").each(function(){
            $(this).dotdotdot(); 
        }); */
    });
});

৪. এবং আপনার থিমের জেএস ফাইলটি আপনার সাইটের মাথায় নিম্নলিখিত হিসাবে অন্তর্ভুক্ত করুন:

// app/design/frontend/Namespace/themename/Magento_Theme/layout/default_head_blocks.xml
<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link src="js/main.js"/> 
    </head>
</page>

আপনি magento2 এ প্রতি পৃষ্ঠায় যে কোনও বাহ্যিক জেএস লাইব্রেরি এবং কাস্টম ফাইল যুক্ত করতে পারেন।


আমি requirejs-config.jsএইভাবে একটি লাইব্রেরি যুক্ত করার চেষ্টা করেছি । যাইহোক, প্রয়োজনীয় জেএস তখন js/some.library.jsথিম ডিরেক্টরি থেকে পরিবর্তে মূল থেকে লোড করার চেষ্টা করে ।
ফ্রিজমগ

আহ, আপনাকে .jsএক্সটেনশনটি বাদ দিতে হবে ... নির্বোধ :)
ফ্রিজম্যাগ
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.