Введение

Возможности фреймворка

Common.js это набор готовых скриптов для упрощения и ускорения разработки тем на платформе InSales.

С помощью фреймворка легко реализовать:

Товар:

  • Селектор опций.
  • Получение информации о товаре.

Корзина:

  • Получение актуальной информации о составе корзины.
  • Добавление/удаление позиций.

Поиск:

  • Живой поиск по сайту.

Сравнение:

  • Получение актуального списка сравнения.
  • Добавление/удаление товаров из сравнения.

Шаблонизация:

  • Работа с динамическими данными через шаблонизатор библиотеки lodash.js.

Шина событий:

  • Удобный инструмент для получения актульных данных состояния магазина, например содержание корзины, выбранная модификация продукта и т.д..

Подключение фреймворка

Для подключения Common.js необходимо прописать настройку в settings_data.json — "common_js_version": "v2".

Файл settings_data.json не доступен через бэк-офис, поэтому новое свойство нужно добавлять вручную через скачивание темы и последующей установке с новыми параметрами. Так же файл можно поправить если для разработки вы используете — InSales-uploader.

Работу фреймворка можно посмотреть в бесплатном шаблоне — monpasie.

js
        
          

// в settings_data.json должно содержаться данное свойство

{

  "common_js_version": "v2"
}

Важно знать

Библиотеки используемые в Common.js:

Lodash доступен глобально, можно и нужно пользоваться возможностями этой библиотеки при разработке.

Имена переменных которые Common.js присваивает в глобальную область видимости:

  • Cart
  • Shop
  • Products
  • Compare
  • Site
  • AjaxSearch
  • ajaxAPI
  • Template
  • EventBus

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

Готовые решения Common.js для компонентов магазина работают по следующей логике:

  1. В разметку компонента проставляются обязательные data атрибуты. В эти атрибуты из liquid передаются данные из магазина, а так же есть data атрибуты которые реализуют действия (кнопки добавить или удалить товар из корзины, переключение модификаций, изменение quantity и т.д.).
  2. Common.js при загрузке страницы пробегает по проставленным data атрибутам и на основе данных инициализирует скрипты для работы компонентов. 
  3. Практически на каждое взаимодействие с компонентами реализованными с помощью фреймворка (обновление корзины, переключение модификации и т.д.) можно повесить обработчик, в callback которого приходит информация о событии, например при обновлении корзины в callback попадает информация о актуальном состоянии корзины, исходя из чего можно сделать динамический виджет корзины или обновление информации на странице корзины без перезагрузки страницы.

Так же стоит ознакомиться с подробным описанием API фреймворка Common.js.

API фреймворка предоставляет удобные и протестированые методы, для разработки своих компонентов.

Но все обращения к API нужно производить после собития DOMContentLoaded оно же $(document).ready(function() {}), $(function() {}).