Технология Vue.Storefront

Для ускорения процесса стилизации мы использовали стайлгайд — отдельную страницу со списком элементов интерфейса интернет-магазина.

Стайлгайд основан на особенности Magento 2 — неизменяемой DOM-разметке. Мы добавляли кастомные стили, к примеру, bootstrap, - к стандартным, применяя Less Extend feature, тем самым добиваясь на всех проектах одинаковой разметки. Это ускоряло процесс самой разработки, поскольку не нужно было править шаблоны, добавляя новые классы. Ещё один плюс стандартного DOM в том, что мы используем одну систему автоматических тестов, применяемую на разных проектах.

В недавнее время мы запустили несколько PWA проектов на платформе Vue.Storefront. В стандартной теме Default из коробки используется Atomic подход к стилизации. Atomic - очень крутая концепция, понравилась нам в связке с компонентами Vue. Она была для нас как глоток свежего воздуха, спасибо команде Divante за ее разработку.

В какой-то момент нам стало не хватать стандартных Atomic стилей и захотелось большего. На глаза попался Atomic-фреймворк TailWindCSS, который полностью соответствует подходу Vue Storefront и добавляет конструкцию @apply, позволяющую реализовать одинаковый DOM.

После этого появилась идея реализовать тему на базе Default, главной особенностью которой будет DOM со стандартными классами по аналогии с DOM Magento 2 и Styleguide для ускорения процесса разработки. Бонусом идут одни и те же автоматические тесты для всех проектов (тоже экономия ресурсов на разработку - один раз пишутся e2e тесты). Мы реализовали MVP версию с подключенным TailWindCSS и отдельной страницей Styleguide c примером оформления кнопки добавления в корзину.

Цель — заполнить стайлгайд компонентами Vue и реализовать в них минимальное количество E-Commerce классов по примеру DOM-модели Magento 2. Это нам еще предстоит сделать, а пока впереди кропотливая работа.

После ее реализации мы хотим использовать тему The Coat, как базовую в новых проектах, и тем самым ускорить работу темы за счет Styleguide и не тратить время на разработку отдельных e2e тестов, а тестирование очень важно, для нас это второй по приоритету фактор после качества самого кода.

Понравилась статья?

Подпишись на нашу рассылку — стань первым, кто узнает о наборе
на обучающие курсы, митапах и новых открытых вакансиях!