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

SIP-транки — що це таке і як вони працюють у IP-телефонії

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

9 години ago

Чому варто обрати ноутбук Apple MacBook Pro 14 для сучасних ІТ-завдань

Вибір робочої машини для веб-розробника або адміністратора серверів є завжди компромісом між портативністю, автономністю і…

4 дні ago

Практичний гайд: як підібрати надійний безперебійник для домашнього роутера

Зникло світло і разом з ним миттєво зник зв'язок з навколишнім світом? Це знайома та…

5 днів ago

Google втрачає монополію: Як підготувати IT-сайт до AI-пошуку (GEO)

Що взагалі сталося з пошуком в інтернеті? Я не побоюся сказати це вголос: сталася справжня…

3 тижні ago

Проксі для соцмереж та Facebook – Як уникнути бана облікових записів

Уявіть, що вас внесли до чорного списку елітного клубу. Якщо ви підійдете до фейс-контролю особисто…

3 тижні ago

Антидетект-браузери для початківців: що це таке (на прикладі Dolphin чи AdsPower) і як їх правильно поєднати з мобільними проксі

Анонімність та розділення акаунтів є базовою потребою для співробітників, що займаються арбітражем трафіку, SMM чи…

1 місяць ago