42
Рисунок 17 – раздел “Товары”.
На вкладке “связи” необходимо указать в каких категориях товар будет
присутствовать и в каких магазинах. На этом добавление простого товара
заканчивается.
Более сложным товаром является пицца. Данный товар обладает двумя
опциями: размер и тип теста. Оба параметра в перспективе будут влиять на
конечную цену товара, но параметр “тип теста” на этапе запуска магазина, на цену
влиять не будет. Для того, чтобы работать с опциями, необходимо их создать.
Сделать это можно в разделе Каталог – Опции (рисунок 18).
Рисунок 18 – создание опций товара.
43
После создания опций, их нужно выбрать в самом товаре (рисунок 19).
Рисунок 19 – добавление опций в товаре.
Опция “Диаметр” позволяет выбрать товар (пиццу) в одном из 3
предложенных размеров 26 см, 30см и 40 см. Диаметр будет влиять не только на
размер, но и на вес, и на цену. К каждому размеру необходимо указать
добавочную стоимость и вес товара. Значения должны быть именно добавочными
т.е. если пицца минимального диаметра 26 см стоит 220руб., то эта же пицца
диаметра 30 см будет отличаться по цене на 130 руб., а в весе на 340гр. Эти цифры
и указываются в опциях товара, а уже в самом магазине, посетитель увидит
конечную стоимость и вес каждого диаметра.
Помимо товаров, в магазине будут присутствовать обычные материалы или
статьи. Их добавление происходит в разделе Каталог – Статьи (рисунок 20).
Добавление статьи не занимает много времени, благодаря интуитивному
интерфейсу, напоминающему работу в продуктах MS office, с тем лишь отличием,
что есть возможность увидеть и работать с исходным кодом материала.
Рисунок 20 – добавление статьи.
Работа с меню осуществляется в разделе Каталог - Категории, здесь можно
создать новые пункты меню и расположить их в нужном порядке.
44
После добавления материалов, наполнения контентом и их публикации на
страницах, все еще необходимо выполнить массу работы по адаптации шаблона к
требованиям заказчика. Вид первоначального шаблона с новыми товарами
представлен в приложении 6.
3.5 Проработка внешнего вида
Внешний вид магазина, или его графическая оболочка — это полноценное
лицо ресурса, то, что в первую очередь видят посетители, поэтому оттого
насколько данный этап будет качественным, напрямую будет складываться
соответствующее мнение клиентов. Для выполнения данного этапа потребуется
исходный файл графической программы в которой разрабатывался дизайн макет
и конечно навыки работы с самой программой.
Для замены графических материалов первым делом следует поискать их в
разделе Система – Настройки – Изображения, таким образом определить
являются они частью структуры шаблона или контента. В случае, когда в данном
разделе их нет, самым простым способом поиска будет встроенный инструмент
инспектирования элементов в современных браузерах. Данный инструмент
можно найти, нажав по пустому месту страницы открытой в браузере левой
кнопкой мыши и выбрав соответствующий пункт. В зависимости от браузера, он
может называть по-разному. В браузере Opera, данный пункт называется
“Просмотреть код элемента” (рисунок 21). В браузерах Chrome и Yandex,
инструмент называется “Проинспектировать элемент”.
Рисунок 21 – Нахождение инструмента в браузере Opera.
Используя данный инструмент, можно найти все связи элемента, его
свойства, характеристики и упоминания в файлах магазина. Пример
использования инструмента приведен на рисунке 22.
45
Рисунок 22 –инструмент “Просмотреть код элемента”
При обнаружении нестыковок между необходимой структурой и
шаблоном, конечно же “допиливается” шаблон. Основой всего шаблона является
его структура, которая в свою очередь строится из таблиц или блоков.
Современные шаблоны чаще всего используют блоки. Блочные элементы
задаются тэгом div [27]. Можно обойтись и без его применения, используя
таблицы, но как правило требуется задание различных стилей к разным
элементам. В случае с таблицей, было бы прописывание стиля к каждой таблице
или ее ячейке, поиск ячеек в html коде по тегам <td> и <tr> затруднителен, т.к. их
бывает много и не редки случаи, когда приходится использовать таблицу в
таблице, тогда поиск еще более затруднен.
Элементы div имеют названия для упрощения работы с ними и к каждому
такому элементу можно применять разную таблицу стилей. Например,
выделенный элемент на рисунке 22 имеет название div.head-txt2, он имеет
размеры, расположение относительно других элементов, содержит текст,
настройки его отображения – шрифт, размер, цвет, жирность и расположение
текста относительно границ элемента. Как и использование таблицы в таблице,
возможно использование элементов div один в другом.
46
Другой элемент, не менее важный используется для задания стилей к
текстам, это тэг span. Его работа похожа на div, с той разницей, что div работает с
блоками, а span с текстом. С помощью тэга span можно применять стили,
содержащиеся в css к текстам. Таким образом не требуется прописывать к каждой
строке или слову повторяющий стиль, например, просто выделяющий шрифт
жирным, достаточно указать принадлежность к названию существующего стиля.
Пример – использование span на объекте корзина, текст Ваш заказ:
<span id="cart-total">
<i class="menu-centr-cart"></i>
<span class="hidden-xs">Ваш заказ: 0 (0 руб.)</span>
Применив инструмент инспектирования элементов (рисунок 23), видно, что
описание стиля для данного объекта находится в документе style.css, зайдя в
данный документ, можно легко скорректировать необходимые свойства.
47
Рисунок 23 – инспектирование элемента Корзина.
Таким образом, прорабатывается весь шаблон под существующую
структуру и дизайн макет. Важно к данному этапу иметь готовый и полностью
согласованный дизайн макет, чтобы не делать лишней работы.
3.6 Добавление расширений
Работа с модулями или с расширениями происходит в разделе Дополнения
– Модули. В данном разделе уже имеется масса модулей, используемых в
шаблоне. Все лишние необходимо отключить, одним из немногих действительно
нужных, остался модуль Отзывы покупателей. Для посетителя данный модуль
48
содержит несколько форм (рисунок 24), которые можно заполнить и отправить.
Для разработчика данный модуль (рисунок 25)
предлагает лишь некоторые варианты настроек отображения.
Рисунок 24 – форма Отзывы покупателей.
Рисунок 25 – настройка модуля Отзывы покупателя.
Причем все поля не настраиваемые, их корректировка, возможна только
через инспектирование элемента, но построены они уже под определенную
функцию, т.е. для написания отзыва, поэтому в корректировке не нуждаются. Есть
возможность направления автоматического уведомления на электронную почту
49
при новом отзыве. Отзыв целесообразно публиковать вручную, после его
проверки.
Следующий модуль Обратный звонок. Данный модуль не входит в
изначальные возможности шаблона, поэтому его необходимо доставлять
отдельно. Поиск бесплатных модулей, привел к модулю Feedback PRO [28]. По
сути, модуль не является готовым решением для обратного звонка, но является
конструктором форм обратной связи, т.е. имеет функционал для настройки
любого поля. Настройка модуля представлена на рисунке 26.
Рисунок 26 – настройка модуля Feedback PRO.
Как видно, настройка довольно проста, отправка уведомлений работает
сразу, при условии, что соответствующие настройки отправки почты сделаны в
разделе Система – Настройки – Почта. Рабочий модуль обратного звонка
представлен на рисунке 27.
Рисунок 27 – модуль обратного звонка.
Хорошим примером применения div является категория с пиццами.
Структура каждой оформленной пиццы полностью блочная и привязана к опциям.
Данный функционал уже есть в opencart, но для удобства использования и в угоду
дизайну, потребовалось улучшить внешний вид товара, а также добавить
50
информативности в виде добавочной и итоговой цены. Данные изменения
позволяют приобрести товар буквально в 1 - 2 клика. Изначальный функционал
подразумевает использование элементов radio button и checkbox. Оформление
товара пицца представлено на рисунке 28.
Рисунок 28 – товар пицца.
Помимо оформления, иногда появляется необходимость в визуальных
эффектах, разрабатываемых на java script. На разрабатываемом ресурсе одним из
подобных эффектов, является “перелет” товара в корзину. Данный эффект
позволяет покупателю видеть результат его действий, т.е. покупки и
одновременного перемещения товара в корзину. Для реализации данного эффекта
потребовалось написать две функции. Одна для перемещения товара из просмотра
товара, вторая для перемещения из категории, т.е. покупка сразу. Хранение
скриптов - /catalog/view/theme/chef/javascript/common.js
function addToCart - добавление в корзину из категории
function ButtonCartBay - добавление в корзину из просмотра товара.
Вывод:
Исходя из вышесказанного, следует отметить, что выбранный шаблон для
разрабатываемого интернет-магазина прекрасно подошел по структуре. Подбор
шаблона может занимать существенное время, однако это компенсируется
отсутствием необходимости делать серьезные правки в структуре шаблона. При
51
большом количестве товаров, иногда быстрее вносить их через базу данных, а не
через административную панель. На этапе верстки, наполнения и добавления
расширений, интернет-магазин уже может находится на выбранном домене, это
ускорит индексацию.
4. Размещение интернет магазина в сети интернет
После разработки, интернет магазин или сайт необходимо разместить в
сети интернет, тем самым сделать его общедоступным. На этапе разработки, сайт
может находиться на локальном хостинге или на онлайн хостинге. Удобнее всего,
когда сайт или магазин разрабатываются на том хостинге и домене, на котором
они будут в дальнейшем работать, это позволит не выполнять лишней работы по
переносу сайта и баз данных.
Размещение ресурса в сети интернет происходит в 3 основных этапа:
- Выбор и покупка домена
- Выбор и оплата хостинга
- Перенос на хостинг, сопровождение.
4.1 Выбор домена
Выбор домена не влияет на дальнейшую раскрутку и сопровождение
ресурса, поэтому критерии выбора [29] следующие:
- краткость и произношение
- запоминаемость
- отражение сути или наличие аналогии (тема сайта).
Помимо критериев важно понимать, что домен по сути становится
полноценным брендом и лучше, когда он является названием всего ресурса. В
таком случае его удобнее будет рекламировать и продвигать. Покупатели смогут
без особо труда находить ресурс в сети интернет, зная простое название.
Разберем структуру домена:
Домен – имя ресурса в сети интернет, домены бывают 1,2,3 уровневые.
.ru, .com, .рф, .su – домены 1 уровня
Yandex.ru, bing.com – домены 2 уровня
File.narod.ru, sun.ucoz.ru – домены 3 уровня