Реєстрація

Віджети Відстеження Посилок

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>

Як додати сторінку стану замовлення треку на Shopify

Прості способи додати сторінку стану замовлення треку на Shopify протягом 5 хвилин (без знань HTML та JS):

  1. Увійти Shopify;
  2. Виберіть свій Інтернет-магазин;
  3. Виберіть Сторінки;
  4. Натисніть кнопку Додати сторінку;
  5. Натисніть Показати HTML в області вмісту;
  6. Відвідайте https://posttrack.com/uk/pages/widgets;
  7. Знайти "Пошук посилок за номером відстеження";
  8. Скопіюйте JS & HTML і вставте в область вмісту сторінки замовлення;
  9. Зберегти сторінку;
  10. Готово!

Відео інструкція щодо додавання сторінки стану замовлення до Shopify.

Приклади інтеграцію віджетів:

У разі питань роботи або інтеграції наших віджетів, ви можете зверніться до нас через контактну форму.

Denys Sokolov
Привіт всім. Я Денис Соколов, власник компанії Logic.Cool, розробника проекту Універсальний Трекер Посилок та інших онлайн-додатків та мобільних ігор. Будь ласка, пишіть мені з будь-якими пропозиціями щодо покращення послуги відстеження та керування посилками.