Как добавить Bootstrap 4 в тему Magento 2?

Ответы:

23

Для добавления Bootstrap 4 в Magento 2.2.3 (протестировано) и выше в вашей пользовательской теме выполните следующие шаги

1) Загрузите файлы CSS внутри веб-папки

Примечание : THEME_LOCATION=>app\design\frontend\vendor-name\theme-name\

THEME_LOCATION\web\css\bootstrap.css

Вызов загрузочных CSS-файлов в default_head_blocks

THEME_LOCATION\Magento_Theme\layout\default_head_blocks.xml

Добавление 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) Добавление Js-файлов в форме пакета, а не индивидуально, потому что отдельный не работает

Разместить файлы bootstrap.bundle.js можно здесь 

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

Вызовите Bootstrap Js в requirejs-config.js

THEME_LOCATION\Magento_Theme\requirejs-config.js

код для 

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

Добавьте ниже код в header.phtml после вашего уже присутствующего тега скрипта

THEME_LOCATION\Magento_Theme\templates\html\header.phtml

Код:

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

Выполнить команды ниже:

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

php bin/magento cache:flush

Примечание: проверено на Magento 2.2.3 и последней версии 2.2.6. Также проверено на 2.3.3

Обновлено : Загрузите Bootstrap, скомпилированный здесь, и используйте пакет js

Манодж Десвал
источник
Хорошо спасибо. Я попробую это решение. Кстати, в чем разница между bootstrap.bundle.js и bootstrap.js?
Magecode
Popper.js включен в комплект js ..... и jquery уже находится внутри magento .... popper не работает в одиночку, но работает как пакет
Manoj Deswal
@Magecode работает на Magento 2.2.4?
Манодж Десвал
1
Я наконец понял это ... Я поместил js в MY_THEME / web / js вместо MY_THEME / Magento_Theme / web / js, извините
Black
1
Это был стандартный способ работы до 2.2.3, но в 2.2.3 он не работал, и я обнаружил вышеописанный способ. Но это все еще работает в 2.3.2 .... То, как вы сделали это правильно
Манодж Десвал
11

Вы можете добавить Bootstrap таким образом, выполнив следующие шаги: Примечание: Это решение не работает с Magento 2.2.3 и выше.

1) Поместите свой JS и CSS в расположении ниже

/ Приложение / дизайн / интерфейс / имя поставщика / тема имя / веб / CSS

/ Тема-имя / приложение / / интерфейс / имя поставщика дизайн / веб / JS

2) Вызовите файлы в вашем default_head_blocks.xml

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

добавить эти строки кода

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

3) Запустите команды ниже 

php bin/magento setup:upgrade

php bin/magento setup:static-content:deploy
Майур Ратод
источник
И как это работает тогда с Magento 2.2.3 и выше?
черный
6

Вы должны использовать менеджер пакетов bower, чтобы добавить начальный загрузчик 4 в папку вашей темы.

ПОЧЕМУ? Потому что есть постоянное обновление и простое управление. Запустите команду обновления, Bootstrap 4 обновится.

ТАКЖЕ: Мы предпочитаем использовать LESS или SCSS с начальной загрузкой 4. Это надежный и простой в рефакторинге.

Выполните следующие шаги, чтобы установить беседку:

1) Установите LTS nodeJS в вашей соответствующей ОС по адресу : https://nodejs.org/en/

2) Установите менеджер пакетов bower по всему миру: npm install -g bower

3) Установите gitс: https://git-scm.com/

4) Установить загрузчик 4:

В webкаталоге вы Magento пользовательские темы

Например: открыть терминал на <Magento root>/app/design/frontend/MyCustom/theme/web/

Запустите эту команду для установки начальной загрузки 4: bower install bootstrap4

5) После этого вам нужно добавить шрифты, начальную загрузку CSS и начальную загрузку JS в узле макета по умолчанию для работы надстройки на каждой странице Magento_Themeмодуля в вашей пользовательской теме.

Мы используем gulp для компиляции SCSS в CSS.

Ananth
источник
Как использовать менеджер пакетов bower?
Магический код
Вам нужно скачать узел отсюда: ссылка . Если вы используете Linux, используйте соответствующий менеджер пакетов. Затем установите становой с помощью этой команды: sudo npm install -g bower. После установки bower установите пакеты js / css в свой каталог тем:app/design/frontend/My/Theme/
Ananth
Здесь вам нужно изменить установки по умолчанию каталога с bower_componentsдля webиспользования .bowerrc конфигурационного файла.
Анант
1
Я думаю, что Бауэр больше не актуален. Команда Bower даже рекомендует использовать Yarn, Webpack или Parcel для веб-проектов.
Phagento
Сначала откройте package.jsonфайл Bootstrap 4, если вы видите filesключ массива, он показывает только то, что сопоставление типов файлов будет добавлено в каталог вашего проекта. filesключ используется только командой Bower. Если вы хотите добавить или перекомпилировать Bootstrap, попробуйте Yarn. Потому что это добавит ненужный файл / каталог в проект. Webpack и Parcel предназначены для проекта узла, который они компилируют для использования JavaScript для внешнего интерфейса.
Анант
5

После прочтения приведенных выше ответов у меня есть еще одно предложение: поместить Bootstrap 4 в модуль и использовать CDN для связывания файлов Bootstrap.

Я полагаю, вы знаете, как создать базовый модуль. Если нет, вы можете обратиться сюда . Итак, вот шаги:

  • Создайте файл app/code/Vendor/Module/view/frontend/layout/default_head_blocks.xmlсо следующими кодами:

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

  • Активируйте модуль и запустите setup:upgradeкоманду, вот и все!

Преимущества:

  1. Применять ко ВСЕМ темам одновременно, независимо от того, активна ли тема или нет
  2. Вам не нужно загружать какие-либо файлы в вашу систему
  3. Очень легко обновить. Просто заменить ссылку CDN - единственная задача, которую вам нужно сделать, если это необходимо. Вам не нужно компилировать и заменять любые файлы при обновлении до Bootstrap 5, 6, 7 ...
  4. Вы можете включить и отключить Bootstrap ОДНОЙ простой командой.
  5. Вам не нужно ничего переопределять. Все поверх текущих кодов.
  6. Нет необходимости запускать статическое развертывание, которое может занять много времени

Протестировано на Magento 2.2.4, но должно работать на всех версиях Magento 2.X. РЕДАКТИРОВАТЬ * изменил теги ссылки href на src, чтобы они были встроены в devdocs Ссылка:

PY Yick
источник
CDN может быть иногда медленным.
Phagento
Я получаюThe attribute 'integrity' is not allowed.
Black