Пошаговый мастер регистрации

Фильтр дополнений

Поиск

Категории

Лицензия

Версия OpenCart


Пошаговый мастер регистрации

Пошаговый мастер регистрации
Название дополнения Пошаговый мастер регистрации Рейтинг
Лицензия Free Оценок 1
Цена:
0 руб.
Просмотров 1690
Автор
Дата добавления 19.07.2011 г. Техподдержка Техподдержка
Дата изменения 28.07.2016 г. Пожаловаться Пожаловаться

Данная статья демонстрирует преобразование длинной формы в пошаговый мастер регистрации с индикацией информации о количестве оставшихся шагов.

Тестировалось на OpenCart 1.4.9.x
Разработчики: opencart.ws
Демо: https://test.opencart.ws/index.php?route=account/create


1. Для работы скачайте архив,в нём 2 файла create.tpl и formToWizard.js
замените файл create.tpl в директории catalog/view/theme/имя_шаблона/template/account
на новый скачаный.

2. В папке catalog/view/theme/имя_шаблона/
создайте папку js и скопируйте в него файл formToWizard.js


3.Откроем наш файл стилей catalog/view/theme/имя_шаблона/stylesheet/stylesheet.css
В самом низу вставляем следующее:

 

        fieldset { border:none;}
        legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold;}
        .prev, .next { background-color:#c5edff; padding:5px 10px; color:#fff; text-decoration:none;}
        .prev:hover, .next:hover { background-color:#000; text-decoration:none; color:#FFF;}
        .prev { float:left;}
        .next { float:right;}
        #steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px;}
        #steps li {font-size:24px; float:left; padding:10px; color:#b0b1b3;}
        #steps li span {font-size:11px; display:block;}
        #steps li.current { color:#000;}
        #makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px;}
        #makeWizard:hover { background-color:#000;}



4. Идем в catalog/view/theme/имя_шаблона/template/common/
Открываем файл header.tpl

Перед /head вставляем следующие
 

<script type="text/javascript" src="catalog/view/theme/default/js/formToWizard.js"></script>
    <script type="text/javascript">
        function MakeWizard() {
            $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' })
            $("#makeWizard").hide();
            $("#info").fadeIn(400);
        }
    </script>



Готово!

Для того чтоб сделать сразу пошаговую форму

Идем в catalog/view/theme/имя_шаблона/template/common/
Открываем файл header.tpl

Замени функцию MakeWizard() в хеде на следующее:

$(function()
{ $("#SignupForm").formToWizard({submitButton: 'SaveAccount' })$("#makeWizard").hide();
$("#info").fadeIn(400);})

Имя файла Совместимость Скачать
master.rar 1.4.9, 1.4.9.1, 1.4.9.2, 1.4.9.3, 1.4.9.4, 1.4.9.5 [Скачать]
Lutanin, добавлено: 17.03.2012, 01:41
Я чегото не понял сделал как написано но ничего не изменилось((( печалька
И вообще весь рунет перерыл немогу найти как сделать регистрацию как на скрине вверху, немогли бы вы описать как это осуществить в версии 1.5.1 плз оч нада
Ответить Оценить: Да 1 Да 0
alexeikaklg, добавлено: 20.04.2012, 21:35
В чём суть этого расширения? Только визуально меняется форма регистрации, ничего не работает...
Ответить Оценить: Да 0 Да -1

Ваш комментарий

#ID Название дополнения Стоимость
228 Пошаговый мастер регистрации 0 руб.