Как создать свой сайтУроки Joomla → Урок 15. Делаем меню каталога товаров

Joomla - Урок 15. Делаем меню каталога товаров

В уроке 10 мы с вами делали главное меню сайта и запомнили:

Чтобы создать в Joomla меню, необходимо:

  • Создать само меню и его пункты в Меню - Меню.

  • Создать и настроить модуль для работы меню в Расширения - Модули.

Итак, идем в Меню - Меню, нажимаем кнопку Создать и задаем параметры нашего меню:
  • Тип меню - leftmenu.

  • Заголовок - Каталог товаров.

  • Описание - Меню каталога товаров.

  • Заголовок модуля - Левое меню.



Нажимаем на кнопку Сохранить. Теперь идем в Расширения - Модули, видим, что наше меню появилось:



Заходим в него, чтобы проверить настройки (двойным щелчком мыши по названию):



У нас должны быть следующие настройки:
  • Заголовок - Каталог товаров.

  • Отображать заголовок - ДА.

  • Включен - Да (иначе мы не увидим нашего меню).

  • Положение - left (слева).

  • В параметрах модуля (справа окна) в поле Стиль меню - Список (т.е. вертикальное меню).

Проверяем их и нажимаем кнопку Сохранить. Теперь идем на наш сайт (в браузере набираем localhost/oboi, если кто забыл) и видим, что наше меню появилось:



Теперь нам надо создать наш первый пункт меню - Брянск, но давайте посмотрим на меню сайта-образца. В нем присутствуют слова ОБОИ и чуть ниже - ПЛИТКА, ПЛИНТУС, они как бы разделяют меню на две части. В Joomla такие вставки так и называются Разделители. И сейчас нам надо создать первый разделитель - ОБОИ. Для этого идем в Меню - Меню, щелкаем по пиктограмме Пункт меню:



Нажимаем на кнопку Создать, выбираем тип пункта меню - Разделитель (щелкаем по нему):



Даем ему заголовок - ОБОИ:



Сохраняем, идем на наш сайт и видим, что разделитель появился:



Теперь создаем пункт меню - Брянск. Здесь возможны несколько вариантов и на некоторые мы сейчас посмотрим. Нажимаем на кнопку Создать в менеджере пунктов меню, но теперь выбираем тип пункта меню - Статьи (щелкаем по нему), а в нем - Статьи раздела в виде блога:



В открывшемся окне нам надо указать:
  • Заголовок - Брянск.

  • Псевдоним - brynsk.

  • Отображать в меню - Каталог товаров.

  • Опубликовано - Да.

  • В основных параметрах (справа окна) в поле Раздел - Брянск, в поле Столбцы - 1.

  • В параметрах компонента (чуть ниже) в поле Показывать заголовок статьи - Да, в поле Заголовок в виде ссылки - Да.

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



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

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

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



Давайте выберем тип - Категории раздела в виде списка, а в основных параметрах (справа окна) в поле Описание - Показать, в поле Список категорий - Показать, в поле Статей категории - Скрыть. Остальные настройки можно оставить, сохраняем и смотрим на результат:



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

Поэтому идем в Статьи - Разделы, щелкаем по нашему разделу Брянск и в поле Описание вносим наш текст и вставляем картинки (так же, как мы это делали, создавая обычные статьи). Картинки, как вы помните надо предварительно положить в папку stories (подробно об этом мы говорили в уроке 7).



Сохраняем, идем на наш сайт, обновляем страницу и видим результат:



Получилось очень похоже на сайт-образец. Если теперь щелкнуть по ссылкам (например, гофрированные), то мы попадем на страницу категории:



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

Если же мы хотим, чтобы у нас было точно также, как на сайте-образце, т.е. по щелчку по пункту меню Брянск, открывалась страница с ссылками, ведущими на фотогалереи, то можно не задавать описание раздела, а создать в разделе еще одну категорию, например - общее (all), создать статью в этой категории с контентом, который мы выше помещали в описание раздела и ссылками на страницы категорий, изменить тип пункта меню на Статья - Одна статья, а в настройках пункта меню выбрать созданную статью (так мы делали в уроке 10, когда создавали Главное меню сайта).

Вы теперь умеете создавать разные типы пунктов меню. Вам осталось самостоятельно реализовать остальные пункты меню каталога товаров. Напомню лишь, в каком порядке мы это делали:
  • Сначала мы создали разделы и категории каталога товаров (урок 11).

  • Затем для каждой категории мы создали фотогалерею (урок 13).

  • Затем для каждой категории мы создали страницу и вставили в нее код фотогалереи (урок 14).

  • Затем мы создали пункт меню в меню каталога товаров одним из трех способов (этот урок).

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

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



Предыдущий урок Вернуться в раздел Следующий урок уроки joomla

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