Bagaimana cara menambahkan bootstrap.js di magento2

13

Saya mencoba untuk memasukkan bootstrap js pada tema magento2 saya. Tetapi masalahnya adalah ketika saya memasukkan bootstrap js pada tema saya. Konsol waktu itu memberikan kesalahan yang membutuhkan bootstrap jQuery.

Lalu bagaimana saya bisa melakukannya ??? Adakah yang bisa membantu saya?

magento2 jquery Asish Hira
sumber

Jawaban:

21

Buat Struktur Folder Modul:

app / code / [Vendor] / [ModuleName]

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

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

Buat File Modul:

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

registrasi.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>

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

Aktifkan Modul (SSH ke magento root):

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

php -f bin/magento setup:upgrade

Menyebarkan sumber statis (SSH ke magento root):

php bin/magento setup:static-content:deploy

RequireJS tidak akan memuat file sumber modul javascript apa pun sampai seseorang menggunakan modul javascript tersebut sebagai ketergantungan. per Alan Storm

(contoh penggunaan) di Halaman CMS:

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

Terkait: Menambahkan CSS ke halaman CMS menggunakan Layout Update XML

Yosua34
sumber
Terima kasih untuk ini :) Panduan yang sangat jelas. Meskipun saya merasa aneh melihat xsi:noNamespaceSchemaLocationnilainya default.xml. Menurut saya ini bertentangan dengan semua modularitas di Magento, untuk mendefinisikan jalur seperti itu. Tapi saya melihatnya di seluruh web, jadi itu pasti cara kerjanya.
Alex Timmer
Memang xsi:noNamespaceSchemaLocationsudah ketinggalan zaman, atau bahkan salah. Saat ini seharusnya urn:magento:framework:Module/etc/module.xsdyang membuatnya fleksibel.
Jisse Reitsma
Saya tidak berpikir penambahan default.xmlitu sebenarnya dibutuhkan. Magento 2 sudah memuat RequireJS di mana-mana di semua halaman, jadi Anda tidak perlu menambahkan sendiri RequireJS secara eksplisit.
Jisse Reitsma
1
Tetap naik pos ini, karena itu mengagumkan.
Jisse Reitsma
4

Untuk menambahkan file JS bootstrap, saya mengikuti langkah-langkah berikut di Magento 2.2.4.

Langkah 1: Tempatkan file JS di lokasi berikut.

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

Langkah 2: Tambahkan skrip berikut dalam file ini 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']
        }
    }
};

Langkah 3: Tambahkan skrip berikut dalam file templat atau file JS khusus Anda (tanpa scripttag).

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

Langkah 4: Buka folder root Magento dan jalankan perintah di bawah ini.

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
Milan Chandro
sumber