Интернет- магазин Швейной фабрики ООО «Подиум»
Сайт поддерживается компанией «Дивасофт».
Компания ООО «Подиум» занимается продажей верхней женской одежды оптовым покупателям. К нам они обратились, ещё не имея ни логотипа, ни даже названия, с задачей создать простой и понятный интернет-магазин.
Единственным требованием к дизайну были белые блоки на бежевом фоне. Всё остальное компания оставила на наше усмотрение. Поэтому в качестве основы используем неяркую текстуру. Вся информация будет выводиться в светлых блоках.
На первом этапе рисуем макеты основных разделов сайта и согласовываем их с заказчиком.
![Рисуем макеты, ищем лучшее расположение блоков, подбираем цвета Макеты основных страниц](/upload/medialibrary/862/8624ae29c66cbdcf51755bd6040d8921.png)
Согласно техническому заданию на главной необходимо разместить меню каталога и слайдер с новинками. Пробуем несколько решений и предлагаем заказчику различные варианты макета.
![Предлагаем заказчику разные варианты решения главной страницы Макеты главной страницы](/upload/medialibrary/efe/efe3697f9e3bd494b35aeea0c97e9710.png)
Но в результате приходим к неожиданному решению, отказываемся от слайдера и размещаем большое изображение с вступительным текстом.
![Наконец определяемся с внешним видом главной страницы Главная elpodio](/upload/medialibrary/9b4/9b419406522bea01de425355b5680c25.png)
После утверждения макетов приступаем к вёрстке типовых страниц. В шапке сайта размещаем логотип, корзину, ссылки на вход, регистрацию. При этом на главной странице верхушка будет выглядеть немного иначе. Пока определяемся со стилями, заказчик разрабатывает логотип и приносит готовый вариант.
![Пробуем разные варианты фирменного логотипа Логотип компании Подиум](/upload/medialibrary/fa3/fa3347462e72d48b202423909d581ddd.png)
Верстаем каталог продукции. На странице «Коллекция» отображаем шесть основных категорий. Их сортировка задаётся в административной панели битрикс. Предусматриваем, что изображения могут быть разного размера, выводим их в блоках фиксированной высоты с подписями. На каждое изображение средствами битрикс накладываем водяной знак компании.
![Выводим шесть основных категорий одежды Страница коллекция](/upload/medialibrary/22f/22feea3ec9a05deb4e1be1961b912d4a.png)
Внутри категорий выводим фильтр по характеристикам. Используем стандартное средство битрикс — «Умный фильтр». Он помогает покупателю сузить поиск и быстро найти нужное. Для публикации товаров используем те же блоки, что и для категорий. Дополнительно отображаем основные характеристики, название, цену и кнопку «Купить».
![Оформляем страницу категории, в верхней части отображаем умный фильтр Страница категории](/upload/medialibrary/b96/b96bb8f82e81f3e4c4e17b682be5e976.png)
Оформляем отдельный товар. В правой части основного контента располагаем галерею изображений. Используем скрипты, чтобы увеличивать изображение при наведении. В левой части публикуем подробные характеристики и описание. Для оформления заказа пользователю необходимо выбрать конкретный размер или весь размерный ряд. Так же со страницы товара есть возможность задать вопрос с помощью формы в модальном окне и добавить позицию в избранное. В нижней части, под описанием, выводим два слайдера: один с цветовой гаммой изделия, другой — с недавно просмотренными товарами. Цветовая гамма изделия — это торговое предложение для каждого товара. В блоке выводятся позиции и с совпадающим артикулом.
![Оформляем вывод товара, подключаем скрипты увеличения изображения и галереи Страница товара](/upload/medialibrary/0c7/0c7081e55ece1335073fd32215f6a0c8.png)
Прорабатываем процедуру оформления заказа. После выбора размера и нажатия кнопки «В корзину» отображаем предварительное окно добавления. В нём пользователь может изменить количество заказываемого товара, удалить отдельные позиции или (при отсутствии нужного количества на складе) оформить дополнительные изделия под заказ. Те же действия можно совершить непосредственно из корзины в личном кабинете.
![Модальное окно добавления в корзину и сама корзина пользователя Добавление в корзину](/upload/medialibrary/2d7/2d71e47722f598541d46280162d6a6e4.png)
В дальнейшем, во время оформления заказа, пользователь может выбрать тип плательщика: физическое или юридическое лицо. И, в зависимости от этого, заполнить определённые поля, если они не были заполнены раньше — во время регистрации или в личном кабинете. Так же покупатель выбирает способ доставки и оплаты. После оформления заказа на указанную почту приходит уведомление с порядком дальнейших действий.
Поступивший заказ обрабатывается системой битрикс. Администратор сайта может отредактировать его. Все изменения, произведённые на сайте, отображаются в 1С и наоборот.
![На страницах оформления заказа пользователь заполняет обязательные поля и подтверждает покупку Оформление заказа](/upload/medialibrary/f71/f71b4869c41b5789f5a4141cda03594d.png)
Приступаем к разработке личного кабинета. Если пользователь авторизован, вход туда доступен из шапки сайта. На страницах, слева, располагаем внутреннее меню. Из личного кабинета покупатель может редактировать содержимое корзины, осуществлять быстрый доступ к избранным товарам, а также следить за ходом выполнения текущих заказов. Если заказ получает статус «Выполнен», он переносится на страницу «Архив».
![Из личного кабинета доступно изменение регистрационной информации, просмотр избранного и редактирование корзины Личный кабинет пользователя](/upload/medialibrary/cd8/cd8f920aeddf6a1631e69f561cb53e75.png)
Верстаем и программируем раздел «Вопрос-ответ». Здесь будут содержать ответы на часто задаваемые вопросы. Любой посетитель сайта может заполнить форму и отправить сообщение. Администратор получит уведомление на электронную почту. Также пользователи могут заказать звонок, нажав на соответствующую ссылку в верхней части страницы и заполнив предлагаемые поля.
![Все всплывающие окна оформляем в едином стиле Формы вопроса и заказа звонка](/upload/medialibrary/b3c/b3c86c4163e95500325cb7890da3e7ce.png)
Оформляем оставшиеся типовые страницы сайта: «О нас», «Новости», «Как купить», «Оплата и доставка», «Контакты». Размещаем требуемую информацию и устраняем погрешности вёрстки в различных браузерах. Кстати, в техническом задании была заявлена поддержка IE версии 8.0 и выше. И мы это сделали.
![В созданном нашей студией дизайне оформляем оставшиеся разделы. Важно, чтобы они выглядели одинаково во всех браузерах Статичные страницы elpodio](/upload/medialibrary/da4/da4b7abdf1258419ab6c0012df8e62f0.png)
Для ООО «Подиум» мы разработали полноценный интернет-магазин с синхронизацией с 1С и уникальным дизайном. Компания получила готовый продукт под ключ и осталась сотрудничать с нами в дальнейшем.