В этой статье я расскажу, как превратить неуклюжее оформление заказа Virtuemart 2 в быстрое, удобное, на одной единственной странице.
Virtuemart 2 - интернет-магазин на Joomla. Часть 10. Одностраничное оформление заказа.

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

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

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

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

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

one page checkout

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

one page checkout

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

one page checkout

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

one page checkout

Сохраняем:

one page checkout

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

one page checkout

Сохраняем:

one page checkout

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

one page checkout

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

one page checkout

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

one page checkout

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

Одностраничное оформление заказа в 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 из архива расширения в папку с вашим шаблоном. При необходимости заменяя файлы.

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

one page checkout

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

one page checkout

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

one page checkout

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

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

one page checkout

или:

one page checkout

или:

one page checkout

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

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

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

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

Понравилась статья? Сохраните себе на стену:

Ваша оценка материала очень важна для нас. Просим вас оценить статью или оставить отзыв в комментариях.

Другие статьи серии

Комментарии  

0 # Плагин One Page для virtuemart 2 — оформление заказа в один шагJulik 07.08.2015 08:36
при нажатии кнопки Подтвердить заказ вылезает

Info: Отсутствуют значения E-Mail
Info: Отсутствуют значения Имя
Info: Отсутствуют значения Фамилия
Info: Отсутствуют значения Мобильный телефон

что делать? подскажите плиз!
Эти поля просто перестали выводиться, так же не выводятся способы Оплаты.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Плагин One Page для virtuemart 2 — оформление заказа в один шагWedal 10.08.2015 04:44
Julik, в Virtuemart есть раздел "поля, заполняемые пользователями". Скорее всего эти поля отмечены у вас там, как обязательные. В форме оформления заказа они присутствуют, но скрыты. В результате вы получаете то, что получаете. Вам нужно либо показать эти поля в форме, чтобы пользователь мог их заполнить, либо отключить их в Virtuemart. Заметьте, что некоторые поля являются системными и отключить их нельзя.
Ответить | Ответить с цитатой | Цитировать
0 # и совсем глупый вопросAB2015 04.04.2015 05:30
не могу поправить текст. в уровень с радиобаттонами. туплю наверно, но все же. как?
Ответить | Ответить с цитатой | Цитировать
0 # и совсем глупый вопросAB2015 04.04.2015 09:30
это решила)
Ответить | Ответить с цитатой | Цитировать
0 # теперь другая беда.AB2015 04.04.2015 05:28
если скрываю в css "Использовать для адреса 'Куда' данные адреса плательщика", то по клику на оформить заказ меня перебрасывает на заполнение данных о плательщике...как этого избежать?
Ответить | Ответить с цитатой | Цитировать
0 # подскажите!AB2015 02.04.2015 18:02
сделала все как описано. но клику на подтвердить заказ ничего не происходит! в чем проблема? или так и должно быть, т.к. сайт пока на локальном хостинге?
Ответить | Ответить с цитатой | Цитировать
0 # Ошибки в консолиAB2015 02.04.2015 18:04
пишет вот чего, через firebug
Uncaught TypeError: Cannot read property 'value' of null
index.php?option=com_virtuemart&view=cart&Itemid=108:660 Uncaught TypeError: Cannot read property 'value' of null
Ответить | Ответить с цитатой | Цитировать
0 # RE: Ошибки в консолиWedal 03.04.2015 03:56
AB2015, откройте в браузере исходный код html-страницы и найдите строчку, на которую ссылается ошибка. Что написано в этой строчке?
Ответить | Ответить с цитатой | Цитировать
0 # исправила, спасибо!AB2015 04.04.2015 05:27
:-)
Ответить | Ответить с цитатой | Цитировать
0 # ТЕперь другая ситуация)Дамир 10.03.2015 07:50
Цитирую Wedal:
Дамир, возможно вы обновили VM. Белое окно = ошибка PHP. Включите отображение ошибок PHP и посмотрите, что будет написано в этом окне.


Теперь просто на страницу editaddresscheckoutBT перекидывает, данные заполняются и дальше никуда. Ошибка консоли firebug TypeError: document.id(...) is null


jQuery("select.virtuemart_country_id").vm2front("list",{dest : "#virtuemart_stat...

Помогите пожалуйста, не силен в Php и скриптах...
Ответить | Ответить с цитатой | Цитировать
0 # RE: ТЕперь другая ситуация)Wedal 11.03.2015 04:57
Дамир, TypeError: document.id(...) is null означает, что скрипт не может найти на странице элемент с заданным ID. Посмотрите соответствующую строчку в коде HTML-страницы или JS-коде, на которую указывает консоль. Там сразу поймете, какого элемента не хватает.
Ответить | Ответить с цитатой | Цитировать
0 # белое окно вместо оформленияДамир 09.03.2015 19:57
У меня все работало, изменений никаких не вносил, однако, сейчас плагин перестал работать, при оформлении заказа либо белое окно либо шаг редактирования личных данных. В чем может быть проблема? http://gse-msk.ru/catalog/cable-1/nym-1/nym
Ответить | Ответить с цитатой | Цитировать
0 # RE: белое окно вместо оформленияWedal 10.03.2015 07:06
Дамир, возможно вы обновили VM. Белое окно = ошибка PHP. Включите отображение ошибок PHP и посмотрите, что будет написано в этом окне.
Ответить | Ответить с цитатой | Цитировать
0 # не подгружается шаблон в корзинемарина 15.02.2015 09:12
У меня после переноса на хостинг плагин one page checkout 2.3 перестал подгружать шаблон, сайт http://new.averon-tmk.ru// в чем может быть причина? На локальном сервере все работало.
Ответить | Ответить с цитатой | Цитировать
0 # RE: не подгружается шаблон в корзинеWedal 16.02.2015 03:22
марина, сложно сказать. Проверьте активирован ли плагин OPC, используется ли тот же шаблон Joomla, что и на локальном сервере, сравните URL страниц. Проверьте конфигурации на предмет URL домена - возможно где-то остался тестовый. Но все это пальцем в небо. Нужно смотреть сайт.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Virtuemart 2 - интернет-магазин на Joomla. Часть 10. Одностраничное оформление заказа.Дмитрий 111111111 13.02.2015 21:03
Хочу заказать услугу по исправлению корзины в одно страничную, напишите мне цену и сроки. Спасибо.
dima1_ua собачка inbox.ru
Ответить | Ответить с цитатой | Цитировать
0 # RE: Virtuemart 2 - интернет-магазин на Joomla. Часть 10. Одностраничное оформление заказа.Wedal 16.02.2015 03:18
Дмитрий, пишите запрос через форму обратной связи. В комментариях это не обсуждается.
Ответить | Ответить с цитатой | Цитировать
0 # Форма заказаРоман12345 09.02.2015 16:29
Добрый день.
Подскажите пож-та, возможно ли реализовать заказ товара с "открытыми" параметрами товара, без использования "поля со списком". К примеру, заказ на изготовление упаковочной коробки, где покупатель вводит в поля длину, ширину, высоту и есть "поле со списком" выбор типа материала, цвет и т.д.? Что то можете посоветовать ?
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Форма заказаWedal 10.02.2015 03:42
Роман, посмотрите в этой статье:
http://wedal.ru/rasshireniya-joomla/virtuemart-2-internet-magazin-na-joomla-chast-7-nastraivaemye-polya-custom-fields-tipy-polej.html
Тип поля "customer text input"
Ответить | Ответить с цитатой | Цитировать
0 # RE: Virtuemart 2 - интернет-магазин на Joomla. Часть 10. Одностраничное оформление заказа.Лиана 12.01.2015 04:15
А в каком файле One Page Checkout производит расчет ссылок? У меня подключена робокасса, в которой есть возможность установить скидку на товар в проценте. В файлах модуля формулы правильные. А вот в итоге на сайт выводит скидку (например 15%) в расчете как *15/115 (как ндс считает). Пришла к выводу, что подсчетом занимается именно One Page Checkout.
Может есть знающие люди ))

А статья очень хорошая. Её очень не хватало, когда мы искали варианты для своего сайта и додумывали сами )
Спасибо.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Virtuemart 2 - интернет-магазин на Joomla. Часть 10. Одностраничное оформление заказа.Wedal 13.01.2015 15:05
Лиана, честно говоря, не все понял из вашего сообщения - немного сумбурно. По поводу скидок и налогов - это делает не One Page Checkout, а Virtuemart. Смотрите или "Налоги и правила расчета" или настройки модулей оплаты и доставки. По налогам и правилам расчета есть отдельная статья в этой серии. Там достаточно сложно разобраться.
Ответить | Ответить с цитатой | Цитировать
0 # Бородец!great_sensei 25.09.2014 08:16
Не работает кнопка "оформить заказ" :cry: что делать? :-?
Ответить | Ответить с цитатой | Цитировать
0 # RE: Бородец!Wedal 26.09.2014 04:02
great_sensei,
1) Установить Firebug
2) Запустить на странице корзины и открыть вкладку "Консоль"
3) Посмотреть, какая ошибка появляется при загрузке страницы/нажатии на кнопку.
Ответить | Ответить с цитатой | Цитировать
+1 # irtuemart 2 - интернет-магазин на Joomla. Часть 10. Одностраничное оформление заказаАлександр Иванович 11.08.2014 05:31
Уважаемый Виталий,

спасибо Вам за столь развернутую и понятную статью: Virtuemart 2 - интернет-магазин на Joomla. Часть 10. Одностраничное оформление заказа (One page checkout, ссылка: http://wedal.ru/rasshireniya-joomla/virtuemart-2-internet-magazin-na-joomla-chast-10-odnostranichnoe-oformlenie-zakaza.html)

мне очень понравилось, как Вы оформили форму заказа с использованием плагин One page checkout, могу я попросить у Вас поделиться исходниками (плагин имеется, установил, настроил), особенно для примера №3 (форма с зеленой кнопкой), хочу на основе Ваших исходников разобраться и сделать по-своему оформление, могу поделиться результатом.

Заранее Вам признателен и благодарен.
С уважением, Александр.
Ответить | Ответить с цитатой | Цитировать
0 # А на что еще посоветуете обратить внимание?Дмитрий2 10.03.2014 10:37
При покупке данного плагина у разработчика.
Что у этого разработчика есть интересного и полезного?
Ответить | Ответить с цитатой | Цитировать
0 # RE: А на что еще посоветуете обратить внимание?Wedal 11.03.2014 02:31
Цитата:
Что у этого разработчика есть интересного и полезного?
Дмитрий, так зайдите на сайт и посмотрите :-)
Ответить | Ответить с цитатой | Цитировать
0 # СайтSfera 09.03.2014 15:23
Есть сайт на Joomla http://sebenado.ru/
Нужна только форма заказа из икеа
Как сделать вот так?
http://idea-sr.ru/checkout/
или вот так?
http://shopikea.ru/checkout.html
Ответить | Ответить с цитатой | Цитировать
0 # RE: СайтWedal 10.03.2014 03:00
Sfera, это уже совсем из другой оперы. тут уже не интернет-магазин, а этакий парсер товаров икеа.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Virtuemart 2 - интернет-магазин на Joomla. Часть 10. Одностраничное оформление заказа.Plosky 20.02.2014 13:05
Скажите, а как сделать такую же красивую форму корзины как на первом из трех последних скриншотов?
Ответить | Ответить с цитатой | Цитировать
+2 # RE: Virtuemart 2 - интернет-магазин на Joomla. Часть 10. Одностраничное оформление заказа.Wedal 21.02.2014 03:17
Plosky, чисто оформление One Page Checkout с помощью html + css + немного jQuery.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Virtuemart 2 - интернет-магазин на Joomla. Часть 10. Одностраничное оформление заказа.Plosky 21.02.2014 05:16
ну это как бы понятно, хотелось бы конкретных инструкций :-)
Ответить | Ответить с цитатой | Цитировать
0 # RE: Virtuemart 2 - интернет-магазин на Joomla. Часть 10. Одностраничное оформление заказа.Wedal 22.02.2014 02:02
Plosky, а как вы себе представляете эти конкретные инструкции? Вставь строчку кода после A, добавь стили B и C к классу D? Если так, то получится целая книга.
Здесь только один совет - учить HTML и CSS. Зная эти языки, вы сможете оформить страницу, как душе угодно.
Ответить | Ответить с цитатой | Цитировать
0 # Плагин быстрого заказаbeagler 20.02.2014 07:41
Спасибо автору за интересный материал и с его разрешения порекламирую в этой теме свой плагин быстрого заказа. Это дополнительный способ для покупателя сделать заказ прямо из карточки товара. Кому интересно - http://beagler.ru/virtuemart2/plagin-bystrogo-zakaza-dlya-joomla-2-5-virtuemart-2.html
Ответить | Ответить с цитатой | Цитировать
0 # RE: Virtuemart 2 - интернет-магазин на Joomla. Часть 10. Одностраничное оформление заказа.Vitaliy 18.02.2014 18:38
Вообще-то в последних версиях виртуемарта есть встроенное одностраничное оформление заказа, при настройке которого очень даже вери гуд
Ответить | Ответить с цитатой | Цитировать
0 # RE: Virtuemart 2 - интернет-магазин на Joomla. Часть 10. Одностраничное оформление заказа.Wedal 19.02.2014 03:31
Vitaliy, да, наверное стоило его упомянуть. Какая-то помесь. Там получается, что вроде все делается на одной странице, но на ней же приходится сохранять все данные отдельными кнопками сохранения и при этом происходит перезагрузка страницы. Как по мне, работает все это отвратительно.
Ответить | Ответить с цитатой | Цитировать
0 # RE: Virtuemart 2 - интернет-магазин на Joomla. Часть 10. Одностраничное оформление заказа.Vitaliy 19.02.2014 13:41
не отвратительно, просто неудобно/немодно/непривычно)))

зато как говорится, или хотите так, или приобретайте эдак)
Ответить | Ответить с цитатой | Цитировать
0 # RE: Virtuemart 2 - интернет-магазин на Joomla. Часть 10. Одностраничное оформление заказа.slovoblud 18.02.2014 15:44
Спасибо. Иногда кажется что они специально усложняют чтобы был стимул приобрести расширение. Хотя с другой стороны, мало-ли кому какие поля будут нужны.
Ответить | Ответить с цитатой | Цитировать
+1 # RE: Virtuemart 2 - интернет-магазин на Joomla. Часть 10. Одностраничное оформление заказа.Wedal 19.02.2014 03:36
slovoblud, нет, не специально усложняют. Просто задачка одностраничного оформления заказа для такого монстра, как VM2, довольно сложная. Вот просто представьте: на одной странице есть масса полей, заполняемых пользователем, значения которых зависят друг от друга. Например, стоимость доставки может зависеть от региона, а общая стоимость от стоимости доставки. Еще нужно учитывать, что тарифы хранятся на сервере, а значит, подгружать все это можно только через AJAX. Возможно, с AJAX разработчики не очень-то и дружат, отсюда и ноги растут.
Ответить | Ответить с цитатой | Цитировать

Добавить комментарий

Для отправки комментария введите код с картинки:
Защитный код
Обновить

Вверх