Magento2 এ কীভাবে বুটস্ট্র্যাপ.জেগুলি যুক্ত করবেন

আমি আমার ম্যাজেন্টো 2 থিমের বুটস্ট্র্যাপ জেএস অন্তর্ভুক্ত করার চেষ্টা করছি। তবে সমস্যাটি যখন আমি আমার থিমটিতে বুটস্ট্র্যাপ জেএস অন্তর্ভুক্ত করি। এই সময় কনসোল ত্রুটি দিচ্ছে যে বুটস্ট্র্যাপে jQuery প্রয়োজন require

তাহলে আমি এটা কিভাবে করব ??? অনুগ্রহ করে কেউ কি আমাকে সাহায্য করতে পারেন?

magento2 jquery

— আশীষ হীরা
সূত্র

মডিউল ফোল্ডার কাঠামো তৈরি করুন:

app / code / [Vendor] / [ModuleName]

app / code / [Vendor] / [ModuleName] / etc

app / code / [Vendor] / [ModuleName] / view / frontend / layout

মডিউল ফাইলগুলি তৈরি করুন:

app / code / [Vendor] / [ModuleName] / registration.php

app / code / [Vendor] / [ModuleName] / etc / module.xml

app / code / [Vendor] / [ModuleName] / view / frontend / requirejs-config.js

app / code / [Vendor] / [ModuleName] / view / frontend / layout / default.xml

app / code / [Vendor] / [ModuleName] / view / frontend / layout / default_head_blocks.xml

registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    '[Vendor]_[ModuleName]',
    __DIR__
);

module.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
    <module name="[Vendor]_[ModuleName]" setup_version="0.0.1"/>
</config>

requirejs-config.js

var config = {
    paths: {
        "jquery.bootstrap": "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min"
    },
    shim: {
        'jquery.bootstrap': {
            'deps': ['jquery']
        }
    }
};

default.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
    <referenceBlock name="head">
        <block class="Magento\Theme\Block\Html\Head\Script" name="requirejs" before="-">
            <arguments>
                <!-- RequireJs library enabled -->
                <argument name="file" xsi:type="string">requirejs/require.js</argument>
            </arguments>
        </block>
        <!-- Special block with necessary config is added on the page -->
        <block class="Magento\RequireJs\Block\Html\Head\Config" name="requirejs-config" after="requirejs"/>
    </referenceBlock>
</page>

default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
    <head>
        <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" src_type="url"/>
        <css src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" src_type="url"/>
    </head>
</page>

মডিউল সক্ষম করুন (এসএসএইচ থেকে মাগেন্টো মূল):

php -f bin/magento module:enable --clear-static-content [Vendor]_[ModuleName]

php -f bin/magento setup:upgrade

স্থিতিশীল সংস্থানসমূহ স্থাপন করুন (এসএসএইচ থেকে ম্যাজেন্টো মূল):

php bin/magento setup:static-content:deploy

প্রয়োজনীয় জেএস কোনও জাভাস্ক্রিপ্ট মডিউল উত্স ফাইল লোড করবে না যতক্ষণ না কেউ সেই জাভাস্ক্রিপ্ট মডিউলটিকে নির্ভরতা হিসাবে ব্যবহার করে। অ্যালান ঝড় প্রতি

(উদাহরণস্বরূপ ব্যবহার) সিএমএস পৃষ্ঠায়:

<script type="text/javascript">
    requirejs(['jquery', 'jquery.bootstrap'], function (jQuery, jQueryBootstrap) {
        jQuery('.carousel').carousel();
    });
</script>

সম্পর্কিত: লেআউট আপডেট এক্সএমএল ব্যবহার করে কোনও সিএমএস পৃষ্ঠায় সিএসএস যুক্ত করা হচ্ছে

— Joshua34
সূত্র

এই জন্য ধন্যবাদ :) একটি খুব স্পষ্ট গাইড। যদিও আমি এর xsi:noNamespaceSchemaLocationমানটি দেখতে অদ্ভুত মনে করি default.xml। আমার কাছে মনে হচ্ছে এটি ম্যাজেন্টোর সমস্ত মড্যুলারটির বিপরীতে চলেছে, এর মতো একটি পথ নির্ধারণ করতে। তবে আমি এটি সমস্ত ওয়েবে দেখতে পাচ্ছি, সুতরাং জিনিসগুলি যেভাবে কাজ করে তা অবশ্যই এটি।

— অ্যালেক্স টিমারের

প্রকৃতপক্ষে xsi:noNamespaceSchemaLocationপুরানো, বা এমনকি ভুল। বর্তমানে এটি হওয়া উচিত urn:magento:framework:Module/etc/module.xsdযা এটি নমনীয় করে তোলে।

— জিস রিটসমা

আমি মনে করি না সংযোজন default.xmlআসলে প্রয়োজন হয়। ম্যাজেন্টো 2 ইতিমধ্যে সমস্ত পৃষ্ঠায় যে কোনও জায়গায় প্রয়োজনীয় জেএস লোড করে, তাই নিজেকে স্পষ্টতই রিকোয়ারডজেএস যুক্ত করার দরকার নেই।

— জিস রিটসমা

যাইহোক, এই পোস্টটি আপড হয়েছে, কারণ এটি দুর্দান্ত।

— জিস রিটসমা

বুটস্ট্র্যাপ জেএস ফাইল যুক্ত করতে, আমি ম্যাজেন্টো ২.২.৪ এ নিম্নলিখিত পদক্ষেপগুলি অনুসরণ করেছি।

পদক্ষেপ 1: নিম্নলিখিত অবস্থানে জেএস ফাইলটি রাখুন।

app/design/frontend/{Vendorname}/{Themename}/Magento_Theme/web/js/bootstrap.bundle.min.js

পদক্ষেপ 2: এই ফাইলটিতে নিম্নলিখিত স্ক্রিপ্টগুলি যুক্ত করুন app/design/frontend/{Vendorname}/{Themename}/Magento_Theme/requirejs-config.js।

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

var config = {
    paths: {
            'bootstrap':'Magento_Theme/js/bootstrap.bundle.min',
    } ,
    shim: {
        'bootstrap': {
            'deps': ['jquery']
        }
    }
};

পদক্ষেপ 3: টেমপ্লেট ফাইলগুলি বা আপনার কাস্টম জেএস ফাইলগুলিতে ( scriptট্যাগ ছাড়াই ) নিম্নলিখিত স্ক্রিপ্টগুলি যুক্ত করুন ।

<script type="text/javascript">    
    require([ 'jquery', 'jquery/ui', 'bootstrap'], function($){ 
       // core js, jquery, jquery-ui, bootstrap codes go here
    });
</script>

পদক্ষেপ 4: Magento মূল ফোল্ডারে যান এবং নীচের কমান্ডটি চালান।

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy

— মিলন চন্দরো
সূত্র