ВОЙТИ

Настройка трекинг-виджета

Последние изменения: 17.08.2018
добавить в избранные

Посмотреть виджет в действии можно на этой странице https://widget.shiptor.ru/tracking.php

Чтобы подключить виджет к себе на страницу вам нужно подключить файл https://widget.shiptor.ru/embed/widget-track.js

Сделать это можно в теге body желаемой страницы следующим образом:

<script type="text/javascript" src="https://widget.shiptor.ru/embed/widget-track.js"></script>

Виджет прост в использовании. Укажите в строке поиска трек номер желаемой посылки и нажмите Enter или же кнопку "Отследить".

files.php?filename=7ad1cd3184aa1527aca19




Если вы ввели неправильный трек номер - посылка не будет найдена.


Для реально существующей посылки вы получите полный список ее статусов, а также немного информации о получателе


files.php?filename=4cb75e6bbb9dc9a788b36

При отсутствии контейнера виджета он будет создан  автоматически с параметрами по умолчанию. Чтобы использовать свои начальные значения, нужно задавать контейнер виджета явным образом.

Задание контейнера виджета явно

Виджет опирается на HTML контейнер вида

  <div id="shiptor_widget" class="shiptor-widget"></div>

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


 Параметр ОписаниеПример 
data-modeРежим отображения, может быть задан строкой вида popup, frame или inline, по умолчанию inline. Значение popup соответствует полноэкранному всплывающему окну, frame - небольшому всплывающему окну у границ экрана, inline встраиваемому блоку в тело страницыdata-mode="frame" 
data-posКогда data-mode="frame", в этом параметре передается позиционирование относительно краев экрана. Задается строкой с вариантами topleftbottomlefttoprightbottomright. По умолчанию равен bottomleft. Если data-mode не равен frame, этот параметр игнорируетсяdata-pos="bottomleft"
data-rpПозволяет задать трекномер уже при инициализации виджета, при этом виджет сразу же выполнит поиск по указанному номеру. Задается строкой вида RP132466
data-rp="RP132456"

Пример заданных параметров в контейнере

<div id="shiptor_widget" class="shiptor-widget" data-mode="frame" data-pos="bottomright"></div>

Задан режим отображения - окно у границы экрана, позиция правый нижний угол.

Отложенная инициализация

По умолчанию виджет начинает рисоваться сразу же на загрузке страницы, что не всегда удобно. Есть возможность настроить показ виджета по клику на какой-либо элемент.

В качестве элемента используем обычную ссылку, но подойдет любой элемент, на котором корректно срабатывает событие click

<a href="#" data-role="shiptor_widget_show">Показать виджет</a>

Задайте у своей ссылки параметр data-role равным shiptor_widget_show и тогда виджет отобразится только после нажатия на эту кнопку

Как управлять виджетом программно

Для этого существует объект window.ShiptorWidget. В нем содержатся все исходные данные и методы для работы с ними. Чтобы прятать или показывать виджет, используются методы window.ShiptorWidget.hide() и window.ShiptorWidget.show(). Чтобы уничтожить контейнер виджета полностью, используется метод window.ShiptorWidget.destroy().