Установка виджета

Способы установки виджета

Есть два способа установки виджета:

Локальная — когда все файлы размещаются на вашем сервере.
Минимальная — когда все файлы грузятся с нашего сайта, а с вашего сайта подгружаются только данные с авторизацией.

Локальная установка позволяет держать все файлы на вашем сервере, что обеспечивает более быструю загрузку скриптов, по сравнению с минимальной. Также данный тип установки позволяет редактировать скрипты, стили оформления виджета под ваши требования.

Минимальная установка хороша тем, что необходимо отредактировать только 1 файл и указать на него ссылку в скрипте.

Распаковка архива

Для установки виджета необходимо распаковать архив с виджетом. Внутри архива содержится:

библиотека виджета — файл widjet.js
скрипты виджета — директория scripts;
примеры работы виджета — директория examples;

Важно понимать, что в составе виджета есть серверные файлы:

scripts/service.php,
scripts/template.php.

Для их функционирования необходим веб-сервер, поэтому рекомендуется смотреть примеры на веб-сервере

Для локальной установки виджета необходимо скопировать директорию widget в директорию сайта: например, сайт расположен в директории /home/site/. Для виджета создайте отдельную директорию, например, widget, скопируем каталог с виджетом туда, и тогда полный путь к виджету будет /home/site/widget/

Зависимость расположений скриптов должна быть сохранена. Обратите внимание, что в сборке виджета есть серверный файл — scripts/service.php.

Для минимальной установки виджета необходимо скопировать только серверный файл widget/scripts/service.php к себе на сайт, например в директорию /home/site/widget/scripts/service.php

Авторизация и настройка

Для работы виджета необходимы авторизационные данные партнера и ключ карт Яндекса.

Идентификационная строка (id) партнера. Получить ее можно у представителя voltmarket.ru или в личном кабинете партнера.
Ключ API Яндекс.Карт. Получить API-ключ можно в Кабинете разработчика от сервиса Яндекс. Это новое требование сервиса Яндекс.Карты, подробнее можно прочитать на сайте сервиса.

Подключение скриптов

Для подключения локальной версии виджета необходимо на нужную страницу добавить код (рекомендуется его расположить внутри тега <head>): <script id="IVOLTscript" type="text/javascript" src="widjet/widjet.js"></script>, путь к виджету зависит от расположения виджета на вашем сервере.

Для подключения минимальной версии виджета необходимо на нужную страницу добавить код (рекомендуется его расположить внутри тега <head>): <script id="IVOLTscript" type="text/javascript" src="https://voltmarket.ru/ipol/widjet/widjet.js"></script>

Размещение виджета на странице

На страницу необходимо добавить элемент, в который будет встроен виджет. Данному элементу следует указать высоту, иначе он может принять значение высоты равной 0 и виджет на странице не будет видно. <div id="forpvz" style="height:600px;"></div>

Далее необходимо создать обработчик для инициализации виджета.

Для локальной версии виджета обработчик с минимальным числом параметров будет выглядеть так:

<script type="text/javascript">
   var widjet = new IVOLTWidjet({
        yandex_key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', //ключ API Я.Карт
        defaultCity: 'Ростов-на-Дону', //город по-умолчанию, для которого показана карта
        link: 'forpvz',
    });
</script>

Пример работы локальной версии виджета указан в файле example2-5.local.html

Для минимальной установки виджета наименьшее число параметров будет выглядеть таким образом:

<script type="text/javascript">
   var widjet = new IVOLTWidjet({
       yandex_key: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', //ключ API Я.Карт
       defaultCity: 'Ростов-на-Дону', //город по-умолчанию, для которого показана карта
       link: 'forpvz',
       path: 'https://voltmarket.ru/ipol/widjet/scripts/',
       servicepath: 'https://your-site.here/widjet/scripts/service.php' //ссылка на файл service.php на вашем сайте
       });
</script>

Пример работы минимальной версии виджета указан в файле example2-5.min.html

Как настроить серверный файл, задать параметры и опции виджета читайте в разделе Настройки виджета

Виджет доставки Установка виджета