Virtuemart 2 - интернет-магазин на Joomla. Часть 10. Одностраничное оформление заказа.

Virtuemart версии 2 – в развитии компонента это определенно большой шаг вперед. Мы получили полностью переписанный код, дополнительные поля, гибкие правила расчета и множество других плюшек, но при этом разработчики умудрились также кое-что испортить. Самой большой неприятностью в Virtuemart 2 стал новый процесс оформления заказа. Если раньше он был понятен и проходил в четыре последовательных шага, то сейчас на одной странице все перемешалось. Не каждый покупатель сообразит, куда следует нажимать и что делать. Часть из них попросту уйдет. В этой статье я расскажу, как превратить неуклюжее оформление заказа Virtuemart 2 в быстрое, удобное, на одной единственной странице.

Одностраничное оформление заказа в Virtuemart 2. Платный плагин.

Сразу оговорюсь. В рамках этой статьи будет использоваться платное расширение стоимостью от 30$. Но не стоит сразу бросать чтение статьи. Прочитав детали, вы поймете, что это небольшие деньги за то, что будет приобретено.

Одностраничное оформление заказа в Virtuemart 2. Стандартный функционал.

Для начала стоит объяснить, чем же меня не устраивает стандартная функция оформления заказа.  Вот решил я купить молоток. Добавил товар в корзину, перешел к оформлению заказа и что я вижу:

Ставлю себя на место покупателя. Чешу затылок. ЧТО ЭТО? Читая только верхнюю часть, мы уже оперируем тремя терминами, значения которых не слишком-то понимаем: «Счет», «Адрес плательщика», «Адрес получателя». Хм… Ну ладно, действуем последовательно. Значит первое. Жмем кнопку «Добавить/изменить адрес плательщика». Видим:

О, Боже! Ну да ладно. Будем считать, что создатели сайта сократили число полей в админке. Поскольку плательщик я, заполняю и сохраняю. Вижу:

Подтвердить согласие с условиями обслуживания? Нет проблем! Ставлю галочку. Ну а дальше-то что? Опять чешу затылок…Область «Куда», совпадает с тем адресом, который я вводил для счета. Себе же заказываю. Значит, здесь ничего не трогаем. Смотрим ниже. Ага. Нужно выбрать способ доставки и оплаты. Выбираем доставку:

Сохраняем:

Выбираем оплату:

Сохраняем:

Нет, опять просят согласиться с условиями обслуживания. Я же уже соглашался? Снова ставлю галочку. Теперь остается только кнопка «Оформить заказ». Ура! Жмем! И…

Что? Какой адрес доставки? Там же черным по белому было написано, что его не нужно заполнять, если он совпадает с адресом в счете! Из лояльного покупателя я уже стал очень злым покупателем. Опять заполняю кучу полей, которые уже заполнял и сохраняю.

Опять эта страница! Заказ оформлен? Подтвердить? Хорошо. И, наконец, заказ сделан!

Теперь вопрос: сколько магазин потеряет покупателей, если заставит их проходить этот квест? Думаю, что много. Не знаю, чем думали разработчики, когда делали ЭТО, но явно не тем, чем следует. Ну да ладно, сделали и сделали. А что делать нам?

Одностраничное оформление заказа в Virtuemart 2. One Page Checkout.

Нам необходимо избавиться от этого безобразия и максимально упростить заказ. Для этих целей я советую использовать платное расширение One Page Checkout. От разработчика Linelab.org. Из основных преимуществ выделю следующие:

1. Стоит всего 30$(примерно 1т.р.)
2. Нет привязки к домену (можно использовать на большом количестве сайтов)
3. Простейшая установка в 2 шага.
4. Оформление заказа на одной единственной странице без перезагрузок (все данные подгружаются через AJAX).

Установка One Page Checkout состоит из 2 шагов:

1. Устанавливаем плагин plg_system_onepage_vm2 через менеджер расширений Joomla и активируем его.
2. Копируем папку html из архива расширения в папку с вашим шаблоном. При необходимости заменяя файлы.

Всё. Установка закончена! При желании можно поменять некоторые настройки плагина:

Опции простые. Их значение станет понятно ниже. Теперь снова заказываем молоток и идем оформлять заказ. Видим:

«Жуть» – скажете вы. Но давайте разберемся. Из всех полей останутся только те, которые реально нужно заполнять. Остальные отключаются в настройках Virtuemart. Чтобы указать адрес доставки, совпадающий с информацией о покупателе, достаточно поставить одну галочку. Чтобы оформить заказ с регистрацией/без регистрации, достаточно поставить одну галочку. В настройках плагина есть опции, позволяющие ставить/снимать эти галочки по умолчанию. Если мы хотим избавиться от такого страшного набора полей, устанавливаем опции «Ship to address checked» в «Да», а «Register checked» в «Нет». В настойках Virtuemart отключаем все лишние поля и скрываем через CSS галочки в корзине. Получаем следующее:

Вот. Это уже походит на то, как должно выглядеть оформление заказа. Я покупатель. Захожу в корзину. Ага. Вижу четыре простых поля. Заполняю. Ниже вижу радиобоксы выбора способов оплаты и доставки. Выбираю. Ниже принимаю условия обслуживания и подтверждаю заказ. Всё! Заказ оформлен! Чувствуйте разницу?

Если же вы еще немного разбираетесь в коде, то с помощью несложных правок эта форма превращается в:

или:

или:

На трех последних скриншотах реальные формы, сделанные мной с помощью One Page Checkout для интернет-магазинов.

Одностраничное оформление заказа в Virtuemart 2. И все-таки мне жалко 30$ =).

Если вы владелец интернет-магазина, сделанного на Virtuemart 2, то эти затраты окупятся многократно. Если вы веб-мастер, то тем более. А если просто жалко, расскажу одну особенность, которой обладает сайт Linelab.org. За 30$ вы получаете не одно единственное расширение, а доступ ко всем расширениям и шаблонам Virtuemart 2 на 2 месяца! А набор там достаточно впечатляющий. Это не рекламная статья. За ее написание я не получил ничего. Партнерки также нет. Это просто мой совет и мой опыт. Надеюсь, кому-то он будет полезен.

Если вы не можете сами справиться с этим расширением, или хотите для своего магазина страницу оформления заказа, как показано выше – свяжитесь со мной через форму обратной связи. Возможно, я смогу вам помочь :-).

Об авторе

Wedal (Виталий). Веб-разработчик полного цикла (Full Stack). Создатель и автор сайта Wedal.ru.

Основной профиль – создание сайтов и расширений на CMS Joomla.

• Об авторе
• Портфолио
• Услуги
• Контакты