Виджеты «Подели»#

«Подели» предоставляет готовые виджеты для страниц магазина. Они показывают покупателю условия оплаты частями: размер платежа, график платежей или промо-сообщение.

Какие бывают виджеты#

Виджеты подключаются по единой схеме, но отличаются местом размещения, внешним видом и классом инициализации.

Виджет	Где размещать	Класс инициализации	Что показывает
Бейдж карточки товара	Карточка товара и/или каталог	`ShortBadgeWidget`	Компактный бейдж «3 000 ₽ ×4» с логотипом
График платежей	Корзина, карточка товара	`CartWidget`	Карточка с графиком из четырёх платежей
График платежей «Подели × Альфа Деньги»	Корзина, карточка товара	`CartWidgetAlfaDengi`	Та же карточка с ко-брендингом «Подели × Альфа Деньги
Динамическая цена	Каталог и карточка товара	`TotalPodeliWidget`	Строка «4 платежа по 3 000 ₽»
Баннер-хедер	Все страницы сайта	`HeaderPodeliWidget`	Промо-строка «Делать покупки стало проще»

Как подключить виджет#

Подключение любого виджета состоит из двух шагов.

Шаг 1. Разместите на странице контейнер — пустой элемент, в который виджет встроит своё содержимое:

<div class="podeli-widget"></div>

Класс может быть любым. Главное — использовать тот же селектор в параметре selectorToInject при инициализации виджета.

Если виджет размещается в каталоге, добавьте контейнер в каждую карточку товара.

Шаг 2. Подключите скрипт перед закрывающим тегом </body> и вызовите метод init. Адрес скрипта, класс и параметры — в разделе нужного виджета.

Виджеты подключают одним из двух способов:

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

Подсказка

Если на сайте используется CORS, CSP или другие ограничения загрузки внешних ресурсов, добавьте домен https://widgets-static.podeli.ru в список разрешённых.

Бейдж карточки товара#

Бейдж для карточки товара — компактный виджет с анимацией. Он показывает размер одного платежа и логотип «Подели».

Шаг 1. Создайте контейнеры для виджетов и укажите класс:

<div class="podeli-widget"></div>

Название класса может отличаться от примера.

Шаг 2. Добавьте скрипт перед закрывающим тегом </body>:

<script>
    var podeliScript = document.createElement('script');
    podeliScript.src = 'https://widgets-static.podeli.ru/podeli-widgets/1.2.4/main.js';
    podeliScript.defer = true;

    document.body.appendChild(podeliScript);

    podeliScript.onload = function() {
        ShortBadgeWidget.init({
            selectorToInject: ".podeli-widget",
            selectorForTotal: ".price",
            borRadius: "8px",
            widgetType: "mini",
            mode: "red",
            miniLogo: true
        });
    };
</script>

Внимание

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

Параметры#

Параметр	Обяз.	Описание
`selectorToInject`	Да	Селектор контейнера, в который будет встроен виджет.
`selectorForTotal`	Да	Селектор элемента с ценой товара. Для каталога у всех цен должен быть общий класс.
`widgetType`	Да	Тип бейджа: `mini`, `text` или `v2`.
`mode`	Нет	Тема: `red`, `silver`, `shadow` или значение не указано.
`miniLogo`	Нет	Мини-версия логотипа. Применяется к типам `mini` и `v2`. `false` равнозначно отсутствию параметра.
`borRadius`	Нет	Радиус скругления углов.

Как выглядят widgetType, mode и miniLogo

Тип mini

Тема	`miniLogo: false`	`miniLogo: true`
`mode: false` / не передан
`mode: "red"`
`mode: "silver"`
`mode: "shadow"`

Тип text

miniLogo к этому типу не применяется.

Тема	Превью
`mode` не передан
`mode: "red"`
`mode: "silver"`
`mode: "shadow"`

Тип v2

Тема	`miniLogo: false`	`miniLogo: true`
`mode: false` / не передан
`mode: "red"`
`mode: "silver"`
`mode: "shadow"`

Виджет с графиком платежей#

Виджет показывает карточку с графиком из четырёх платежей. Размещается в корзине или карточке товара.

Шаг 1. Создайте контейнер и укажите класс, в который будет встроен виджет:

<div class="podeli-widget"></div>

Название класса может отличаться от примера.

Шаг 2. Добавьте скрипт перед закрывающим тегом </body>:

<script>
    var podeliScript = document.createElement('script');
    podeliScript.src = 'https://widgets-static.podeli.ru/widget/3.0.1/main.js';
    podeliScript.defer = true;

    document.body.appendChild(podeliScript);

    podeliScript.onload = function() {
        CartWidget.init({
            total: 5000,
            minLimit: 300,
            maxLimit: 15000,
            selectorToInject: ".podeli-widget",
            darkMode: true
        });
    };
</script>

В параметре total передаётся общая сумма покупки. Обычно это переменная, которая содержит итоговую сумму корзины или товара.

Параметры#

Параметр	Обяз.	Описание
`selectorToInject`	Да	Селектор контейнера, в который будет встроен виджет.
`total`	Да	Сумма покупки.
`minLimit`	Да	Минимальная сумма, при которой виджет отображается.
`maxLimit`	Да	Максимальная сумма, до которой виджет отображается.
`darkMode`	Нет	Включает тёмную тему виджета. `false` равнозначно отсутствию параметра.

Как выглядит darkMode

Виджет с графиком платежей в светлой теме — `darkMode: false`#

Виджет с графиком платежей в тёмной теме — `darkMode: true`#

График платежей «Подели × Альфа Деньги»#

Тот же график из четырёх платежей, но с ко-брендингом «Подели × Альфа Деньги» и отдельным информационным окном. Размещается в корзине или карточке товара.

Шаг 1. Разместите контейнер <div class="podeli-widget"></div>.

Шаг 2. Добавьте скрипт перед закрывающим тегом </body>:

<script>
    var podeliScript = document.createElement('script');
    podeliScript.src = 'https://widgets-static-bnpl.podeli.ru/widget-adengi/1.0.1/main.js';
    podeliScript.defer = true;

    document.body.appendChild(podeliScript);

    podeliScript.onload = function() {
        CartWidgetAlfaDengi.init({
            total: 5000,
            minLimit: 300,
            maxLimit: 15000,
            selectorToInject: ".podeli-widget",
            darkMode: true
        });
    };
</script>

Параметры#

Параметр	Обяз.	Описание
`selectorToInject`	Да	Селектор контейнера, в который будет встроен виджет.
`total`	Да	Сумма покупки.
`minLimit`	Да	Минимальная сумма, при которой виджет отображается.
`maxLimit`	Да	Максимальная сумма, до которой виджет отображается.
`darkMode`	Нет	Включает тёмную тему виджета. `false` равнозначно отсутствию параметра.

Как выглядит darkMode

Виджет «Подели × Альфа Деньги» в светлой теме — `darkMode: false`#

Виджет «Подели × Альфа Деньги» в тёмной теме — `darkMode: true`#

Виджет с динамической ценой#

Виджет показывает строку с расчётом платежа — например, «4 платежа по 3 000 ₽». Используется в каталоге и в карточке товара.

Сумма покупки передаётся одним из двух способов:

каталог — сумма берётся из элемента с ценой: передайте selectorForTotal;
карточка товара — сумма передаётся напрямую в параметре total.

Шаг 1. Создайте контейнер и укажите id или class, в который будет встроен виджет:

<div class="podeli-widget"></div>

Название id или class может отличаться от примера.

Шаг 2. Добавьте скрипт перед закрывающим тегом </body>:

<script>
    var podeliScript = document.createElement('script');
    podeliScript.src = 'https://widgets-static.podeli.ru/total-widget/2.2.3/main.js';
    podeliScript.defer = true;

    document.body.appendChild(podeliScript);

    podeliScript.onload = function() {
        TotalPodeliWidget.init({
            selectorToInject: ".podeli-widget",
            selectorForTotal: ".price",
            mode: "silver"
        });
    };
</script>

Параметры#

Параметр	Обяз.	Описание
`selectorToInject`	Да	Селектор контейнера, в который будет встроен виджет.
`selectorForTotal`	Для каталога	Селектор элемента с ценой товара. Для каталога у всех цен должен быть общий класс. У всех цен каталога должен быть общий класс.
`total`	Для карточки товара	Сумма покупки.
`mode`	Нет	Тема: `transparent`, `transparentv2`, `silver`, `shadow`, `red` или значение не указано.

Как выглядит mode

Значение	Превью
`mode` не передан
`mode: "transparent"`
`mode: "transparentv2"`
`mode: "silver"`
`mode: "shadow"`
`mode: "red"`

Баннер-хедер#

Баннер-хедер — виджет-растяжка с промо-сообщением «Подели» в верхней части сайта. Фон анимирован; анимацию отключает параметр offAnimation.

Шаг 1. Создайте контейнер и укажите класс, в который будет встроен виджет:

<div class="podeli-widget"></div>

Название класса может отличаться от примера.

Шаг 2. Добавьте скрипт перед закрывающим тегом </body>:

<script>
    var podeliScript = document.createElement('script');
    podeliScript.src = 'https://widgets-static.podeli.ru/header-widget/2.2.3/main.js';
    podeliScript.defer = true;

    document.body.appendChild(podeliScript);

    podeliScript.onload = function() {
        HeaderPodeliWidget.init({
            selectorToInject: ".podeli-widget",
            mode: "shadow",
            offAnimation: true
        });
    };
</script>

Параметры#

Параметр	Обяз.	Описание
`selectorToInject`	Да	Селектор контейнера, в который будет встроен виджет.
`mode`	Нет	Тема: `shadow`, `red` или значение не указано.
`offAnimation`	Нет	Отключает анимацию фона. `false` равнозначно отсутствию параметра.

Как выглядят mode и offAnimation

offAnimation: false

offAnimation: false или параметр не передан. Анимация снята одним кадром, поэтому фон показан в произвольный момент цикла.

Баннер-хедер, тема по умолчанию с анимацией — `mode` не передан#

Баннер-хедер, тема shadow с анимацией — `mode: "shadow"`#

Баннер-хедер, тема red с анимацией — `mode: "red"`#

offAnimation: true

Виджеты «Подели»#

Какие бывают виджеты#

Как подключить виджет#

Бейдж карточки товара#

Параметры#

Виджет с графиком платежей#

Параметры#

График платежей «Подели × Альфа Деньги»#

Параметры#

Виджет с динамической ценой#

Параметры#

Баннер-хедер#

Параметры#

Информационное окно#