Що нового в Magento 2 (у порівнянні з Magento 1.x)?

Що нового в Magento 2 (у порівнянні з Magento 1.x)?



Magento 2 значно відрізняється від свого попередника Magento версій 1.х. Розробники внесли масу змін, щоб поліпшити продуктивність та масштабованість цієї платформи. Але в новому двигуні є маса змін, які варто виділити особливо, і в сьогоднішній статті ми приділимо цьому увагу.

 

Основні зміни:

  • Підтримка HTML5, CSS3, jQuery, LESS
  • Файлова структура
  • Макети
  • Контейнери та Блоки
  • Документація (Wiki, DevDocs)

 

 

Деякі з поліпшень включають додавання тегів HTML5, вбудованих в шаблони, використання в стилях технік CSS3, а також вбудований препроцесор LESS. На стороні JavaScript хорошою зміною є перехід від Prototype до jQuery в якості основної бібліотеки. Тепер дуже активно використовується jQuery UI і доданий цілий набір готових користувальницьких віджетів jQuery UI, які можна використовувати на своєму сайті. Всі завантаження JavaScript обробляються RequireJS і тепер не потрібно турбуватися через неправильну черговість підключення скриптів.

 

 

  1. CSS

В 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

 

 

  1. Файлова структура

Файлова структура тем і модулів сильно відрізняється від Magento 1.x. Кожна папка з шаблоном імен <Package>_<Module> є компонентом сайту. Всі складові папки skin перенесені в ці компоненти (окремо в темі, і окремо в модулі), що дозволяє тримати всі ресурси разом, а це значно полегшує використання користувальницької теми. Всі картинки (медіа-ресурси) перенесені з папки media в папку pub/media. Всі системні та сторонні модулі тепер знаходяться в кореневій папці vendor (якщо вони були встановлені через Composer). Якщо ви створюєте свій модуль, вам потрібно, як і раніше, робити це в папці app/code/ (правда, без розділення на середовища розробки).

 

 

  1. Макети

В Magento 2 більше немає файлу local.xml. Замість цього використовується весь потрібний XML в кожному модулі. Якщо ви хочете змінити XML-файл для модуля, вам потрібно буде створити новий XML-файл з тою ж назвою в еквівалентній структурі модуля у вашій темі і внести туди зміни (пам’ятайте, що всі атрибути і визначення з вихідного модуля будуть успадковані в цей файл) .

Ще одна чудова особливість нового XML в Magento 2 – це дія move (переміщення). Раніше, якщо ви хотіли кудись перемістити блок, вам потрібно було відключати дочірній елемент, а потім вставляти його назад в XML-макеті. В Magento 2 для цього потрібен лише один рядок. Щоб перемістити елемент, ви просто посилаєтеся на нього через його ім’я, а потім вказуєте пункт призначення (це може бути Контейнер або Блок).

Приклад інструкції: <move element="catalog.leftnav" destination="content.top" after="-"/>

 

 

  1. Контейнери та Блоки

Контейнер являє собою структуру без контенту (тобто, без вмісту, просто структуру), яка містить інші Блоки і Контейнери. Ви можете вказати атрибути і теги HTML і задати їм ідентифікатор і/або клас. Це означає, що ви можете створювати HTML структуру за допомогою макета, що було неможливо в Magento 1.x. Для розширення макета використовуються ноди referenceBlock і referenceContainer (іншими словами, це посилання на потрібні Блоки і Контейнери).

Більш детальна інформація про контейнери і блок міститься в нашій попередній статті.

 

 

  1. Документація по Мадженто 2

Творці Magento 2 розробили дуже детальну документацію по новій платформі. Настійно рекомендується ознайомитися з нею за наступною адресою.

 

 

 

Короткий підсумок

В цілому, Magento 2 без сумніву є великим поліпшенням у порівнянні з версіями Magento 1.x. Є багато великих поліпшень, таких як нова модульна структура коду і перевизначення контенту і XML-макета. Покращення в JavaScript є одним з найбільших змін, оскільки тепер ви можете легко додавати нові, і розширювати існуючі скрипти, не турбуючись про всіх залежностях файлів.

Звісно, що ми розглянули не всі нововведення, але для цього недостатньо однієї сторінки. Ми будемо публікувати окремі статті по найбільш цікавих моментам нової платформи, тож слідкуйте за оновленнями на сайті!

Якщо у вас є корисна інформація по даній темі, не соромтеся ділитися нею в коментарях нижче. Також напишіть свою особисту думку про нову платформу.

 



Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься. Обов’язкові поля позначені *