1
Основные возможности виджета:
- Выбор города и отображение списка ПВЗ для него
- Возможность выбора покупателем ПВЗ с передачей данных в соответствующее поле в форме оформления заказа
- Вывод детальной информации для каждого ПВЗ
2) Далее Вам необходимо получить в Личном кабинете СДЭК API-логин и пароль для интеграции. Эти настройки нужно ввести на странице:
https://site.ru/admin/settings_delivery_sdek
*site.ru замените на Ваш домен
3) Для использования виджета, необходимо получить АПИ-ключ Яндекс.Карт. В противном случае, виджет не будет отображаться. Зайдите на страницу Кабинета Разработчика и нажмите кнопку Подключить API. Во всплывающем окне выберите сервис «JavaScript API и HTTP Геокодер».
4) В самый конец шаблона main.css нужно добавить код:
#cdek-map {width:800px;height:600px;display:none;max-width:100%;}
5) В шаблон Быстрый заказ после строки:
<form action="{ORDER_STAGE_CONFIRM_WITHOUT_DOMAIN_URL}" method="post" id="quickform">
нужно добавить строку:
<div id="cdek-map"></div>
6) Для установки виджета перейдите в раздел Сайт - Редактор шаблонов - HTML и добавьте код перед </head>:
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@cdek-it/widget@3" charset="utf-8"></script>
7) Далее перейдите в шаблон main.js (в блоке Скрипты) и найдите код:
$('.mainSelect').change(function(){
selectedDelId = $(this).find('option:selected').attr('delid');
После него добавьте код, где укажите Ваш идентификатор варианта доставки вместо стандартного 449755* и вместо ключа b8f784d8-2fe9-4a5b-bcdc-9534900a220c укажите Ваш ключ от Яндекс.Карт:
// Запускаем виджет СДЭК при выборе варианта доставки с указанным id
if (selectedDelId === '449755') {
var pochta = $('#cdek-map');
$.fancybox.open({
src: pochta,
type: 'inline',
clickSlide : 'false',
clickOutside : 'false',
touch: false
});
new window.CDEKWidget({
from: {
country_code: 'RU',
city: 'Новосибирск',
postal_code: 630009,
code: 270,
address: 'ул. Большевистская, д. 101',
},
root: 'cdek-map',
apiKey: 'b8f784d8-2fe9-4a5b-bcdc-9534900a220c',
canChoose: true,
servicePath: '/delivery/sdek',
hideFilters: {
have_cashless: false,
have_cash: false,
is_dressing_room: false,
type: false,
},
hideDeliveryOptions: {
office: false,
door: true,
},
debug: false,
defaultLocation: "Москва",
lang: 'rus',
currency: 'RUB',
tariffs: {
office: [234, 136, 138],
door: [233, 137, 139],
},
onReady() {
//alert('Виджет загружен');
},
onCalculate() {
alert('Расчет стоимости доставки произведен');
},
onChoose(wat,tariff,address) {
//alert('Доставка выбрана');
$('#quickDeliveryComment').val(
'Выбран пункт выдачи заказа СДЭК: г.' + address.city + ', ' + address.address
);
$.fancybox.close();
},
});
} else {
$('#quickDeliveryComment').val('');
};
* В этом коде, как пример, добавлен идентификатор варианта доставки 449755. Свой id можно получить в разделе Настройки - Доставка внутри варианта доставки в URL адресе. Подробнее можно увидеть на скриншоте:
На стадии оформления заказа при выборе варианта доставки СДЭК данные будут подставляться в поле "Комментарий" к заказу.
