Joomla VirtueMart: установка и настройка интернет-магазина. Lazy Load - отложенная загрузка изображений для virtuemart Добавление сложного товара

Описание

Множество пользователей ощутили на себе на сколько может быть неудобной стандартная загрузка изображений товаров в VirtueMart. Изображения можно загружать только по одному, нужно выбрать несколько опций, заполнить 3 текстовых поля и ждать пока перезагрузится страница... На то, чтобы загрузить все изображения для товаров Virtuemart у Вас уйдет немало времени. К тому же, эти изображения сначала нужно где-то найти и скачать или фотографировать товары самостоятельно. Конечно, можно нанять фрилансера, который сделает за Вас всю рутинную работу. Но в среднем добавление одного товара Вам обойдется от 15 до 40 руб . Умножив на количество товаров, которое Вам необходимо, получите весьма приличную сумму (1500 - 4000 руб. за 100 товаров )!

Но этому есть более приемлемая в цене альтернатива!

Внимание! 1 декабря 2015 Google отключил бесплатный API для поиска изображений, с помощью которого ранее работал данный компонент. Теперь поиск изображений осуществляется через условно бесплатный сервис Google Custom Search Engine. С его помощью можно осуществлять 100 запросов в сутки. Счетчик запросов сбрасывается в 11:00 по МСК. Дополнительные запросы в сутки предоставляются Google теперь на платной основе - 5 USD за 1000 запросов. Для идентификации в сервисе Google Custom Search Engine необходимо будет получить API-ключ (Инструкция ).

Возможности компонента:

Вы можете использовать мультизагрузку (т.е. можно загрузить сразу несколько) изображений с Вашего компьютера в один клик.

Компонент ведет поиск изображений товаров в Google на основе наименования товаров или "Артикул + Производитель".

Вы можете самостоятельно отметить подходящие изображения товаров.

Можно производить загрузку по одному товару или пакетный поиск по всем выбранным товарам VirtueMart.

Возможность добавить водяной знак на все загружаемые изображения.

Автоматическое создание миниатюр изображений по заданным в настройках размерам.

Можно сделать пакетный выбор первых несколько (количество Вы укажете самостоятельно) изображений из списка для каждого товара.

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

Пакетное или одиночное удаление уже загруженных изображений товаров.

Вы можете отфильтровать товары и категории, оставив только те, у которых нет изображений.

Возможность автоматического поиска и загрузки изображений товаров. Компонент выберет все товары или категории, у которых нет изображений. Затем выполнит поиск указанного количества изображений, загрузит их на Ваш сайт в папку images/stories/virtuemart/product (для товаров) и images/stories/virtuemart/category (для категорий). Создаст миниатюры по заданным в настройках размерам и закрепит изображения за товарами. Вы сможете следить за процессом поиска и загрузки в реальном времени.

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

Возможность использовать прокси-сервер для поиска изображений.

Скрин-шоты

Видео

История изменений

Внимание! Обновления осуществляются через стандартный менеджер расширений Joomla на вкладке "Обновления"

7.04.2019 (v 2.5.0) 1) Расширен фильтр по категории: теперь можно выбрать несколько категорий, а также режим исключения категорий
2) Для найденных и имеющихся изображений добавлена возможность просмотра изображения в полном размере
3) Для имеющихся изображений добавлена возможность изменения порядка вывода изображений путем перетаскивания мышью
4) В общих настройках добавлена опция "Переименовывать файлы, загружаемые с ПК"

17.11.2017 (v 2.4.0) добавлена поддержка скачивания PNG-изображений с прозрачным фоном

4.10.2017 (v 2.3.0) путь для сохранения изображений товаров и категорий теперь берется из настроек VM

29.06.2017 (v 2.2.0) в режиме поиска "Категории" теперь отображается полный путь к категории, включающий родительские категории.

20.12.2016 (v 2.1.1) в настройках компонента добавлено поле "Поиск только на домене". Если указать в этом поле домен, то поиск изображений будет осуществляться только на указанном сайте

13.02.2016 (v 2.1.0) Добавлен фильтр товаров по наличию на складе

28.01.2016 (v 2.0.1) Оптимизирован алгоритм построения списка категорий для фильтров. Если у Вас на сайте очень большое число категорий, то теперь страница со списком товаров/категорий будет открываться гораздо быстрей.

4.12.2015 (v 2.0) Внимание! 1 декабря 2015 Google отключил бесплатный API для поиска изображений. Теперь поиск изображений осуществляется через условно бесплатный сервис Google Custom Search Engine. С его помощью можно осуществлять 100 запросов в сутки. Счетчик запросов сбрасывается в 11:00 по МСК. Дополнительные запросы в сутки предоставляются Google теперь на платной основе - 5 USD за 1000 запросов. Для идентификации в сервисе Google Custom Search Engine необходимо будет получить API-ключ (Инструкция).

5.09.2015 (v 1.8) улучшено позиционирование водяного знака:
a) Добавлена возможность выбора единиц отступа - проценты или пиксели
b) Отступы водяного знака теперь задаются не для нижнего и правого краев водяного знака, а относительно его центра. Это позволит вам без проблем отцентрировать положение водяного знака, установив отступы справа и снизу равными 50%
c) Добавлена возможность выбора угла вращения водяного знака
d) Добавлена проверка соответствия размера водяного знака и основного изображения. Если один из линейных размеров водяного знака будет превышать соответствующий размер основного изображения, то водяной знак будет автоматически уменьшен.

2.09.2015 (v 1.7) добавлена функция проверка наличия изображения у товаров и категорий. Если будет обнаружено, что прикрепленное изображение не существует или нечитаемо, то привязка будет удалена.

04.07.2015 (v 1.6) Добавлен интерфейс для массового автоматического поиска и загрузки изображений. Добавлена возможность осуществлять поиск по комбинации "Производитель+Артикул"

04.06.2015 (v 1.5) добавлен фильтр по названию товаров и категорий.

27.04.2015 (v 1.4) добавлена возможность поиска изображений через прокси-сервер.

11.11.2014 (v 1.3) добавлена возможность наложения водяного знака на загружаемые изображения. Для этого необходимо в настройках прописать URL изображения-водяного знака в формате PNG.

9.11.2014 (v 1.2) добавлена возможность автоматического поиска и загрузки изображений по расписанию. Для этого добавлена вкладка в настройки компонента "Автоматический поиск и загрузка". На этой вкладке необходимо выбрать количество изображений, которое необходимо найти для каждого товара, у которого нет изображений. После этого Вам останется лишь добавить задание в планировщик Cron (В панели управления хостингом)

6.11.2014 (v 1.1) добавлена возможность мультизагрузки изображений с Вашего компьютера

Совместимость

PHP 5.4 и выше
MySQL 5.5
Joomla 2.5 - 3.9
VirtueMart 2 - 3

В этой статье мы рассмотрим создание интернет-магазина на 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.

Теперь перейдем к решению ошибки. В сообщении 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 ошибки - тут все понятно из всплывающих подсказок. Устанавливаем чекбоксы в обоих пунктах.

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

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

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

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

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

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

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

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

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

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

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

Валюта

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

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

Изображения

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

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

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

Описание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сохраняем.

Интернет-магазин для тех, кому некогда разбираться в разработке. Готов через 5 рабочих дней, более 100 инструментов для продаж! Просто загрузите товары и начните продавать! Остальное сделает Shopconstructor.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 и экспериментируйте! А на этом всё! Успехов вам!

Увеличить скорость загрузки страницы можно разными способами:

кеширование
сжатие css и js файлов
оптимизация изображений

В этой статье подробно разберем последний пункт и покажем, каких результатов можно добиться.

При использовании lazy load (ленивой загрузки) для изображений вес страницы становится меньше, поэтому страница начинает грузиться быстрее.

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

Интегрировать lazy load в virtuemart можно 2 способами:

вручную, внеся некоторые правки в шаблон
с помощью плагина, который позволит добить lazy load для всех изображений на сайте

Добавляем lazy load вручную

Существует множество скриптов, которые можно использовать для интеграции lazy load на сайт. Я использую echo.js . Сжатая версия скрипта весит всего 2 Кб. Пример работы можно посмотреть на этой странице .

Подключим скрипт на странице категории. На других страницах, на мой взгляд, нет особого смысла использовать ленивую загрузку. Если нужно добавить lazy load для всех изображений сайта, то лучше использовать плагин LLFJ - Lazy Load for Joomla! , о котором пойдет речь в следующем разделе.

Итак, скопируем файлы скрипта в папку шаблона /templates/имя_шаблона/echo/ .

Заменим код вывода изображения в категории.

Для virtuemart 3

В файле /components/com_сайтblayouts/products.php заменим

< a title = " " href = " " >