Віджети Відстеження Посилок
Post Track надає можливість інтегрувати віджет для відстеження посилок за номером відстеження для онлайн магазинів та сайтів електронної комерції. Для інтеграції віджета необхідні базові знання в HTML і CSS. Ми розробили кілька типів віджетів, що допоможуть вашим користувачам відстежити покупки.
Кнопка Відстеження Посилки
Даний тип віджета представляє з себе кнопку, натиснувши на яку, відкривається вікно з докладною інформацією про прямування посилки. Це віджет підійде для онлайн магазинів, які надають номер відстеження для своїх клієнтів. "Кнопку Відстеження Посилки" буде зручно додати поряд з інформацією про покупку, щоб користувач був завжди в курсі про статус посилки.
Робота "Кнопки Відстеження Посилки" на прикладі списку придбаних товарів:
Приклад Продукту №01
AliExpressUS $4.81 - 10.02Приклад Продукту №02
AliExpressUS $10.80Приклад Продукту №03
Amazon$28.40Для інтеграції "кнопки відстеження посилки", необхідно виконати 2 кроки:
- Додайте на HTML сторінці, де буде розміщена кнопка віджета наступний JS код:
<script async src="https://posttrack.com/js/min/posttrackwidget.js"></script> - Тепер необхідно вказати які елементи сторінки є номером відстеження, для цього на 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 кроки:
- Додайте на HTML сторінці, де буде розміщений віджет наступний JS код (додавати один раз для всіх віджетів):
<script async src="https://posttrack.com/js/min/posttrackwidget.js"></script> - Тепер необхідно вказати які елементи сторінки є віджетом, для цього на 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):
- Увійти Shopify;
- Виберіть свій Інтернет-магазин;
- Виберіть Сторінки;
- Натисніть кнопку Додати сторінку;
- Натисніть Показати HTML в області вмісту;
- Відвідайте https://posttrack.com/uk/pages/widgets;
- Знайти "Пошук посилок за номером відстеження";
- Скопіюйте JS & HTML і вставте в область вмісту сторінки замовлення;
- Зберегти сторінку;
- Готово!
Відео інструкція щодо додавання сторінки стану замовлення до Shopify.
Приклади інтеграцію віджетів:
У разі питань роботи або інтеграції наших віджетів, ви можете зверніться до нас через контактну форму.
