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

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

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

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

  • Создать само меню и его пункты в Меню - Меню.
  • Создать и настроить модуль для работы меню в Расширения - Модули.
  • Тип меню - leftmenu.
  • Заголовок - Каталог товаров.
  • Описание - Меню каталога товаров.
  • Заголовок модуля - Левое меню.

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

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

  • Заголовок - Каталог товаров.
  • Отображать заголовок - ДА.
  • Включен - Да (иначе мы не увидим нашего меню).
  • Положение - left (слева).
  • В параметрах модуля (справа окна) в поле Стиль меню - Список (т.е. вертикальное меню).

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

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

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

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

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

  • Заголовок - Брянск.
  • Псевдоним - brynsk.
  • Отображать в меню - Каталог товаров.
  • Опубликовано - Да.
  • В основных параметрах (справа окна) в поле Раздел - Брянск, в поле Столбцы - 1.
  • В параметрах компонента (чуть ниже) в поле Показывать заголовок статьи - Да, в поле Заголовок в виде ссылки - Да.

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

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

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

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

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

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

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

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

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

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

  • Сначала мы создали разделы и категории каталога товаров (урок 11).
  • Затем для каждой категории мы создали фотогалерею (урок 13).
  • Затем для каждой категории мы создали страницу и вставили в нее код фотогалереи (урок 14).
  • Затем мы создали пункт меню в меню каталога товаров одним из трех способов (этот урок).

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

Если этот сайт оказался вам полезен, пожалуйста, посмотрите другие наши статьи и разделы.

📎📎📎📎📎📎📎📎📎📎