Настройка 3.0 - cdek-it/widget GitHub Wiki
На данной странице описаны все возможные настройки виджета для его адаптации под конкретный магазин
<script type="text/javascript">
new window.CDEKWidget({
from: {
country_code: 'RU',
city: 'Новосибирск',
postal_code: 630009,
code: 270,
address: 'ул. Большевистская, д. 101',
},
root: 'cdek-map',
apiKey: 'yandex-api-key',
canChoose: true,
servicePath: 'https://some-site.com/service.php',
hideFilters: {
have_cashless: false,
have_cash: false,
is_dressing_room: false,
type: false,
},
hideDeliveryOptions: {
office: false,
door: false,
},
debug: false,
goods: [
{
width: 10,
height: 10,
length: 10,
weight: 10,
},
],
defaultLocation: [55.0415, 82.9346],
lang: 'rus',
currency: 'RUB',
tariffs: {
office: [234, 136, 138],
door: [233, 137, 139],
},
onReady() {
alert('Виджет загружен');
},
onCalculate() {
alert('Расчет стоимости доставки произведен');
},
onChoose() {
alert('Доставка выбрана');
},
});
</script>Вся конфигурация происходит при создании объекта виджета. После создания ее изменить нельзя.
| Имя | Тип | По умолчанию | Описание |
|---|---|---|---|
| from | string|object | Значение отсутствует | Адрес, от которого будет производиться отправка груза. Может содержать только город или адрес целиком |
| from.country_code | string | Значение отсутствует | Код страны населенного пункта отправителя в формате ISO_3166-1_alpha-2 |
| from.city | string | Значение отсутствует | Название населенного пункта отправителя |
| from.postal_code | integer | Значение отсутствует | Почтовый индекс населенного пункта отправителя |
| from.code | integer | Значение отсутствует | Код населенного пункта CDEK |
| from.address | string | Значение отсутствует | Адрес откуда произойдет отправка курьером в населеном пункте |
| root | string | "cdek-map" |
ID элемента, куда будет помещен виджет. В случае отсутствия - данный элемент будет создан на странице |
| apiKey | string | Значение отсутствует | Ключ доступа к API Яндекс.Карт |
| canChoose | boolean | true |
Управление кнопкой «Выбрать» в описании ПВЗ. Если выставлено в false – кнопка не будет отображаться, что подходит для инфовиджета в разделе «Доставка». Если true – кнопка показывается с возможностью подписаться на выбор ПВЗ с помощью события onChoose
|
| servicePath | string | Значение отсутствует | Путь к php файлу для расчетов виджета |
| hideFilters | object | Значение задано дочерними элементами | Управление сокрытием доступных пользователю фильтров |
| hideFilters.have_cashless | boolean | false |
Управление скрытием фильтра "Оплата картой" |
| hideFilters.have_cash | boolean | false |
Управление скрытием фильтра "Оплата наличными" |
| hideFilters.is_dressing_room | boolean | false |
Управление скрытием фильтра "Есть примерочная" |
| hideFilters.type | boolean | false |
Управление скрытием фильтра "Вид ПВЗ" |
| forceFilters | object | Значение задано дочерними элементами | Управление принудительно заданными фильтрами (клиент не может их изменить) |
| forceFilters.have_cashless | boolean | null |
Управление фильтром "Оплата картой" (Если значение задано как null - клиенту разрешено самостоятельно задать фильтр) |
| forceFilters.have_cash | boolean | null |
Управление фильтром "Оплата наличными" (Если значение задано как null - клиенту разрешено самостоятельно задать фильтр) |
| forceFilters.is_dressing_room | boolean | null |
Управление фильтром "Есть примерочная" (Если значение задано как null - клиенту разрешено самостоятельно задать фильтр) |
| forceFilters.type | string | null |
Управление фильтром "Вид ПВЗ", может принимать значения 'ALL', 'PVZ', 'POSTAMAT' (Если значение задано как null - клиенту разрешено самостоятельно задать фильтр) |
| forceFilters.allowed_cod | boolean | null |
Показывать только ПВЗ, где разрешен наложенный платеж (Если значение задано как null - клиенту разрешено самостоятельно задать фильтр) |
| debug | boolean | false |
Включение вывода отладочной информации |
| goods | iParcell[] | [] |
Информация о пересылаемых грузах в формате iParcell |
| sender | boolean | false |
Переключение виджета в режим "отправитель" |
| defaultLocation | array|string | Значение отсутствует | Строка адреса или массив [долгота, широта] точки, которая будет отображена на карте при открытии виджета |
| lang | enum('rus','eng) | "rus" |
Строка языка, который будет использоваться в виджете |
| currency | string | "RUB" |
Валюта, в которой будет произведен расчет доставки |
| fixBounds | string | null |
Вид ограничения границ отображения пвз, может принимать значения 'country' (страна), 'locality'(населенный пункт), 'province'(область) |
| tariffs | object | Значение задано дочерними элементами | Список тарифов, разрешенных для вычисления стоимости и отображения пользователю |
| tariffs.office | array | [] |
Список тарифов "до ПВЗ", разрешенных для вычисления стоимости и отображения пользователю |
| tariffs.door | array | [] |
Список тарифов "до двери", разрешенных для вычисления стоимости и отображения пользователю |
| tariffs.pickup | array | [] |
Список тарифов "до постамата", разрешенных для вычисления стоимости и отображения пользователю |
| hideDeliveryOptions | object | Значение задано дочерними элементами | Список видом доставки, которые должны быть не доступны покупателю |
| hideDeliveryOptions.door | boolean | false |
Покупатель не должен иметь возможность выбрать доставку до двери |
| hideDeliveryOptions.office | boolean | false |
Покупатель не должен иметь возможность выбрать доставку до ПВЗ |
| onReady | function | Значение отсутствует | Функция, вызываемая после окончания загрузки виджета |
| onCalculate | function | Значение отсутствует | Функция, вызываемая после окончания расчета стоимости доставки |
| onChoose | function | Значение отсутствует | Функция, вызываемая после выбора клиентом тарифа и точки доставки |
Note
Список всех тарифов можно посмотреть на https://api-docs.cdek.ru/63345519.html в разделе "Приложение 2".
В процессе работы виджета возникает 3 типа событий, на которые можно подписать функцию-обработчик, чтобы позволить получать данные из виджета: загрузка виджета, расчет доставки и выбор пользователя.
Событие срабатывает, когда виджет загрузил все стили, скрипты, карты, а также – информацию о городах и пунктах выдачи заказов. Оно означает, что уже можно пользоваться методами виджета. Учтите, что html и разметка карт на этом моменте еще могут не подгрузиться. В событии нет никаких передаваемых параметров.
Событие срабатывает, когда виджет получает данные о стоимости и сроках доставки.
Событие передает в функцию-обработчик два параметра: объект с тарифами и объект адреса.
Объект тарифов имеет структуру:
{
office: {
tariff_code: number,
tariff_name: string,
tariff_description: string,
delivery_mode: number,
period_min: number,
period_max: number,
delivery_sum: number,
}[],
door: {
tariff_code: number,
tariff_name: string,
tariff_description: string,
delivery_mode: number,
period_min: number,
period_max: number,
delivery_sum: number,
}[],
pickup: {
tariff_code: number,
tariff_name: string,
tariff_description: string,
delivery_mode: number,
period_min: number,
period_max: number,
delivery_sum: number,
}[],
}
Объект адреса имеет структуру:
{ code?: number; address?: string }
Где address заполняется при выборе доставки до адреса, а code - код города выбранного пвз (если выбрана доставка до
ПВЗ)
Событие срабатывает при нажатии на кнопку "Выбрать" в меню доставки для ПВЗ и для адреса.
Событие передает в функцию-обработчик три параметра: выбранный режим доставки, выбранный тариф и выбранный адрес. В зависимости от выбранного режима, объект адреса будет отличаться.
Режим доставки - это строка, имеющая значение door или office.
Объект тарифа имеет структуру:
{
tariff_code: number,
tariff_name: string,
tariff_description: string,
delivery_mode: number,
period_min: number,
period_max: number,
delivery_sum: number,
}
Объект адреса для режима office:
{
city_code: number,
city: string,
type: string,
postal_code: string,
country_code: string,
have_cashless: boolean,
have_cash: boolean,
allowed_cod: boolean,
is_dressing_room: boolean,
code: string,
name: string,
address: string,
work_time: string,
location: number[],
}
Объект адреса для режима door:
{
name: string,
position: number[],
kind: string,
precision: string,
formatted: string,
postal_code: string,
country_code: string,
city: string,
}
Объект класса виджета после создания имеет несколько публичных методов, которыми можно пользоваться для управления состоянием виджета
Для изменения/установки параметров пересылаемого груза необходимо пользоваться следующими методами:
| Метод | Описание |
|---|---|
| addParcel(parcel: iParcel|iParcel[]) | Добавляет к посылке груз (или массив грузов), описанный как iParcel, не обнуляя ее. Автоматически будет выполнен перерасчет стоимости |
| getParcels() | Возвращает данные о грузах в виде массива, содержащего в себе iParcel |
| resetParcels() | Сбрасывает информацию о грузе, используемую виджетом |
Описание объекта iParcell
Объект, имеющий структуру: {width: number, height: number, length: number, weight: number}, где вес указан в
граммах (если будет передано дробное число веса - оно будет округлено вверх до ближайшего целого), а габариты в
сантиметрах
Когда виджет создан с параметром popup, имеющем значение true, то управлять видимостью виджета можно с помощью
следующих методов:
| Метод | Описание |
|---|---|
| open() | Показывает всплывающее окно с виджетом |
| close() | Скрывает всплывающее окно с виджетом |
Управлять отображаемой картой в виджете можно при помощи следующих методов:
| Метод | Описание |
|---|---|
| updateLocation(string | number[]) | Камера карты перемещается в указанную точку по координатам. Если была передана строка - предварительно к ней будет применено обратное геокодирование для получения координат аналогично свойству params.defaultLocation
|