Темы Magento 2: разработка внешнего интерфейса с заявкой

1. Конструкция - новая структура каталогов
2. Blank и LUMA: новые темы Magento 2
3. Наследование тем в Magento 2 Frontend
4. Макет в Мадженто 2
5. Модульность и возможность повторного использования
6. Интерфейс Magento 2 улучшает производительность
7. Преимущество: Magento 2 продвигает и требует профессионализма

На прошлой неделе мой коллега Матиас поделился своими впечатлениями о Модули Magento 2 сообщается как бэкэнд-разработчик. Новая система магазинов также приносит некоторые изменения для разработчиков переднего плана. Работа с Magento 2 Themes предъявляет новые требования. Поскольку предполагается, что в версии 2.1 будут внесены некоторые незначительные изменения, чтобы сгладить несколько процессов, эти изменения не должны быть окончательными. Текущий статус:

Конструкция - новая структура каталогов

Что сразу бросается в глаза, если вы с Magento 2 начинается, различия в структуре каталогов. Если файлы шаблонов и макетов ранее выполнялись в приложении / design и в таблицах стилей под оболочкой , все файлы теперь находятся в папке Magento 2 Themes и подразделяются в соответствии с модулями . Требуется немного привыкнуть, но очень приятно иметь все в одном месте - особенно в сложных клиентских зонах, которые включают большое количество различных элементов макета. Более того, это выгодно и понятнее для специально разработанных модулей.

Blank и LUMA: новые темы Magento 2

Magento 2 поставляется с двумя темами. Пустая тема, которая уже отзывчива и определенно подходит в качестве основы для дальнейшей настройки. И тема LUMA , отличный пример пользовательской темы, основанной на бланке. Основная идея заключается в продуктивном использовании свойств пустой темы в качестве родительского. При разработке собственных тем Magento 2 стоит взглянуть на структуру LUMA. Magento также предоставляет некоторые демонстрационные данные вместе с LUMA. Например, тизеры для стартовой страницы или экземпляры виджетов и другие элементы содержимого, которые дают хорошее представление о возможностях пользовательской темы.

Наследование тем в Magento 2 Frontend

Резервный принцип реализован несколько иначе, чем в Magento 1, но напоминает это в основной идее. Основой являются шаблоны стандартных модулей Magento. The Magento 2 Blank Theme составляет основу стандартного магазина со всеми основными стилями. Исходя из этого, вы можете создать любое количество адаптивных тем Magento 2. Зависимости между родительской и дочерней темами можно легко определить с помощью файла конфигурации.

Макет в Мадженто 2

Magento 2 также перестраивает макет. Отныне есть два типа элементов макета, известные блоки и новые контейнеры. Контейнеры являются заполнителями для контента. Они служат только для организации блоков и сами по себе не содержат никакой логики. На практике это означает, например, что вы больше не определяете навигацию как таковую в конкретной области страницы, а вместо этого назначаете навигацию контейнеру, который содержит расположение и стили.

Источник: Magento

Макет все еще можно настроить с помощью прямого вмешательства в шаблоны. Тем не менее, имеет смысл настраивать файлы XML-формата. Magento 2 предлагает даже больше возможностей, чем его предшественник, что редко оставляет повод для перезаписи шаблонов. С одной стороны, это снижает риск конфликтов и стабильности, с другой стороны, платформа электронной коммерции Magento остается обновляемой, несмотря на значительные изменения.

Модульность и возможность повторного использования

Magento явно выигрывает в модульности с введением библиотеки пользовательского интерфейса Magento . В библиотеке пользовательского интерфейса Magento предопределено и оформлено множество разнообразных внешних элементов и функций (например, шрифты, таблицы, кнопки, рейтинги, навигация и т. Д.). В этом случае стилизация элементов не входит в пользовательскую тему, но большую часть дизайна можно легко настроить с помощью переменных в библиотеке пользовательского интерфейса Magento. Это также помогает сделать перезапись основного кода Magento устаревшей и обеспечить возможность обновления системы. Кроме того, возможность многократного использования стилей улучшается, если вы используете библиотеку по назначению и далее разрабатываете свои собственные элементы контента.

Пример для различных параметров конфигурации кнопки в библиотеке пользовательского интерфейса Magento; Источник: Nexcess

Кроме того, в Magento 2 Frontend теперь используется JavaScript в сочетании с RequireJS . RequireJS управляет загрузкой отдельных модулей приложений javascript. Специальная функция: RequireJS загружает при открытии страницы только «обязательные» скрипты, а не что-либо, что значительно сокращает макет страницы.

Таким образом, вместо необходимости устанавливать необходимый скрипт по отдельности и выделять нужные библиотеки или интегрировать все где угодно, в коде ссылки на требуемые модули используются RequireJS, что упрощает работу и оптимизирует код.

Интерфейс Magento 2 улучшает производительность

Благодаря модульной структуре Magento 2 поставляется со значительно меньшим количеством переопределений ядра и объявлений CSS, и теперь вы можете легче, чем раньше, только конкретные блоки, необходимые в записи файла CSS. Это делает его тонким и загружается быстрее.

Последовательная реализация принципа Mobile First в Magento повышает производительность на мобильных устройствах:

Структура предусматривает, что сначала загружается styles-m.css, то есть таблица стилей для мобильного макета. Только если это не мобильное устройство, дополнительные стили загружаются из styles-l.css (l = large).

Чтобы использовать эти потенциалы производительности, это должно быть Команда разработчиков раньше, но интенсивно с более сложной архитектурой интерфейса дело.

Mobile First и отзывчивый также довольны Google.

Преимущество: Magento 2 продвигает и требует профессионализма

Неизбежно шелуха отделится здесь от пшеницы: фронтенд Magento 2 более сложен по своей структуре и возможностям, чем в Magento 1. Если нужно отклониться от стандартных тем, отличные результаты не могут быть достигнуты с небольшими изменениями и доброй волей ,

• Magento 2 требует от фронт-энда разработчиков не позднее, чем когда-либо в настройке очень структурированного способа работы и обширных ноу-хау, чтобы сохранить усилия для постоянно ориентированного на пользователя дизайна в привлекательной среде. Это может быть успешным только при четком разделении между бэкендом и внешним интерфейсом. С помощью таких инструментов, как Task Runner Grunt, эта работа также становится проще.
• Для этого вы получаете систему, в которой настройки внешнего интерфейса могут быть реализованы чрезвычайно точно, без конфликтов и, следовательно, быстро, что обещает короткое время загрузки и может быть легко обновлено.

Похожие

Комментарии