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

Бейдж для карточки товара (с анимацией).#

Подключение виджета можно разделить на 2 простых шага:

1 шаг: Разместить контейнер на странице карточки товара и/или корзины.

2 шаг: Провести инициализацию SDK, путем вызова функции init, и передачи конечной суммы покупок в виджет.

Подсказка

Контейнер необходимо разместить под/над каждым элементом каталога.

Подсказка

Стоит помнить про политику CORS и добавить https://cdn.podeli.ru в список разрешенных доменов.

После выполнения этих шагов - виджет готов к работе.

Теперь подробнее о каждом шаге:

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

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

Названия class не обязательно должно быть как в примере.

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

html
<script>
    var podeliScript = document.createElement('script');
    podeliScript.src = 'https://cdn.podeli.ru/New-Widgets/ReactWidget/widget-podeliv2.js';
    podeliScript.defer = true;

    document.body.appendChild(podeliScript);

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

Важно

Если на сайте имеется подгрузка элементов каталога, необходимо добавить скрипт, которой должен срабатывать при обновлении каталога

Для работы виджета необходимо указать:

  1. selectorToInject - class, который был указан в контейнере на первом шаге

  2. selectorForTotal - class контейнера, в котором указана цена товара (необходимо, чтобы у всех цен товаров в каталоге был какой-то общий класс)

  3. widgetType - тип виджета, представлен в 3 вариантах: mini, text, v2 (в том же порядке указаны на скриншоте)

Дополнительные настройки кастомизации:

  1. borRadius - радиус скругления углов

  2. mode - тема (цветовая схема) виджета, представлен в 4 вариантах: не указан, red, silver, shadow (в том же порядке указаны на скриншоте)

  3. miniLogo - для типов mini и v2 можно включить мини-версию логотипа

В конечном счете виджет должен выглядеть примерно так:

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

При нажатии на виджет, должно появляться такое информационное окно:

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

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

«Подели» предоставляет готовые виджеты с простым API для встраивания на страницу.

Подключение виджета можно разделить на 2 простых шага:

1 шаг: Разместить контейнер на странице карточки товара и/или корзины.

2 шаг: Провести инициализацию SDK, путем вызова функции init, и передачи конечной суммы покупок в виджет.

Подсказка

Стоит помнить про политику CORS и добавить https://cdn.podeli.ru в список разрешенных доменов.

После выполнения этих шагов - виджет готов к работе.

Теперь подробнее о каждом шаге:

Подсказка

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

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

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

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

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

html
<script>
    var podeliScript = document.createElement('script');
    podeliScript.src = 'https://cdn.podeli.ru/New-Widgets/ReactWidget/widget-podeliv2.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 будет находиться переменная, с общей суммой покупок.

Для работы виджета необходимо указать:

  1. selectorToInject - class, который был указан в контейнере на первом шаге

  2. minLimit - минимальная сумма, с который виджет будет отображаться

  3. maxLimit - максимальная сумма, до которой виджет будет отображаться

  4. total - сумма покупок

Дополнительные настройки кастомизации:

  1. darkMode - включает темную тему виджета

В конечном счете виджет должен выглядеть примерно так:

Карточка виджета

При нажатии на кнопку i, должно появляться вот такое информационное окно:

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

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

Подключение виджета можно разделить на 2 простых шага:

1 шаг: Разместить контейнер на странице карточки товара и/или корзины.

2 шаг: Провести инициализацию SDK, путем вызова функции init, и передачи конечной суммы покупок в виджет.

Подсказка

Стоит помнить про политику CORS и добавить https://cdn.podeli.ru в список разрешенных доменов.

Подсказка

Данная версия виджета может быть использована как в каталоге, так и в карточке товара, далее будет описаны оба варианта его установки. Если виджет устанавливается для каталога контейнер необходимо разместить под/над каждым элементом каталога.

После выполнения этих шагов - виджет готов к работе.

Теперь подробнее о каждом шаге:

Подсказка

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

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

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

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

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

html
<script>
    var podeliScript = document.createElement('script');
    podeliScript.src = 'https://cdn.podeli.ru/New-Widgets/ReactWidget/widget-podeliv2.js';
    podeliScript.defer = true;

    document.body.appendChild(podeliScript);

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

Предполагается, что в total будет находиться переменная, с общей суммой покупок.

Настройка для каталога

  1. selectorToInject - class, который был указан в контейнере на первом шаге

  2. selectorForTotal - class контейнера, в котором указана цена товара (необходимо, чтобы у всех цен товаров в каталоге был какой-то общий класс)

  3. mode - тема (цветовая схема) виджета, представлен в 6 вариантах: transparent, transparentv2, silver, shadow, red, не указан (в том же порядке указаны на скриншоте)

Настройка для карточки товара

  1. selectorToInject - class, который был указан в контейнере на первом шаге

  2. total - сумма покупок

  3. mode - тема (цветовая схема) виджета, представлен в 6 вариантах: transparent, transparentv2, silver, shadow, red, не указан (в том же порядке указаны на скриншоте)

В конечном счете виджет должен выглядеть примерно так:

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

При нажатии на виджет, должно появляться такое информационное окно:

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

Баннер-хедер (с анимацией).#

Подключение виджета можно разделить на 2 простых шага:

1 шаг: Разместить контейнер на странице карточки товара и/или корзины.

2 шаг: Провести инициализацию SDK, путем вызова функции init, и передачи конечной суммы покупок в виджет.

Подсказка

Данный виджет необходимо разместить на всех страницах вашего сайта.

Подсказка

Стоит помнить про политику CORS и добавить https://cdn.podeli.ru в список разрешенных доменов.

После выполнения этих шагов - виджет готов к работе.

Теперь подробнее о каждом шаге:

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

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

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

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

html
<script>
    var podeliScript = document.createElement('script');
    podeliScript.src = 'https://cdn.podeli.ru/New-Widgets/ReactWidget/widget-podeliv2.js';
    podeliScript.defer = true;

    document.body.appendChild(podeliScript);

    podeliScript.onload = function() {
        HeaderPodeliWidget.init({
            selectorToInject: "podeli-widget",
            mode: "shadow",
            offAnimation: true,
        });
    };
</script>
Для работы виджета необходимо указать:

  1. selectorToInject - class, который был указан в контейнере на первом шаге

Дополнительные настройки кастомизации:

  1. mode - тема (цветовая схема) виджета, представлен в 3 вариантах: shadow, не указан, red (в том же порядке указаны на скриншоте)

  2. offAnimation - отключает анимацию фона

В конечном счете виджет должен выглядеть примерно так:

Виджета растяжка

При нажатии на виджет, должно появляться такое информационное окно:

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