Moushe.ru

Блог обо всём

OpenCart 2.3 Делаем рекомендуемые категории (html модуль)



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

Список задач на сегодня:

  • 1. Подготавливаем картинки
  • 2. Работаем с html модулем
  • 3. Выводим наши Рекомендуемые категории на главную страницу сайта
  • 4. Работаем с CSS стилями

Приступим:

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

Я отредактировал размер фотографий, добавил им внешнее свечение и вот что у нас получилось:

названия и расширение моих картинок:

  • headset.png
  • keyboard.png
  • mouse.png
  • mousemat.png

у вас они будут иными, запомните их (когда будем прописывать пути к изображениям в html модуле, вам будут нужны названия ваших картинок)

P.S. – Рекомендую использовать картинки в формате .png с прозрачным фоном – это сильно упростит вашу работу

Теперь заходим на фтп и в этой папке:

/image

создадим новую подпапку category, вот какой путь к файлам (в Filezilla и т.д.) получится в итоге:

../public_html/image/category

и переместим в неё наши картинки. На этом первый шаг окончен, переходим ко второму.

2. Открываем админку нашего магазина и переходим:

Админка > Дополнения > Дополнения > HTML Содержимое > Установить > Редактировать

настраиваем:

  • Название: Популярные категории
  • Заголовок: Популярные категории
  • Статус: Включено

переключаем визуальный редактор в режим Исходный код (иконка </>) и заполняем:

<div class="row pop-cat-all">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pop-cat-1">
<div class="image"><a href="gamer-headsets" alt="Игровые наушники" title="Игровые наушники" class="img-responsive"><img src="image/category/headset.png"></a></div>
<h4><a href="gamer-headsets">Игровые наушники</a></h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pop-cat-2">
<div class="image"><a href="gamerkeyboard" alt="Игровые клавиатуры" title="Игровые клавиатуры" class="img-responsive"><img src="image/category/keyboard.png"></a></div>
<h4><a href="gamerkeyboard">Игровые клавиатуры</a></h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pop-cat-3">
<div class="image"><a href="gamer-mouses" alt="Игровые мыши" title="Игровые мыши" class="img-responsive"><img src="image/category/mouse.png"></a></div>
<h4><a href="gamer-mouses">Игровые мыши</a></h4>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pop-cat-4">
<div class="image"><a href="gamer-pads" alt="Игровые ковры" title="Игровые ковры" class="img-responsive"><img src="image/category/mousemat.png"></a></div>
<h4><a href="gamer-pads">Игровые ковры</a></h4>
</div>
</div>

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

В нашем коде нет ничего сложного, просто указываем SEO URL ваших категорий вместо моих:

  • gamer-headsets
  • gamerkeyboard
  • gamer-mouses
  • gamer-pads

прописываем свои картинки вместо моих:

  • image/category/headset.png
  • image/category/keyboard.png
  • image/category/mouse.png
  • image/category/mousemat.png

и заполним alt, title и название категории в ссылке своими.

P.S. – В заголовок можно вставить иконку с http://fontawesome.io/icons/ (собственно я это и сделал)

3. Заходим в админку и переходим:

Админка > Дизайн > Схемы > Главная > Редактировать

настраиваем:

Вверху страницы > Популярные категории > Добавить модуль > Сохранить

4. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла добавим эти строки:

/* popular category */
.pop-cat-all {
margin: 10px 0;
}
.pop-cat-1, .pop-cat-2, .pop-cat-3, .pop-cat-4 {
text-align: center;
min-height: 256px;
padding: 0;
}
.pop-cat-1 h4 a, .pop-cat-2 h4 a, .pop-cat-3 h4 a, .pop-cat-4 h4 a {
color: #fff;
max-width: 100%;
padding: 10px;
}
.pop-cat-1 img, .pop-cat-2 img, .pop-cat-3 img, .pop-cat-4 img {
padding-top: 20px;
}
.pop-cat-1:hover img, .pop-cat-2:hover img, .pop-cat-3:hover img, .pop-cat-4:hover img {
margin-top: -2px;
}
.pop-cat-1 {
background: #FFEB3B;
background-image: linear-gradient(to top,#F57F17 0%,#FFEB3B 100%);
}
.pop-cat-2 {
background: #3F51B5;
background-image: linear-gradient(to top,#1A237E 0%,#3F51B5 100%);
}
.pop-cat-3 {
background: #FF5722;
background-image: linear-gradient(to top,#BF360C 0%,#FF5722 100%);
}
.pop-cat-4 {
background: #4CAF50;
background-image: linear-gradient(to top,#1B5E20 0%,#4CAF50 100%);
}

На сегодня всё, следите за нашими новостями и до новых встреч.

2 Комментария

  1. Алексей

    09.07.2017 at 09:13

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

CAPTCHA image
*

© 2017 Moushe.ru При копировании материалов, ссылка на нас обязательна!

Вверх ↑



Яндекс.Метрика