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?
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:
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
xsi:noNamespaceSchemaLocation
modası geçmiş, hatta yanlış. Şu anda urn:magento:framework:Module/etc/module.xsd
esnek olması gereken bu olmalıdır .
default.xml
Eklemeye gerçekten ihtiyaç olduğunu sanmıyorum . Magento 2, RequireJS'i tüm sayfalara zaten yüklediğinden, RequireJS'yi kendiniz eklemenize gerek yoktur.
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 ( script
etiketsiz) 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
xsi:noNamespaceSchemaLocation
değeri görmek garip bulsam dadefault.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ı.