Интернет-магазин «Горячие футболки»

27работ 11работ

Ссылка:

Задача: Разработать интернет магазин футболок с гибким конфигуратором, позволяющим выбрать любимый цвет, размер, модель, сторону нанесения и изображение.

Интернет-магазин «Горячие футболки»Главная страница

Главная страница

Главная страница — во истину главная: именно здесь располагаются все изображения, футболки, примерочная, конфигуратор и корзина заказов.

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

Для того, чтобы примерить понравившееся изображение, просто нажмите на него (пусть будет Че Гевара).

Выбор цвета

Выбор цвета

Самое сложное в смене цвета футболки — выбрать понравившийся, после этого остаётся только нажать на него ;-)

Как вы заметили, категории изображений могут отображаться списком =)

Выбор модели

Выбор модели

Модель и размер футболки выбираются из списков, каждой модели соответствуют свои размеры.

Кстати, система запоминает выбор пользователя, так что при последующих посещениях вам не нужно будет делать лишних движений :-)

Обратите внимание, под списком моделей отображается цена текущей футболки и кнопка для добавления в корзину. Цена, по секрету говоря, зависит только от модели.

Перемещение в примерочной

Перемещение в примерочной

Вы уже заметили, что в примерочной футболкам немного тесновато?

Ничего страшного, их можно перемещать, чтобы посмотреть полностью.

Вот детская футболка стоит 450 рублей, к примеру =)

Корзина товаров

Корзина товаров

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

На каждую футболку в корзине можно нажать и посмотреть изображение «в полный рост» (следующий скриншот).

Просмотр готовых футболок

Просмотр готовых футболок

В таких красивых окошках отображаются готовые футболки.

Окошки функционируют как в Windows, а дизайн имеют индивидуальный.

Оформление заказа

Оформление заказа

А так выглядит оформление заказа. Всего 7 полей и все, кроме примечания, обязательны для заполнения.

Чтобы не ошибиться при заполнении, телефон, например, вводится по стандартной маске.

А если вы всё же что-то забудете и попытаетесь завершить оформление, мы вам подскажем, что не так ;-)

P. S.: Всякие Контакты, Доставки и Оплаты посмотрите на сайте — они тоже очень красивые и удобные, но уже хватит наверное здесь писать ;-).

Над проектом работали: