Cómo agregar bootstrap.js en magento2

Estoy tratando de incluir bootstrap js en mi tema magento2. Pero el problema es cuando incluyo bootstrap js en mi tema. Esa consola de tiempo está dando error que bootstrap requiere jQuery.

Entonces, ¿cómo puedo hacerlo? ¿Alguien puede ayudarme por favor?

magento2 jquery

— Asish Hira
fuente

Crear estructura de carpetas del módulo:

app / code / [Vendor] / [ModuleName]

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

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

Crear archivos de módulo:

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

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

Habilitar módulo (SSH a raíz de magento):

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

php -f bin/magento setup:upgrade

Implemente recursos estáticos (SSH en la raíz de magento):

php bin/magento setup:static-content:deploy

RequireJS no cargará ningún archivo fuente del módulo javascript hasta que alguien use ese módulo javascript como dependencia. por Alan Storm

(ejemplo de uso) en la página CMS:

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

Relacionado: Agregar CSS a una página CMS usando Layout Update XML

— Joshua34
fuente

Gracias por esto :) Una guía muy clara. Aunque me resulta extraño ver el xsi:noNamespaceSchemaLocationvalor en default.xml. Me parece que esto va en contra de toda la modularidad en Magento, para definir un camino como ese. Pero lo veo en toda la web, por lo que debe ser la forma en que funcionan las cosas.

— Alex Timmer

De hecho, el xsi:noNamespaceSchemaLocationestá desactualizado, o incluso mal. Actualmente debería ser urn:magento:framework:Module/etc/module.xsdlo que lo hace flexible.

— Jisse Reitsma

No creo que la adición de default.xmlsea realmente necesaria. Magento 2 ya carga RequireJS en todas partes en todas las páginas, por lo que no es necesario agregar usted mismo RequireJS explícitamente.

— Jisse Reitsma

Subió esta publicación de todos modos, porque es increíble.

— Jisse Reitsma

Para agregar el archivo JS bootstrap, seguí los siguientes pasos en Magento 2.2.4.

Paso 1: coloque el archivo JS en la siguiente ubicación.

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

Paso 2: agrega los siguientes scripts en este archivo 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']
        }
    }
};

Paso 3: Agregue los siguientes scripts en los archivos de plantilla o sus archivos JS personalizados (sin scriptetiqueta).

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

Paso 4: Ve a la carpeta raíz de Magento y ejecuta el comando a continuación.

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

— Milan Chandro
fuente