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

Виджет для каталога.#

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

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

2 шаг: Подключить необходимые файлы с cdn.

Подсказка

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

Подсказка

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

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

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

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

html

<div class="podeli-widget" data-total="4900" data-min="300" data-max="30000"></div>

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

В data-total - необходимо передавать стоимость товара.

В data-min и data-max - опионально передавать минимально и максимально допустимую сумму.

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

html

<script src="https://cdn.podeli.ru/New-Widgets/New-catalog-widget/podeli-widget.js"></script>

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

html

<link href="https://cdn.podeli.ru/New-Widgets/New-catalog-widget/index.css" rel="stylesheet">

Важно

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

let widgets = document.querySelectorAll('.podeli-widget')
widgets.forEach((item, i) => {
    MarkerWidgetPodeli.init({
        total: +item.dataset.total,
        maxLimit: +item.dataset.max,
        minLimit: +item.dataset.min,
        version: 4,
        index: i
    })
})

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

Пример с карточками товаров

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

Виджет для карточки товара и для корзины.#

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

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

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

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

Подсказка

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

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

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

Подсказка

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

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

html

<div class="podeli_widget"></div>
<!-- ИЛИ -->
<div id="podeli_widget"></div>

Названия id/class могут отличаться от примера

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

html

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

    document.body.appendChild(podeliScript);

    podeliScript.onload = function() {
    CartWidget.init({
        total: 5500,
        selectorToInject: ".podeli_widget",
        maxLimit: 30000,
    });
    }
</script>

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

Дополнительно

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

html

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

    document.body.appendChild(podeliScript);

    podeliScript.onload = function() {
    CartWidget.init({
        total: 5500,
        selectorToInject: ".podeli_widget",
        minLimit: 300,
        maxLimit: 30000,
        notShowPenny: true,
        mainColor: '#FF0000'
    });
    }
</script>

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

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

Мини-виджет.#

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

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

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

Подсказка

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

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

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

Подсказка

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

html

<div class="podeli_widget"></div>
<!-- ИЛИ -->
<div id="podeli_widget"></div>

Названия id/class могут отличаться от примера

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

html

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

    document.body.appendChild(podeliScript);

    podeliScript.onload = function() {
    MiniWidgetPodeli.init({
        total: 5500,
        selectorToInject: ".podeli_widget",
        maxLimit: 30000,
    });
    }
</script>

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

Дополнительно

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

html

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

    document.body.appendChild(podeliScript);

    podeliScript.onload = function() {
    MiniWidgetPodeli.init({
        total: 5500,
        selectorToInject: ".podeli_widget",
        minLimit: 300,
        maxLimit: 30000,
        greyLogo: true
    });
    }
</script>

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

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

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

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

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

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

Подсказка

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

Подсказка

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

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

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

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

html

<div class="podeli_widget"></div>
<!-- ИЛИ -->
<div id="podeli_widget"></div>

Названия id/class могут отличаться от примера

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

html

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

    document.body.appendChild(podeliScript);

    podeliScript.onload = function() {
        Podeli.init({
            total: 5500,
            selectorToInject: ".podeli_widget",
            maxLimit: 30000
        });
    }
</script>

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

Дополнительно

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

html

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

    document.body.appendChild(podeliScript);

    podeliScript.onload = function() {
        Podeli.init({
            total: 5500,
            selectorToInject: ".podeli_widget",
            itemsAmount: 5,
            backgroundColor: '#088800',
            minLimit: 300,
            maxLimit: 30000
        });
    }
</script>

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

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