Топ-100
Регистрация

Виджеты Отслеживания Посылок

Post Track предоставляет возможность интегрировать виджет для отслеживания посылок по номеру отслеживания для онлайн магазинов и сайтов электронной коммерции. Для интеграции виджета необходимы базовые знания в HTML и CSS. Мы разработали несколько типов виджетов, помогающие вашим пользователям отследить покупки.

Кнопка Отслеживания Посылки

Данный тип виджета представляет из себя кнопку, нажав на которую, открывается окно с подробной информацией о следовании посылки. Это виджет подойдет для онлайн магазинов, которые предоставляют номер отслеживания для своих клиентов. "Кнопку Отслеживания Посылки" будет удобно разместить рядом с информацией о покупке, чтобы пользователь был всегда в курсе о статусе посылки.

Работа "Кнопки Отслеживания Посылки" на примере списка купленных товаров:

Пример Продукта №01

AliExpressUS $4.81 - 10.02
LO791147152CN

Пример Продукта №02

AliExpressUS $10.80
LX008947648CN

Пример Продукта №03

Amazon$28.40
TYPH0041785111

Для интеграции "кнопки отслеживания посылки", необходимо выполнить 2 шага:

  1. Добавьте на HTML странице, где будет размещена кнопка виджета следующий JS код:
    <script async src="https://posttrack.com/js/min/posttrackwidget.js"></script>
    
  2. Теперь необходимо указать какие элементы страницы являются номером отслеживания, для этого на HTML элементе укажите аттрибуту data-ptwidget-type="button" и data-ptwidget-track-number, равный номер отслеживания посылки. Виджет преобразует данный элемент в кнопку отслеживания посылки, например:
    <span data-ptwidget-type="button" data-ptwidget-track-number="LO791147152CN">Track: LO791147152CN</span>

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

Настройки "кнопки отслеживания посылки"

Для настройки виджета необходимо инициализировать атрибуты:

  • data-ptwidget-language (действительные значения: "en", "uk", "ru");
  • data-ptwidget-max-width (максимальная ширина виджета);
  • data-ptwidget-max-height (максимальная высота виджета);
  • data-ptwidget-z-index (абсолютная глубина виджета, в случае перекрытия элементов дизайна);
  • data-ptwidget-button-barcode-icon (действительные значения: "yes", "no");
<span  data-ptwidget-type                  =   "button"
       data-ptwidget-track-number          =   "LO791147152CN"
       data-ptwidget-language              =   "ru"
       data-ptwidget-max-width             =   600
       data-ptwidget-max-height            =   600
       data-ptwidget-button-barcode-icon   =   "no">LO791147152CN</span>

Настройки стилей "кнопки отслеживания посылки"

Вы можете стилизовать кнопки под свой дизайн сайта, для этого необходимо переопределить стили для кнопки, например:

  • Style: .tracking-number-01
  • Style: .tracking-number-02
  • Style: .tracking-number-03
  • Style: .tracking-number-04
  • Style: .tracking-number-05
<style>
   .tracking-number-01
   {
     background-color:   #000 !important;
     color:              #FFF !important;
     border-radius:      0px !important;
   }
   .tracking-number-01 svg
   {
     fill:               #FFF !important;
   }

   .tracking-number-02
   {
     background-color:   #CC0000 !important;
     color:              #FFF !important;
     border-radius:      10px !important;
   }
   .tracking-number-02 svg
   {
     fill:               #FFF !important;
   }

   .tracking-number-03
   {
     border:             2px solid #CCC !important;
     background-color:   #FFF !important;
     color:              #000 !important;
     border-radius:      20px !important;
     font-size:          20px !important;
     padding:            10px !important;
   }
   .tracking-number-03 svg
   {
     fill:               #000 !important;
   }

   .tracking-number-04
   {
     background-color:   #00CC00 !important;
     color:              #000 !important;
     border-radius:      0px !important;
     font-size:          10px !important;
     padding:            5px !important;
   }
   .tracking-number-04 svg
   {
     fill:               #000 !important;
   }

   .tracking-number-05
   {
     background-color:   #B3D4FC !important;
     color:              #000 !important;
     border-radius:      5px !important;
     font-size:          12px !important;
     padding:            10px !important;
     border-bottom:      2px solid #96B2D3 !important;
   }
   .tracking-number-05 svg
   {
     fill:               #000 !important;
   }
</style>
<span data-ptwidget-button-barcode-icon="yes" data-ptwidget-track-number="LO791147152CN" data-ptwidget-type="button" class="tracking-number-01">Style: .tracking-number-01</span>
<span data-ptwidget-button-barcode-icon="yes" data-ptwidget-track-number="LO791147152CN" data-ptwidget-type="button" class="tracking-number-02">Style: .tracking-number-02</span>
<span data-ptwidget-button-barcode-icon="yes" data-ptwidget-track-number="LO791147152CN" data-ptwidget-type="button" class="tracking-number-03">Style: .tracking-number-03</span>
<span data-ptwidget-button-barcode-icon="yes" data-ptwidget-track-number="LO791147152CN" data-ptwidget-type="button" class="tracking-number-04">Style: .tracking-number-04</span>
<span data-ptwidget-button-barcode-icon="yes" data-ptwidget-track-number="LO791147152CN" data-ptwidget-type="button" class="tracking-number-05">Style: .tracking-number-05</span>

Поиск Посылки по Номеру Отслеживания

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

Пример Работы "Поиска Посылки по Номеру Отслеживания":

 

Для интеграции "поиска посылки по номеру отслеживания", необходимо выполнить 2 шага:

  1. Добавьте на HTML странице, где будет размещен виджет следующий JS код (добавлять один раз для всех виджетов):
    <script async src="https://posttrack.com/js/min/posttrackwidget.js"></script>
    
  2. Теперь необходимо указать какие элементы страницы являются виджетом, для этого на HTML элементе укажите аттрибут data-ptwidget-type="search". Внутри HTML элемента должны быть два тега <input> - поле ввода номера отслеживания и <button> - кнопка. Не обязательным атрибутом является data-ptwidget-result-container-id указывающий на элемент где должен выводиться результат. Если этот атрибут не будет установлен, то результат будет показываться во всплывающем окне, как в виджете "кнопка отслеживаня посылки"
<div data-ptwidget-type                  =   "search"
     data-ptwidget-result-container-id   =   "search-result">
    <input   class="search-input" type="text" placeholder="Номер Отслеживания">
    <button  class="search-btn">ОТСЛЕДИТЬ</button>
</div>
<div id="search-result"></div>

Настройки виджета "поиска посылки по номеру отслеживания"

Список допустимых атрибутов для виджета поиска посылки:

  • data-ptwidget-language (действительные значения: "en", "uk", "ru");
  • data-ptwidget-max-width (максимальная ширина виджета);
  • data-ptwidget-max-height (максимальная высота виджета);
  • data-ptwidget-z-index (абсолютная глубина виджета, в случае перекрытия элементов дизайна);
  • data-ptwidget-button-barcode-icon (действительные значения: "yes", "no");
  • data-ptwidget-result-container-id (id HTML элемента, где должны выводиться результаты. В случае если данный параметр не указан, то результат будет выводиться в отдельном окне как в виджете кнопка отслеживания. Атрибуты data-ptwidget-max-width и data-ptwidget-max-height не учитываются, если атрибут data-ptwidget-result-container-id установлен);

Настройки стилей  для "поиска посылки по номеру отслеживания"

Вы можете менять стили виджета используя CSS стили, ниже пример стилей для виджета поиска посылки:

<style>
   .search-input
   {
       padding:            10px !important;
   }
   .search-btn
   {
       background-color:   #CC0000 !important;
       color:              #FFF !important;
       font-size:          14px !important;
       padding:            5px !important;
       padding-right:      10px !important;
       box-sizing:         border-box;
   }
   .search-btn svg
   {
       fill:#FFF !important;
       width:              20px !important;
       height:             20px !important;
   }
</style>

В случае вопросов работы или интеграции наших виджетов, вы можете обратитесь к нам через контактную форму.