Перейти к содержанию

Библиотека common.v2.js для InSales

Раздел посвящен библиотеке common.v2.js, которая является набором готовых скриптов для упрощения и ускорения разработки шаблонов на платформе inSales.

Модули

Товар:

  • Назначение атрибутов
  • Селектор модификаций
  • Методы класса Products
  • События

Опции:

  • Вывод опций в карточке товара
  • Вывод опций в корзине

Корзина:

  • Назначение атрибутов
  • Методы и события

Живой поиск по сайту:

  • Назначение атрибутов
  • Методы класса AjaxSearch
  • События

Сравнение:

  • Назначение атрибутов
  • Методы класса Compare
  • События

Избранное:

  • Назначение атрибутов
  • Методы класса FavoritesProducts
  • События

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

  • Подписка на события
  • Создание событий
  • Отладка событий

Модуль для работы с API магазина:

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

AJAX-фильтры:

  • Принцип работы
  • Пример разметки

Форма обратной связи:

  • Назначение атрибутов
  • События
  • Пример разметки

Форма отзыва к товару:

  • Назначение атрибутов
  • События
  • Пример разметки

Форма комментария к статье:

  • Назначение атрибутов
  • События
  • Пример разметки

AJAX-товары:

  • Карточка товара
  • Список товаров

Форма заказа в один клик:

  • Активация формы заказа и заявки
  • События

События по клику:

  • Публикация произвольного события по клику

Lodash шаблоны:

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

Методы для работы с UI:

  • Динамическая корзина
  • Обновление слушателей количества
  • Открытие заказа в один клик

Вспомогательные методы магазина:

  • Формат цены
  • Конфигурация страницы
  • Клиент, единицы измерения, сообщения и отзывы

Меню:

  • Подсветка текущего пункта

Счётчик в корзине на карточке:

  • Кнопки количества на карточке товара

AJAX-отзывы:

  • Список отзывов магазина

Tools:

  • Разбор адреса страницы
  • Язык в ссылках
  • Человекочитаемые адреса фильтров

Подключение

В шаблоны layouts.{layout,checkout2,client_account}.liquid добавить тег include_insales_scripts с параметром common-js@v2

{% include_insales_scripts "common-js@v2" %}

Так же можно подключить через settings_data.json, прописав там поле - "common_js_version": "v2".

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

Пример settings_data.json: 

{
  "common_js_version": "v2",
  "presets": {
    "custom": {
      "color_text_primary": "#222222",
      "font_size_primary": "16px"
    }
  },
  "theme_title": "Базовый шаблон"
}

Info

В шаблонах 4 поколения common-js указывается в качестве зависимости для виджетов

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

jQuery обязателен: обработчики отдают jQuery-объекты кнопок и форм, а методы ajaxAPI и Products возвращают jQuery Deferred. У такого объекта есть методы .done() и .fail().

Lodash доступен глобально как _. В проекте должна быть версия 4.17.21: другая версия на странице приводит к предупреждению о второй копии библиотеки.

Зарезервированные переменные

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

  • Cart
  • InsalesCommonCart
  • Shop
  • Products
  • Compare
  • FavoritesProducts
  • Site
  • AjaxSearch
  • ajaxAPI
  • Template
  • EventBus
  • Tools
  • reCaptchaCommon
  • yandexCaptchaCommon
  • localforage

Cart и InsalesCommonCart — один и тот же объект корзины.

Site зарезервирован и остаётся пустым объектом: у него нет методов. Его нельзя переопределять своим кодом.

reCaptchaCommon и yandexCaptchaCommon описаны в разделе про капчу. localforage — хранилище в браузере, которое библиотека использует для кэша.

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

Логика работы

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

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

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

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

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