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

Зигмунд Фрейд

  Кожен говорить про те, чого йому не вистачає. Той, кому не вистачає сексу, говорить… Read More

03/12/2020

Правильний вибір якісних гральних карт

Відомо, що перші гральні карти були винайдені династією Тан в Китаї ще в 9 столітті.… Read More

15/11/2020

Як знайти нову роботу – кращі тактики

Давно минули ті часи, коли люди отримували роботу одразу ж після закінчення навчання, і залишалися… Read More

13/11/2020

Ліцензування Zoom в Україні – тарифи і ціни

Самоізоляція 2020 року поставила людей в досить суворі умови – незважаючи на вимушені карантинні заходи,… Read More

10/11/2020

Десятка найбільш хокейних міст України

Чи є в Україні хокей? Багато шанувальників цього виду спорту асоціюють гру з шайбою на… Read More

09/11/2020

Переваги б/в ноутбуків та критерії вибору техніки

Сучасний ринок комп'ютерної техніки постійно оновлюється, щорічно пропонуючи користувачам нові і більш потужні моделі ПК… Read More

03/11/2020