Установка скрипта «Интеграция доставки ТК «CDEK»

# Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

## Решение интегрирует калькулятор расчета стоимости и сроков доставки товара транспортной компанией «CDEK» с помощью API.

Для расчета стоимости доставки требуется знать вес товара и его габариты (или объем), но даже при отсутствии этих параметров вы можете указать дефолтные значения. Можно использовать курьерскую доставку, пункты выдачи заказов (далее ПВЗ) или сразу и то и другое, на усмотрение клиента. Международная доставка скриптом не предусмотрена, только Россия, Украина, Беларусь, Казахстан, Армения и Киргизия.

Полный перечень возможностей скрипта:
- все настройки указываются в одном конфигурационном файле в дружественном HTML интерфейсе. Ознакомится с демо-версией админки можно по этой ссылке;
- учет персональных тарифов (при заключении договора с компанией «CDEK»);
- расчет стоимости для курьерской доставки;
- расчет стоимости для ПВЗ;
- отображение всех ПВЗ на карте;
- установка приоритетов для тарифов;
- выбор стран для доставки;
- отображение даты планируемой доставки;
- возможность прибавлять дни к дате планируемой доставки;
- выбор единицы измерения веса на сайте (гр или кг);
- установка веса товара по умолчанию;
- возможность прибавлять к весу товара вес упаковки;
- возможность прибавлять к весу товара вес упаковки в зависимости от габаритов товара;
- выбор единицы измерения габаритов на сайте (мм, см или м);
- установка габаритов товара по умолчанию;
- установка габаритов товара по умолчанию в зависимости от веса товара;
- возможность использования объема товара вместо габаритов;
- установка габаритов товара по умолчанию;
- автоматическое конвертирование рублей в доллары, евро, тенге, фунты стерлингов, белорусские рубли, гривну, Армянский драм или Киргизский сом по курсу ЦБ РФ на день расчета стоимости (используется API ЦБ РФ);
- возможность указать наценку к стоимости доставки;
- возможность указать наценку за обработку заказа к стоимости доставки;
- возможность указать сумму заказа, выше которой доставка для клиента становится бесплатной;
- возможность указать стоимость упаковки;
- возможность указать стоимость упаковки в зависимости от веса товара;
- округление результата на выбор.

Вы можете сами увидеть все своими глазами на демо-сайте.

Для полноценной работы скрипта необходимо:
- активированное PHP;
- активированное uAPI (не обязательно, но рекомендуется);
- договор с ТК «CDEK» (не обязательно, но рекомендуется);
- библиотека jQuery Ui (распространяется бесплатно по лицензии MIT);
- плагин fancyBox 2 (на сайтах uCoz данный плагин по умолчанию присутствует);

Перед установкой, сделайте полный бэкап шаблонов на случай, если вы в какой-то момент решите вернуть прежний вид сайту или отдельным его элементам. Сделать это можно в Панели управления » Управление дизайном » Backup шаблонов.

# Первый шаг: активация uAPI и PHP

## Этап 1. Активация uAPI для нужного модуля

Для активации uAPI в том модуле, где нужна работоспособность скрипта, перейдите в настройки этого модуля и напротив пункта «Включить uAPI для модуля» установите галочку, затем прокрутите страницу вниз и сохраните изменения.

## Этап 2. Получение токен-доступов для uAPI

Перейдите на страницу http://uapi.ucoz.com/uapi_panel, авторизуйтесь под своим uID-профилем.
После авторизации, вы увидите интерфейс управления uAPI-приложений. Нам нужно создать приложение. Нажмите на «Создать» и введите все те данные, которые запросит форма.

- В пункте «Название приложения» можно написать свое название (абсолютное любое);
- В пункте «Consumer key» введите любой набор латинских букв, как например: hFFSJjknfsdgF87T, рекомендуем сгенерировать;
- В пункте «Consumer secret» оставляем всё как есть;
- В пункте «Redirect URL» введите ссылку на свой сайт (куда собираетесь подключить скрипт);
- Нажмите на Сохранить.

## Этап 3. Создание токенов

Перейдите на страницу http://api.ucoz.net/ru/join/reg, выберите «Полуавтоматом». Далее вам предложат ввести данные – их вы можете взять со страницы http://uapi.ucoz.com/uapi_panel. Заполните поля, продолжайте следовать инструкциям системы. В результате вы должны получить токены. Пошаговая иллюстрация:
Запишите полученные данные, т.к. их еще предстоит прописать в настройках скрипта (заключительный шаг).

# Активация PHP

# Второй шаг: загрузка скриптов на FTP PHP

## Этап 1. Установка пароля

Если у вас задан пароль к FTP PHP, сразу же переходите к следующему этапу.
Перейдите на главную страницу панели управления вашим сайтом, в правой верхней части нажмите на ссылку «PHP детали».
В открывшемся окне кликните на ссылку: «Пароль не установлен.
Мы попадем на страницу установки пароля на FTP PHP. Заполните поля, продолжайте следовать инструкциям системы.

## Этап 2. Подключение к PHP FTP серверу

После установки пароля, скачайте FTP-клиент, рекомендуем бесплатный FTP клиент FileZilla. После установки программы, в верхней части вводим параметры подключения:

- Сервер: s2000.ucoz.net
- Логин (FTP login): введите свой логин, который указан в меню "PHP детали"
- Пароль: пароль который вы ввели ранее в специальном разделе

После заполнения полей нажмите на кнопку «Быстрое соединение».

## Этап 3. Загрузка скриптов на PHP FTP сервер

После успешного подключения вы увидите каталог под именем «scripts» в правой части окна программы. Обязательно переходим в этот каталог двойным кликом по нему.
Теперь загрузите в этот каталог папку из архива со скриптом «cdek». Загрузить легко, просто перетащите эту папку в правый диалог (где отображаются каталоги и файлы хранящиеся на сервере).
Узнать статус передачи файлов вы можете в окне статуса, которое находится в нижней части программы, там отображаются файлы которые ожидают передачи и те, которые не удалось передать, в частности которые были успешно переданы.
Перед загрузкой файлов укажите в файле user_id.txt (в папке «cdek») id пользователя, которому будет предоставлен доступ к установочному файлу.

# Третий шаг: загрузка файлов на сайт

Перейдите в Панель управления » Файловый менеджер.
В правом верхнем углу кликните на кнопку "Создать папку", введите название папки js.
Теперь зайдите в папку js и загрузите в эту папку файл "jquery-ui.min.js" из архива со скриптом (папка "скрипты").
Обратите внимание, на библиотеку jquery-ui.min.js. Если вы уверены, что на вашем сайте уже подключена эта библиотека, то загружать и подключать ее не нужно.
По аналогии создайте папку img и загрузите в эту папку файлы из папки "изображения" из архива со скриптом.

# Четвёртый шаг: установка CSS стилей

Перейдите в Панель управления » Интернет-магазин » CSS и в самом конце пропишите следующий код:

    .ui-autocomplete{position:absolute;top:0;left:0;cursor:default;background:#fff;border:1px solid #ccc;max-height:200px;overflow-y:auto;overflow-x:hidden;}
    .ui-menu{list-style:none;padding:0;margin:0;display:block;outline:none}
    .ui-menu .ui-menu{position:absolute}
    .ui-menu .ui-menu-item{position:relative;padding:3px 1em 3px .4em;margin:0px;cursor:pointer;min-height:0;list-style:none;display:block}
    .ui-menu .ui-menu-item:hover{background: #e6e6e6}
    .ui-menu .ui-menu-divider{margin:5px 0;height:0;font-size:0;line-height:0;border-width:1px 0 0 0}
    .ui-menu .ui-state-focus,.ui-menu .ui-state-active{margin:0px}
    .ui-menu .ui-menu-icon{left:auto;right:0}
    .ui-autocomplete-loading{background: #fff url('//s26.ucoz.net/img/icon/ajsml.gif') center right no-repeat !important;}
    #cdek {width:300px;}

Информация о классах:
- `ui-autocomplete` – выпадающее окно со списком городов;

- `ui-autocomplete-loading` – состояние окна при загрузке списка;

- `ui-menu` – список городов;

- `ui-menu-item` – отдельный пункт в списке;

- `#cdek` – поле ввода города доставки;

# Пятый шаг: размещение кода на страницах сайта

Перейдите в Панель управления » Интернет-магазин » Управление дизайном модуля.
Откройте шаблон "Страница служебных форм" и перед </body> установите следующий код:

    <?if($PAGE_ID$=='checkout')?>
    <script src="/js/jquery-ui.min.js"></script>
    <script>
        var all_weight = $ORDER_WEIGHT$;
        var all_price = $ORDER_AMOUNT_RAW$;
        $(function() {
            var label = $("#delivery-cdek").closest('tr').attr('id').split('-');
            $.ajax({
                url: '/php/cdek/init.php',
                type: 'POST',
                data: {delivery_id:label[2], weight: all_weight, price: all_price},
                dataType: 'script'
            })
        });
    </script>
    <?endif?>

Обратите внимание, на библиотеку jquery-ui.min.js. Если вы уверены, что на вашем сайте уже подключена эта библиотека, то строчку <script src="/js/jquery-ui.min.js"></script> нужно удалить.
Теперь перейдите в Панель управления » Интернет-магазин » Способы оплаты, доставки, валюты и курсы.

Намите на ссылку "Добавить способ доставки", введите название способа доставки, например "Доставка ТК "CDEK" и сохраните.

После вашего описания доставки добавьте код

    <div id="delivery-cdek"></div>

Активируйте галочку напротив пункта "Использовать модуль расчёта стоимости доставки", в выпадающем списке выберите "Внешний калькулятор". Далее нажимаем "Настройки модуля" и в появившемся окне ставим галочку "Разрешить нулевую величину". Сохраняем.

### Осталось перейти по адресу http://ваш_сайт.ру/php/cdek/install.php и настроить скрипт "под себя".

Внимание! Чтобы попасть в настройки по адресу http://ваш_сайт.ру/php/cdek/install.php Вы должны быть авторизованы на сайте под тем пользователем, ID которого вы указали в шаге 2 (файл user_id.txt). Это сделано в целях безопасности, чтобы никто кроме вас не смог попасть в настройки."
Установка завершена. Если у вас возникли вопросы, которые не затрагивались в документации, спрашивайте в комментариях к товару.