cdek-widget-solidjs
v0.0.0
Published
A small library that wraps CDEK-widget for solidjs users
Downloads
4
Readme
cdek-widget-solidjs
A small library that wraps CDEK-widget for solidjs users
Quick start
Install it:
npm i cdek-widget-solidjs
# or
yarn add cdek-widget-solidjs
# or
pnpm add cdek-widget-solidjs
# or
bun i cdek-widget-solidjsUse it:
import CdekWidget from 'cdek-widget-solidjs';Интеграция CDEK 3.0 в Next.js | Шаг за шагом
https://github.com/disa4148/cdek-widget-3.0
Репозиторий содержит пример реализации виджета доставки CDEK с использованием Next.js.
Столкнувшись с отсутствием официальной документации для интеграции виджета CDEK в React, я разработал собственное решение. Этот гид поможет настроить виджет CDEK в приложении шаг за шагом.
Шаг 1: Получение ключа Яндекс.Карт
Для корректного отображения виджета необходимо получить API-ключ Яндекс.Карт. Без этого ключа карта с пунктами выдачи CDEK не будет отображаться.
- Перейдите на страницу Кабинета Разработчика Яндекс.
- Нажмите кнопку «Подключить API».
- Во всплывающем окне выберите сервис «JavaScript API и HTTP Геокодер».
- Сохраните полученный ключ для дальнейшего использования.
⚠️ Важно! Обязательно задайте параметр HTTP Referrer, равный адресу вашего сайта для ключа. Подробнее: документации Яндекс.
Шаг 2: Получение тестовых ключей CDEK
Для интеграции с CDEK вам потребуется получить учетные данные (логин и пароль) для доступа к API.
В тестовом режиме можно использовать следующие данные:
| Параметр | Значение |
| ------------------- | ---------------------------------- |
| Account | wqGwiQx0gg8mLtiEKsUinjVSICCjtTEP |
| Secure password | RmAmgvSgSl1yirlz9QupbzOJVqhCxcP5 |
В реальном проекте необходимо получить свои учетные данные в личном кабинете CDEK, чтобы использовать сервис в продакшене.
Шаг 3: Установка скрипта
Для работы виджета необходимо подключить скрипт CDEK. Добавьте следующий код в секцию основного файла вашего приложения
<head>
<script
src="https://cdn.jsdelivr.net/npm/@cdek-it/widget@3"
strategy="beforeInteractive"
/>
</head>Шаг 4: Настройка серверной части
Для работы виджета необходимо разместить серверный файл service.php, который будет взаимодействовать с API CDEK.
Скопируйте файл service.php на ваш сервер так, чтобы он был доступен по прямой ссылке. Пример:
https://example.com/service.php
Полный код компонента service.php
Изначально в файле service.php установлены тестовые ключи (строки 9 и 13). Для использования в продакшене замените их на ваши личные ключи, которые вы получите после заключения договора со CDEK.
⚠️ Примечание: При работе с тестовыми данными запросы необходимо отправлять на
https://api.edu.cdek.ru/v2. Для боевого режима используйтеhttps://api.cdek.ru/v2. Убедитесь, что вы изменили URL в файлеservice.php:42перед переходом на продакшн, чтобы избежать ошибок в интеграции.
Установка и настройка
1. Склонируйте репозиторий:
git clone https://github.com/danila-schelkov/cdek-widget-solidjs.git
cd cdek-widget-solidjs2. Установите зависимости:
pnpm install3. Создайте файл .env в корне проекта и добавьте API-ключ Яндекс.Карт:
NB! Если запускаете dev проект, то указывайте ключ перед командой для запуска, либо экспортируйте переменную заранее.
VITE_YANDEX_MAPS_API_KEY=ваш_ключ_яндекс_карт4. Запуск проекта
Запуск клиентской части приложения
bun run devЗапуск серверной части (PHP):
php -S localhost:8000Тестирование и отладка
- Откройте приложение в браузере по адресу
http://localhost:3000и убедитесь, что виджет отображается корректно. - Проверьте соединение с сервером, отправив тестовый запрос на
http://localhost:8000/service.php. - Если возникают ошибки, проверьте консоль браузера и лог сервера на наличие сообщений об ошибках.
Поддержка и контакты
Если у вас возникли вопросы или вы обнаружили ошибку, пожалуйста, создайте Issue в репозитории или свяжитесь со мной.
Улучшения
- [ ] Перенос серверной части с PHP на Node.js / Python3
Лицензия
Этот репозиторий лицензирован под MIT License. Подробности см. в файле LICENSE.