Вы экономите время, мы работаем очень быстро.
Широкая система отчетов для владельца магазина.
Много готовых шаблонов дизайна интернет-магазина.
Серьезно снижаем ваши расходы на быстрый старт.

Joomla VirtueMart: установка и настройка интернет-магазина


В этой статье мы рассмотрим создание интернет-магазина на Joomla при помощи расширения VirtueMart. Данный компонент и сопутствующие ему модули и плагины пользуются популярностью при создании онлайн-магазинов в рунете.

Преимущества Virtuemart для интернет-магазинов

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

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

В-третьих, для VirtueMart написано огромное количество расширений для интеграции с российскими платежными сервисами (Робокасса, Яндекс Деньги и т.п.). Причем, многие из этих расширений либо бесплатны, либо стоят очень дешево.

В-четвертых, он полностью русифицирован.

Установка VirtueMart

Итак, для начала переходим на официальный сайт, на страницу скачивания расширения. Там скачаем Virtuemart 3 или версию выше.



1. Скачиваем свежую версию расширения к себе на компьютер.

2. Переходим на страницу локализации, находим русский язык (Russian    (Russian federation)), щелкаем по нему. На открывшейся странице спускаемся в самый низ, нажимаем “Download now” и скачиваем архив на компьютер.

Архив с расширением необходимо разархивировать. В получившейся папке у нас будет три архива: com_virtuemart.3.2.1 - это сам компонент, com_tcpdf_1.0.2 и com_virtuemart.3.2.1_ext_aio - это набор модулей и плагинов, которые помогут сделать ваш интернет-магазин более функциональным и удобным.



Теперь можно переходить к установке:



1. Переходим на страницу установки (Расширения => Менеджер расширений => Установить).

2. Нажав на кнопку “Выберите файл”, выбираем архив компонента com_virtuemart.3.2.1.

3. Нажимаем кнопку “Загрузить и установить”.

Компонент большой и ставиться будет достаточно долго. После установки появится сообщение “Установка компонента успешно завершена”.

Таким же образом мы устанавливаем модули и плагины VirtueMart - com_virtuemart.3.2.1_ext_aio и com_tcpdf_1.0.2.

Последний шаг в установке - русификация. Русификация (архив ru-RU.com_virtuemart) устанавливается также, как и компонент. Для проверки русификации достаточно посмотреть на меню VirtueMart:


Теперь наш интернет-магазин Joomla на русском языке.

Настройка Virtuemart: глобальные параметры

В самом начале настроек мы отключим ненужные страны и оставим только те, в которых будем работать. В нашем случае это Россия.



1. Переходим в Компоненты => VirtueMart => Конфигурация.

2. Переходим в “Страны”.

Теперь снимаем с публикации все страны:



1. Ставим галочку рядом с “Название”, чтобы выделить все пункты на странице.

2. Нажимаем кнопку “Снять с публикации”, чтобы отключить страны.

Таким же образом делаем на всех остальных страницах.

Теперь необходимо опубликовать только одну страну - Россию:



1. Вводим в поле фильтрации “russ” для того, чтобы быстро найти нашу запись.

2. Применяем фильтр, нажав кнопку “Вперед”.

3. Напротив записи “Российская Федерация” нажимаем кнопку “Опубликовать” в виде красного крестика.

4. Если вы планируете продавать товар только в своем регионе, то можете таким же образом отключить все лишние регионы и включить свой, щелкнув по ссылке “Регионы”.

Теперь такую же процедуру нам необходимо проделать в Virtuemart с валютой:



1. Переходим в раздел “Валюта”.

2. Ставим галочку рядом с “Валюта”.

3. Нажимаем на кнопку “Снять с публикации”, чтобы отключить ненужные валюты.

Повторяем все пункты для остальных страниц, чтобы отключить все валюты.

Далее нам необходимо включить те валюты, которые мы будем использовать. В нашем примере рубль:



1. В поле “Фильтр Валюта” вводим часть названия валюты (“russ” - russian ruble).

2. Нажимаем на кнопку “Вперед”.

3. Публикуем нашу валюту, нажав на кнопку с крестиком.

Ошибки VirtueMart при глобальных настройках и как их устранить

Переходим в глобальные настройки VirtueMart (Настройки => Настройки) и сразу обнаруживаем предупреждение и ошибку:



Решение проблем VirtueMart предлагает сам. Воспользуемся его советами.

Для решения предупреждения переходим в “Языки контента”:



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

 - Заголовок — Russian

 - Заголовок на «Родном» языке — Русский

 - Код языка для URL — ru

 - Префикс изображения — ru

 - Тег языка — ru-RU.



Не забудьте сохранить внесенные данные. Переходим обратно на страницу глобальных настроек VirueMart и видим, что предупреждение исчезло.

Теперь перейдем к решению ошибки. В сообщении VirtueMart просит нас создать папку для хранения счетов и файлов в безопасном месте и указать путь к этому месту в поле “Безопасный путь”.

Рекомендуемый путь - на уровень выше корня сайта, что не всегда возможно. Поэтому воспользуемся вторым советом - “Вы также можете использовать комплексное название директории как пароль для примера '/home/site/public_html/administrator/components/com_virtuemart/NUTrlivMFKGB/'”.

Копируем данный путь, например, в блокнот и заходим на наш хостинг по FTP с помощью файлового менеджера:



1. Переходим в папку public_html/administrator/components/com_virtuemart/ на сервере.

2. Копируем из блокнота название папки для файлов.

3. Создаем папку на нашем хостинге.

Теперь нам нужно этот путь прописать на вкладке “Шаблоны” раздела “Настройки” в поле “Безопасный путь”:



Сохраняем внесенные данные, а после обновляем страницу - ошибки больше нет.

Настройка интернет-магазина на Joomla Virtuemart

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

Вкладка “Магазин”

Большинство настроек понятно из названия или всплывающей подсказки. Поэтому мы не будем подробно описывать их все и остановимся лишь на некоторых.

1. Магазин не работает. Если вы проводите какие-либо технические работы (изменение шаблонов, ассортимента, цен и прочее), то можете установить данный чекбокс. Когда он установлен, при входе на сайт посетителю будет показано Оффлайн сообщение. Текст сообщения вы можете написать свой.

2. Использовать как каталог. При включении этого чекбокса в Virtuemart корзина отключается, и магазин становится каталогом товаров.

3. Включить плагины Joomla, Включить в VirtueMart обработку 404 ошибки — тут все понятно из всплывающих подсказок. Устанавливаем чекбоксы в обоих пунктах.

4. Включить SSL (рекомендуется). Перед использованием ОБЯЗАТЕЛЬНО убедитесь в наличии SSL-сертификата у вашего домена.

5. Языки, поддерживаемые магазином. Указывается язык магазина. В случае мультиязычности указываются все используемые языки.

Вкладка “Электронная почта”

На данной вкладке настраиваются события, при наступлении которых покупателю приходит почтовое уведомление. Здесь ничего сложного нет, поэтому рассмотрим только два пункта:

1. Использовать адрес эл.почты продавца. Отмечаем чекбокс в случае, если e-mail магазина отличается от e-mail, указанного в настройках Joomla.

2. Общее почтовое вложение. Позволяет указать файл, который будет прикреплен ко всем отправляемым письмам. Например, рекламный буклет. В поле для заполнения указывается путь к файлу.

Вкладка “Внешний вид”

На данной вкладке настраивается внешний вид шаблона VirtueMart. Все настройки понятны из описания или всплывающей подсказки. Вкратце разберем разделы данной области настроек:

1. Основные параметры. Настраиваются единицы измерения и отображение иконок печати карточки товара и PDF карточки товара.

2. Рекомендовать товар, задать вопросы. Настраивается отображение ссылки рекомендации, разрешение функций рекомендаций и вопросов.

3. Использовать купоны, Список товаров, Действие при поступлении товара на склад, Оценка покупателя. В этих разделах все понятно без пояснений.

Вкладка “Шаблоны”

В этой вкладке можно выбрать собственные шаблоны для магазина в целом, категорий или главной страницы интернет-магазина VirtueMart. Все настройки понятны из описания или всплывающей подсказки. Вкратце разберем разделы:

1. Настройки внешнего вида. В данном разделе можно задать собственные шаблоны для магазина в целом, категорий, товара или корзины. Задаются такие параметры как: количество товаров, категорий и производителей в строке.

2. Template and Layouts. Позволяет указать разные шаблоны для магазина, категории, корзины, страницы товара.

3. Настройки файлов. Здесь указываются пути к различным директориям компонента VirtueMart. Также здесь задаются размеры миниатюр изображений.

Совет! Ширину изображения задавайте явно, а в пункте “Высота” ставьте значение «0». Это позволит сохранить пропорции не квадратных изображений, а также избежать «поломки» макета.

4. Укажите последовательность разбиения на страницы для списка. В данном разделе задается количество товаров на странице в зависимости от количества товаров в строке.

5. Стили CSS и сценарии JavaScript. Позволяет отключить стили VirtueMart и использовать собственные, а также управляет подключаемыми библиотеками скриптов. Во избежание конфликта библиотек мы настоятельно рекомендуем снять чекбокс с пункта Использовать Virtuemart jQuery.

Вкладки “Формирование цен”, “Оформление заказа”, “Настройки сортировки”, “Feeds”, “SEO”

На данных вкладках основная часть задаваемых параметров понятна из названия или всплывающей подсказки. Поэтому останавливаться на них подробно не будем, впрочем, как и что-то менять.

Настройка магазина Virtuemart

После того, как мы сделали основные настройки компонента VirtueMart, необходимо указать название вашего магазина, установить основную валюту, логотип и прочее.

Вкладка “Продавец”

В начале заполним информацию о продавце:



1. Переходим в раздел VirtueMart => Магазин => Магазин.

2. Выбираем вкладку “Продавец”.

Заполняем все разделы по очереди:

Информация о продавце

В этом разделе указывается основная информация о продавце:



1. Название магазина. Указываем название вашего магазина, например, «Бэст-Шоп»

2. Имя продавца. Указываем название вашего юридического лица (если есть), например, ООО «Бэст-Шоп». Если юридического лица (или ИП) нет, дублируем название магазина.

3. URL. Вставляем ссылку на ваш сайт.

4. Минимальное значение суммы заказа для магазина. Если у вас нет ограничения на минимальную сумму заказа, то оставляете 0.

Совет! Обратите внимание на кавычки в названии организации. Рекомендуется использовать кавычки-«ёлочки», в противном случае, возможна ошибка при сохранении изменений. Кавычки-«ёлочки» вводятся на цифровой клавиатуре при зажатой клавише Alt. Код левой кавычки « — alt+0171, код правой кавычки » — alt+0187.

Валюта



1. Указываем основную валюту интернет-магазина.

2. Указываем валюты, которые вы тоже принимаете. Если в магазине можно расплатиться разными валютами, указывайте их все.

Изображения

В данном разделе вы можете загрузить логотип магазина. Логотип будет использоваться, например, в счетах, отправляемых покупателю.



1. Отмечаем “Загрузить”

2. Нажимаем кнопку “Выберите файл” и выбираем наш логотип.

Описание

Здесь вы можете написать краткое описание интернет-магазина, которое будет выведено на главной странице, если включена соответствующая настройка (Настройки => Шаблоны в разделе “Настройки внешнего вида” параметр “Показать описание магазина”).

Условия обслуживания

У каждого магазина есть свои Условия обслуживания, согласно которым регулируются взаимоотношения между Продавцом и Покупателем. В зависимости от настроек VirtueMart, покупатель должен будет прочитать их и согласиться при покупке.

Правовая информация

Содержимое данного раздела регулирует такие аспекты, как авторские права, защита персональных данных, отказ от ответственности за содержимое других сайтов, ссылки на которые размещены у вас, и прочее.

Мета-информация

Здесь вводите данные, которые нужны для корректной выдачи сайта в поисковых системах.



1. Пользовательские название страницы. Вы можете задать свое название.

2. Мета ключевые слова. Список ключевых слов или фраз через запятую.

3. Мета описание. Краткое описание страницы (не более 160 символов). Будет отображаться в поисковой выдаче, под ссылкой на сайт.

4. Мета Robots. Параметры индексирования страницы. Более подробно про параметры можете прочитать в Яндекс.Помощи.

5. Автор. Информация о владельце (авторе) сайта.

Заполнив вкладку Продавец, переходим на вкладку Информация о покупателе.

Вкладка “Информация о покупателе”

Тут нам необходимо заполнить все поля, отмеченные звездочками. Вот что у нас получилось:



После заполнения всех полей не забудьте сохранить.

Вкладка “Счета/Эл.почты”

В этой вкладке настраивается внешний вид счета, отправляемого покупателю после совершения заказа. Здесь нужно будет поменять шрифт на Free Mono (UTF-8 Unicode):


Настройка доставки в Virtuemart

Теперь переходим к настройке способов доставки. Настроим доставку курьером со стоимостью в 500 руб. и бесплатную при сумме заказа более 3000 руб.



1. Переходим в VirtueMart => Магазин => Способы доставки.

2. Нажимаем кнопку “Создать”.



1. Пишем название способа доставки.

2. Указываем псевдоним на латинице. Должен быть уникальным.

3. Публикуем способ, чтобы он был доступен для посетителей.

4. Пишем описание доставки, которое будет видно посетителям.

5. Сохраняем способ доставки, нажав на кнопку “Сохранить”.

После сохранения переходим на вкладку “Конфигурация”, чтобы настроить наш способ доставки:



1. Указываем себестоимость доставки (стоимость доставки). В нашем случае 500 рублей.

2. Указываем минимальную сумму заказа при которой доставка будет бесплатной. В нашем случае 3000 рублей.

Сохраняем.

Настройка способов оплаты Virtuemart

Теперь переходим к настройке способов оплаты. Так как у нас доставка курьером, то будем делать оплату наличными курьеру:



1. Переходим в VirtueMart => Магазин => Способы оплаты.

2. Нажимаем на кнопку “Создать”, чтобы создать новый способ.

На вкладке “Способы оплаты” заполняем следующие поля:



1. Указываем название, которое будет отображаться посетителю при выборе способа оплаты.

2. Пишем псевдоним на латинице. Должен быть уникальным.

3. Выбираем “Да”, чтобы наш способ оплаты опубликовался и стал доступен для выбора.

4. Пишем описание платежа, которое будет отображаться посетителям.

5. Выбираем обработчик способа оплаты. В нашем случае Standart.

6. Сохраняем наш способ.

Таким образом, мы создали самый простой способ доставки.

Добавление товара в Virtuemart

Прежде чем добавить товар, нам необходимо создать производителей и категории товара.

Добавление производителя




1. Переходим в VirtueMart => Производители => Производители.

2. Нажимаем кнопку “Создать”.

Заполняем карточку производителя:



1. Название производителя.

2. Опубликовано выставляем в “Да”, чтобы производитель стал доступен.

3. Указываем псевдоним - уникальное название на латинице.

4. Переходим на вкладку “Изображение” и загружаем логотип производителя.

Сохраняем изменения. Теперь у нас есть производитель.

Добавление категории в Virtuemart




1. Переходим в VirtueMart => Товары => Категории.

2. Нажимаем кнопку “Создать”



1. Пишем название категории.

2. Вписываем псевдоним категории на латинице. Также должно быть уникальным.

3. Ставим галочку “Опубликовано”, чтобы наша категория стала доступна.

4. Заполняем мета-информацию для поисковиков.

5. Переходим на вкладку “Изображения” и загружаем изображение категории.

Сохраняем изменения. Вот мы и добавили категорию товара.

Добавление простого товара




1. Переходим в VirtueMart => Товары => Товары.

2. Нажимаем кнопку “Создать”.

Вкладка “Информация”

Для примера возьмем популярный на сегодня смартфон - Iphone 7.


Большинство полей понятно из названия или всплывающей подсказки. Поэтому, мы не будем подробно описывать их все и остановимся лишь на некоторых:

 - Discontinued. Ставится, если товар снят с производства.

 - GTIN (EAN, ISBN). В данном поле указывается штрихкод товара в формате GTIN или в устаревших форматах EAN и ISBN. Поле не является обязательным.

 - Псевдоним. Название страницы товара в адресной строке браузера. Если не заполнять поле, псевдоним сгенерируется автоматически на основе названия товара.

 - MPN. Артикул, используемый производителем товара. Поле не является обязательным.

 - URL. Ссылка на товар на сайте производителя. Поле не является обязательным.

 - Override. Дает возможность установить скидку на товар.

 - Два поля с датами позволяют указать период действия данной цены или скидки.

 - Диапазон количества. Тут указывается количество приобретаемого товара, при котором начинает действовать данная цена. Например, от 1 до 10 единиц товара одна цена, а свыше 10 другая.

 - Добавить новую цену. Добавляет еще один раздел ценообразования.

Вкладка “Описание”

На вкладке Описание указывается Краткое описание, которое выводится на витрине товаров, подробное Описание, оно выводится в карточке товара, а также Мета-информация.

Вкладка “Статус”


Вкладка "Статус" позволяет управлять количеством товара. Все поля понятны из названия, поэтому, здесь подробно останавливаться не будем, кроме одного пункта - Шаги по оформлению количества. Позволяет установить кратность заказа. К примеру, вы продаете товар в упаковке количеством 5 штук, а цену, чтобы она казалась ниже, указываете за единицу товара. Соответственно, в это поле необходимо поставить цифру 5.

Вкладка “Габариты и вес”

На данной вкладке указываются габариты и вес товара, вес или объем упаковки и количество товара в упаковке.

Вкладка “Изображения”

На данной вкладке вы можете загрузить одно или несколько изображений вашего товара, а также удалить ранее загруженные картинки.

Вкладка “Настраиваемые поля”

Дает возможность указать сопутствующие товары и категории, которые выводятся в карточке товара, а также добавить определенные параметры товара с помощью раздела Тип поля.

После заполнения всех полей нажимаем кнопку “Сохранить”. Таким образом мы создали простой товар.

Добавление сложного товара

Теперь мы тот же Iphone 7 сделаем сложным товаром, в котором будет возможность выбора цвета без изменения цены (золотой и розовый) и выбора емкости с изменением цены (32 Гб - 52 000 руб., 128 Гб - 60 000 руб. и 256 Гб - 68 000 руб.).

Для начала нам необходимо создать в Virtuemart поля “Цвет” и “Емкость”:



1. Переходим в VirtueMart => Товары => Настраиваемые поля.

2. Нажимаем кнопку “Создать”.

На открывшейся странице нам необходимо заполнить следующие поля для параметра “Цвет”:



1. Выбираем тип поля “Строка”.

2. Вписываем заголовок параметра. В нашем случае “Цвет”.

3. Ставим в “Да”. Первый атрибут корзины отвечает за передачу данных поля в корзину, чтобы администратор видел, какой цвет заказывает покупатель.

4. Ставим “Да”. Второй атрибут корзины отвечает за возможность выбора покупателем цвета.

5. Через точку с запятой указываем наши цвета.

6. Пишем текст, который будет “всплывать” рядом с параметром.

7. Сохраняем наш параметр.

После сохранения нам необходимо сделать ещё две настройки:



1. Список переключить в “Да”, чтобы значения по умолчанию вывелись у нас списком на странице товара.

2. “as radiolist” ставим в “Да”, чтобы значения вывелись вместо списка радиокнопками - так будет отображаться эстетичнее.

Сохраняем ещё раз.

Теперь добавляем второй параметр - “Емкость”. Добавляется он так же, как и цвет, только вписываем другие значения (32 Гб, 128 Гб, 256 Гб) и атрибут “Список?” выставляем в “As Adminlist”, чтобы мы могли добавить изменение цены в зависимости от выбранного значения



Теперь данные параметры нам необходимо добавить к нашему товару. Переходим в наш ранее созданный товар и во вкладке “Настраиваемые поля” спускаемся до раздела “Тип поля”. Добавляем один параметр “Цвет”, так как цена не будет меняться.



Теперь добавим трижды параметр “Емкость”. Первый оставляем без изменений. У второго меняем значение и цену. Только в цену пишем значение разницы между основным товаром и товаром с измененным значением. В нашем случае стоимость с емкостью 128Гб - 60 000, а основного (32Гб) - 52 000. Таким образом 60 000 - 52 000 = 8 000 - это значение и вписываем в поле “Цена”. С третьим поступаем точно так же. Сохраняем.

Вот что в итоге должно получиться в админпанели:



А вот что у нас получилось в карточке товара во фронтенде:



Таким образом, мы создали более сложный товар с возможностью выбрать цвет и емкость устройства.

Это была краткая инструкция, как сделать интернет-магазин на Joomla с расширением Virtuemart. Но возможности последнего этим не ограничиваются. Мы показали только базовый функционал, необходимый для быстрого запуска магазина. Возможности VirtueMart настолько обширны, что по нему можно написать очень большую энциклопедию.

Устанавливайте CMS и экспериментируйте! А на этом всё! Успехов вам!

Еще по теме:

AddThis Sharing Buttons
Готовый интернет-магазин от ShopConstructor
с расширенными опциями и функциями
Разовая оплата
14399 руб

Вот так будет классно выглядеть ваш магазин - ссылка

Вот так будет работать панель управления - ссылка

На такой функциональной платформе будет ваш магазин - ссылка

Выбирайте любой дизайн из имеющихся шаблонов - ссылка

Доменное имя в зоне ru/рф бесплатно

Хостинг на 3 месяца, затем оплата 269 руб/месяц

Гарантия на работу интернет-магазина - год

Предоплата всего 50%, остальные 50% - после создания интернет-магазина

Вы экономите время, мы работаем очень быстро.
Широкая система отчетов для владельца магазина.
Много готовых шаблонов дизайна интернет-магазина.
Серьезно снижаем ваши расходы на быстрый старт.