
Virtuemart версии 2 – в развитии компонента это определенно большой шаг вперед. Мы получили полностью переписанный код, дополнительные поля, гибкие правила расчета и множество других плюшек, но при этом разработчики умудрились также кое-что испортить. Самой большой неприятностью в Virtuemart 2 стал новый процесс оформления заказа. Если раньше он был понятен и проходил в четыре последовательных шага, то сейчас на одной странице все перемешалось. Не каждый покупатель сообразит, куда следует нажимать и что делать. Часть из них попросту уйдет. В этой статье я расскажу, как превратить неуклюжее оформление заказа Virtuemart 2 в быстрое, удобное, на одной единственной странице.
Платный плагин
Сразу оговорюсь. В рамках этой статьи будет использоваться платное расширение стоимостью от 30$. Но не стоит сразу бросать чтение статьи. Прочитав детали, вы поймете, что это небольшие деньги за то, что будет приобретено.
Стандартный функционал
Для начала стоит объяснить, чем же меня не устраивает стандартная функция оформления заказа. Вот решил я купить молоток. Добавил товар в корзину, перешел к оформлению заказа и что я вижу:
Ставлю себя на место покупателя. Чешу затылок. ЧТО ЭТО? Читая только верхнюю часть, мы уже оперируем тремя терминами, значения которых не слишком-то понимаем: «Счет», «Адрес плательщика», «Адрес получателя». Хм… Ну ладно, действуем последовательно. Значит первое. Жмем кнопку «Добавить/изменить адрес плательщика». Видим:
О, Боже! Ну да ладно. Будем считать, что создатели сайта сократили число полей в админке. Поскольку плательщик я, заполняю и сохраняю. Вижу:
Подтвердить согласие с условиями обслуживания? Нет проблем! Ставлю галочку. Ну а дальше-то что? Опять чешу затылок…Область «Куда», совпадает с тем адресом, который я вводил для счета. Себе же заказываю. Значит, здесь ничего не трогаем. Смотрим ниже. Ага. Нужно выбрать способ доставки и оплаты. Выбираем доставку:
Сохраняем:
Выбираем оплату:
Сохраняем:
Нет, опять просят согласиться с условиями обслуживания. Я же уже соглашался? Снова ставлю галочку. Теперь остается только кнопка «Оформить заказ». Ура! Жмем! И…
Что? Какой адрес доставки? Там же черным по белому было написано, что его не нужно заполнять, если он совпадает с адресом в счете! Из лояльного покупателя я уже стал очень злым покупателем. Опять заполняю кучу полей, которые уже заполнял и сохраняю.
Опять эта страница! Заказ оформлен? Подтвердить? Хорошо. И, наконец, заказ сделан!
Теперь вопрос: сколько магазин потеряет покупателей, если заставит их проходить этот квест? Думаю, что много. Не знаю, чем думали разработчики, когда делали ЭТО, но явно не тем, чем следует. Ну да ладно, сделали и сделали. А что делать нам?
One Page Checkout
Нам необходимо избавиться от этого безобразия и максимально упростить заказ. Для этих целей я советую использовать платное расширение One Page Checkout. От разработчика Linelab.org. Из основных преимуществ выделю следующие:
- Стоит всего 30$(примерно 1т.р.)
- Нет привязки к домену (можно использовать на большом количестве сайтов)
- Простейшая установка в 2 шага.
- Оформление заказа на одной единственной странице без перезагрузок (все данные подгружаются через AJAX).
Установка One Page Checkout состоит из 2 шагов:
- Устанавливаем плагин plg_system_onepage_vm2 через менеджер расширений Joomla и активируем его.
- Копируем папку html из архива расширения в папку с вашим шаблоном. При необходимости заменяя файлы.
Всё. Установка закончена! При желании можно поменять некоторые настройки плагина:
Опции простые. Их значение станет понятно ниже. Теперь снова заказываем молоток и идем оформлять заказ. Видим:
«Жуть» – скажете вы. Но давайте разберемся. Из всех полей останутся только те, которые реально нужно заполнять. Остальные отключаются в настройках Virtuemart. Чтобы указать адрес доставки, совпадающий с информацией о покупателе, достаточно поставить одну галочку. Чтобы оформить заказ с регистрацией/без регистрации, достаточно поставить одну галочку. В настройках плагина есть опции, позволяющие ставить/снимать эти галочки по умолчанию. Если мы хотим избавиться от такого страшного набора полей, устанавливаем опции «Ship to address checked» в «Да», а «Register checked» в «Нет». В настойках Virtuemart отключаем все лишние поля и скрываем через CSS галочки в корзине. Получаем следующее:
Вот. Это уже походит на то, как должно выглядеть оформление заказа. Я покупатель. Захожу в корзину. Ага. Вижу четыре простых поля. Заполняю. Ниже вижу радиобоксы выбора способов оплаты и доставки. Выбираю. Ниже принимаю условия обслуживания и подтверждаю заказ. Всё! Заказ оформлен! Чувствуйте разницу?
Если же вы еще немного разбираетесь в коде, то с помощью несложных правок эта форма превращается в:
или:
или:
На трех последних скриншотах реальные формы, сделанные мной с помощью One Page Checkout для интернет-магазинов.
И все-таки мне жалко 30$ =)
Если вы владелец интернет-магазина, сделанного на Virtuemart 2, то эти затраты окупятся многократно. Если вы веб-мастер, то тем более. А если просто жалко, расскажу одну особенность, которой обладает сайт Linelab.org. За 30$ вы получаете не одно единственное расширение, а доступ ко всем расширениям и шаблонам Virtuemart 2 на 2 месяца! А набор там достаточно впечатляющий. Это не рекламная статья. За ее написание я не получил ничего. Партнерки также нет. Это просто мой совет и мой опыт. Надеюсь, кому-то он будет полезен.
Если вы не можете сами справиться с этим расширением, или хотите для своего магазина страницу оформления заказа, как показано выше – свяжитесь со мной через форму обратной связи. Возможно, я смогу вам помочь :-).
зато как говорится, или хотите так, или приобретайте эдак)
Здесь только один совет - учить HTML и CSS. Зная эти языки, вы сможете оформить страницу, как душе угодно.
Нужна только форма заказа из икеа
Как сделать вот так?
http://idea-sr.ru/checkout/
или вот так?
http://shopikea.ru/checkout.html
Что у этого разработчика есть интересного и полезного?
спасибо Вам за столь развернутую и понятную статью: 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 (форма с зеленой кнопкой), хочу на основе Ваших исходников разобраться и сделать по-своему оформление, могу поделиться результатом.
Заранее Вам признателен и благодарен.
С уважением, Александр.
1) Установить Firebug
2) Запустить на странице корзины и открыть вкладку "Консоль"
3) Посмотреть, какая ошибка появляется при загрузке страницы/нажатии на кнопку.
Может есть знающие люди ))
А статья очень хорошая. Её очень не хватало, когда мы искали варианты для своего сайта и додумывали сами )
Спасибо.
Подскажите пож-та, возможно ли реализовать заказ товара с "открытыми" параметрами товара, без использования "поля со списком". К примеру, заказ на изготовление упаковочной коробки, где покупатель вводит в поля длину, ширину, высоту и есть "поле со списком" выбор типа материала, цвет и т.д.? Что то можете посоветовать ?
http://wedal.ru/rasshireniya-joomla/virtuemart-2-internet-magazin-na-joomla-chast-7-nastraivaemye-polya-custom-fields-tipy-polej.html
Тип поля "customer text input"
dima1_ua собачка inbox.ru
Теперь просто на страницу editaddresscheckoutBT перекидывает, данные заполняются и дальше никуда. Ошибка консоли firebug TypeError: document.id(...) is null
jQuery("select.virtuemart_country_id").vm2front("list",{dest : "#virtuemart_stat...
Помогите пожалуйста, не силен в Php и скриптах...
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
Info: Отсутствуют значения E-Mail
Info: Отсутствуют значения Имя
Info: Отсутствуют значения Фамилия
Info: Отсутствуют значения Мобильный телефон
что делать? подскажите плиз!
Эти поля просто перестали выводиться, так же не выводятся способы Оплаты.