3 НАСТРОЙКА ВНЕШНЕГО ВИДА И ФУНКЦИОНАЛА ИНТЕРНЕТ-МАГАЗИНА

Прежде, чем добавлять товары на сайт, создавать варианты оплаты и доставки товара, рекомендуется установить шаблон сайта, чтобы по мере заполняемости электронного магазина блоками меню и информацией можно было наблюдать как изменяется внешний вид сайта в конфигурации с данным шаблоном. Установка шаблона производится через меню «Установить/Удалить». Архив с шаблоном, который используется для данного сайта имеет название «siteground-j15-18.zip». После установки в меню «Менеджер шаблонов» нужно сделать активным новый шаблон, убрав с активного положения шаблон, установленный по умолчанию.

Для придания сайту интернет-магазина более приятного внешнего вида нужно удалить рисунки с рекламой и соответствующие ссылки на другие сайты с интернет-магазина. Это как правило ссылки на сайты разработчиков Joomla. Комбинацией клавиш «Ctrl+U» открывается код той страницы сайта, на которой мы находимся на данный момент и там с помощью комбинации клавиш «Ctrl+F» открывается меню поиска, в котором вводится интересующая вас текстовая информация, отображаемая на странице сайта. После обнаружения искомого элемента в коде страницы мы ищем его класс либо другие данные, используемые в языке HTML. После этого нужно использовать поиск в корневой папке интернет-магазина «im» заданного элемента, в результате чего меню поиска сделает ссылку на тот либо те документы, которые отвечают за вывод данной информации (ссылок на сайты разработчика и картинок с рекламой) на страницы сайта электронного магазина. В данном случае этим файлом является «index.php», в котором проискодит интеграция сразу двух языков программирования: HTML и PHP. После удаления части кода файла, отвечающей за вывод картинок и ссылок на сайт, все ненужные элементы исчезнут со страниц интернет-магазина.

Теперь можно приступать к формированию интернет-магазина. В Joomla заходим в «Менюглавное менюсоздать новоеVirtuemart», называем данное меню «”Электрон” - каталог», и устанавливаем его в активную позицию, выбрав «по умолчанию». Данное меню будет хорошо смотреться вверху в позиции «user3», а сейчас оно находится слева в позиции «left». Чтобы перемес-тить его, нужно зайти в «Менеджер модулей», в списке всех модулей найти «mainmenu» и поменять его позицию на «user3».

Ещё в позицию «user3» я помещу меню, которое назову «О нашем магазине», однако перед этим нужно создать информационный материал в текстовом виде, чтобы он отображался на сайте, когда посетители захотят перейти по ссылке на информацию о магазине. Для этого заходим в «МатериалМенеджер материалов» и заполняем поле для ввода текста необходимой информацией. Для удобства новый материал рекомендую назвать так же, как и меню, потому что в ситуациях, когда на сайте много материала, можно сделать ошибку и потерять много времени на её исправление.

Теперь установим модуль «mod_virtuemart_1.1.9.j15.zip», который будет отвечать за навигацию на сайте интернет-магазина. Затем в «Менеджер модулей» включим его и займёмся его настройкой. В качестве заголовка укажем «Каталог», вариантом отображения выберем «JSCook», который даёт представляет собой меню главных категорий товаров со всплывающими подкатегориями, и сделаем вариант отображения вертикальным, так как данный модуль мы установим в позицию «left».

Также я установлю модули, отвечающие за поиск товара в интернет-магазине, за авторизацию пользователей на сайте и за работу покупателей с корзиной. Заострять внимание на деталях установки и редактирования модулей я не буду, так как все этапы аналогичны этапам установки и редактирования главного модуля Virtuemart.

После того, как работа с блоками меню завершена посредством установки модулей, можно приступать к основным настройкам интернет-магазина через компоненту Virtuemart. Работать мы будем только с двумя вкладками: «Общие настройки» и «Сайт».

В первой вкладке я настроил максимальную и минимальную длину комментария к товару, который может оставить покупатель. Обязательно должна стоять галочка на пункте «Показывать цены», иначе вместо интернет-магазина получится просто каталог товаров без цен на них. Я сделал активным пункт «Показать стоимость упаковки?» для того, чтобы после добавления в корзину одного и того же товара в большом количестве подсчитывалась общая цена за всё количество в целом, а не отдельно по каждой единице товара. Также я отключил требование об активации новых учётных записей для того, чтобы регистрация пользователей на сайте проходила проще и быстрее, ведь если регистрироваться будет большое количество покупателей, можно даже не успевать активировать все учётные записи. Последнее, что нас интересует в этой в кладке - опция «Проверять наличие на складе?», которую я отключил, чтобы она не мешала, а при отсутствии товара на складе менеджер может уведомлять покупателя о более поздних сроках его пос-тавки, либо о его отсутствии в данный момент.

Во второй вкладке для улучшения внешнего вида страниц интернет-магазина я убрал кнопки «PDF», «Рекомендовать другу» и «Вид для печати», а также убрал панель навигации вверху списка товаров. Сделал сортировку товара по умолчанию по ценовому критерию, что даёт возможность посетителям сайта просматривать товары в удобном виде: от самого дешёвого товара (вверху) выбранной им подкатегории до самого дорогого (внизу). Из доступных полей сортировки товара я оставил три: «Название товара», «Цена» и «Последние поступления». Очень важно сделать активным опцию «Показывать количество товаров?», так как она отвечает за вывод информации о количестве товаров в каждой категории и подкатегории. Так как шаблон, который был установлен для нашего сайта в Joomla, преимущественно состоит из белого и зелёного цветов, шаблон для самого интернет-магазина также будет установлен зелёный. Для этого в папку по пути «z:homelocalhostwwwimcomponentscom_virtuemart hemes» нужно разархивировать «vm_green.zip» и всё содержимое шаблона будет доступно для использования. Затем базовый шаблон «default» меняется на только что установленный, после чего остаётся его настроить. Путём экспериментирования со всеми доступными опциями я решил оставить только две из них, так как при отсутствии остальных сайт выглядит не таким загромождённым и более простым для навигации. Это опция «Use Ajax to add, update or delete products from the cart?» и опция «Show the Add-to-cart Button on the product list?», которая означает, что на страницах, на которых отображается товар, будет выводиться опция «Добавить в корзину» для каждого товара.

Вернувшись на вкладку настроек «Сайт», я включил динамическое изменение размеров для мини-изображения и установил размеры мини-изображения: 250х250 пикселей.

Допустим, что данный интернет-магазин рассчитан на реализацию своего товара по всей Беларуси. Для того, чтобы было более удобно работать с покупателями, полезно будет знать из какой они области. Для этого при регистрации у покупателя в регистрационной форме должна быть обязательная для заполнения графа «Регион/Область», в которой должны быть доступны для выбора все области Республики Беларусь. По умолчанию в Virtuemart есть только список стран, а регионы и области отсутствуют. Для создания регионов нужно пройти в «НастройкиСписок странBelarusСписок регионов» и добавить все 6 областей. После этого в настройках регистрации пользователей создаётся графа «Регион», в которой для выбора будут доступны все области Республики Беларусь при условии, что в графе «Страна» будет выб-ран вариант «Belarus».

В интернет-магазине обязательно должна быть реализована мультивалютность, первым принципом которой является возможность указания цены товара в разных валютах. Этот принцип очень важен, так как часть товара можно покупать у поставщиков за доллары, часть за русские рубли и т.д.. Оплата товара из нашего интернет-магазина будет производиться покупателями в белорусских рублях (специальная лицензия на приём оплаты в ненациональной валюте стоит больших денег, а данный способ ведения коммерческой деятельности предполагает небольшие затраты), поэтому важно указать за какие деньги мы купили тот или иной товар, чтобы при изменении курсов не было денежных потерь со стороны продавца и не приходилось каждые сутки вести пересчёт стоимости каждого товара в белорусские рубли (это будет делать за нас модуль конвертации валют).

Нашей национальной валюты нет среди валют, доступных в Virtuemart, поэтому придётся её создать по аналогии с созданием регионов, только в меню «НастройкиСписок валют». После этого в меню «Магазининформация о магазине» нужно выбрать главную валюту, в которой будут представлены товары на сайте (белорусский рубль), также дополнительные валюты (американский доллар, евро и русский рубль), чтобы можно было осуществлять ввод цен в тех валютах, в которых был произведён расчёт с нашими поставщиками.

Вторым принципом мультивалютности является отображение цен на товары в нескольких валютах по выбору покупателя. Для реализации этого принципа на сайте интернет-магазина потребуется установить модуль конвертации валют «mod_virtuemart_currencies_1.1.9.j15.zip». Нужно задать курсы конвертации валют на сегодняшний день, поэтому после настройки модуля нужно создать файл с любым названием, я назвал его «convertHARD.php», и вставить в его содержимое код, который будет осуществлять конвертацию между всеми выбранными в модуле валютами.

/* currency difinition */

$currency[EUR] = $eur_curr = 11300;

$currency[USD] = 8700;

$currency[RUB] = 277;

$currency[BYR] = 1;

/* end currency difinition */

Данная часть кода отвечает за связь между валютами. За единицу взят белорусский рубль, 1 русский рубль эквивалентен 277 белорусским рублям, 1 доллар составляет 8700 белорусских рублей, а 1 евро - 11300 белорусских рублей. Данные конвертации валют взяты 12.04.2013 г. на сайте http://finance.tut.by/kurs.html.

Изначально в Virtuemart все цены, содержащие более 7 знаков до запятой, автоматически приводятся к виду «9999999». Этот нюанс нужно исправить, ведь в интернет-магазине будут присутствовать товары и дороже 10 000 000 бел. руб.. Но на самом деле это не является проблемой Virtuemart. Эта задача нужно решается следующим образом: 1) нужно прописать в адресной строке браузера «localhostToolsphpmyadmin»; 2) выбрать базу данных интернет-магазина; 3) Найти таблицу под названием «jos_vm_product_price» и выбрать её; 4) После открытия таблицы вверху нужно выбрать вкладку «Structure»; 5) Нужно найти колонку «field» и строку «product_price». Видно, что тип таблицы «decimal, (12,5)» - это значит, что максимальное значение символов равняется двенадцати, семь из которых находятся до запятой, а пять - после; 6) Теперь в колонке «action» напротив этой строки выбираем «Редактировать»; 7) В строке «Length/Values1» нужно исправить значение «12,5» на любое другое (я исправил на «15,2»)и сохранить изменения.

Чтобы улучшить внешний вид сайта, я доработал модуль корзины, путём замены изображения с серой тележкой на изображение с зелёной корзинкой. Для этого я сохранил второй файл под названием «menu_logo.png», а затем заменил первый файл, который назывался аналогично, вторым по пути «z:homelocalhostwwwimcomponentscom_virtuemartshop_imageps_image», после чего в модуле корзины стал выводиться рисунок с зелёной корзинкой.

Также я видоизменил модуль выбора валют. Для внесения каких-либо изменений в данном модуле я сделал следующее: в файл «mod_virtue-mart_currencies.php» по пути «z:homelocalhostwwwimmodules mod_virtuemart_currencies» в строку <input type="submit" name="submit" value="<?php echo Выбрать валюту ?>" /> </div> я добавил «class="button123"», то есть присвоил кнопке, отвечающей за выбор отображаемой валюты, класс. Также старая надпись была заменена на «Выбрать валюту», однако для того, чтобы эта надпись правильно отображалась на кнопке, необходимо сохранить редактируемый файл в кодировке «UTF-8». Следующим шагом являлось присвоение различных условий классу «class="button123"» в файле «theme.css» (файлы формата «.css» называются каскадными таблицами стилей), который находится по пути «z:homelocalhost wwwimcomponentscom_virtuemart hemesvm_green». В этом файле я прописал следующее:

input.button123 {

border : solid 3px #64b000;

font-weight : bold;

font-size : 11px;

padding: 4px;

margin: 5px;

color: #ffffff;

background-image: url( images/menu_t.jpg );

}

Первая строка означает, что команде «input» с классом «button123» присваиваются условия, находящиеся в фигурных скобках. Вторая строка «border : solid 3px #64b000;» означает вывод сплошной (solid) рамки толщиной 3 пикселя (3px) тёмно-зелёного цвета (его код: #64b000) вокруг самой кнопки выбора валюты. Третья строка означает, что шрифт надписи на кнопке будет жирным. Четвёртая отвечает за размер шрифта (14 пикселей). Команда «padding: 4px» означает, что внутренний отступ кнопки (от её границ до надписи внутри неё) равен 4 пикселям. А команда «margin: 5px» значит, что наружный отступ (от рамки до соседних объектов) равен 5 пикселям. Надпись «color: #ffffff» говорит, что цвет надписи на кнопке выбора валюты будет белым. И последняя строка, в которой прописано «background-image: url( images/menu_t.jpg )», значит, что в качестве фона кнопки выбора валюты будет выводиться изображение «menu_t.jpg», такое же, как и на названии каждого модуля, расположенного на сайте.

Последнее, что я сделал в этом модуле, это выровнял содержимое модуля по центру. В указанном выше файле «mod_virtuemart_currencies.php» перед строкой «<!-- Currency Selector Module -->» вывода поля для выбора валюты и кнопки выбора валюты я прописал «<div style="text-align:center;">». Для того, чтобы всё отображалось так, как задумано, нужно закрыть тег, прописав «</div>» после «value="<?php echo Выбрать валюту ?>" />».

Последний модуль «mod_frontpage_categories.zip» является устаревшим (он разрабатывался под старые версии Joomla и под версию 1.5 не подходит), для его работоспособности необходимо включить интеграцию с плагином старых модулей Legacy. Этот модуль я добавил в позицию «debug», находящуюся в самой нижней части сайта. Я сделал так, чтобы 6 категорий отображалось в строке, а затем в файле таблиц каскадных стилей создал рамку и внешние отступы для данного модуля.

Все изменения и доработки во внешнем виде и функционале на данном этапе завершены. Также внешний вид сайта будет дорабатываться по мере добавления товара на сайт интернет-магазина.