Jak dodać Bootstrap 4 w motywie Magento 2?

12

Muszę dodać Bootstrap 4 do mojego niestandardowego motywu.

Dodam Bootstrap 3 za pomocą odwołania:

Jak korzystać z bootstrap w moim niestandardowym motywie

Ale bootstrap 4 nie działa.

magento2 css magento2.2.4 framework Kod Magiczny
źródło

Co masz na myśli mówiąc „nie działa”?

Czarny

23

Aby dodać Bootstrap 4 In Magento 2.2.3 (testowany) i wyżej w niestandardowym motywie, wykonaj poniższe kroki

1) Pliki css Bootstrap w folderze internetowym

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

THEME_LOCATION\web\css\bootstrap.css

Wywołaj pliki CSS bootstrap w default_head_blocks

THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xml

Dodawanie 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) Dodawanie plików Js w formie pakietu, a nie pojedynczo, ponieważ jednostka nie działa

Umieść pliki bootstrap.bundle.js, które można pobrać stąd

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

Zadzwoń do Bootstrap Js Into wymaga jj-config.js

THEME_LOCATION\Magento_Theme\requirejs-config.js

kod dla

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

Dodaj poniższy kod w header.phtml po już istniejącym tagu skryptu

THEME_LOCATION\Magento_Theme\templates\html\header.phtml

Kod:

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

Uruchom poniżej poleceń:

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

php bin/magento cache:flush

Uwaga: Testowane na Magento 2.2.3 i najnowszej wersji 2.2.6. Testowany także w 2.3.3

Zaktualizowano : Pobierz skompilowany Bootstrap stąd i użyj pakietu js

Manoj Deswal
źródło

Ok dzięki. Spróbuję tego rozwiązania. BTW Jaka jest różnica między bootstrap.bundle.js i bootstrap.js?

Magecode

Popper.js zawarty w pakiecie js ..... i jquery jest już w magento .... popper nie działa sam, ale działa jako pakiet

Manoj Deswal

@Magecode czy działa na Magento 2.2.4?

Manoj Deswal

1

W końcu to rozgryzłem ... Umieściłem js w MY_THEME / web / js zamiast MY_THEME / Magento_Theme / web / js im sorry

Black

1

To był standardowy sposób działania przed 2.2.3, ale w 2.2.3 nie działał i odkryłem powyższy sposób. Ale nadal działa w 2.3.2 .... Sposób, w jaki to zrobiłeś, to właściwy sposób

Manoj Deswal

11

Możesz dodać Bootstrap w ten sposób, wykonaj następujące kroki: Uwaga: To rozwiązanie nie działa z Magento 2.2.3 i nowszymi

1) Umieść JS i CSS w poniższej lokalizacji

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

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

2) Wywołaj pliki w pliku default_head_blocks.xml

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

dodaj ten wiersz kodu

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

3) Uruchom poniższe polecenia

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy

Mayur Rathod
źródło

A jak to działa w Magento 2.2.3 i nowszych wersjach?

Czarny

6

Powinieneś użyć menedżera pakietów bower, aby dodać bootstrap 4 w folderze internetowym motywu.

DLACZEGO? Ponieważ istnieją ciągłe aktualizacje i łatwe w zarządzaniu. Uruchom polecenie aktualizacji, Bootstrap 4 zostanie zaktualizowany.

RÓWNIEŻ: Wolimy używać LESS lub SCSS z bootstrap 4. Jest solidny i łatwy do refaktoryzacji.

Wykonaj poniższe kroki, aby zainstalować altanę:

1) Zainstaluj LTS nodeJS w swoim systemie operacyjnym z: https://nodejs.org/en/

2) Zainstaluj menedżera pakietów Bower globalnie: npm install -g bower

3) Zainstaluj gitz: https://git-scm.com/

4) Zainstaluj bootstrap 4:

W webtwoim katalogu niestandardowym motywem Magento

Na przykład: Otwórz terminal o <Magento root>/app/design/frontend/MyCustom/theme/web/

Uruchom to polecenie, aby zainstalować bootstrap 4: bower install bootstrap4

5) Następnie musisz dodać czcionki, bootstrap CSS i bootstrap JS w domyślnym węźle układu, aby pracować na każdej stronie w Magento_Thememodule niestandardowego motywu.

Używamy gulp do kompilacji SCSS do CSS.

Ananth
źródło

Jak korzystać z menedżera pakietów Bower?

Magecode

Musisz pobrać węzeł stąd: link . Jeśli używasz Linuksa, użyj odpowiedniego menedżera pakietów. Następnie zainstalować altana poleceniem: sudo npm install -g bower. Po instalacji bower zainstaluj paczki js / css w swoim katalogu motywów:app/design/frontend/My/Theme/

Ananth

Tu trzeba zmienić domyślny katalog instalacji od bower_componentsdo webkorzystania .bowerrc plik konfiguracyjny.

Ananth

1

Myślę, że Bower nie jest już istotny. Zespół Bower zaleca nawet używanie Yarn, Webpack lub Parcel w projektach frontendowych.

phagento

Pierwszy otwarty package.jsonplik Bootstrap 4, jeśli zobaczysz filesklucz tablicy, pokazuje tylko, że dopasowanie typu pliku zostanie dodane do katalogu projektu. filesKlawisz jest używany tylko przez polecenie Bower. Jeśli chcesz przyczynić się lub ponownie skompilować Bootstrap, powinieneś spróbować Yarn. Ponieważ doda niepotrzebny plik / katalog do projektu. Webpack i Parcel są przeznaczone dla projektu węzła, który kompilują do JavaScript w frontendzie.

Ananth

5

Po przeczytaniu powyższych odpowiedzi, mam inną sugestię: włóż Bootstrap 4 do modułu i użyj CDN, aby zamiast tego połączyć pliki Bootstrap.

Zakładam, że wiesz, jak stworzyć podstawowy moduł. Jeśli nie, możesz odwołać się tutaj . Oto kroki:

Utwórz plik app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xmlz następującymi kodami:

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

Aktywuj moduł i uruchom setup:upgradepolecenie, to wszystko!

Korzyści:

Zastosuj do WSZYSTKICH motywów jednocześnie, bez względu na to, czy motyw jest aktywny czy nieaktywny
Nie musisz pobierać żadnych plików do swojego systemu
Bardzo łatwa do aktualizacji. Wystarczy zamienić łącze CDN to jedyne zadanie, które należy wykonać w razie potrzeby. Nie musisz kompilować i zamieniać żadnych plików podczas aktualizacji do Bootstrap 5, 6, 7 ...
Możesz włączyć lub wyłączyć Bootstrap za pomocą JEDNEGO prostego polecenia.
Nie musisz niczego zastępować. Wszystko jest na wierzchu obecnych kodów.
Nie trzeba uruchamiać instalacji statycznej, co może być czasochłonne

Testowany na Magento 2.2.4, ale powinien działać we wszystkich wersjach Magento 2.X. EDYCJA * zmieniła znaczniki link href na src, aby były zgodne z devdocs. Odniesienie:

PY Yick
źródło

CDN może być czasem powolny.

phagento

DostajęThe attribute 'integrity' is not allowed.

Czarny

Jak dodać Bootstrap 4 w motywie Magento 2?

Odpowiedzi: