Bagaimana cara menambahkan Bootstrap 4 dalam tema Magento 2?

Jawaban:

23

Untuk menambahkan Bootstrap 4 In Magento 2.2.3 (diuji) & di atas dalam tema khusus Anda, ikuti langkah-langkah di bawah ini

1) Bootstrap file css di dalam folder web

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

THEME_LOCATION\web\css\bootstrap.css

Panggil bootstrap file css di default_head_blocks

THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xml

Menambahkan css

<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) Menambahkan file Js dalam bentuk bundel daripada individual karena individu tidak berfungsi

Tempatkan file bootstrap.bundle.js dapat diunduh dari sini 

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

Panggil Bootstrap Js Ke requireejs-config.js

THEME_LOCATION\Magento_Theme\requirejs-config.js

kode untuk 

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

Tambahkan kode di bawah ini di header.phtml setelah tag skrip Anda sudah ada

THEME_LOCATION\Magento_Theme\templates\html\header.phtml

Kode:

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

Jalankan Perintah di Bawah Ini:

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

php bin/magento cache:flush

Catatan: Diuji pada Magento 2.2.3 dan Terbaru juga 2.2.6. Juga diuji pada 2.3.3

Diperbarui : Unduh Bootstrap yang dikompilasi dari sini dan gunakan bundle js

Manoj Deswal
sumber
Ok terima kasih. Saya akan mencoba solusi ini. BTW Apa perbedaan antara bootstrap.bundle.js dan bootstrap.js?
Magecode
Popper.js termasuk dalam bundle js ..... dan jquery sudah ada di dalam magento .... popper tidak bekerja sendiri tetapi berfungsi menggunakan sebagai bundel
Manoj Deswal
@Magecode apakah ini berfungsi di Magento 2.2.4?
Manoj Deswal
1
Saya akhirnya menemukan jawabannya ... Saya menempatkan js di MY_THEME / web / js daripada MY_THEME / Magento_Theme / web / js im sorry
Black
1
Ini adalah cara kerja standar sebelum 2.2.3 tetapi di 2.2.3 tidak bekerja dan saya menemukan cara di atas. Tapi itu masih berfungsi di 2.3.2 .... Cara Anda melakukannya dengan cara yang tepat
Manoj Deswal
11

Anda dapat menambahkan Bootstrap dengan cara ini, ikuti langkah-langkah di bawah ini: Catatan: Solusi ini tidak berfungsi dengan Magento 2.2.3 dan di atasnya

1) Tempatkan JS dan CSS Anda di lokasi di bawah ini

/ app / design / frontend / vendor-name / theme-name / web / css

/ app / design / frontend / vendor-name / theme-name / web / js

2) Panggil file di default_head_blocks.xml Anda

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

tambahkan baris kode ini

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

3) Jalankan perintah di bawah ini 

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy
Mayur Rathod
sumber
Dan bagaimana cara kerjanya dengan Magento 2.2.3 dan di atasnya?
Hitam
6

Anda harus menggunakan manajer paket bower untuk menambahkan bootstrap 4 di folder web tema Anda.

MENGAPA? Karena ada pembaruan yang konstan & mudah dikelola. Jalankan perintah pembaruan Bootstrap 4 diperbarui.

JUGA: Kami lebih suka menggunakan KURANG atau SCSS dengan bootstrap 4. Kuat dan mudah untuk refactor.

Ikuti langkah-langkah di bawah ini untuk menginstal bower:

1) Instal LTS nodeJS pada OS Anda masing-masing dari: https://nodejs.org/en/

2) Instal pengelola paket bower secara global: npm install -g bower

3) Pasang gitdari: https://git-scm.com/

4) Instal bootstrap 4:

Dalam webdirektori Anda tema kustom Magento

Sebagai contoh: Buka terminal di <Magento root>/app/design/frontend/MyCustom/theme/web/

Jalankan perintah ini untuk menginstal bootstrap 4: bower install bootstrap4

5) Setelah ini, Anda perlu menambahkan font, bootstrap CSS & bootstrap JS di node tata letak default untuk meningkatkan boostrap pada setiap halaman dalam Magento_Thememodul dalam tema khusus Anda.

Kami menggunakan tegukan untuk mengkompilasi SCSS ke CSS.

Ananth
sumber
Bagaimana cara menggunakan pengelola paket bower?
Magecode
Anda perlu mengunduh simpul dari sini: tautan . Jika Anda menggunakan linux maka gunakan manajer paket masing-masing. Kemudian instal pondok menggunakan perintah ini: sudo npm install -g bower. Setelah menginstal bower, instal paket js / css di direktori Theme Anda:app/design/frontend/My/Theme/
Ananth
Di sini Anda perlu perubahan standar direktori instalasi dari bower_componentske webmenggunakan .bowerrc file konfigurasi.
Ananth
1
Saya pikir Bower tidak lagi relevan. Tim Bower bahkan merekomendasikan penggunaan Benang atau Webpack atau Paket untuk proyek-proyek frontend.
phagento
package.jsonFile pertama yang terbuka dari Bootstrap 4, jika Anda melihat fileskunci array hanya menunjukkan bahwa pencocokan jenis file akan ditambahkan ke direktori proyek Anda. fileskunci hanya digunakan oleh perintah Bower. Jika Anda ingin berkontribusi atau mengkompilasi ulang Bootstrap maka Anda harus mencoba Benang. Karena itu akan menambah file / direktori yang tidak perlu ke proyek. Webpack dan Parcel adalah untuk proyek simpul yang dikompilasi untuk penggunaan JavaScript untuk frontend.
Ananth
5

Setelah membaca jawaban di atas, saya punya saran lain: masukkan Bootstrap 4 ke dalam modul, dan gunakan CDN untuk menautkan file Bootstrap.

Saya berasumsi Anda tahu cara membuat modul dasar. Jika tidak, Anda bisa merujuk ke sini . Jadi inilah langkah-langkahnya:

  • Buat file app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xmldengan kode berikut:

    <?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>

  • Aktifkan modul dan jalankan setup:upgradeperintah, itu saja!

Manfaat:

  1. Berlaku untuk SEMUA tema sekaligus, tidak peduli tema itu aktif atau tidak aktif
  2. Anda tidak perlu mengunduh file apa pun ke sistem Anda
  3. Sangat mudah diperbarui. Ganti saja tautan CDN adalah satu-satunya tugas yang perlu Anda lakukan jika perlu. Anda tidak perlu mengkompilasi dan mengganti file apa pun ketika Anda memperbarui ke Bootstrap 5, 6, 7 ...
  4. Anda dapat mengaktifkan dan menonaktifkan Bootstrap dengan SATU perintah sederhana.
  5. Anda tidak perlu menimpa apa pun. Semuanya ada di atas kode saat ini.
  6. Tidak perlu menjalankan penyebaran statis yang mungkin memakan waktu

Diuji pada Magento 2.2.4, tetapi harus bekerja di semua versi Magento 2.X. EDIT * mengubah tag tautan href ke src agar sejajar dengan devdocs. Referensi:

PY Yick
sumber
CDN terkadang lambat.
phagento
Saya mendapatkanThe attribute 'integrity' is not allowed.
Black