Come aggiungere bootstrap.js in magento2

Sto cercando di includere bootstrap js sul mio tema magento2. Ma il problema è quando includo bootstrap js sul mio tema. Quella console temporale sta dando l'errore che bootstrap richiede jQuery.

Allora come posso farlo ??? Qualcuno può aiutarmi per favore?

magento2 jquery

— Asish Hira
fonte

Crea struttura di cartelle del modulo:

app / code / [Vendor] / [ModuleName]

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

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

Crea file del modulo:

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>

Abilita modulo (da SSH a magento root):

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

php -f bin/magento setup:upgrade

Distribuire risorse statiche (da SSH a root magento):

php bin/magento setup:static-content:deploy

RequireJS non caricherà alcun file sorgente del modulo javascript fino a quando qualcuno non utilizzerà quel modulo javascript come dipendenza. per Alan Storm

(esempio di utilizzo) nella pagina CMS:

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

Correlati: aggiunta di CSS a una pagina CMS utilizzando XML di aggiornamento del layout

— Joshua34
fonte

Grazie per questo :) Una guida molto chiara. Anche se trovo strano vedere il xsi:noNamespaceSchemaLocationvalore in default.xml. Mi sembra che ciò vada contro tutta la modularità in Magento, per definire un percorso del genere. Ma lo vedo su tutto il Web, quindi deve essere il modo in cui funzionano le cose.

— Alex Timmer,

In effetti xsi:noNamespaceSchemaLocationè obsoleto o addirittura sbagliato. Attualmente dovrebbe essere urn:magento:framework:Module/etc/module.xsdciò che lo rende flessibile.

— Jisse Reitsma,

Non penso che l'aggiunta di default.xmlsia effettivamente necessaria. Magento 2 carica già RequireJS ovunque su tutte le pagine, quindi non è necessario aggiungere esplicitamente RequireJS da solo.

— Jisse Reitsma,

Ho aumentato questo post comunque, perché è fantastico.

— Jisse Reitsma,

Per aggiungere il file bootstrap JS, ho seguito i seguenti passi su Magento 2.2.4.

Passaggio 1: posizionare il file JS nella seguente posizione.

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

Passaggio 2: aggiungere i seguenti script in questo file 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']
        }
    }
};

Passaggio 3: aggiungere i seguenti script nei file modello o nei file JS personalizzati (senza scripttag).

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

Passaggio 4: vai alla cartella principale di Magento ed esegui il comando seguente.

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

— Milan Chandro
fonte