Введение

Благодарим за покупку скрипта! Установка скриптового решения займет некоторое время. Пожалуйста, внимательно читайте инструкции и старайтесь следовать всем рекомендациям.

Скрипт позволяет наглядно отобразить текущий статус заказа в виде схемы:

Скрипт имеет настройки:
• задайте необходимы статусы заказа от одного до девяти;
• уникальное описание каждого статуса заказа, которое подскажет пользователю, что делать на данном этапе.

Скрипт работает на странице оформленного заказа.

Первый шаг: генерация и установка скрипта

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

Вкл./Выкл.	Статус	Описание статуса (HTML допускается)
	Новый
	Оплачивается
	Оплачен
	В обработке
	Доставляется
	Доставлен
	Завершен
	Отменен

<script>showStatuses = function(currentStatus){if(currentStatus == 'Отменён'){return false};var nums = orderStatuses.length;if(typeof currentStatus == 'undefined') {currentStatus = orderStatuses[0][1]};$("#um-order-status").empty();$("#um-order-status").append("<div><ul></ul></div>"); for(i=1;i<nums;i++){$("#um-order-status>div>ul").append('<li class="status-'+i+'">'+i+'</li>');if(i<nums-1) {$("#um-order-status>div>ul").append('<li class="separate"></li>')}};$(orderStatuses).each(function(){if(this[1] == currentStatus) {$(".status-"+this[0]).addClass("active");$("#um-order-status").prepend('<div class="um-status-info">'+this[1]+'<span>'+this[2]+'</span></div>');}});};$(document).ready(function(){showStatuses('$ORDER_STATUS$');});</script>

Скопируйте скрипт в шаблон Страница заказа перед закрывающим тегом </body>:

Пример:

В месте, где хотите показать статус заказа, разместите код:

<div id="um-order-status"></div>

Пример:

Второй шаг: установка стилей

Перейдите в панель управления и выберите в главном меню Дизайн - Управление дизайном (шаблоны). На открывшейся странице выберите Таблица стилей в разделе Интернет магазин:

Добавьте стили CSS:

/* список статусов */
#um-order-status ul {list-style: none;}
#um-order-status>ul li {display: inline-block;font-weight: bold;font-size: 14pt;border: 1px solid #ccc;padding: 5px;margin: 5px;width: 250px;vertical-align: top;}
#um-order-status>ul li span {font-weight: normal;font-size: 12pt;color: #999;display: block;}

/* номера шагов статусов */
#um-order-status>div>ul>li {display: inline-block;border: 1px solid #ccc;border-radius: 250px;margin: 0px;font-size: 18pt;width: 60px;height: 60px;text-align: center;line-height: 60px;vertical-align: top;background: #fff;margin-bottom: 10px;}

/* соединяющие линии между статусами */
#um-order-status>div>ul>li.separate {border: none;line-height: 20px;width: 30px;background: #e5e5e5;border-radius: 0px;height: 20px;margin: 22px -1px 0 -1px;}

/* активный статус */
#um-order-status>div>ul>li.active {background: -webkit-linear-gradient(bottom, #66a312, #9bc31c);background: -o-linear-gradient(bottom, #66a312, #9bc31c);background: linear-gradient(bottom, #66a312, #9bc31c);color: white;}

/* сообщения статусов */
#um-order-status>.um-status-info {background: -webkit-linear-gradient(bottom, #66a312, #9bc31c);background: -o-linear-gradient(bottom, #66a312, #9bc31c);background: linear-gradient(bottom, #66a312, #9bc31c);font-size: 18pt;width: 200px;line-height: 30px;text-align: left;padding: 10px;margin: 0px 20px;float: left;color: white;}
#um-order-status>.um-status-info>span {display: block;font-size: 12pt;line-height: 15px;}								
							

Информация о классах:

• #um-order-status ul, #um-order-status>ul li, #um-order-status>ul li span – стили списка статусов;
• #um-order-status>div>ul>li – стили номера шага статуса;
• #um-order-status>div>ul>li.separate – стили соединяющих линий между статусами;
• #um-order-status>div>ul>li.active – стили активного статуса;
• #um-order-status>.um-status-info, #um-order-status>.um-status-info>span – стили сообщений статусов;

Пример:

Нажмите "Сохранить".