77
7
sort
int(11)
Номер сортировки товара
в его разделе, чем ниже
номер, тем выше позиция
товара в списке
8
name
varchar(255)
Название товара
9
preview_picture
int(18)
Картинка которая
отображается в карточке
товара в общем списке
каталога
10
preview_text
text
Текст который дополняет
данную карточку в общем
списке
11
detail_picture
int(18)
Детальная картинка
отображающая в самой
карточки товара
12
detail_text
text
Полный текст
описывающий товар
13
searchable_conte
nt
text
Дополнительные
текстовые сведенья о товара
14
xml_id
varchar(255)
Идентификационный
номер товара, как правило
необходим для интеграции с
1С, генерируется битриксом
или передаётся при выгрузке
из 1С
15
code
varchar(255)
Символьный код товара,
как правило необходим для
вывода названия в url
страницы товара, всегда
записывается на латинице
Совокупность этих четырех таблиц обеспечивает основную работу
интернет магазина. Данные таблица работают на сервере баз данных MySQL,
под управлением phpMyAdmin. Это только малая часть баз данных
поддерживающие работу модулей и в целом работу ИМ.
78
2.3.3. Структурная схема пакета (дерево вызова программных
модулей)
Почти каждый сайт состоит из двух частей, это серверная часть и
клиентская. Клиентская часть является интерфейсом взаимодействия с
клиентом, то есть то что мы видим, заходя на любой сайт, меню, формы,
кнопочки. Серверная часть является же функциями или модулями служащими
для взаимодействия интерфейса с базой данных, то есть для расчетов каких-
либо действий и записи их в базу данных. Структурная схема пакета показана
на рисунке 15.
Рис. 15. Структурная схема пакета
В таблице 12 описаны основные компоненты используемые в разработке.
Таблица 12
Описание компонентов
№
п/п
Название
компонента и
функция его
вызова
Назначение компонента
Корзина:
sale.basket.basket
Одностраничный компонент отображает список
товаров, отправленных пользователем в
корзину. Товары в корзине могут быть
79
отложены и будут храниться, либо удалены из
корзины, также пользователь может перейти к
оформлению заказа. Компонент стандартный и
входит в дистрибутив модуля.
Заказы:
sale.order.ajax
Этот компонент служит для управления
заказами клиентов магазина. С помощью этого
компонента вы можете:
создавать заказы
просматривать заказы на товары и
услуги магазина
удалять и отменять заказы
изменять состояния заказов и их
статусы
Регистрация:
main.register
Компонент позволяет настроить форму
регистрации на сайте:
установить, какие параметры будут
предложены пользователю для
заполнения, какие из них будут
обязательны для заполнения
настроить ЧПУ
установить настройки кеширования
регулировать дальнейшие переходы
пользователя по страницам сайта
после регистрации: по ссылке в
параметре backurl или на страницу
окончания регистрации и т.д.
Каталог: catalog
Комплексный компонент осуществляет вывод
полного каталога товаров из определенного
инфоблока. Его функциональность объединяет
возможности нескольких одностраничных
компонентов: фильтра, компонента сравнения,
вывода элементов раздела, топа элементов,
связанных элементов и др. Расположив
комплексный компонент на странице, можно
получить полнофункциональный каталог.
Новости: news
Комплексный компонент позволяет создать
80
новостной раздел на сайте. Доступен просмотр
детальной информации, списка элементов,
настройка экспорта в rss, организация
голосования за новости (или другие элементы
инфоблоков), настройка отзывов, вывода
материалов по темам, настройки ЧПУ и многое
другое. Компонент содержит 3
шаблона: .default, web20 и flat.
Отзывы к товару:
catalog.comments
Компонент служит для отображения формы
добавления комментариев к товару и обычно
размещается на странице с детальной
информацией о товаре.
Фильтр:
catalog.smart.filter
Компонент подготавливает фильтр для
выборки из инфоблока и выводит форму
фильтра для фильтрации элементов.
Компонент должен подключаться перед
компонентом вывода элементов каталога,
иначе список элементов фильтроваться не
будет.
2.3.4. Описание программных модулей
Блок-схема формирования каталога товаров показана на рисунке 16.
81
82
Рис. 16. Блок-схема создания каталога и товаров
Менеджер или администратор, после входа в админ панель, начинает
работу с каталогом. Первым делом проверяется наличие необходимой
категории, если нет категории она создается, после идет переход в раздел, если
необходимого раздела нету, его так же создают, по тому же принципу, как и
категорию, после того как мы создали или вошли в нужный раздел мы
добавляем непосредственно товар. Все действия происходят через работу с
экранной формой, за вывод которой и функционал отвечает компонент
«Каталог».
2.4. Контрольный пример реализации проекта и его описание
Все действия на сайте как правило начинаются с его главной страницы.
На главной странице в основном представлена краткая информация о том чем
занимается компания, информация о разделах и какие-либо промо баннеры. В
данной выпускной квалификационной работе на главной странице отображено
меню каталога, баннер с промо предложение, блоки с товаром, новости и
акции, а также меню с переходами на соответствующие разделы и страницы
сайта. Все это можно увидеть на рисунке ниже, меню с ссылками на другие
страницы и на сам каталог, выделены красным.
83
Рис. 17. Главная страница сайта и пункты меню
Пользователи сайта могут с ним взаимодействовать не производя
авторизацию, но совершить заказ могут только авторизированные
пользователи, поэтому первым делом что мы сделаем, это авторизируемся.
Форма авторизация показана на рисунке 18.
Рис. 18. Форма авторизации пользователя
84
Как мы видим на рисунке, в этой форме так же есть еще две ссылки для
вызова формы регистрации и восстановления пароля, выглядят они следующим
образом:
Рис. 19. Форма восстановления пароля и форма регистрации
После того как мы авторизировались, можно смело переходить в каталог
и выбирать необходимы товар, один из разделов каталога с превью товаров
представлен на рисунке 20.
Рис. 20. Раздел каталога с товарами
85
Как мы видим кроме меню каталога, в разделе добавляется фильтр по
товару, а также вверху есть возможность сортировки товара по разным
критериям.
Сам товар мы можем добавить в корзину двумя способами, первый
способ это по кнопке «В корзину» (можно увидеть на рисунке 20) в превью
карточки товара, но в этом случае мы не сможем ознакомиться с
характеристиками, описанием, галереей и отзывами данного товара. Второй
способ, это перейти в карточку товара, ознакомиться со всей информацией что
есть о выбранном товаре, после чего добавить его в корзину.
Рис. 21. Карточка товара
После нажатия на «Добавить в корзину» перед нами появляется
диалоговое окно с предложением перейти к оформлению заказа или вернуться к
покупкам.
86
Рис. 22. Попап с выбором дальнейшего шага
После того как товар добавлен в корзину, конпки добавления меняют
свой статус, а именно становятся зеленого цвета и меняется надпись на
«Добавлено». В шапке сайта, у иконки корзины появляется индекс,
показывающий сколько позиций товаров было добавлено. Все это можно
увидеть на рисунке 23.