Magento2'de bootstrap.js nasıl eklenir


13

Benim magento2 tema bootstrap js dahil etmeye çalışıyorum. Ama sorun benim tema bootstrap js dahil olmasıdır. Bu zaman konsolu, bootstrap'in jQuery gerektirdiği hata veriyor.

O zaman nasıl yapabilirim ??? Biri bana yardım edebilir mi?

Yanıtlar:


21

Modül Klasör Yapısı Oluşturun:

app / code / [Vendor] / [ModuleName]

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

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

Modül Dosyaları Oluşturun:

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>

Modülü Etkinleştir (SSH'den eflatun köküne):

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

php -f bin/magento setup:upgrade

Statik kaynakları dağıtma (magento köküne SSH):

php bin/magento setup:static-content:deploy

RequireJS, birisi bu javascript modülünü bağımlılık olarak kullanana kadar herhangi bir javascript modülü kaynak dosyasını yüklemez. başına Alan Fırtına

(örnek kullanım) CMS Sayfasında:

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

İlgili: Mizanpaj Güncelleme XML kullanarak CMS sayfasına CSS ekleme


Bunun için teşekkürler :) Çok açık bir rehber. Gerçi xsi:noNamespaceSchemaLocationdeğeri görmek garip bulsam da default.xml. Bana öyle geliyor ki böyle bir yol tanımlamak için Magento'daki tüm modülerliğe aykırı. Ama bunu web'in her yerinde görüyorum, bu yüzden işler böyle olmalı.
Alex Timmer

Gerçekten de xsi:noNamespaceSchemaLocationmodası geçmiş, hatta yanlış. Şu anda urn:magento:framework:Module/etc/module.xsdesnek olması gereken bu olmalıdır .
Jisse Reitsma

default.xmlEklemeye gerçekten ihtiyaç olduğunu sanmıyorum . Magento 2, RequireJS'i tüm sayfalara zaten yüklediğinden, RequireJS'yi kendiniz eklemenize gerek yoktur.
Jisse Reitsma

1
Bu gönderiyi yine de kullandım, çünkü harika.
Jisse Reitsma

4

Bootstrap JS dosyası eklemek için Magento 2.2.4'te aşağıdaki adımları izledim.

Adım 1: JS dosyasını aşağıdaki konuma yerleştirin.

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

Adım 2: Bu dosyaya aşağıdaki komut dosyalarını ekleyin 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']
        }
    }
};

Adım 3: Şablon dosyalarına veya özel JS dosyalarınıza ( scriptetiketsiz) aşağıdaki komut dosyalarını ekleyin .

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

Adım 4: Magento kök klasörüne gidin ve aşağıdaki komutu çalıştırın.

php bin/magento setup:upgrade
php bin/magento setup:static-content:deploy
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.