Wie füge ich Bootstrap 4 in ein Magento 2 Theme ein?

Antworten:

23

Zum Hinzufügen von Bootstrap 4 in Magento 2.2.3 (getestet) und höher in Ihrem benutzerdefinierten Design führen Sie die folgenden Schritte aus

1) Bootstrap-CSS-Dateien im Webordner

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

THEME_LOCATION\web\css\bootstrap.css 

Rufen Sie Bootstrap-CSS-Dateien in default_head_blocks auf

THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xml

CSS hinzufügen

<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) Hinzufügen von Js-Dateien in Bündelform und nicht in Einzelform, weil Einzel nicht funktioniert

Platz bootstrap.bundle.js Dateien können von Download hier

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

Rufen Sie Bootstrap Js Into requirejs-config.js auf

THEME_LOCATION\Magento_Theme\requirejs-config.js

Code für

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

Fügen Sie nach Ihrem bereits vorhandenen Skript-Tag den folgenden Code in der Datei header.phtml hinzu

THEME_LOCATION\Magento_Theme\templates\html\header.phtml

Code:

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

Befehle zum Ausführen unter:

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

php bin/magento cache:flush

Hinweis: Getestet mit Magento 2.2.3 und den neuesten Versionen 2.2.6. Auch getestet am 2.3.3

Aktualisiert : Laden Sie den von hier kompilierten Bootstrap herunter und verwenden Sie das Bundle js

Manoj Deswal
quelle
OK danke. Ich werde diese Lösung versuchen. BTW Was ist der Unterschied zwischen bootstrap.bundle.js und bootstrap.js?
Magiercode
Popper.js im Bundle js enthalten ..... und jquery ist bereits in Magento enthalten .... Popper funktioniert nicht alleine, sondern als Bundle
Manoj Deswal
@Magecode funktioniert es auf Magento 2.2.4?
Manoj Deswal
1
Ich kann es endlich herausgefunden ... Ich legte die js in MY_THEME / web / js statt MY_THEME / Magento_Theme / web / js im sorry
Schwarz
1
Dies war die Standardarbeitsweise vor 2.2.3, aber in 2.2.3 funktionierte es nicht und ich entdeckte den obigen Weg. Aber es funktioniert immer noch in 2.3.2 .... So wie du es gemacht hast, ist es auch richtig
Manoj Deswal
11

Sie können Bootstrap auf diese Weise hinzufügen, indem Sie die folgenden Schritte ausführen : Hinweis: Diese Lösung funktioniert nicht mit Magento 2.2.3 und höher

1) Platzieren Sie Ihren JS und CSS unter der Position

/ app / design / frontend / anbietername / themenname / web / css

/ app / design / frontend / anbietername / themenname / web / js

2) Rufen Sie die Dateien in Ihrer Datei default_head_blocks.xml auf

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

Fügen Sie diese Codezeile hinzu

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

3) Führen Sie die folgenden Befehle aus

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy
Mayur Rathod
quelle
Und wie funktioniert es dann mit Magento 2.2.3 und höher?
Black
6

Sie sollten den Bower-Paket-Manager verwenden, um Bootstrap 4 in Ihrem Theme-Webordner hinzuzufügen.

WARUM? Weil es ständige Updates gibt und einfach zu verwalten ist. Führen Sie den Befehl update aus, um die Aktualisierung von Bootstrap 4 durchzuführen.

AUCH: Wir bevorzugen es, LESS oder SCSS mit Bootstrap 4 zu verwenden. Es ist robust und einfach umzugestalten.

Befolgen Sie die folgenden Schritte, um die Laube zu installieren:

1) Installieren Sie LTS nodeJS auf Ihrem jeweiligen Betriebssystem von: https://nodejs.org/en/

2) Installieren Sie den bower package manager global: npm install -g bower

3) Installieren Sie gitvon: https://git-scm.com/

4) Installieren Sie Bootstrap 4:

Im webVerzeichnis Ihres Magento benutzerdefinierten Themes

Zum Beispiel: Öffnen Sie das Terminal um <Magento root>/app/design/frontend/MyCustom/theme/web/

Führen Sie diesen Befehl aus, um Bootstrap 4 zu installieren: bower install bootstrap4

5) Danach müssen Sie Schriftarten, Bootstrap-CSS und Bootstrap-JS im Standard-Layout-Knoten hinzufügen, um Boostrap auf jeder Seite im Magento_ThemeModul in Ihrem benutzerdefinierten Design auszuführen .

Wir verwenden gulp, um SCSS zu CSS zu kompilieren.

Ananth
quelle
Wie benutze ich den bower package manager?
Magiercode
Sie müssen den Knoten von hier herunterladen: Link . Wenn Sie Linux verwenden, verwenden Sie den entsprechenden Paketmanager. Dann installiert Bower mit diesem Befehl: sudo npm install -g bower. Nach der Installation von bower installiere js / css packages in deinem Theme-Verzeichnis:app/design/frontend/My/Theme/
Ananth
Hier müssen Sie das Standardinstallationsverzeichnis von bower_componentsin webdie Konfigurationsdatei .bowerrc ändern .
Ananth
1
Ich denke, Bower ist nicht mehr relevant. Das Bower-Team empfiehlt sogar die Verwendung von Yarn, Webpack oder Parcel für Frontend-Projekte.
Phagento
Öffnen Sie zuerst die package.jsonDatei von Bootstrap 4. Wenn Sie den filesArray-Schlüssel sehen, wird nur der Dateityp angezeigt, der Ihrem Projektverzeichnis hinzugefügt wird. filesDie Taste wird nur vom Bower-Befehl verwendet. Wenn Sie einen Beitrag leisten oder Bootstrap neu kompilieren möchten, sollten Sie Yarn ausprobieren. Weil es unnötige Dateien / Verzeichnisse zum Projekt hinzufügt. Webpack und Parcel sind für Knotenprojekte gedacht, die mit JavaScript für das Frontend kompiliert werden.
Ananth
5

Nachdem ich die obigen Antworten gelesen habe, habe ich einen weiteren Vorschlag: Platzieren Sie Bootstrap 4 in einem Modul und verwenden Sie stattdessen CDN, um die Bootstrap-Dateien zu verknüpfen.

Ich gehe davon aus, dass Sie wissen, wie man ein Basismodul erstellt. Wenn nicht, können Sie hier verweisen . Also hier sind die Schritte:

  • Erstellen Sie eine Datei app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xmlmit den folgenden Codes:

    <?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>
  • Aktivieren Sie das Modul und führen Sie den setup:upgradeBefehl aus, das ist alles!

Leistungen:

  1. Auf ALLE Themen gleichzeitig anwenden, unabhängig davon, ob das Thema aktiv oder inaktiv ist
  2. Sie müssen keine Dateien in Ihr System herunterladen
  3. Sehr einfach zu aktualisieren. Ersetzen Sie einfach den CDN-Link. Dies ist die einzige Aufgabe, die Sie bei Bedarf ausführen müssen. Sie müssen keine Dateien kompilieren und ersetzen, wenn Sie auf Bootstrap 5, 6, 7 aktualisieren ...
  4. Sie können Bootstrap mit EINEM einfachen Befehl aktivieren und deaktivieren.
  5. Sie müssen nichts außer Kraft setzen. Alles ist auf den aktuellen Codes.
  6. Es ist keine statische Bereitstellung erforderlich, die zeitaufwändig sein kann

Getestet auf Magento 2.2.4, sollte aber auf allen Magento 2.X-Versionen funktionieren. EDIT * hat die Link-Tags href in src geändert, um mit den devdocs übereinzustimmen. Referenz:

PY Yick
quelle
CDN kann manchmal langsam sein.
Phagento
Ich bekommeThe attribute 'integrity' is not allowed.
Black