Пошаговая форма заказа

[Alexey787 0]

Прошу помощи сообщества в прикручивании к модулю checkout.html пошагового визарда.

Шаги оформления:

1. Адрес доставки
2. Адрес покупателя
3. Контактная информация
4. Регистрация аккаунта
5. Способ доставки
6. Способ оплаты

Что сделано: с помощью подключенного скрипта formToWizard.js и css отображаются все шаги формы (ссылка)

Не хватает мозгов по устранению следующих проблем:

• необходима ли дополнительная проверка обязательных полей и как ее выполнить,
• по клику на кнопку next перекидывает на главную.

Для создания формы пользовался материалом статьи (с небольшими правками)

 

 

 

 

[support 447]

Отключите быстрое оформление и будет по-шагово.

В Админке - Настройки - Оформление заказов отключите быстрое оформление.

[Alexey787 0]

К сожалению чуть чуть не то.

Хотелось бы что то подобное

 

Если кто то может сделать, прошу оценить работу.

[support 447]

Сделайте с помощью закладок, это самый простой вариант.

А вообще, Вы зря это задумали. Чем меньше кликов делает покупатель - тем лучше. А Вы наоборот заставляете кликать и кликать покупателя, это неправильно.

Вот как например тут закладки - http://vamshop.ru/vamshop.html

Только у Вас будут закладки Адрес доставки, Оплаты, Доставка и т.д.

[retroman 0]

Насчёт FormtoWizard как раз пытался сделать то же самое. Решение проблемы с перекидыванием на главную страницу заключается в правке файла .js

В двух функциях нужно добавить строку

return false; 

перед закрывающим }

Вот так:

function createPrevButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev' class='prev'>< Назад</a>");

            $("#" + stepName + "Prev").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i - 1)).show();
                $(submmitButtonName).hide();
                selectStep(i - 1);
            });
            return false;
        }

        function createNextButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Далее ></a>");

            $("#" + stepName + "Next").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i + 1)).show();
                if (i + 2 == count)
                    $(submmitButtonName).show();
                selectStep(i + 1);
            });
            return false;
        }

Но возникла другая проблема. Когда форма шла единой страницей, то в случае, если посетитель заполнил какое то поле некорректно, он сразу видел все ошибки. При разбивке же таким способом на шаги, посетитель по завершении всех шагов нажимает кнопку оформить заказ, но ничего не происходит, если какое-либо из полей заполнено неверно. А посетитель этого не видит, так как поле может быть на одном из предыдущих шагов и соответственно,  не видно посетителю. Итог - посетитель в недоумении уходит. Ещё не пробовал, но полагаю, что в качестве решения можно выводить все сообщения об имеющихся ошибках на последнем шаге, а не там, где они выводятся по умолчанию.

А насчёт целесообразности такого деления формы, вопрос спорный. Все по разному относятся к большому количеству полей для заполнения. Я, например, позитивней их воспринимаю, когда не вижу все сразу, а заполняю пошагово. Просто шагов не должно быть очень много. Шесть - это, пожалуй, перебор.

[support 447]

Так надо лишние поля убирать, которые не нужны, а не усложнять дополнительными кликами.

Вот например на vamshop.ru посмотрите как я сделал, т.к. товар электронный - никакие города, страны, регионы не нужны.

Я вообще всё лишнее убрал, это гораздо лучше, чем усложнять форму кликами.

Это моё imho конечно же.

[retroman 0]

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

[support 447]

Да это тоже можно понять.

Но в целом, я считаю, что всегда надо придерживаться правила - чем проще, тем лучше.

Если можно упростить - зачем усложнять?!

[sdi_68 3]

Пользуюсь быстрым оформлением заказа, но вот есть такая проблема, что скрипты не всегда быстро отрабатывают и форма не успевает обновляться (обновление блока доставки после ввода адреса, обновление способов оплаты после выбора доставки и т.п.). Не всегда корректно отрабатывет связка оплата-доставка. У некоторой части покупателей возникают проблемы при оформлении. Решения этой проблемы пока не нашел. Может кто уже с этим сталкивался?

[support 447]

Ну а как тут решишь?!

Там же ajax запросы выполняются, пока они не выполнятся, новые данные не появятся, например расчёт доставки.

Можете выключить быстрое оформление, тогда будет по-шагово и без ajax, там такой проблемы не будет в принципе, но будет неудобно оформлять заказ.

Быстрый заказ отключается в Админке - Настройки - Оформление заказа.

[sdi_68 3]

2 часа назад, VaM сказал:

Ну а как тут решишь?!

Там же ajax запросы выполняются, пока они не выполнятся, новые данные не появятся, например расчёт доставки.

Можете выключить быстрое оформление, тогда будет по-шагово и без ajax, там такой проблемы не будет в принципе, но будет неудобно оформлять заказ.

Быстрый заказ отключается в Админке - Настройки - Оформление заказа.

Я бы предложил блокировать кнопку "продолжить" до отработки скриптов. Проблема в том ,что Покупатель нажимает кнопку раньше ,пока не отработают скрипты.

[support 447]

Заблокируйте, кто ж против.

Добавить в шаблон оформление js код на jQuery, готовых примеров можно много найти в гугле.