Làm cách nào để thêm Bootstrap 4 trong chủ đề Magento 2?

Câu trả lời:

23

Để thêm Bootstrap 4 Trong Magento 2.2.3 (đã kiểm tra) & ở trên trong chủ đề tùy chỉnh của bạn, hãy làm theo các bước dưới đây

1) Bootstrap css tập tin trong thư mục web

Lưu ý : THEME_LOCATION=>app\design\frontend\vendor-name\theme-name\

THEME_LOCATION\web\css\bootstrap.css

Gọi các tệp css bootstrap trong default_head_blocks

THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xml

Thêm 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) Thêm tệp Js ở dạng gói thay vì riêng lẻ vì cá nhân không hoạt động

Đặt tệp bootstrap.bundle.js có thể tải xuống từ đây 

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

Gọi Bootstrap Js vào requestjs-config.js

THEME_LOCATION\Magento_Theme\requirejs-config.js

mã cho 

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

Thêm mã bên dưới trong header.phtml sau thẻ script đã có của bạn

THEME_LOCATION\Magento_Theme\templates\html\header.phtml

Mã số:

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

Chạy bên dưới các lệnh:

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

php bin/magento cache:flush

Lưu ý: Đã thử nghiệm trên Magento 2.2.3 và mới nhất 2.2.6. Cũng đã thử nghiệm trên 2.3.3

Đã cập nhật : Tải xuống Bootstrap được biên dịch từ đây và sử dụng gói js

— Manoj Deswal
nguồn
Được rồi cảm ơn. Tôi sẽ thử giải pháp này. BTW Sự khác biệt giữa bootstrap.bundle.js và bootstrap.js là gì?
— Magecode
Popper.js được bao gồm trong gói js ..... và jquery đã có trong magento .... popper không hoạt động một mình mà nó hoạt động như một gói
— Manoj Deswal
@Magecode có hoạt động trên Magento 2.2.4 không?
— Manoj Deswal
1
Cuối cùng tôi đã tìm ra nó ... Tôi đã đặt js vào MY_THEME / web / js thay vì MY_THEME / Magento_Theme / web / js tôi xin lỗi
— Đen
1
Đây là cách làm việc tiêu chuẩn trước 2.2.3 nhưng trong 2.2.3 nó không hoạt động và tôi đã khám phá ra cách trên. Nhưng nó vẫn hoạt động trong 2.3.2 .... Cách bạn thực hiện theo cách phù hợp
— Manoj Deswal
11

Bạn có thể thêm Bootstrap theo cách này, làm theo các bước dưới đây: Lưu ý: Giải pháp này không hoạt động với Magento 2.2.3 trở lên

1) Đặt JS và CSS của bạn ở vị trí bên dưới

/ app / design / frontend / tên nhà cung cấp / theme-name / web / css

/ app / design / frontend / tên nhà cung cấp / theme-name / web / js

2) Gọi các tệp trong default_head_blocks.xml của bạn

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

thêm những dòng mã này

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

3) Chạy bên dưới các lệnh 

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy
— Mayur Rathod
nguồn
Và làm thế nào để nó hoạt động sau đó với Magento 2.2.3 trở lên?
— Đen
6

Bạn nên sử dụng trình quản lý gói Bower để thêm bootstrap 4 trong thư mục web chủ đề của bạn.

TẠI SAO? Bởi vì có cập nhật liên tục & dễ quản lý. Chạy lệnh cập nhật, Bootstrap 4 được cập nhật.

CSONG : Chúng tôi thích sử dụng LESS hoặc SCSS với bootstrap 4. Nó mạnh mẽ và dễ tái cấu trúc.

Thực hiện theo các bước dưới đây để cài đặt Bower:

1) Cài đặt LTS nodeJS trên HĐH tương ứng của bạn từ: https://nodejs.org/en/

2) Cài đặt trình quản lý gói Bower trên toàn cầu: npm install -g bower

3) Cài đặt gittừ: https://git-scm.com/

4) Cài đặt bootstrap 4:

Trong webthư mục của bạn Magento tùy chỉnh chủ đề

Ví dụ: Mở terminal tại <Magento root>/app/design/frontend/MyCustom/theme/web/

Chạy lệnh này để cài đặt bootstrap 4: bower install bootstrap4

5) Sau này, bạn cần thêm phông chữ, bootstrap CSS & bootstrap JS trong nút bố cục mặc định để làm việc boostrap trên mỗi trang trong Magento_Thememô-đun trong chủ đề tùy chỉnh của bạn.

Chúng tôi sử dụng gulp để biên dịch SCSS thành CSS.

— Ananth
nguồn
Làm thế nào để sử dụng trình quản lý gói Bower?
— Mã hóa
Bạn cần tải xuống nút từ đây: link . Nếu bạn đang sử dụng linux thì hãy sử dụng trình quản lý gói tương ứng. Sau đó cài đặt Bower bằng lệnh này : sudo npm install -g bower. Sau khi cài đặt, hãy cài đặt các gói js / css trong thư mục Chủ đề của bạn:app/design/frontend/My/Theme/
— Ananth
Ở đây bạn cần phải thay đổi mặc định thư mục cài đặt từ bower_componentsđể websử dụng .bowerrc tập tin cấu hình.
— Ananth
1
Tôi nghĩ Bower không còn phù hợp nữa. Nhóm Bower thậm chí còn khuyến nghị sử dụng Sợi hoặc Webpack hoặc Parcel cho các dự án lối vào.
— phagento
package.jsonTệp mở đầu tiên của Bootstrap 4, nếu bạn thấy fileskhóa mảng, nó chỉ hiển thị rằng loại tệp phù hợp sẽ được thêm vào thư mục dự án của bạn. filesPhím chỉ được sử dụng bởi lệnh Bower. Nếu bạn muốn đóng góp hoặc biên dịch lại Bootstrap thì bạn nên thử Sợi. Bởi vì nó sẽ thêm tập tin / thư mục không cần thiết vào dự án. Webpack và Parcel dành cho dự án nút mà họ biên dịch thành JavaScript sử dụng cho frontend.
— Ananth
5

Sau khi đọc các câu trả lời ở trên, tôi có một đề nghị khác: đặt Bootstrap 4 vào một mô-đun và sử dụng CDN để liên kết các tệp Bootstrap thay thế.

Tôi giả sử bạn biết cách tạo ra một mô-đun cơ bản. Nếu không, bạn có thể tham khảo tại đây . Vì vậy, đây là các bước:

  • Tạo tập tin app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xmlvới các mã sau:

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

  • Kích hoạt mô-đun và chạy setup:upgradelệnh, thế thôi!

Những lợi ích:

  1. Áp dụng cho TẤT CẢ các chủ đề cùng một lúc, bất kể chủ đề đang hoạt động hay không hoạt động
  2. Bạn không cần tải xuống bất kỳ tập tin nào vào hệ thống của bạn
  3. Rất dễ dàng để cập nhật. Chỉ cần thay thế liên kết CDN là nhiệm vụ duy nhất bạn cần làm nếu cần. Bạn không cần phải biên dịch và thay thế bất kỳ tệp nào khi cập nhật lên Bootstrap 5, 6, 7 ...
  4. Bạn có thể bật và tắt Bootstrap bằng MỘT lệnh đơn giản.
  5. Bạn không cần ghi đè bất cứ điều gì. Tất cả mọi thứ là trên đầu của các mã hiện tại.
  6. Không cần phải chạy triển khai tĩnh có thể tốn thời gian

Đã thử nghiệm trên Magento 2.2.4, nhưng sẽ hoạt động trên tất cả các phiên bản Magento 2.X. EDIT * đã thay đổi các thẻ liên kết href thành src thành dòng với devdocs. Tài liệu tham khảo:

— PY Yick
nguồn
CDN đôi khi có thể chậm.
— phagento
Tôi nhận đượcThe attribute 'integrity' is not allowed.
— Đen
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.