[Онлайн-обучение] Создаём интернет-магазин с нуля для slon21veka! Этап 10: Вывод категорий в меню, корзина и демо-данные.

Продолжаем создавать сайт. Если вы только начали с нами учиться - посмотрите предыдущие уроки.

• Создаём интернет-магазин с нуля для slon21veka! Пошаговый курс. Начало
• Этап 1: Устанавливаем Denwer
• Этап 2: Установка Joomla
• Этап 3: Знакомство с Панелью администратора и русификация
• Этап 4: установка шаблона сайта
• Этап 5: Настройка шаблона сайта. Позиции модулей
• Этап 6: Создание простого HTML-модуля и собственного меню.
• Этап 7: Горизонтальное меню, категории и материалы.
• Этап 8: Создаём бэкап сайта.
• Этап 9: Знакомство с VirtueMart

Продолжаем работу над нашим сайтом. Впереди самое сложное, но в тоже время, самое интересное!

На предыдущем этапе мы с вами познакомились с компонетном для создания интернет-магазина - VirtueMart 3 и даже создали одну категорию и добавили в неё товар. Давайте посмотрим как можно вывести эти данные на сайт и как это будет выглядеть.

Прежде всего создадим пункт меню с привязкой к категории Virtuemart. Переходим: Меню - MyMainMenu - Создать пункт меню и на этот раз тип меню выбираем из списка VirtueMart. Нас интересует тип Категория.

Назовём наш пункт меню "Интернет-магазин" и выберем из списка нужную категорию.
Также можно выбрать значение "Верхний уровень категории", чтобы отобразить все существующие категории.

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

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

Кстати, значения "по умолчанию" для настроек категорий, товаров и многого другого, относящегося к VirtueMart задаются в Панели управления VirtueMart. Меню: VirtueMart - Панель управления

Посмотрим, что отображает созданный нами пункт меню на сайте.

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

К примеру, для одной категории это будет выглядеть так:

Установка демо-данных

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

Для установки, прежде всего нужно перейти VirtueMart - Панель управления, и в меню слева выбрать Настройки. Мы попадаем на страницу настройки нашего магазина. Здесь много интересного, но сейчас нас интересует раздел "Дополнительная информация". В нём проставим галочку "Разрешить обновление базы данных" и сохраняем.

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

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

Если установка прошла успешно, получаем следующее сообщение:

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

Вот такая страница открывается по нажатию пункта меню "Интернет-магазин".
Сверху вниз мы видим: описание магазина, доступные категории, поиск и сортировку и список товаров.

Исследуйте установленные данные самостоятельно. А на следующем этапе мы создадим пункт меню для корзины пользователя и посмотрим что ещё необходимо для её полноценного функционирования.

Автор поста Михаил, @manavendra
Скриншоты из личного архива автора

Платформа Pokupo.ru ищет региональных представителей.
Обязанности, выгоды и условия сотрудничества — здесь.