magento2에서 bootstrap.js를 추가하는 방법

magento2 테마에 부트 스트랩 js를 포함하려고합니다. 그러나 문제는 주제에 부트 스트랩 js를 포함시킬 때입니다. 그 당시 콘솔에는 부트 스트랩에 jQuery가 필요하다는 오류가 발생했습니다.

그럼 어떻게 할 수 있습니까 ??? 누구든지 나를 도울 수 있습니까?

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>

모듈 활성화 (SSH to magento root) :

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

php -f bin/magento setup:upgrade

정적 리소스 배포 (SSH to magento root) :

php bin/magento setup:static-content:deploy

RequireJS는 누군가가 해당 자바 스크립트 모듈을 종속성으로 사용할 때까지 자바 스크립트 모듈 소스 파일을로드하지 않습니다. 당 앨런 스톰

CMS 페이지의 (사용 예) :

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

— 여호수아 34
소스

이것에 감사드립니다 :) 매우 명확한 안내서. 에서 xsi:noNamespaceSchemaLocation값 을 보는 것이 이상하다고 생각하지만 default.xml. 이것은 Magento의 모든 모듈화와 반대되는 경로를 정의합니다. 그러나 웹 전체에서 볼 수 있으므로 작동하는 방식이어야합니다.

— Alex Timmer

실제로 xsi:noNamespaceSchemaLocation는 구식이거나 잘못되었습니다. 현재 urn:magento:framework:Module/etc/module.xsd는 유연 해야합니다 .

— Jisse Reitsma 2016 년

나는 default.xml실제로 추가 가 필요 하다고 생각하지 않습니다 . Magento 2는 이미 모든 페이지에서 RequireJS를로드하므로 RequireJS를 명시 적으로 추가 할 필요가 없습니다.

— Jisse Reitsma 2016 년

어쨌든이 게시물을 올렸습니다.

— Jisse Reitsma 2016 년

부트 스트랩 JS 파일을 추가하기 위해 Magento 2.2.4에서 다음 단계를 수행했습니다.

1 단계 : JS 파일을 다음 위치에 배치하십시오.

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 단계 : 템플리트 파일 또는 사용자 정의 JS 파일에 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

— 밀란 챈 드로
소스