Как вывести модуль на определенной странице Opencart. Opencart html модуль
OpenCart 3.0 работаем с HTML модулем (1 часть)
Всем привет, недавно меня попросили вывести с помощью html модуля информационные блоки: большие изображения на витрине магазина при наведении на которые должен появляться текст, задача интересная и кому то наверняка это тоже пригодится, статья из двух частей, в первой делаем вёрстку, во второй вставляем ссылки, текст и оформление.
Живой пример: about-all.ru
Список задач на сегодня:
- Подбираем изображения (самостоятельно)
- Работаем с FTP
- Работаем с админкой
- Работаем с CSS
Приступим:
1. В первую очередь подбираем изображения, я подобрал вот такие:
(P.S. — Я взял картинки с фотостока, изменил размеры, добавил текст и сжал для веб, картинки подобраны просто для примера)
Размеры изображений которые я делал:
1 — 1600px x 800px (Д x Ш)
2, 3, 4, 5 — 800px x 800px (Д x Ш)
У вас размеры могут быть иными, просто постарайтесь чтобы высота левой (длинной картинки) была равна длине 2 других картинок, так будет лучше смотреться и вам меньше придётся работать со стилями во 2 части статьи.
2. Заходим на фтп и переходим в папку: ../image/catalog/ и размещаем в ней наши изображения, запоминаем названия картинок, они нам понадобятся чуть позже.
(P.S. – При желании вы можете создать дополнительную папку под эти картинки)
3. Заходим в админку и переходим:
Модули / Расширения –> Модули / Расширения –> Текстовый блок — HTML –> Добавить (Иконка +) и заполняем:
- Название модуля: Информация
- Статус: Включено
Текст – переключаем на редактор кода (Code View – </>) и заполняем:
<div><div><div><img src="image/catalog/image-1.jpg"></div></div><div><div><img src="image/catalog/image-2.jpg"></div><div><img src="image/catalog/image-3.jpg"></div><div><img src="image/catalog/image-4.jpg"></div><div><img src="image/catalog/image-5.jpg"></div></div></div>
Нажимаем кнопку Code View (</>) и только после этого нажимаем кнопку Сохранить.
3.1. Переходим в админке: Дизайн –> Макеты –> Home –> Редактировать и заполняем:
Верх страницы – Добавить – Выбираем наш модуль (Информация) и нажимаем кнопку Сохранить.
Результат:
Неплохо, но мне не нравятся рамки, будем их убирать, немного изменим наш код:
<div><div><div><img src="image/catalog/image-1.jpg"></div></div><div><div><img src="image/catalog/image-2.jpg"></div><div><img src="image/catalog/image-3.jpg"></div><div><img src="image/catalog/image-4.jpg"></div><div><img src="image/catalog/image-5.jpg"></div></div></div>
4. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и в конец файла добавим эти строки:
.noborder {padding: 0;}.noborder-r {padding-right: 0;}.noborder-l {padding-left: 0;}
Результат:
Ну вот, другое дело, правда левая колонка немного короче правой, но мы добавим длинной картинке (в следующей статье) рамки сверху и снизу, этим мы подгоним высоту колонок в один уровень.
Продолжим в следующей статье.
moushe.ru
Как вывести модуль на определенной странице Opencart | Создание и разработка сайтов
За все время работы с Opencart, я ни разу не задавался вопросом, как вывести модуль только на одной категории, продукте или странице. Всегда модули расположены на всех страницах одного типа, но тут возник вопрос, как же все таки это реализовать?
В продолжение статьи создание позиции вывода модулей в OpenCart, сегодня мы найдем ответ, как же отображать модуль только на определенных страницах, и сделаем это без вмешательства в код, собственноручно через административную панель!
Как работают схемы (layout) в Opencart
Для того чтобы решить данную задачу, необходимо четко понимать, как работает вывод (layout) в Opencart. Сейчас я попробую объяснить вам как это функционирует как я это понимаю.
В Администраторской панели Opencart присутствует пункт меню «Система» — «Дизайн» — «Схемы». Схемы — это бланки/контейнеры/шаблоны, которые могут быть применены к любой странице. Каждая схема представляет из себя просто список указанных для нее модулей в определенных местах (верх, низ, лево, право).
Каждая схема (layout) может применяться к элементам благодаря двум параметрам:
- по адресу (url), используя переменную route;
- по привязке ее к элементу (категории, продукту, статье).
Таблица layout_route хранит информацию о адресах/разделах, к которым прикреплена та или иная схема:
А связь с определенным элементом указывается для каждого элемента отдельно в его настройках, и таблица связей (в нашем случае категорий со схемами) выглядит следующим образом:
Как вывести или скрыть модуль на определенной странице Opencart
Теперь, когда мы разобрались со связями, давайте разберемся с административной частью и выведем модуль только в одной категории. Стандартные схемы созданы на основе адреса (переменной route) и применяются к разделу (ко всем категориям/статьям/продуктам), в случае если для элемента раздела не указана уникальная схема.
Мы же создадим новую схему, которая не будет привязана по адресу — мы ее будем применять только к одному элементу раздела, а именно к категории Components.
Теперь, нам необходимо указать связь между этим Layout’ом (схемой) и нашим элементом, к которому мы хотим его применить. Сделать это можно, если у вашего элемента присутствует вкладка Дизайн (Design), в которой и указывается схема:
Теперь наша с вами категория Components будет показывать только те модули, которым мы задали отображение в схеме Category Components:
После того как мы добавили нужные модули к нашей схеме, категория Components стала уникальной:
Как видите, для данной категории с уникальной схемой выводится только один модуль, для того чтобы категория или товар выглядела также как и остальные — просто добавьте все нужные модули в эту схему и они появятся на странице с уникальной схемой.
Вот таким незамысловатым способом вы можете вывести модуль только на одной категории, только на одной странице/статье, только на странице одного продукта и т.д. Также вы можете применить одну и ту же схему для нескольких элементов раздела, и «особенными» будут все эти разделы. Также вы можете ознакомиться с оригиналом статьи, про принцип работы схем в Opencart.
comments powered by HyperCommentsnikita-sp.com.ua
Opencart 2.x - Html Модуль (2 Часть) – Популярные Категории | Модули, Шаблоны, Движки
Всем привет, в прошлой статье мы с вами научились выводить информационные блоки с преимуществами нашего интернет магазина без использования платных модулей, в этой статье я продолжу рассказывать вам об применении бесплатного html модуля предустановленного в OcStore 2.x (OpenCart 2.x). Сегодня мы с вами выведем на главную страницу нашего магазина блоки с популярными категориями.Этот материал разделён на две части, сегодня мы сделаем популярные блоки в минималистическом дизайне, а в следующей части статьи сделаем каждому блоку красивый фон.
Список задач на сегодня:
1. Работаем с изображениями
2. Работаем с админкой
3. Работаем с CSS
Приступим:
1. Подбираем картинки для самых популярных категорий вашего интернет магазина, для примера я возьму вот эти изображения:
(формат изображений PNG, фон – прозрачный, размеры 130px x 130px)
1.1. Закидываем наши картинки в папку image вашего шаблона, в моём случае это стандартный шаблон (default):
../catalog/view/theme/default/image/
(запоминаем название своего шаблона, оно нам скоро понадобится)
2. Откроем админку и переходим:
Дополнения > Модули > HTML Содержимое > Редактировать:
- Название: Популярные категории
- Заголовок: Популярные категории
- Статус: Включено
Сначала сделаем обёртку блоков:
Код:
<div> </div> теперь добавим четыре колонки:Код:
<div> <div> </div> <div> </div> <div> </div> <div> </div> </div> Теперь в колонки нужно поместить наши картинки:Код:
<div> <div> <div> <img src="/catalog/view/theme/default/image/sysblock.png"> </div> </div> <div> <div> <img src="/catalog/view/theme/default/image/laptop.png"> </div> </div> <div> <div> <img src="/catalog/view/theme/default/image/beats.png"> </div> </div> <div> <div> <img src="/catalog/view/theme/default/image/gamer.png"> </div> </div> </div> Теперь добавим заголовки и ссылки на категории:Код:
<div> <div> <div> <a href="ссылка на категорию"><span>Компьютеры и комплектующие</span> <img src="/catalog/view/theme/default/image/sysblock.png"> </a> </div> </div> <div> <div> <a href="ссылка на категорию"><span>Ноутбуки</span> <img src="/catalog/view/theme/default/image/laptop.png"> </a> </div> </div> <div> <div> <a href="ссылка на категорию"><span>Наушники и гарнитуры</span> <img src="/catalog/view/theme/default/image/beats.png"> </a> </div> </div> <div> <div> <a href="ссылка на категорию"><span>Игровые устройства</span> <img src="/catalog/view/theme/default/image/gamer.png"> </a> </div> </div> </div> (вместо ссылка на категорию прописываем чпу юрл нужных вам категорий)2.1. Теперь нам необходимо вывести наш новый модуль на главную страницу витрины, переходим:
Админка > Дизайн > Схемы > Главная > Редактировать > Добавить модуль:
- Модуль: HTML содержимое > Популярные категории
- Расположение: Вверху страницы
- Порядок сортировки: 3
Проверка:
3. Откроем файл ../catalog/view/theme/default/stylesheet/stylesheet.css и вставим в него эти строки (можно в самый конец файла):
Код:
/* popular category */ .pop_cat { border: 1px solid #ddd; text-align: center; padding: 10px 0; border-radius: 3px; } .pop_cat:hover { border: 1px solid #23527c; } .pop_cat span { display: block; padding-bottom: 10px; } .pop_cat img { display: block; margin: 0 auto; } Результат:Надеюсь статья была вам полезна.
На сегодня всё, следите за нашими новостями и до новых встреч.
lowenet.biz
