Виджет ПВЗ

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

выбрать на карте пункты с нужным способом оплаты;
воспользоваться поиском пункта выдачи по адресу.

Примечание

Виджет ПВЗ поддерживает только доставку в другой день.

Какую информацию отправляет виджет

Виджет вызывает callback-функцию в момент использования. В зависимости от настроек пользователь видит пункты выдачи заказов (ПВЗ), постаматы и их характеристики в заданном радиусе.

Сallback-функция передает на ваш сайт следующие параметры:

address.street+houseb — aдрес;
typec — тип доставки;
payment_methods — способы оплаты;
id — идентификатор;
position — точку на карте.

Установка виджета на сайт

Для подключения виджета выполните следующие действия:

Скопируйте загрузочный код (см. ниже).
Настройте необходимые параметры. Подробнее в разделе Настройка виджета.
Добавьте настроенный код на нужную страницу. Рекомендуем расположить его внутри тега <head> … </head>.

<script async src="https://ndd-widget.landpro.site/widget.js"></script>

<div id="delivery-widget"></div>

<!-- Код виджета -->
<script>
    (function(w) {
        function startWidget() {
            w.YaDelivery.createWidget({
                containerId: 'delivery-widget',         // Идентификатор HTML-элемента (контейнера), в котором будет отображаться виджет
                params: {
                    city: "Москва",                     // Город, отображаемый на карте при запуске
                    size:{                              // Размеры виджета
                        "height": "450px",              // Высота
                        "width": "100%"                 // Ширина
                    },
                    source_platform_station: "05e809bb-4521-42d9-a936-0fb0744c0fb3",  // Станция отгрузки
                    physical_dims_weight_gross: 10000,  // Вес отправления
                    delivery_price: "от 100",           // Стоимость доставки
                    delivery_term: "от 1 дня",          // Срок доставки
                    show_select_button: true,           // Отображение кнопки выбора ПВЗ (false — скрыть кнопку, true — показать кнопку)
                    filter: {
                        type: [                         // Тип способа доставки
                            "pickup_point",             // Пункт выдачи заказа
                            "terminal"                  // Постамат
                        ],
                        is_yandex_branded: false,       // Тип пункта выдачи заказа (false — Партнерские ПВЗ, true — ПВЗ Яндекса)
                        payment_methods: [              // Способ оплаты
                            "already_paid",             // Доступен для доставки предоплаченных заказов
                            "card_on_receipt"           // Доступна оплата картой при получении
                        ]
                        payment_methods_filter: "or"    // Фильтр по типам оплаты
                    }
                },
            });
        }
        w.YaDelivery
            ? startWidget()
            : document.addEventListener('YaNddWidgetLoad', startWidget);
    })(window);
                                                        // Подписка на событие
    document.addEventListener('YaNddWidgetPointSelected', function (data){
                                                        // Обработка выбранных данных
                                                        // Данные о выбранной точке содержатся в параметре data
        console.log(data.detail.id);
        console.log(data.detail.address.full_address);
        console.log(data.detail.address.country);
        console.log(data.detail.address.locality);
        console.log(data.detail.address.street);
        console.log(data.detail.address.house);
        console.log(data.detail.address.comment);
    });

</script>

Для настройки доступны следующие параметры:

Параметр	Описание
`city`	Город, который будет показан на карте при загрузке. По умолчанию карта настроена на г. Москва. Если вы или ваш пользователь разрешаете определение геолокации, карта покажет город местонахождения. Примечание Задайте значение города на русском языке. Для одноименных городов или большей детализации укажите область. Чтобы избежать ошибок, скопируйте название города из Яндекс Карт.
`type`	Фильтрация по типу способа доставки: `pickup_point` — пункт выдачи заказов; `terminal` — постамат. Чтобы на карте были показаны пункты выдачи заказов и постаматы, выберите оба значения.
`is_yandex_branded`	Необязательный параметр. Фильтрация по типу пунктов выдачи заказов: `true` — брендированные; `false` — небрендировананые (партнерские). Чтобы на карте были показаны оба типа, оставьте параметр пустым.
`payment_method`	Необязательный параметр. Фильтрация пунктов выдачи заказа по доступным способам оплаты: `already_paid` — доставка предоплаченных заказов; `cash_on_receipt` — оплата наличными при получении; `card_on_receipt` — оплата картой при получении. Одновременно можно выбрать несколько значений.
`payment_methods_filter`	Необязательный параметр. Выбор оператора при фильтрации ПВЗ по способам оплаты: `or` — при выборе нескольких типов оплаты будут отображены все ПВЗ, которыми поддерживается хотя бы один из выбранных; `and` — при выборе нескольких типов оплаты будут отображены все ПВЗ, которыми поддерживаются все выбранные одновременно. Если отсутствует в загрузочном коде, по умолчанию будет применена фильтрация `or` (ИЛИ) для всех возможных способов оплаты. Например, если вы укажите значения `already_paid` и `cash_on_receipt`, на карте будут показаны точки получения заказа, в которых доступен хотя бы один из указанных способов оплаты.
`show_select_button`	Отображение кнопки выбора ПВЗ: `false` — скрыть кнопку «Продолжить»; `true` — показывать кнопку «Продолжить». Если настроена активная кнопка, то событие передается в момент нажатия кнопки «Продолжить». Если кнопка неактивна, то событие передается при выборе пункта выдачи. При повторном выборе будет передано новое значение.
`size`	Размеры виджета на странице: `height` — высота, задается только в пикселях; `width` — ширина, может быть задана в пикселях или процентах.

Если не используется расчет стоимости и сроков доставки, можно также задать значения для следующих параметров:

Параметр

Описание

delivery_price

Стоимость доставки для пользователя в рублях.

Если цена нефиксированная, укажите значение в формате: «от 100». Чтобы скрыть отображение стоимости, проставьте « ». Обозначение валюты подставляется автоматически.

delivery_term

Срок доставки для пользователя в днях. Рекомендуем указывать в формате: «от 1 дня».

Расчет стоимости и сроков доставки

Виджет поддерживает расчет стоимости и сроков доставки. Для этого используйте параметры:

Параметр	Тип данных	Описание
`source_platform_station`	GUID	Станция отгрузки. Значение параметра можно: получить через API с помощью метода 2.02 — выберите ближайшую к вам точку; запросить у своего коммерческого представителя.
`physical_dims_weight_gross`	`integer`	Вес отправления, передается в граммах. Максимально допустимый вес отправления: для большинства ПВЗ — 30 000 г, для некоторых ПВЗ — 10 000 г. Всего 90 штук. для постамата — 11 000 г. Точки, не подходящие для данного отправления, автоматически скроются при передаче веса отправления.
`delivery_term`	`integer`	Срок доставки: `delivery_term: 0,` — означает, что отгрузка будет произведена сегодня; `delivery_term: 1,` — означает, что отгрузка будет произведена завтра. Отвечает за отображение срока доставки и указывается в днях. Виджет при запросе возможных дат доставки определяет дату границы нижнего интервала по формуле `tommorow + delivery_term`. Используется для того, чтобы заложить необходимое количество дней на отгрузку заказа в сторону логистического оператора. Если параметр не передан, подставляется значение по умолчанию `0`.
`delivery_price`	`function`	Стоимость доставки: `delivery_price: (price) => price + " руб"` — цена доставки, полученная от Яндекса; `delivery_price: (price) => price*0.5 + " руб"` — цена доставки с 50% скидкой. Отвечает за отображение стоимости доставки в рублях. Обозначение валюты необходимо указывать вручную. Также можно проводить математические операции с полученной ценой доставки, например, во время акционных предложений.

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

Процесс изменения параметров работает следующим образом:

На сайт добавляется функция YaDelivery.setParams, содержащая изменяемые параметры.
Сайт вызывает функцию виджета YaDelivery.setParams и передает в нее один или несколько параметров из загрузочного кода, которые необходимо изменить.
Список доступных параметров:
- Город (city)
- Типы способа доставки (type)
- Типы пунктов выдачи заказов (is_yandex_branded)
- Доступные способы оплаты (payment_method)
- Фильтр по способам оплаты (payment_methods_filter)
- Отображать кнопку выбора ПВЗ(show_select_button)
- Стоимость доставки (delivery_price)
- Срок доставки (delivery_term)
Виджет валидирует передаваемые изменения на допустимость заданных значений.
Виджет обновляет переданные параметры и начинает работать так, как будто в загруженном коде были указаны значения с изменениями.

Важно

Изменение параметра size (размеры виджета) не предусмотрено.

Пример функции YaDelivery.setParams:

YaDelivery.setParams({
                    city: "Санкт-Петербург",
                    delivery_price: "от 200",
                    show_select_button: false
                })

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

Принцип работы:

Сайт повторно обращается к функции createWidget.
Виджет делает рестарт.

Существует несколько способов рестарта виджета:

Реализовать повторный перезапуск/исполнение всего загрузочного кода.

Убрать оберточную функцию function(w), тогда функция createWidget станет глобальной и её можно вызывать и таким образом перезапускать виджет.

Пример глобальной функции createWidget:

function startWidget() {
      YaDelivery.createWidget({
        containerId: 'delivery-widget',
        params: {
            city: "Москва",
            // Размеры виджета
            size:{
                "height": "450px",
                "width": "100%"
            },
            delivery_price: "от 100",
            delivery_term: "от 1 дня",
            show_select_button: true,
            filter: {
                // Тип способа доставки
                type: [
                    "pickup_point",
                    "terminal"
                ],
                is_yandex_branded: false,
                payment_methods_filter: "or",
                // Способ оплаты
                payment_methods: [
                    "already_paid",
                    "card_on_receipt"
                ]
            }
        },
    });
}
  YaDelivery
    ? startWidget()
   : document.addEventListener('YaNddWidgetLoad', startWidget);

Чтобы получать данные о точке, которую выбрал пользователь, нужно подписаться на событие YaNddWidgetPointSelected. Подписка на событие внесена в загрузочный код.
Событие YaNddWidgetPointSelected будет отправляться:
- show_select_button = false — при каждом выборе пользователем точки ПВЗ или постамата в виджете;
- show_select_button = true — при выборе любым из доступных способов нужного ПВЗ или постамата и только при нажатии на кнопку выбора ПВЗ.

Данные, передаваемые с событием:

id — id;
address.country — cтрана;
address.locality — город;
address.street — улица;
address.house — дом;
address.full_address — полный адрес;
address.comment — комментарий.

Код подписки на событие:

// Подписка на событие
    document.addEventListener('YaNddWidgetPointSelected', function (data){
        // Обработка выбранных данных
        // Данные о выбранной точке содержатся в параметре data
        console.log(data.detail.id);
        console.log(data.detail.address.full_address);
        console.log(data.detail.address.country);
        console.log(data.detail.address.locality);
        console.log(data.detail.address.street);
        console.log(data.detail.address.house);
        console.log(data.detail.address.comment);
    });

Со всеми настройками

<script async src="https://ndd-widget.landpro.site/widget.js"></script>

<div id="delivery-widget"></div>

<!-- Код виджета -->
<script>
    (function(w) {
        function startWidget() {
            w.YaDelivery.createWidget({
                containerId: 'delivery-widget',   // Идентификатор HTML-элемента (контейнера), в котором будет отображаться виджет
                params: {
                    city: "Москва",               // Город, отображаемый на карте
                    // Размеры виджета
                    size:{
                        "height": "450px",        // Высота
                        "width": "100%"           // Ширина
                    },
                    delivery_price: "от 100",     // Сумма доставки
                    delivery_term: "от 1 дня",    // Срок доставки
                    show_select_button: true,        // Отображение кнопки выбора пункта выдачи заказа (false - скрыть кнопку, true - показать кнопку)
                    filter: {
                        // Тип способа доставки
                        type: [
                            "pickup_point",       // Пункт выдачи заказа
                            "terminal"            // Постамат
                        ],
                        is_yandex_branded: false,   // Тип пункта выдачи заказа (false - Партнерские ПВЗ, true - ПВЗ Яндекса)
                        payment_methods_filter: "or", // Фильтр по способам оплаты
                        // Способ оплаты
                        payment_methods: [
                            "already_paid",       // Доступен для доставки предоплаченных заказов
                            "cash_on_receipt",    // Доступна оплата наличными при получении
                            "card_on_receipt"     // Доступна оплата картой при получении
                        ]
                    }
                },
            });
        }
        w.YaDelivery
            ? startWidget()
            : document.addEventListener('YaNddWidgetLoad', startWidget);
    })(window);
</script>

Без расчета сроков и стоимости доставки

<script>
    (function(w) {
        function startWidget() {
            w.YaDelivery.createWidget({
                containerId: 'delivery-widget',         // Идентификатор HTML-элемента (контейнера), в котором будет отображаться виджет
                params: {
                    city: "Москва",                     // Город, отображаемый на карте при запуске
                    size:{                              // Размеры виджета
                        "height": "450px",              // Высота
                        "width": "100%"                 // Ширина
                    },
                    delivery_price: "от 100",           // Стоимость доставки
                    delivery_term: "от 1 дня",          // Срок доставки
                    show_select_button: true,           // Отображение кнопки выбора ПВЗ
                    filter: {
                        type: [                         // Тип способа доставки
                            "pickup_point",             // Пункт выдачи заказа
                            "terminal"                  // Постамат
                        ],
                        is_yandex_branded: false,       // Тип пункта выдачи заказа
                        payment_methods: [              // Способ оплаты
                            "already_paid",             // Доступен для доставки предоплаченных заказов
                            "card_on_receipt"           // Доступна оплата картой при получении
                        ]
                        payment_methods_filter: "or"    // Фильтр по типам оплаты
                    }
                },
            });
        }
        w.YaDelivery
            ? startWidget()
            : document.addEventListener('YaNddWidgetLoad', startWidget);
    })(window);
</script>

С расчетом сроков и стоимости доставки

<script>
    (function(w) {
        function startWidget() {
            w.YaDelivery.createWidget({
                containerId: 'delivery-widget',         // Идентификатор HTML-элемента (контейнера), в котором будет отображаться виджет
                params: {
                    city: "Москва",                     // Город, отображаемый на карте при запуске
                    size:{                              // Размеры виджета
                        "height": "450px",              // Высота
                        "width": "100%"                 // Ширина
                    },
                    source_platform_station: "05e809bb-4521-42d9-a936-0fb0744c0fb3",  // Станция отгрузки
                    physical_dims_weight_gross: 10000,                    // Вес отправления
                    delivery_price: (price) => price + " руб",            // Стоимость доставки
                    delivery_term: 3,                                     // Срок доставки
                    show_select_button: true,                             // Отображение кнопки выбора ПВЗ
                    filter: {
                        type: [                                           // Тип способа доставки
                            "pickup_point",                               // Пункт выдачи заказа
                            "terminal"                                    // Постамат
                        ],
                        is_yandex_branded: false,                         // Тип пункта выдачи заказа
                        payment_methods: [                                // Способ оплаты
                            "already_paid",                               // Доступен для доставки предоплаченных заказов
                            "card_on_receipt"                             // Доступна оплата картой при получении
                        ]
                        payment_methods_filter: "or"                      // Фильтр по типам оплаты
                    }
                },
            });
        }
        w.YaDelivery
            ? startWidget()
            : document.addEventListener('YaNddWidgetLoad', startWidget);
    })(window);
</script>

Виджет ПВЗ

Какую информацию отправляет виджет

Установка виджета на сайт

Загрузочный код

Настройка виджета

Расчет стоимости и сроков доставки

Модификация виджета после запуска

Изменение параметров загрузочного кода в запущенном виджете

Рестарт уже запущенного виджета

Получение данных из виджета

Примеры

Со всеми настройками

Без расчета сроков и стоимости доставки

С расчетом сроков и стоимости доставки

Была ли статья полезна?