Как верстается страница с пошаговым оформлением заказа?

Question

[Pavel_20]

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

Шаг 1 - корзина - и тут сходу вопрос: я так понимаю с корзиной работает backend. Как быть верстальщику? Просто статично сверстать как на макете представлено? Нужно ли добавить еще событие по клику на крестик, что товар должен исчезать? Справа в табличке сумма динамически меняется исходя из товаров в корзине. Это я так понимаю backend-часть или на js пишется?


Шаг 2 - оформление заказа.

Тут и на следующем скрине я так понимаю radio-инпуты-табы (или просто табы без инпута?) - еще одно сомнение...







Финал:


Извиняйте, что накидал кучу скринов. В целом, если глобально, то вопрос: в чем в моем примере заключается прямая задача верстальщика и как правильно сверстать для backend-части (какие особенности выделили бы)? И шаги - это все одна страница, на которой происходят динамически изменения, или все же разные разные?
Буду премного благодарен, если подробно и доступно ответит кто-то)

Comments

[IvanMogilev]

Тут конечно сильно зависит от cms/фреймворка для бекенда. Но в целом сверстать- просто что бы выглядело так как на макетах, фронтенд - цены в корзине должны пересчитываться, товары удаляться, и вообще в принципе храниться по хорошему в локал сторейдже каком ни будь,и собственно всё что вы описали. Но возможно это всё уже есть в cms которая используется и от вас потребуется только вёрстка. Так что правильным решением будет уточнить у заказчика/бекендера, а не гадать на кофейной гуще.
P.S у нас например есть небольшая своя цмс,где для корзины/оформления заказа уже вся фронтенд часть есть, и нам нужна была бы только верстка, так что повторюсь, уточняйте такие вопросы у заказчика,а не на тостере.

[Сергей delphinpro]

Уберите картинки под спойлер, пожалуйста.

[Pavel_20]

IvanMogilev, спасибо за ваш подробный ответ! в том то и дело, что уточнять мне не у кого. этот интернет-магазин заказчик выложил на фрилансе, но я для себя просто решил взял сверстать и в портфолио чтоб было. откликаться не стал, тк работа объемная и непростая (до этого такие интернет-магазины не верстал).

Answer 1

[Сергей delphinpro]

Такие вещи как корзина нужно согласовывать с бэкэнд-программистом. У него может быть CMS c готовым модулем, который вам нужно перестилизовать. А может он любую разметку прикрутить готов.
Удаление товара может быть реализовано как с перезагрузкой страницы. так и аякс-запросом. Это тоже нужно уточнять.
Для подсчета стоимости вам нужны данные — цена и количество, и возможно скидки. Также нужно согласовать, каким образом вы будете получать эти данные, в дата-атрибутах, отдельным объектом на странице или аякс запросом.

А может от вас просто требуется статичная верстка. =))
В общем, не по адресу вопрос задаете. Обговаривайте это с заказчиком или коллегами.

Comments

[Pavel_20]

в том то и дело, что я бы не задавал такие вопросы, если б уже имел опыт работы с backend или вообще в студии хотя бы. а я только учусь еще. просто лендинги уже не интересно стало, решил интернет магаз попробовать)

[Сергей delphinpro]

Pavel_20, тренировочный макет для себя? Делайте по максимуму.

[Pavel_20]

Сергей delphinpro, да, для себя. ну я тоже думаю пусть это костыльно будет, но логику по максимум лучше пропишу

Answer 2

[approximate solution]

Вам нужно взять любую CMS которая работает по MVC, и посмотреть код корзины(страницы заказа).
Допустим тот же самый opencart - каждый отдельный пункт заказа подключен к основной страницы отдельным шаблоном, и под каждый отдельный шаблон пишется свой визуал, и логика.

Вы можете её сверстать полностью, а потом уже раскидывать по шаблонам, которые будут переходить в нужное состояние с помощью системы роутинга.

Answer 3

[Евгений Бухарев]

Верстальщик - просто верстка без функционала
Фронтенд программист - функционал на клиенте, подсчет сумм, удаление/добавление товара
Бекенд программист - функционал на сервере, вывод информации, сохранение, расчеты

Comments

[Pavel_20]

Да, но сейчас от верстальщика в большинстве требуется знание и js (или вакансии своими именами не называют). В целом если всю логику попробовать на js написать тут, то костыльно наверное будет?

[Евгений Бухарев]

Pavel_20, Если под логикой вы понимаете кликанье по табам, и переключение слайдеров, то да это больше к верстальщику, если логика это расчеты корзины, отправка аякс запросов, рендер хтмл, кастомные календари с расчетами дат и прочее, это к фронтенд программисту