Main photo

Бобылев Артём

Главная

Как установить виджет CDEK на самописный сайт

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

Внешний вид виджета CDEK

К виджету есть подробная документация с примерами: Установка-3.0, widget.cdek.ru.

Тем не менее новичку этой информации для быстрой установки может не хватить.

Пройдемся по документации установки, комментируя основные моменты.

service.php

Файл service.php должен быть доступен по ссылке вида https://yoursite.ru/service.php/. Просто добавить его в корневую директорию сайта на сервере, очевидно, недостаточно.

Установим необходимые пакеты (считая, что в системе используется php8.1)

sudo apt-get install php8.1-fpm;

После чего внесём следующие изменения в nginx конфиг сайта:

#добавить index.php
index index.php index.html index.htm index.nginx-debian.html;

location ~ \.php$ {
	include snippets/fastcgi-php.conf;
	fastcgi_pass unix:/run/php/php8.1-fpm.sock;
}

location ~ /\.ht {
	deny all;
}

Теперь по ссылке https://yoursite.ru/service.php/ находится исполняемый php-файл:

service.php по ссылке на сайте

Авторизационные данные

Собственные ключи доступа Вы получите после заключения договора с CDEK. С ними при расчёте цены доставки будут учитываться скидки.

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

Как сохранить свои ключи доступа в секрете можно узнать по ссылке: dev.to/enygma/keeping-credentials-secure-in-php-1mgo.

Яндекс.Карты

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

Если Вы ограничили доступ по ip на время разработки, можно указать ip-адреса Яндекса, тогда карты смогут отобразиться.

Расширение CURL

На этом шаге всё ещё можно застрять – выполнить все пункты из документации установки и не понимать, почему виджет до сих пор не работает.

Для виджета необходимо расширение CURL для PHP.

sudo apt-get install php8.1-curl;

Теперь всё должно заработать.

Приведу в дополнение часто необходимый шаг: отображение информации о выбранном месте доставки. Нужно определить функцию onChoose при инициализации CDEKWidget:

onChoose(type, tariff, address) {
	document.getElementById("cdek_info")info.innerHTML = "<p>CDEK до пункта выдачи: " + tariff.delivery_sum + "&#8381;\n<br/>" + address.name + "</p>";
}