Как правильно сделать шаги в калькуляторе?

Question

[jwwwe]

Всем привет. Как правильно реализовать шаги в таком калькуляторе? Пока идея добавлять шагам display: none; но я не знаю на сколько такое решение верно.

Comments

[Сергей Сергей]

Слайдер адаптировать.

[Андрей]

Слайдер адаптировать.

Заказчики тебя везде найдут и правок дадут.

[jwwwe]

Сергей Сергей: У меня была идея табы.

[Сергей Сергей]

И почему идея отпала? Из-за вариативности форм?

[jwwwe]

Сергей Сергей: Не знаю, как то не красиво все получается. Думал может есть более элегантные методы исполнения.

Answer 1

[Иван]

1) По моему вы пытаетесь изобрести "колхоз".
2) Есть реально МНОГО реализаций Tab'ов. Например Boostrap или Semantic. Или у Semantic есть вообще Step, который для того и придуман. Ну и много чего на JQuery - гугл в помощь.
3) Подобные калькуляторы !!! ОЧЕНЬ ПЛОХАЯ ИДЕЯ ДЕЛАТЬ ХАРДКОДОМ !!!. Поддерживать потом или что-то менять - превращается в филиал ада, ибо в 99% у вкладок начнут появляться зависимости. Если это у вас не задача из серии сделал-забыл, то я бы советовал сделать компонент на React или Vue. Заодно их изучение сподвигнет вас не писать JS говнокод.
4) Если все же задача "срочно, просто, без запары" и использовать UI библиотеку не хочется, то да:

Пока идея добавлять шагам display: none;

можно так.
Всем вкладкам назначается класс (например tab), они не видимы. При клике на шаг у всех вкладок удаляется класс active и через this устанавливается тому, на котором был клик.
jsfiddle.net/syahrasi/Us8uc - простейший пример реализации.

Comments

[jwwwe]

Я тоже думал про React, но калькулятор должен быть на сайте WP, а у меня нет опыта интеграции React компонентов в WP.

[Иван]

jwwwe: по большому счету вам ничего особо не надо внедрять в WP.
Делаете калькулятор на React или Vue. На результате у вас на выходе будет JS файл (Bundle). В шаблоне у вас будет что-то типа <div id="calc"></div>. Цепляете бандл к странице и как только он загрузится, на месте плейсхолдера появится калькулятор.
Ну или вообще делать страницу целиком.
С точки зрения WP думаю вариантов много, но уверен на 99% что там есть плагины для обработки форм, т.е. результат работы калькулятора вы можете отправить как форму.

[jwwwe]

Иван: а как данные калькулятора менять из админки? Цены, коэффициенты меняются.

[Иван]

jwwwe: пусть админка генерит JSON файл например. Хотя обычно все конечно несколько сложнее.
Например чтоб получить все доступные цвета делается запрос к базе со всеми материалами и откуда берется цвет. Это уже вопрос реализации.

[jwwwe]

Иван: У WP есть REST API. Попробую его использовать.