Создание конфигурации

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

Пример конфигурации с полным набором параметров

{
  "productId": 23903,
  "isDemo": true,
  "color": "#FA6400",
  "colorText" "#FFFFFF",
  "theme": {
    "background": "#F0F0F0",
    "backgroundWidget": "#F6F6F6",
    "components": {
      "primaryBackground": "linear-gradient(117.59deg, #FF944D -1.03%, #FA6400 51.21%, #FF944D 107.6%)",
      "primaryText": "#FFFFFF",
      "secondaryBackground": "#F6F6F6",
      "secondaryText": "#0B132A",
      /* "reservePrimaryBackground": "#FA6400" */
    },
    "svg": {
      "fill": "#FA6400",
      "content": "#FFFFFF"
    }
  },
  "logoImage": "logo.svg",
  "headerLink": "https://www.giftery.ru",
  "locale": "en",
  "macroregion": "ru",
  "currencyCode": "RUB",
  "face": 1000,
  "faces": [500, 1000, 1500],
  "recipients": ["friend"],
  "allowTestSend": false,
  "imageSelect": false,
  "allowCustomImage": true,
  "allowPromoCodes": true,
  "checkBalance": "disabled",
  "corporateOrder": "disabled"
}

Описание параметров

Параметр		Описание
productId	Параметр обязателен, значение по-умолчанию отсутствует	ID бренда в каталоге Гифтери.
isDemo	false	Демо-режим виджета. В данном режиме заказ не формируется, а вместо перехода на оплату сразу отображается сообщение об успешной отправке.
color	#fa6400	Цвет темы виджета в шестнадцатеричном виде. Данный параметр перебьет theme.components.secondaryBackground и theme.svg.fill
colorText	#ffffff	Цвет текста в компонентах виджета в шестнадцатеричном виде. Данный параметр перебьет theme.components.primaryText и theme.svg.content
logoImage		Путь к логотипу бренда.
headerLink		Данный параметр позволяет добавить ссылку к логотипу в блоке header.
locale	ru	Локаль виджета. На данный момент виджет может быть отображён на русском, казахском, английском и испанском языках. Для этого можно указать значение параметра ru,kk,en,es соответственно.
macroregion	ru	Возможность указывать регион вне зависимости от региона продукта. (Влияет исключительно на интерфейс виджета, внутренняя логика и покупки завязаны на регионе продукта!)
currencyCode	RUB	Возможность указывать валюту вне зависимости от региона продукта. Поддерживается трёхбуквенный код по стандарту ISO 4217 (пример: RUB, BYN, EUR, USD)
face	выбирается первый из списка	Номинал подарочного сертификата, который будет выбран по умолчанию при открытии виджета.
faces	выводится весь список доступных номиналов	Массив номиналов, которые будут отображены в списке выбора номиналов. Если оставить только один номинал, то в форме покупки вместо селекта будет выведена надпись с единственно возможным номиналом.
recipients	["friend", "myself"]	Данный параметр позволяет скрыть выбор адресата, для отправки. Например, задав ["friend"], можно убрать возможность отправки сертификата самому себе.
allowTestSend	true	Установив параметру значение false, можно скрыть форму отправки тестового сертификата.
imageSelect	true	Установив параметру значение false, можно ограничить возможность выбора изображения из доступных для продукта.
allowCustomImage	false	Позволяет включить возможность загрузки своего изображения.
allowPromoCodes	false	Добавляет поле для ввода промокода на страницу корзины.
checkBalance	"disabled"	Позволяет вручную отключать возможность проверки баланса. Принимает значения: "disabled"
corporateOrder	"enabled"	Позволяет вручную включать/отключать кнопку Корпоративный заказ. Принимает значения: "enabled", "disabled"

Описание кастомизации темы виджета

Фон виджета (theme):
Параметр		Описание
background	#F0F0F0	Меняет фон, над которым рисуется виджет. Подробнее: MDN
backgroundWidget	#F6F6F6	Меняет фон внутри виджета. Подробнее: MDN
Компоненты (theme.components):
primaryBackground	linear-gradient(117.59deg, #FF944D -1.03%, #FA6400 51.21%, #FF944D 107.6%)	Меняет цвет основных компонентов виджета (кнопки "Далее", "В корзину", селекторы, чекбоксы и т.д.). Может принимать все значения, которые соответствуют полю background в CSS. Подробнее: MDN
primaryText	#FFFFFF	Меняет цвет текста внутри основных компонентов виджета. Цвет задается в шестнадцатеричном виде.
secondaryBackground	#F6F6F6	Меняет цвет дополнительных компонентов виджета (кнопки "Назад", "Отменить" и т.д.). Может принимать все значения, которые соответствуют полю background в CSS. Подробнее: MDN
secondaryText	#0B132A	Меняет цвет текста внутри дополнительных компонентов виджета. Цвет задается в шестнадцатеричном виде.
Иконки (theme.svg):
fill	#FA6400	Меняет фон иконок. Цвет задается в шестнадцатеричном виде.
content	#FFFFFF	Меняет цвет контента внутри иконок. Цвет задается в шестнадцатеричном виде.