Виджеты Отслеживания Посылок
Post Track предоставляет возможность интегрировать виджет для отслеживания посылок по номеру отслеживания для онлайн магазинов и сайтов электронной коммерции. Для интеграции виджета необходимы базовые знания в HTML и CSS. Мы разработали несколько типов виджетов, помогающие вашим пользователям отследить покупки.
Кнопка Отслеживания Посылки
Данный тип виджета представляет из себя кнопку, нажав на которую, открывается окно с подробной информацией о следовании посылки. Это виджет подойдет для онлайн магазинов, которые предоставляют номер отслеживания для своих клиентов. "Кнопку Отслеживания Посылки" будет удобно разместить рядом с информацией о покупке, чтобы пользователь был всегда в курсе о статусе посылки.
Работа "Кнопки Отслеживания Посылки" на примере списка купленных товаров:
Для интеграции "кнопки отслеживания посылки", необходимо выполнить 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/ru/pages/widgets;
- Найдите «Поиск посылки по номеру отслеживания»;
- Скопируйте JS и HTML и вставьте в область содержимого страницы;
- Сохранить страницу;
- Выполнено!
Видеоинструкция как добавить страницу заказа в Shopify.
Примеры интеграции виджетов:
В случае вопросов работы или интеграции наших виджетов, вы можете обратитесь к нам через контактную форму.