Урок 65. Шаблон сообщения "Заказ оформлен"

Основная цель

Основная цель для сообщения "Заказ оформлен" - проинформировать покупателя, что оформление заказа прошло успешно и указать дальнейшие действия. В некоторых случаях требуется проводить его на сайт платежной системы.

Задачи

Шаблон

Для решения задач и работы с шаблоном перейдите в Панель управления - Дизайн - Дизайн (шаблоны) и выберите в нем Сообщение "Заказ оформлен":

Обратите внимание, шаблон выделен зеленым цветом, а это значит, что он представляет из себя часть другого шаблона, а именно страницы служебных форм при $PAGE_ID$ = 'checkout'. Чтобы в этом убедиться, достаточно заглянуть в список переменных страницы:

Вот так выглядит схема страницы:

Важная особенность, контент страницы оформления заказа (где пользователь выбирает способы оплаты и доставки) помещенный в div с id = "cont-shop-checkout" полностью заменился на сообщение "Заказ оформлен" (на схеме в зеленой рамке). Однако, все, что осталось за его пределами - никуда не исчезло (в желтой рамке). Учитывайте это, когда добавляете на checkout информацию - она может быть отражена в неожиданных местах.

Давайте уже взглянем на шаблон:

<h1>Ваш заказ успешно оформлен</h1>
<p>Номер вашего заказа: <b>$ORDER_ID$</b></p>
<p>Просмотреть статус всех Ваших заказов, а также оплатить их в будущем можно, выбрав в меню "Магазин" пункт <a href="/shop/invoices">$INVOICES_PAGE_NAME$</a></p>
<?if($PAY_NOW$)?>
<table border=0><tr><td>Сумма к оплате выбранным способом: $ORDER_TOTAL$</td><td>$PAY_NOW$</td></tr></table>
<?else?>
<?endif?>
<h2>Благодарим, что выбрали нас!</h2>
$ORDER_PRINT$

Кнопка оплаты - $PAY_NOW$ уже имеется в шаблоне. При ее наличии, пожалуй, это самый важный элемент в сообщении, поэтому выделите его: добавьте свободного места вокруг, увеличьте текст, измените цвет. У меня получилось так:

#order-submit input[type="submit"] {
display: inline-block;
margin-bottom: 0;
font-weight: normal;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid #daa520;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
padding: 10px 16px;
font-size: 18px;
line-height: 1.33;
border-radius: 6px;
background-color: #ffd700;
color: #666666;
border-color: #daa520;
}
#order-submit input[type="submit"]:hover {
color: #666;
background-color: #eac500;
border-color: #bf901c;
}

Делается это в CSS интернет магазина.

Задачи:

• Сообщить о дальнейших действиях
• Указать дату и время доставки заказа
• Вывести сообщение о том, что заказ можно отменить или удалить

Решаются с помощью размещения текстовых сообщений.

<h1>Ваш заказ успешно оформлен</h1>
<p>Номер вашего заказа: <b>$ORDER_ID$</b></p>
<p>Просмотреть статус всех Ваших заказов, а также оплатить их в будущем можно, выбрав в меню "Магазин" пункт <a href="/shop/invoices">$INVOICES_PAGE_NAME$</a></p>
<?if($PAY_NOW$)?>
<table border=0><tr><td>Сумма к оплате выбранным способом: $ORDER_TOTAL$</td><td>$PAY_NOW$</td></tr></table>
<?else?>
<?endif?>
<h2>Благодарим, что выбрали нас!</h2>
$ORDER_PRINT$
<h2> Что делать дальше? </h2>
<ol>
<li> Дождитесь звонка оператора. В течение 15 минут с момента оформления заказа </li>
<li> Доставка назначается на следующей с 12:00 до 18:00 </li>
<li> Оплата производится при получении наличными или банковской картой </li>
</ol>
<p> Чтобы отменить или изменить заказ, просто позвоните нам по телефону +7 (123) 456-78-90 </p>

На этом урок окончен.