- Разработано сообществом OpenCart
- Документация включена
Данная статья демонстрирует преобразование длинной формы в пошаговый мастер регистрации с индикацией информации о количестве оставшихся шагов.
Тестировалось на 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
В самом низу вставляем следующее:
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">
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);})
