Categories: Мадженто 2

Що нового в 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 є одним з найбільших змін, оскільки тепер ви можете легко додавати нові, і розширювати існуючі скрипти, не турбуючись про всіх залежностях файлів.

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

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

 

Recent Posts

Найпоширеніші продукти smart-технологій: ТОП-5 видів гаджетів

Наразі практично жодну сферу життя людини не можна уявити без гаджетів. Ці підтримувані штучним інтелектом…

3 тижні ago

Що таке Unix Domain Socket: секретний тунель у Linux

У нашій подорожі світом сокетів ми почали з "верхнього поверху" — WebSocket у браузері, потім…

1 місяць ago

Мережеві сокети (Network Sockets): фундамент інтернету 🌐 | Глибоке занурення

У попередній статті ми говорили про WebSockets — технологію, що дозволяє створювати інтерактивні чати в…

1 місяць ago

Як доглядати за шкірою малюка влітку та взимку

Шкіра немовляти – тонка та ніжна. Ще не справляється із захистом організму від зовнішніх факторів.…

1 місяць ago

Що таке Сокети (WebSocket) 🔌 | детально для початківців

Уявіть собі телефонну розмову. Ви дзвоните другу, він піднімає слухавку, і ви можете говорити одночасно,…

1 місяць ago

Мобільний воркстейшн: чи може планшет 📱 замінити ноутбук веб-розробнику?

Довгий час планшети сприймалися виключно як пристрої для споживання контенту: подивитися YouTube, погортати стрічку новин…

1 місяць ago