Magento 2 temasında Bootstrap 4 nasıl eklenir?

Yanıtlar:

23

Özel temanıza Bootstrap 4 In Magento 2.2.3 (test edilmiş) ve üstü eklemek için aşağıdaki adımları izleyin

1) Web klasörü içindeki Bootstrap css dosyaları

Not : THEME_LOCATION=>app\design\frontend\vendor-name\theme-name\

THEME_LOCATION\web\css\bootstrap.css

Default_head_blocks'ta bootstrap css dosyalarını arayın

THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xml

Css ekleme

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <!--Bootstrap css-->
        <css src="css/bootstrap.css" />
    </head>
</page>

2) Bireysel çalışmadığı için Js dosyalarını tek tek değil paket formunda ekleme

Place'ın bootstrap.bundle.js dosyaları indirebileceğiniz burada 

THEME_LOCATION\Magento_Theme\web\js\bootstrap.bundle.js

Bootstrap Js'yi Intojs-config.js'yi arayın

THEME_LOCATION\Magento_Theme\requirejs-config.js

için kod 

var config = {
    paths: {
            'bootstrap':'Magento_Theme/js/bootstrap.bundle',
    } ,
    shim: {
        'bootstrap': {
            'deps': ['jquery']
        }
    }
};

Mevcut kod etiketinizden sonra header.phtml dosyasına aşağıdaki kodu ekleyin

THEME_LOCATION\Magento_Theme\templates\html\header.phtml

Kod:

<script type="text/javascript">require(['bootstrap']);</script>

Komutların Altında Çalıştır:

php bin/magento setup:static-content:deploy (Append -f if you are using Magento 2.2.x >= version)

php bin/magento cache:flush

Not: Magento 2.2.3 ve Son sürümlerde de test edilmiştir 2.2.6. Ayrıca 2.3.3'te test edildi

Güncelleme : Buradan derlenen Bootstrap'i indirin ve js paketini kullanın

— Manoj Deswal
kaynak
Tamam teşekkürler. Bu çözümü deneyeceğim. BTW bootstrap.bundle.js ve bootstrap.js arasındaki fark nedir?
— Magecode
Popper.js paket js ..... dahil ve jquery zaten magento içinde .... popper tek başına çalışmıyor ama bir paket olarak kullanarak çalışır
— Manoj Deswal
@Magecode Magento 2.2.4 üzerinde çalışıyor mu?
— Manoj Deswal
1
Sonunda anladım ... MY_THEME / Magento_Theme / web / js im üzgünüm yerine MY_THEME / web / js js yerleştirdim
— Black
1
Bu, 2.2.3'ten önceki standart çalışma yoluydu, ancak 2.2.3'te işe yaramadı ve yukarıdaki yolu keşfettim. Ama hareketsiz 2.3.2'de çalışıyor .... Yaptığınız yol bu şekilde
— Manoj Deswal
11

Bootstrap'ı bu şekilde ekleyebilirsiniz, aşağıdaki adımları izleyin: Not: Bu çözüm Magento 2.2.3 ve üstü ile çalışmaz

1) JS ve CSS'nizi aşağıdaki konuma yerleştirin

/ App / tasarım / kullanıcı arayüzü / satıcı-name / tema adı / web / css

/ App / tasarım / kullanıcı arayüzü / satıcı-name / tema adı / web / js

2) default_head_blocks.xml dosyasındaki dosyaları arayın

app/design/frontend/vendor-name/theme-name/Magento_Theme/layout/default_head_blocks.xml

bu kod satırını ekle

<css src="css/bootstrap.css" />
 <script src="js/bootstrap.min.js"/>

3) Aşağıdaki komutları çalıştırın 

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy
— Mayur Rathod
kaynak
Peki Magento 2.2.3 ve üstü ile nasıl çalışır?
— Siyah
6

Tema web klasörünüze bootstrap 4 eklemek için bower paket yöneticisini kullanmalısınız.

NEDEN? Çünkü sürekli güncelleme ve yönetimi kolaydır. Bootstrap 4 güncellenmiş güncelleme komutunu çalıştırın.

AYRICA: Bootstrap 4 ile LESS veya SCSS kullanmayı tercih ediyoruz. Sağlam ve kolay refactor.

Bower'ı kurmak için aşağıdaki adımları izleyin:

1) https://nodejs.org/en/ adresinden ilgili işletim sisteminize LTS nodeJS yükleyin.

2) Küresel olarak bower paket yöneticisini kurun: npm install -g bower

3) Yükleme git: https://git-scm.com/

4) Bootstrap 4'ü yükleyin:

Gelen webEğer Magento özel tema dizinine

Örneğin: Terminali şurada aç: <Magento root>/app/design/frontend/MyCustom/theme/web/

Bootstrap 4'ü yüklemek için bu komutu çalıştırın: bower install bootstrap4

5) Bundan sonra Magento_Theme, özel temanızdaki modülün her sayfasında boostrap çalışmak için varsayılan düzen düğümünde fontlar, bootstrap CSS ve bootstrap JS eklemeniz gerekir .

SCSS'yi CSS'ye derlemek için gulp kullanıyoruz.

— Ananth
kaynak
Bower Paket Yöneticisi nasıl kullanılır?
— Magecode
Düğümü buradan indirmeniz gerekiyor: bağlantı . Linux kullanıyorsanız ilgili paket yöneticisini kullanın. Sonra bu komutu kullanarak kameriye yükleyin: sudo npm install -g bower. Bower install js / css paketlerini Tema dizininize kurduktan sonra:app/design/frontend/My/Theme/
— Ananth
Burada gelen yükleme dizini değiştirmek varsayılan gerekir bower_componentsiçin webkullanarak .bowerrc yapılandırma dosyası.
— Ananth
1
Bence Bower artık alakalı değil. Bower ekibi, ön uç projeleri için İplik veya Webpack veya Parsel kullanmanızı önerir.
— phagento
İlk package.jsonBootstrap 4 dosyasını açın , filesdizi anahtarını görürseniz proje dizininize sadece dosya türü eşleşmesinin ekleneceğini gösterir. filestuşu yalnızca Bower komutu tarafından kullanılır. Bootstrap'a katkıda bulunmak veya yeniden derlemek istiyorsanız İpliği denemelisiniz. Çünkü projeye gereksiz dosya / dizin ekleyecektir. Webpack ve Parsel, ön uç için JavaScript kullanımı için derledikleri düğüm projesi içindir.
— Ananth
5

Yukarıdaki cevapları okuduktan sonra başka bir önerim var: Bootstrap 4'ü bir modüle koyun ve bunun yerine Bootstrap dosyalarını bağlamak için CDN kullanın.

Temel bir modülün nasıl oluşturulacağını bildiğinizi varsayıyorum. Değilse, buraya başvurabilirsiniz . İşte adımlar:

  • app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xmlAşağıdaki kodlarla dosya oluşturun :

    <?xml version="1.0"?>
<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <link rel="stylesheet"  type="text/css" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous" src_type="url" />   
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous" src_type="url"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous" src_type="url"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous" src_type="url"></script>
    </head>
</page>

  • Modülü etkinleştirin ve setup:upgradekomutu çalıştırın , hepsi bu!

Yararları:

  1. Tema etkin veya devre dışı olursa olsun TÜM temalara aynı anda uygulayın
  2. Sisteminize herhangi bir dosya indirmenize gerek yoktur
  3. Güncellemesi çok kolay. CDN bağlantısını değiştirmeniz gerekirse yapmanız gereken tek iştir. Bootstrap 5, 6, 7'ye güncellediğinizde herhangi bir dosyayı derlemenize ve değiştirmenize gerek yoktur ...
  4. Bir basit komutla Bootstrap'i etkinleştirebilir ve devre dışı bırakabilirsiniz.
  5. Hiçbir şeyi geçersiz kılmanıza gerek yoktur. Her şey mevcut kodların üstünde.
  6. Zaman alan statik dağıtımı çalıştırmaya gerek yoktur

Magento 2.2.4 üzerinde test edilmiştir, ancak tüm Magento 2.X sürümlerinde çalışmalıdır. EDIT * devdocs ile satır içi olması için href bağlantı etiketlerini src olarak değiştirdi. Referans:

— PY Yick
kaynak
CDN bazen yavaş olabilir.
— phagento
AnladımThe attribute 'integrity' is not allowed.
— Siyah
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.