-
Notifications
You must be signed in to change notification settings - Fork 1
Настройка 2.0
На данной странице описаны все возможные настройки 2 виджета для его адаптации под конкретный магазин.
Caution
2 версия виджета объявлена устаревшей 13.09.2023, в нее не будут вноситься изменения или улучшения, рекомендуется мигрировать на 3 версию
Процесс миграции описан на странице Миграция 3.0
<script type="text/javascript">
var widjet = new ISDEKWidjet({
showWarns: true,
showErrors: true,
showLogs: true,
hideMessages: false,
path: 'https://cdn.jsdelivr.net/gh/cdek-it/widget@2/widget/scripts/',
servicepath: 'http://yoursite.net/service.php', //ссылка на файл service.php на вашем сайте
templatepath: 'http://yoursite.net/template.php',
choose: true,
popup: true,
country: 'Россия',
defaultCity: 'Уфа',
cityFrom: 'Омск',
link: null,
hidedress: true,
hidecash: true,
hidedelt: false,
detailAddress: true,
region: true,
apikey: 'API-key Yandex.MAP’,
goods: [
{
length: 10,
width: 10,
height: 10,
weight: 1
}],
onReady: onReady,
onChoose: onChoose,
onChooseProfile: onChooseProfile,
onChooseAddress: onChooseAddress,
onCalculate: onCalculate
});
function onReady() {
alert('Виджет загружен');
}
function onChoose(wat) {
alert(
'Выбран пункт выдачи заказа ' + wat.id + "\n" +
'цена ' + wat.price + "\n" +
'срок ' + wat.term + " дн.\n" +
'город ' + wat.cityName + ', код города ' + wat.city
);
}
function onChooseProfile(wat) {
alert(
'Выбрана доставка курьером в город ' + wat.cityName + ', код города ' + wat.city + "\n" +
'цена ' + wat.price + "\n" +
'срок ' + wat.term + ' дн.'
);
}
function onChooseAddress(wat) {
alert(
'Выбрана доставка курьером по адресу ‘ + wat.address + ”, \n “ +
'цена ' + wat.price + "\n" +
'срок ' + wat.term + ' дн.'
)
}
function onCalculate(wat) {
alert('Расчет стоимости доставки произведен');
}
</script>Значения: true / false
Значение по умолчанию: true
Если установлено true – выводит в консоль браузера предупреждения о некритичных ошибках работы виджета.
Значения: true / false
Значение по умолчанию: true
Если установлено true – выводит в консоль браузера предупреждения о критических ошибках работы виджета.
Значения: true / false
Значение по умолчанию: true
Если установлено true – выводит в консоль браузера информацию обо всех стадиях работы виджета: запросы, ответы, подключение.
Значения: true / false
Значение по умолчанию: false
Единый ключ для отключения всех оповещений модуля. Выставление в true равносильно выставлению всех вышеуказанных настроек оповещения в false.
Значения: string
Значение по умолчанию: директория scripts относительно файла widjet.js. Таким образом, если у вас файл widjet.js
расположен по адресу http://yoursite.net/scripts/widget/widjet.js, то переменная будет указывать на
адрес http://yoursite.net/scripts/widget/scripts/
Путь к скриптам виджета, если они лежат отдельно от загрузчика (widjet.js).
Значения: string
Значение по умолчанию: {path}/template.php
Путь к шаблону виджета, если он лежит отдельно от загрузчика (widjet.js).
Значения: string
Значение по умолчанию: {path}/service.php
Путь к php файлу для расчетов виджета, если он лежит отдельно от загрузчика (widjet.js).
Значения: string
Значение по умолчанию: 9720c798-730b-4af9-898a-937b264afcdd
АПИ-ключ для сервиса Яндекс.Карт. По ссылке ниже рекомендуется сгенерировать новый ключ для вашего сайта. Иначе могут
появиться ошибки 429 Too Many Requests.
https://tech.yandex.ru/maps/jsapi/doc/2.1/quick-start/index-docpage/#get-api-key
Important
Рекомендуем зарегистрировать ваш АПИ-ключ для Яндекс.Карт, чтобы виджет на вашем сайте работал только с вашими ключами и ограничения бесплатных ключей распространялось только на ваш сайт.
Значения: true / false
Значение по умолчанию: true
Управление кнопкой «Выбрать» в описании ПВЗ. Если выставлено в false – кнопка не будет отображаться, что подходит для
инфовиджета в разделе «Доставка». Если true – кнопка показывается с возможностью подписаться на выбор ПВЗ с помощью
события onChoose.
Значения: id элемента
Значение по умолчанию: false
Если опция задана (не false) – то виджет считается статичным (всегда располагается на странице). Значением опции
должен быть id того тега, в который будет помещен виджет. Если опция не задана – виджет автоматически открывается на
весь экран (если не указана опция popup).
Значения: true/false
Значение по умолчанию: false
Если опция задана (true) – виджет считается всплывающим, и отображается только через метод open.
Значения: true/false
Значение по умолчанию: false
Если опция задана (true) – скрывает фильтр пунктов выдачи заказов с опцией примерки. Т.е. убирает кнопку с этим
фильтром и отображаются все пункты выдачи для указанного города.
Значения: true/false
Значение по умолчанию: false
Если опция задана (true) – скрывает фильтр ПВЗ с возможностью расчета картой. Виджет ПВЗ будет отображен без кнопки
оплата картой.
Значения: true/false
Значение по умолчанию: false
Если опция задана (true) – то скрывается панель, на которой отображены варианты доставки.
Значения: true/false
Значение по умолчанию: false
Если опция задана (true) – то отображаются пункты выдачи заказов для всего региона. Для Москвы и Московской области, а
также для Санкт-Петербурга и Ленинградской области отображаются пункты выдачи из города и области. Таким образом, если
выбрать город Гатчина (Ленинградская область), то отобразится ПВЗ в городе Гатчина, а также на карте будут отображены
пункты выдачи из всей Ленинградской области и Санкт-Петербурга. При этом если выбрать ПВЗ другого города (
Санкт-Петербург, например), то стоимость доставки будет пересчитана.
Значения: true/false
Значение по умолчанию: false
Если опция задана (true) – то после выбора курьерской доставки имеется возможность указать точный адрес доставки.
Значения: название города, также разрешено использование параметра ‘auto’, чтобы автоматически определить город
клиента средствами Яндекса и отобразить его на карте. Можно использовать внутренний идентификатор города в СДЭК, число.
Значение по умолчанию: Москва
Город, который будет отображен на карте при старте виджета и на котором будут загружены пункты выдачи заказов.
Важно. При использовании параметра country город должен быть в этой стране.
Важно. При использовании параметра lang название города должно быть указано на том языке, который указан в
параметре lang. Так для английского перевода необходимо указывать Moscow, Astana и т.д..
Значения: "rus" или "eng".
Значение по умолчанию: "rus"
Какой язык перевода использовать в виджете, сейчас можно выбирать только русский и ангийский.
Значения: код валюты ISO 4217 из списка RUB, KZT, USD, EUR, GBP, CNY, BYN, UAH, KGS, AMD, TRY, THB, KRW, AED, UZS, MNT
Значение по умолчанию: ‘RUB’
Значения: название страны (Россия, Китай (КНР), Казахстан и т.д.)
Значение по умолчанию: all
Страна, для которой выбираются города и ПВЗ.
Важно. При использовании параметра lang название страны должно быть указано на том языке, который указан в параметре
lang. Так для английского перевода необходимо указывать Russia, Kazakhstan и т.д..
Значения: название города
Значение по умолчанию: Москва
Город, откуда будет совершаться доставка. Важно. При использовании параметра country город должен быть в этой стране.
Значения: [{length:<длина груза >, width: <ширина груза >, height: <высота груза >, weight: <вес груза>}]
Массив отсылаемых грузов. Размеры задаются в сантиметрах (см), вес – в килограммах (кг).
Пример указания габаритов посылки со следующими характеристиками: длина 25 см, ширина 17 см, высота 7 см, вес 6 килограмм.
goods: [
{
length: 25,
width: 17,
height: 7,
weight: 6
}]В процессе работы виджета возникает 4 типа событий, на которые можно подписать функцию-обработчик, чтобы позволить получать данные из виджета: загрузка виджета, расчет доставки и выбор ПВЗ.
Событие срабатывает, когда виджет загрузил все стили, скрипты, карты, а также – информацию о городах и пунктах выдачи заказов. Оно означает, что уже можно пользоваться методами виджета. Учтите, что html и разметка карт на этом моменте еще могут не подгрузиться.
В событии нет никаких передаваемых параметров.
Для работы с этим событием необходимо в параметре указать название функции-обработчика и описать выполнение этой функции:
<script type="text/javascript">
var widjet = new ISDEKWidjet({
defaultCity: 'Омск',
cityFrom: 'Уфа',
country: 'Россия',
link: 'forpvz',
onReady: startWidget
});
function startWidget() {
alert('Виджет загружен');
}
</script>Событие срабатывает, когда виджет получает данные о стоимости и сроках доставки.
Событие передает в функцию-обработчик объект вида:
{ profiles: <объект профилей>, city: <код города из базы СДЭК>, cityName: <текущий город>}.
Объект
профилей: <профиль (courier/pickup)> :{price: <цена>, currency: <валюта>, term: <срок>, tariff: <рассчитанный тариф>}.
Вот пример для такого объекта в формате JSON:
{
"city": "270",
"cityName": "Новосибирск",
"profiles": {
"courier": {
"price": "1150",
"currency": "RUB",
"term": "2-3",
"tarif": 11
},
"pickup": {
"price": "600",
"currency": "RUB",
"term": "3-4",
"tarif": 62
}
}
}Для создания обработчика можно использовать следующий код:
<script type="text/javascript">
var widjet = new ISDEKWidjet({
defaultCity: 'auto',
cityFrom: 'Уфа',
country: 'Россия',
link: 'forpvz',
onCalculate: function(wat) {
alert('Доставка в город ' + wat.cityName +
"\nкурьером: " + wat.profiles.courier.price + ' (тариф ' +
wat.profiles.courier.tarif +
")\nдо ПВЗ: " + wat.profiles.pickup.price + ' (тариф ' +
wat.profiles.pickup.tarif + ')'
);
console.log('Расчет доставки ', wat);
}
});
</script>В данном примере при каждом расчете доставки будет выводиться сообщение о стоимости доставки в выбранный город с указанием выбранного тарифа, а также в консоль браузера будет выводиться текст “Расчет доставки” и содержимое объекта с параметрами доставки.
Событие возникает, когда покупатель выбирает ПВЗ кнопкой «Выбрать» в подробном описании ПВЗ.
Событие передает в функцию-обработчик массив
вида {id: <id выбранного ПВЗ>, PVZ: <информация о ПВЗ>, price: <стоимость доставки>, currency: <валюта стоимости доставки>, term: <срок доставки>, tariff: <рассчитанный тариф>, city: <выбранный город>}
Пример объекта в формате JSON:
{
"id": "NSK41",
"city": "270",
"cityName": "Новосибирск",
"price": "1150",
"currency": "RUB",
"term": "3-4",
"tarif": 62,
"PVZ": {
"Name": "Кольцово",
"WorkTime": "Пн-Пт 10:00-19:00, Сб 10:00-16:00",
"Address": "р.п. Кольцово, 18А",
"Phone": "+79639494987, +79833160261",
"Note": "",
"cX": "83.1851620",
"cY": "54.9422560"
}
}Для формирования обработчика этого события можно использовать следующий код:
<script type="text/javascript">
var widjet = new ISDEKWidjet({
defaultCity: 'auto',
cityFrom: 'Уфа',
country: 'Россия',
link: 'forpvz'
});
widjet.binders.add(choosePVZ, 'onChoose');
function choosePVZ(wat) {
alert('Доставка в город ' + wat.cityName +
"\nдо ПВЗ с кодом: " + wat.id + ', цена ' + wat.price + ' руб.'
);
console.log('Выбран ПВЗ ', wat);
}
</script>В данном примере при выборе ПВЗ (кнопка выбора ПВЗ должна отображаться, т.е. параметр choose=true) выводится
сообщение, в котором указан город, код пункта выдачи заказов и стоимость доставки, а также в консоли браузера
отобразится сообщение с текстом и объектом с параметрами доставки.
Событие возникает, когда покупатель выбирает доставку курьером для определённого города
Событие передает в функцию-обработчик массив
вида {id: <courier>, price: <стоимость доставки>, currency: <валюта доставки>, term: <срок доставки>, tariff: <рассчитанный тариф>, city: <выбранный город>, cityName: <название выбранного города>}
Пример объекта, который передается в функцию, в формате JSON:
{
"id": "courier",
"city": "270",
"cityName": "Новосибирск",
"price": "1150",
"currency": "RUB",
"term": "2-3",
"tarif": 11
}Ниже указан пример создания обработчика для этого события. В примере выводится сообщение, в котором указан город, срок доставки заказов и стоимость доставки, а также в консоли браузера отобразится сообщение с текстом и объектом с параметрами доставки.
<script type="text/javascript">
var widjet = new ISDEKWidjet({
defaultCity: 'auto',
cityFrom: 'Уфа',
country: 'Россия',
link: 'forpvz',
hidedress: true,
hidecash: true,
onChooseProfile: onChooseProfile
});
function onChooseProfile(wat) {
alert('Выбрана доставка курьером в город ' + wat.cityName + "\n" +
'цена ' + wat.price + "\n" +
'срок ' + wat.term + ' дн.'
);
console.log('Выбрана доставка курьером ', wat);
}
</script>Событие возникает, когда покупатель выбирает доставку курьером в точный адрес города
Событие передает в функцию-обработчик массив
вида {id: <courier>, price: <стоимость доставки>, currency: <валюта доставки>, term: <срок доставки>, tariff: <рассчитанный тариф>, city: <выбранный город>, cityName: <название выбранного города>, address: <выбранный адрес доставки>}
Пример объекта, который передается в функцию, в формате JSON:
{
"id": "courier",
"city": "270",
"cityName": "Новосибирск",
"price": "1150",
"currency": "RUB",
"term": "2-3",
"tarif": 11,
"address": "Россия, Новосибирск, Большевистская улица, 101"
}Ниже указан пример создания обработчика для этого события. В примере выводится сообщение, в котором указан адрес, срок доставки заказов и стоимость доставки, а также в консоли браузера отобразится сообщение с текстом и объектом с параметрами доставки.
<script type="text/javascript">
var widjet = new ISDEKWidjet({
defaultCity: 'auto',
cityFrom: 'Уфа',
country: 'Россия',
link: 'forpvz',
hidedress: true,
hidecash: true,
detailAddress: true,
onChooseAddress: onChooseAddress
});
function onChooseAddress(wat) {
alert('Выбрана доставка курьером по адресу ' + wat.address + "\n" +
'цена ' + wat.price + "\n" +
'срок ' + wat.term + ' дн.'
);
console.log('Выбрана доставка курьером по точному адресу ', wat);
}
</script>city.get()
Возвращает идентификатор текущего города, который отображен на карте.
city.set(city)
Устанавливает текущим город city. В качестве параметра может принимать как название города, так и идентификатор.
city.check(city)
Проверяет, доступен ли город city и возвращает его идентификатор в случае успеха.
Для установки товара / посылки требование к передаваемому объекту (params) едины:
- length – длина груза (см),
- width – ширина груза (см),
- height – высота груза (см),
- weight – вес груза (кг)
сargo.add (params)
Добавляет к посылке груз с указанными параметрами (params), не обнуляя ее. Автоматически будет выполнен перерасчет
стоимости.
cargo.get()
Возвращает данные о грузах (все имеющиеся поля) в виде объекта, описание формата которого в JSON выглядит следующим образом:
{
"0": {
"length": "15",
"width": "10",
"height": "10",
"weight": "0.4"
},
"1": {
"length": "25",
"width": "7",
"height": "17",
"weight": "2.4"
}
}cargo.reset()
Сбрасывает все данных о грузах.
open()
Отображает виджет, если он находится во «всплывающем» режиме (не задана опция link и опция popup=true).
close()
Закрывает виджет, если он находится во «всплывающем» режиме (не задана опция link и опция popup=true).
Виджет доставки CDEK • Пример работы • Заключить договор • Рассчитать стоимость отправления