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

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

Товар:

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

Корзина:

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

Поиск:

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

Сравнение:

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

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

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

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

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

Примеры кода.

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

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

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

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

• lodash
• jquery

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() {}).