Библиотеки используемые в Common.js:
Lodash доступен глобально, можно и нужно пользоваться возможностями этой библиотеки при разработке.
Имена переменных которые Common.js присваивает в глобальную область видимости:
- Cart
- Shop
- Products
- Compare
- Site
- AjaxSearch
- ajaxAPI
- Template
- EventBus
В проектах где используется Common.js нельзя переопределять данные переменные, так же при подключении Common.js к работающему сайту нужно проверять переменные на переопределение и особенно обратить внимание на переменные cart и site.
Готовые решения Common.js для компонентов магазина работают по следующей логике:
- В разметку компонента проставляются обязательные data атрибуты. В эти атрибуты из liquid передаются данные из магазина, а так же есть data атрибуты которые реализуют действия (кнопки добавить или удалить товар из корзины, переключение модификаций, изменение quantity и т.д.).
- Common.js при загрузке страницы пробегает по проставленным data атрибутам и на основе данных инициализирует скрипты для работы компонентов.
- Практически на каждое взаимодействие с компонентами реализованными с помощью фреймворка (обновление корзины, переключение модификации и т.д.) можно повесить обработчик, в callback которого приходит информация о событии, например при обновлении корзины в callback попадает информация о актуальном состоянии корзины, исходя из чего можно сделать динамический виджет корзины или обновление информации на странице корзины без перезагрузки страницы.
Так же стоит ознакомиться с подробным описанием API фреймворка Common.js.
API фреймворка предоставляет удобные и протестированые методы, для разработки своих компонентов.
Но все обращения к API нужно производить после собития DOMContentLoaded оно же $(document).ready(function() {}), $(function() {}).
