42
Рисунок 17 – Макет главной страницы
Каталог товаров сайта:
Страница каталога товаров интернет - магазина помимо главных
функциональных частей веб-сайта содержит:
-список поисковых фильтров;
- список товаров с изображением;
Макет страницы каталога товаров интернет - магазина имеет
следующий вид, показанный на рисунки 18.
43
Рисунок 18 – Макет страницы каталога товаров
Карточка товара сайта.
Дополнительные функции страницы интернет - магазина:
- отображение наименования, размера и цены;
- изображение товара;
- описание товара;
- поле для отзывов;
- информативного блока;
- кнопка “В корзину”;
- блока рекомендованных товаров.
Макет карточка товара интернет - магазина выглядит следующим
образом (рисунок 19).
44
Рисунок 19 – Макет страницы карточки товара
Корзина сайта.
Страница корзины содержит следующие функции:
- стандартные функции веб-сайта (шапка, нижнее и главное меню,
подвал);
- блока “Информация”;
- отображение товара;
- отображение цены и кол-ва;
- блока выбора доставки;
- кнопки “Перейти к оформлению”;
- блока общей суммы “Итого”;
Макет корзины интернет - магазина показан на рисунке 20.
45
Рисунок 20 – Макет страницы корзины
3.2. Разработка основных страниц интернет - магазина
На основании проведенного анализа бизнес – процессов предприятия,
спроектированной БД, разработанного макета сайта и выбранной системы
управления содержимым CMS «Joomla», получены следующие основные
страницы веб-сайта:
- Главная страница;
- Карточка товара;
- Страница каталога товаров;
- Корзина.
Рассмотрим страницы веб-сайта более подробно:
46
Главная страница веб-сайта интернет – магазина создана в
соответствии с разработанным макетом страницы и имеет вид, показанный
на рисунке 21.
Доменное имя (адрес в сети Интернет) для интернет - магазина:
http://strelok-rus.ru/. Листинг странички показан в приложении 2.
Рисунок 21 – Главная страница веб-сайта интернет – магазина
На главной странице сайта можно найти следующие элементы:
- опция «Обратный звонок»;
- кнопка «Как купить»;
- кнопка «Карты»;
- кнопка «Самовывоз»;
- кнопка «Написать нам»;
- кнопка «Корзина»;
- кнопка «О нас»;
- кнопка «Вход»;
- главное меню;
- поле поиска товаров;
47
- блок товаров «Рекомендуем»;
- блок товаров «Популярные товары»;
- галерея изображений;
- вход на страницы в социальных сетях;
- нижнее меню.
Разберем некоторые важные функциональные элементы веб-сайта.
Опция “Обратный звонок” нужна для заказа звонка покупателю. Нажав
на нее, откроется окно, которое показанно на рисунке 22.
Рисунок 22 – Открытие кнопки «Перезвонить мне»
Кнопка “Написать нам” необходима для отправки сообщения
сотрудникам интернет - магазина. Нажав на нее, откроется форма, которая
показана на рисунке 23.
Рисунок 23 – Открытие кнопки “Написать нам”
Кнопка “Корзина” необходима для перехода клиентом на страницу
просмотра товаров магазина, добавленных к выбранной покупке.
Двойное меню является средством навигации по страницам веб-сайта
магазина оружия. Для удобства пользователя меню сайта делится на
категории и разделы товаров. Данная функция нужна для быстрого поиска
определенного товара.
48
Галерея изображений сайта играет информативную роль, тут
отражаются акции, конкурсы и другие мероприятия, проводимые магазином.
Изображение иконок в виде известных значков популярных
социальных сетей (в контакте, одноклассники и др.), служат ссылками для
входа клиента в группы интернет-магазина в социальных сетях.
Блок товаров “Рекомендуем” необходим для отображения товаров,
которые, на взгляд руководства интернет - магазина, могут понравится
покупателям.
Блок “Популярные товары” отображает изображение конкретных
товаров, пользующихся спросом у покупателей магазина.
Нижнее меню необходимо для информирования посетителей веб-
сайта, по поводу качества товаров, имеющихся в магазине гарантиях, о
способах оплаты покупки, доставки и т.д.
Страница каталога товара интернет – магазина сделана в соответствии
с разработанным ранее макетом каталога товара и имеет следующий вид,
показанный на рисунке 24. На данном рисунке был вынесен только
горизонтальный вид товаров на примере пневматических пистолетов.
На странице каталога товаров представлены имеются основные
элементы:
- кнопка «Купить»;
- главное меню;
- поле поиска товаров;
- вход на страницы в социальных сетях;
- фильтры сортировки товаров;
- кнопка «В наличии»;
- галерея изображений;
- отображение товаров;
- нижнее меню.
49
Рисунок 24 – Страница каталога товаров интернет – магазина (на примере
пневматических пистолетов)
Основные функциональные элементы имеются на каждой странице
сайта. Они были описаны ранее, поэтому покажем функции, которые
присущи только данной веб-странице:
Отображение товаров необходимо для ознакомления пользователя с
ассортиментом интернет - магазина. Так, отображение товаров происходит на
основании выбранного пункта меню сайта или применения фильтра
отсортировки товаров.
Фильтры необходимы для упрощения поиска товаров клиентом. Так в
фильтрах можно задать нужный размер, цвет, бренд, производитель и т.д.
50
Страница карточка товара веб-сайта магазина реализована в
соответствии с разработанным ранее макетом и имеет следующий вид
(рисунок 25 и 26).
Рисунок 25 – Страница карточки товара веб-сайта магазина (на примере
пневматического пистолета)
Рисунок 26 – Страница карточки товара веб-сайта интернет – магазина (на
примере ножа)
51
На веб-странице карточки товара показаны следующие основные
элементы:
- кнопка «Вход»;
- главное меню;
- поле поиска товаров;
- блок с краткими характеристиками товара;
- кнопка «Купить»;
- информационный блок;
- блок описание товара;
- кнопка «Корзина»;
- изображение товара с нескольких сторон;
- блок «Вместе с этим товаром покупают».
Так как основные функциональные элементы имеются на каждой
странице магазина, поэтому рассмотрим функции, которые будут присущи
только данной странице:
Изображение (демонстрация) товара с нескольких видов.
Функция отображения товара с разного вида необходима для более
полного представления товара.
Блок кратких характеристик товара.
Необходим для отображения наименований товаров, которые имеются
в наличии.
Кнопка “Купить”.
Кнопка “Купить” предназначена для совершения покупки клиентом, а
именно отправки товара в корзину заказов сайта.
Информационный блок.
Данный блок необходим для отображения информации касающихся
вопросов гарантии, оплаты, доставки и т.д.
Блок описания товара.
Блок описания товара необходим для детального описания товара,
информирующего пользователя о производителе, функциональных