Cách thêm bootstrap.js trong magento2

Tôi đang cố gắng đưa js bootstrap vào chủ đề magento2 của mình. Nhưng vấn đề là khi tôi đưa js bootstrap vào chủ đề của mình. Bảng điều khiển thời gian đó đang đưa ra lỗi mà bootstrap yêu cầu jQuery.

Sau đó, làm thế nào tôi có thể làm điều đó ??? Ai đó làm ơn giúp tôi với?

magento2 jquery

— Asish Hira
nguồn

Tạo cấu trúc thư mục mô-đun:

app / code / [Vendor] / [ModuleName]

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

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

Tạo tập tin mô-đun:

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

đăng ký.php

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

mô-đun

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

Yêu cầu-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>

Kích hoạt Mô-đun (SSH sang magento root):

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

php -f bin/magento setup:upgrade

Triển khai tài nguyên tĩnh (SSH đến magento root):

php bin/magento setup:static-content:deploy

RequireJS sẽ không tải bất kỳ tệp nguồn mô-đun javascript nào cho đến khi ai đó sử dụng mô-đun javascript đó làm phụ thuộc. mỗi cơn bão Alan

(ví dụ sử dụng) trong Trang CMS:

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

Liên quan: Thêm CSS vào trang CMS bằng cách sử dụng Bố cục Cập nhật XML

— Joshua34
nguồn

Cảm ơn vì điều này :) Một hướng dẫn rất rõ ràng. Mặc dù tôi thấy thật kỳ lạ khi thấy xsi:noNamespaceSchemaLocationgiá trị trong default.xml. Theo tôi điều này đi ngược lại tất cả các mô-đun trong Magento, để xác định một con đường như thế. Nhưng tôi thấy nó trên tất cả các trang web, vì vậy nó phải là cách mọi thứ hoạt động.

— Alex Timmer

Quả thực xsi:noNamespaceSchemaLocationlà lỗi thời, hoặc thậm chí sai. Hiện tại nó nên được urn:magento:framework:Module/etc/module.xsdlàm cho nó linh hoạt.

— Jisse Reitsma

Tôi không nghĩ rằng việc bổ sung default.xmllà thực sự cần thiết. Magento 2 đã tải RequireJS ở mọi nơi trên tất cả các trang, do đó không cần phải tự mình thêm RequireJS.

— Jisse Reitsma

Dù sao bài đăng này, bởi vì nó là tuyệt vời.

— Jisse Reitsma

Để thêm tệp JS bootstrap, tôi đã làm theo các bước sau trên Magento 2.2.4.

Bước 1: Đặt tệp JS vào vị trí sau.

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

Bước 2: Thêm các tập lệnh sau trong tập tin này 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']
        }
    }
};

Bước 3: Thêm các tập lệnh sau vào tệp mẫu hoặc tệp JS tùy chỉnh của bạn (không có scriptthẻ).

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

Bước 4: Chuyển đến thư mục gốc Magento và chạy lệnh bên dưới.

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

— Milan Chandro
nguồn