Magento 2 значительно отличается от своего предшественника Magento версий 1.х. Разработчики внесли массу изменений, чтобы улучшить производительность и масштабируемость этой платформы. Но в новом движке есть масса изменений, которые стоит выделить особо, и в сегодняшней статье мы уделим этому внимание.
Основные изменения:
Некоторые из улучшений включают добавление тегов HTML5, встроенных в шаблоны, использование в стилях техник CSS3, а также встроенный препроцессор LESS. На стороне JavaScript хорошим изменением является переход от Prototype к jQuery в качестве основной библиотеки. Теперь очень активно используется jQuery UI и добавлен целый набор готовых пользовательских виджетов jQuery UI, которые можно использовать на своем сайте. Все загрузки JavaScript обрабатываются RequireJS и теперь не нужно беспокоиться из-за неправильной очередности подключения скриптов.
В Magento 2 добавлять CSS стало проще, для этого нужен только файл-источник CSS стилей. Раньше приходилось добавлять CSS либо через XML, либо путем добавления кода <link> в секцию <head> через файл шаблона.
Если вы расширяете одну из встроенных тем (например, blank тему или Luma), чтобы настроить CSS, вы просто переопределяете .LESS-файл с оригинальными стилями используя эквивалентные имя/путь в вашей собственной теме. Например, вам нужно переопределить CSS-стили Корзины, которые первоначально определены в следующем файле:
app/design/frontend/Magento/blank/Magento_Checkout/web/css/source/_module.less
Вам нужно скопировать содержимое этого файла и создать новый файл в своей теме с тем же путем. Таким образом, это будет выглядеть примерно так:
app/design/frontend/Company/Theme/Magento_Checkout/web/css/source/_module.less
Вы также можете добавить свои собственные CSS-файлы. Это делается в файле default_head_blocks.xml, который находится в папке Magento_Theme в вашей теме, например:
app/design/frontend/Company/Theme/Magento_Theme/layout/default_head_blocks.xml
Файловая структура тем и модулей сильно отличается от Magento 1.x. Каждая папка с шаблоном имен <Package>_<Module> является компонентом сайта. Все составляющие папки skin перенесены в эти компоненты (отдельно в теме, и отдельно в модуле), что позволяет держать все ресурсы вместе, а это значительно облегчает использование пользовательской темы. Все картинки (медиа-ресурсы) перенесены из папки media в папку pub/media. Все системные и сторонние модули теперь находятся в корневой папке vendor (если они были установлены через Composer). Если вы создаете свой модуль, вам нужно, как и раньше, делать это в папке app/code/ (правда, без разделения на среды разработки).
В Magento 2 больше нет файла local.xml. Вместо этого используется весь нужный XML в каждом модуле. Если вы хотите изменить XML-файл для модуля, вам нужно будет создать новый XML-файл с тем же названием в эквивалентной структуре модуля в вашей теме и внести туда изменения (помните, что все атрибуты и определения из исходного модуля будут унаследованы в этот файл).
Еще одна замечательная особенность нового XML в Magento 2 – это действие move (перемещение). Раньше, если вы хотели куда-то переместить блок, вам нужно было отключать дочерний элемент, а затем вставлять его обратно в XML-макете. В Magento 2 для этого нужна только одна строка. Чтобы переместить элемент, вы просто ссылаетесь на него через его имя, а затем указываете пункт назначения (это может быть Контейнер или Блок).
Пример инструкции: <move element="catalog.leftnav" destination="content.top" after="-"/>
Контейнер представляет собой структуру без контента (т.е., без содержимого, просто структуру), которая содержит другие Блоки и Контейнеры. Вы можете указать атрибуты и теги HTML и задать им идентификатор и/или класс. Это означает, что вы можете создавать HTML структуру с помощью макета, что было невозможно в Magento 1.x. Для расширения макета используются ноды referenceBlock и referenceContainer (другими словами, это ссылки на нужные Блоки и Контейнеры).
Более подробная информация о Контейнерах и Блоках имеется в нашей предыдущей статье.
Создатели Magento 2 разработали очень детальную документацию по новой платформе. Настоятельно рекомендуется ознакомиться с ней по следующему адресу.
В целом, Magento 2 определенно является большим улучшением по сравнению с версиями Magento 1.x. Есть много больших улучшений, таких как новая модульная структура кода и переопределение контента и XML-макета. Улучшения в JavaScript являются одним из самых больших изменений, поскольку теперь вы можете легко добавлять новые, и расширять существующие скрипты, не беспокоясь о всех зависимостях файлов.
Конечно, мы рассмотрели не все нововведения, но для этого недостаточно одной страницы. Мы будем публиковать отдельные статьи по наиболее интересным моментам новой платформы, поэтому следите за обновлениями на сайте!
Если у вас есть полезная информация по данной теме, не стесняйтесь делиться ею в комментариях ниже. Также напишите свое личное мнение о новой платформе.
Даже если вы очень талантливы и прилагаете большие усилия, для некоторых результатов просто нужно время:…
Этот практический урок поможет вам перенести данные из вашего Excel-файла (с некоторыми конкретными столбцами) в…
Пиво – один из самых популярных напитков, который наряду с чаем и кофе известен во…
Довольно часто у программистов возникает соблазн написать какую-нибудь обширную функцию, которая должна решать определенную задачу.…
Дискуссии вокруг этой темы вас, вероятно, уже утомили. Но я в данной статье постараюсь показать…
Консоль браузера (также известная как консоль JavaScript или веб-консоль) — это мощный инструмент для разработчиков,…