Вход / Регистрация

Создайте сайт прямо сейчас!

Зарегистрируйтесь по ссылкам и получите дополнительные бонусы при создании сайта



  • Персональный перечень способов заработка на сайте именно вашей тематики
  • Аудит юзабилити сайта бесплатно $20
  • Набор скриптов на сумму $40 для увеличения продаж
  • Аудит юзабилити интернет магазина бесплатно $60

Как получить бонусы?


Как только вы создадите сайт по одной из указанных ссылок, я увижу это в отчете партнерской программы:

После оплаты одного из пакетов, отправьте запрос на info@ucozmagazines.ru с указанием адреса созданного сайта.

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

Шаблон сообщения "Заказ оформлен" - создание, оптимизация и обзор возможностей

Сергей    27.11.2014    14400    4.6 из 5.0 (11)

Оцените материал:

Цель урока

Разработать шаблон сообщения "Заказ оформлен", познакомиться с вариантами и способами его отображения.

Урок для тех, кто однозначно решил показывать посетителям сообщение "Заказ оформлен". Если нет уверенности в необходимости сообщения, почитайте предыдущий урок.

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

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

Вопросы

  • Что делать дальше?
  • Когда привезут заказ?
  • Как оплатить?
  • Можно ли отменить/изменить заказ?

Задачи

ЗадачаРешение
Сообщить о дальнейших действиях

Варианты: ожидание оплаты, подтверждение по телефону, согласование даты доставки, получение курьером оплаты. Каков бы ни был ваш вариант, необходимо сообщить об этом посетителю, пока он не передумал получить заказ.

Указать дату и время доставки заказа

В формулировке даты получения заказа клиентом должна быть ясность. Если ее достичь невозможно, тогда укажите четкое время, когда будет согласовано время получения.

Разместить кнопку оплаты заказа

Действительно только при приеме через электронные модули платежей. Укажите, если есть такая возможность, что при получении заказа курьер примет наличные или банковскую карту.

Вывести сообщение о том, что заказ можно отменить или удалить

Здесь мы ни в коем случае не подталкиваем клиента отменить или что-то поменять. Идет работа с сомнениями. Так покупатель будет знать, что заказ можно отменить в любой момент и не будет об этом задумываться лишний раз.

Шаблон

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

Обратите внимание, шаблон выделен зеленым цветом, а это значит, что он представляет из себя часть другого шаблона, а именно страницы служебных форм при $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>

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

Упражнения

  1. Решите задачи для сообщения "Заказ оформлен".
  2. Настройте шаблон в соответствии с задачами


Оцените материал:


Расскажите друзьям и коллегам о полезной статье:

Обсуждение

Всего комментариев: 16

L
1
Скажите пожалуйста, а кроме того что добавить код выше для "Кнопки оплаты - $PAY_NOW$" в css магазина, нужно что-нибудь еще сделать?
У меня простым добавлением ничего не изменилось.
avatar
0
2
Больше ничего не требуется. А не изменилось что? Стиль кнопки? Или кнопки вобще нет?
g
3
А как вывести это сообщение для не зарегистрированных пользователей?
avatar
1
4
Для незарегистрированных пользователей показать такое сообщение нельзя. Можно лишь разместить что-то подобное на странице заказа при условии <?if $GROUP_ID$ = '0'?>
g
5
Здорово, у нас получилось. А как сделать так, чтобы это сообщение выводилось один раз при оформлении заказа, а далее если человек вновь переходит в свой заказ , этого сообщения не было?
avatar
0
6
По идее, надо проверить document.referrer если он имеет совпадение с "shop/checkout", то только тогда нужно показать сообщение
g
7
А где это смотреть?
L
8
А можно просто присвоить другой класс кнопке PAY NOW? Не изменяя css магазина?
У меня есть уже красивый класс к кнопке просто нужно его прикрутить к этой кнопке. 
Я из ваших уроков смог поменять кнопку "добавить в корзину", сделал вот так:
Код
<a class="button green bigrounded" onclick="yaCounter20473681.reachGoal('ADD2BASKET');add2Basket('$ID$','id'); " /><span style="color:white; font-size:20px;">В корзину<span></a>;

Можно ли сделать так же с кнопкой PAY NOW?
avatar
0
9
Странно, почему-то Ваши ответы в спам ушли...

Лучшим вариантом будет просто в CSS стили кнопки добавить селектор #order-submit input

[type="submit"]Но если нужно сделать это просто добавление класса, то попробуйте скрипт
Код
$('#order-submit input[type="submit"]').addClass('button green bigrounded');

Код нужно разместить в нижней части шаблона "Страница заказа" или в шаблоне страница служебных форм, если оплата производится с /shop/invoices
p
10
Здравствуйте Сергей! Помогите разобраться! Почему у меня после нажатия на кпонку ОФОРМИТЬ ЗАКАЗ в корзине перезод осуществяется на СТРАНИЦУ ЗАКАЗ, а надо на ЗАКАЗ ОФОРМЛЕН...
avatar
0
11
Здравствуйте. Тут два варианта возможны:
1. Оформляется заказ от гостя
2. В настройках стоит галочка "Переходить на страницу заказа после оформления зарегистрированным пользователем"
a
12
Здравствуйте! Помогите разобраться, вставил ваши шаблоны но ничего не изменилось у меня вообще на странице нет переменной checkout посмотрите что можно сделать.
скрин страницы:Скрин страницы
avatar
0
13
Здравствуйте. Уточните, какую задачу хотите решить? Checkout для страницы оформления заказа, здесь речь идет о странице "Заказ оформлен". Это две разных страницы.
a
14
Да я уже понял что это две разные страницы, у меня это выглядит так: добавил "В корзину" нажимаешь "Оформить заказ" перекидывает => checkout( когда все поля и отметки сделаны) нажимаешь опять "Оформить заказ"перекидывает
 => order/( где и находятся все кнопки , перейти к оплате и т.д)=> далее на платежную систему( когда оплата произведена) возвращает опять на страницу order/( но здесь уже нет кнопки оплатить). Вопрос в следующем а Где та информация которая описана в этом уроке? У меня такого вообще не происходит(((
avatar
0
15
Снимите галочку "Перенаправлять на страницу заказа после оформления заказа зарегистрированным пользователем" в настройках магазина
a
16
Спасибо все понял.
Урок 65. Шаблон сообщения "Заказ оформлен"
Урок 65. Шаблон сообщения "Заказ оформлен"