Как верстаются подобные страницы?

Question

[Treniki]

Доброго времени суток. На фрилансе нашел заказ по верстке страницы корзины.



PSD-файл, всё, как полагается, но меня интересует следующее: как верстают подобное? Ведь там есть товары, которые добавляются в корзину, данные типа "Доставка доступна сегодня" (а может и не быть доступна), идёт подсчет суммы. Как подобные элементы учитываются при вёрстке? Здесь ведь, наверняка, одним Front-end (html, css, js) не обойтись, верно? Так как верстают подобное, отталкиваясь от того, что страница, собственно, будет видоизменяться (товары будут разные\разные цены\доставка будет доступна-нет)? Одного PSD-файла для вёрстки ведь будет не достаточно? Придется запрашивать дополнительные файлы, чтобы знать, куда и какие запросы для получения данных отправлять?

Comments

[Руслан Полин]

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

Answer 1

[Сева]

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

Comments

[Treniki]

Т.е. подобные задания решаются простой вёрсткой 1 в 1, используя те же картинки и те же цены?

[Станислав]

Treniki: верно! единственный момент, иногда js включают в верстку, это надо оговорить с заказчиком.
Если заказчик имел ввиду, что и js должен быть готов, тогда у вас еще должно плюсоваться кол-во товара, работать датпикер и т.п.

Answer 2

[Борис Манжела]

Тут может не хватать

• дизайна календаря
  
• состояний кнопок (неактивных)
  

Но в целом всего достаточно.
Реализация может быть как на стороне бекенда (за каждым изменением списка товаров бек перестраивает страницу), так и частично на фронте (валидация, ajax для быстрого обновления части контента).
Я бы делал второй вариант:
- все данные получаем по Ajax и отправляем так же.
- валидация на клиенте (Parsley.js / HTML5 Forms) + дополнительная валидация проверенных данных беком

Answer 3

[Tsimur_S]

Если вы делаете только верстку то вас это не должно касаться, у вас должна быть голая html и стили которую можно отдать заказчику. Калькулятор делается на js. Доставка доступна сегодня, товары и их цены приходят либо аяксом с сервера либо вставляются в шаблон перед отдачей пользователю страницы.

Comments

[Treniki]

Т.е. нужно сверстать всё 1 в 1, как в макете? С теми же товарами, картинками и ценами?

[Tsimur_S]

Treniki: да, текст можете менять на рыбу, по желанию. цены от балды.

[Александр Алексеев]

Treniki: Вообще корзина обычно это большая форма, поэтому в блоке "регион доставки" варианты это элементы формы, поэтому делать их надо input[type=radio]

[Артем]

Treniki: да, если явно не было оговорено другое