Нами был выбран Vue Storefront в качестве движка фронтенда, по нескольким причинам
Требовалась реализация движка с меньшим функционалом но большой скоростью и качеством работы в корзине...
А также Vue Storefront для b2b кабинета уже в базе есть:Набор специально заточенных под электронную коммерцию компонентов,
но при этом он позволяет использовать практически любые Vue-компоненты, если в этом возникнет необходимость.
Также, в целом, он позволяет присоединить любое бэкенд API к фронтальной части, как будет видно из дальнейшего описания.
Сам по себе проект Vue Storefront версии 2 состоит из трех слоев, которые каждый отвечают за свою отдельную задачу:
- theme -- непосредственно визуальная часть, то, что видит пользователь в броузере. Именно здесь создаются страницы будущего приложения, шаблоны (верстка страниц) и Vue-компоненты, а также указывается, какие данные и где должны быть размещены.
Storefront использует Vue версии 2 и следует ее модели написания Vue-компонентов.
- composables -- слой взаимодействия визуальной части, и серверной части api-client, которая непосредственно забирает данные (из стороннего API, etc.)
- api-client -- серверная часть, в которой набором методов реализовано получение самих данных из практически любого источника (стороннее API, локальный сервер, и т.д.)
Далее приведем описание всех трех слоев с указанием особенностей каждого.
- Theme - визуальная часть
Каждая страница - это файл с расширением .vue, который содержит в себе три секции:
template - сами шаблоны (верстка страниц). Указание на данные, которые будут использованы, производится посредством заключения имени переменной в двойные фигурные скобки. Например, {{ product }}. Сами переменные и способ их заполнения указывается далее, в секции script. Также
script - здесь объявляются переменные и указывается способ их заполнения, это может быть практически что угодно: статические данные, данные полученные напрямую из какого-либо сетевого источника (например, с помощью axios или apollo), или слой composables из самого Storefront, который будет описан далее.
style - секция для описания css-стилей страницы.
Слой theme располагается в каталоге packages/theme относительно корня проекта, и содержит в себе несколько каталогов, которые приведены ниже.
layouts - общая разметка приложения, ее будут использовать все страницы. С помощью опции layout можно указать, какую именно разметку будет использовать конкретная страница. Если таковая не указана, будет использоваться файл default.vue
pages - страницы проекта
components - компоненты, используемые на страницах
static - здесь лежат все нужные статические изображения, шрифты, иконка и прочее, этот каталог внутри верстки будет выглядеть корнем проекта.
plugins, mixins - это каталоги дополнений к основному коду, пока что мы пропустим описание этого.
Также в этой слое, внутри его каталога packages/theme есть два важных файла, специфичные для этого проекта в целом.
Это routes.js и nuxt.config.js, в первом из них находятся маршруты всего приложения, а второй - это главный конфигурационный файл проекта. Описание их будет позже.
- Composables и api-client - позже.
В рамках работы и оптимизации под битрикс и б2б - клиентские кабинеты:
В настоящее время реализована (написана с нуля, посколько такой интеграции не существует официально) интеграция с Битрикс в части товаров, корзины и оформления заказа.
[Заметки на полях: О неофициальных интеграциях со Storefront нам тоже неизвестно]
Также написан отдельный механизм корзины, действующий в разы быстрее всех известных воплощений корзины битрикса,
при этом, учитывающий правила корзины, для разных состояний пользователя (авторизован или нет).
Написана отдельная авторизация, позволяющая использовать Storefront вместе с Битрикс.
Также это позволяет иметь другие цены в каталоге для авторизованных пользователей с использованием нового фронта, что является ключевым для этого проекта.
Что также позволяет использовать на портале все разработки связанные с бакэндом из обычного магазина сочетая это со скоростью и оптимизированностью работы с данной технологией.
