Меню

настройка html блок opencart

HTML Pro — Текстовые блоки для Opencart 2.x

Совместимость OpenCart 2.0, OpenCart 2.1, OpenCart 2.2, OpenCart 2.3, OCStore 2.1, OCStore 2.3, Opencart.pro 2.0.3.х, Opencart.pro 2.1, Opencart.pro 2.3

Для работы с модулем требуются знания HTML и CSS!

Html Pro даёт возможность пользователю самому создавать сетку с неограниченным количеством текстовых блоков. Модуль не привязан к определенному CSS-фреймворку, тем самым дает возможность использовать любой CSS-фреймворк, CSS-сетку или применить свои CSS-стили для оформления, всего лишь назначив для блока нужный CLASS и/или ID.

Возможности:

  • Отображение на страницах сайта текстовые блоки;
  • Создание неограниченного количества блоков;
  • Использование иконочных шрифтов;
  • Не привязан к CSS-фреймворку (Bootstrap 3);
  • Мультиязычность;
  • Назначать: изображение и/или иконку;
  • Назначать class и/или id.

Установка:

  1. Скопируйте папки admin и catalog из архива модуля;
  2. Перейти в Система/Группы пользователей и для администратора установить права

    доступа (в блоках «Разрешить просмотр» и «Разрешить редактировать»

    отметить галочкой extension/module/html_pro);

  3. В списке модулей (дополнения-дополнения-модули или расширения-расширения-модули) установите модуль HTML Pro;
  4. В дизайн-схема выберите страницу магазина и расположите модуль в нужной позиции;

Демо / Админка / Документация
Вход: demo / demo

. Стили блоков, которые показаны в демо — в модуль не входят!
Пример показывает только малую часть, как можно оформить блоки.
(Скачать демо стили можно тут)

Работает на версиях:

  • OpenCart / ocStore / OpenCart.PRO — начиная с версии 2.0.1.0

Лицензия:

  • Модуль можно установить на один интернет-магазин.
  • Следующий магазин оплачивается отдельно.
Основное
Способ распространения Платно
Совместимость OpenCart 2.0, OpenCart 2.1, OpenCart 2.2, OpenCart 2.3, OCStore 2.1, OCStore 2.3, Opencart.pro 2.0.3.х, Opencart.pro 2.1, Opencart.pro 2.3
VQmod Нет
Ocmod Нет
Статистика
В первый раз файл добавлен 31.10.2017
Последнее изменение 08.04.2020
Просмотров 5231
Покупок 49

Написать

Ваш отзыв: Внимание: HTML не поддерживается! Используйте обычный текст.

Введите код, указанный на картинке:

источник

Кастомизация OpenCart с помощью модуля html и bootstrap

Привет друзья! Сегодня хочу поделиться тем, как вставить html код в opencart и кастомизировать главную страницу интернет-магазина. Делать мы это будем на дефолтном шаблоне. Я предпочитаю работать с русифицированной сборкой OpenCart под названием OcStore. Хотя OcStore это не официальный релиз, но все же, мне нравится эта сборка, так как она адаптирована под русскоязычный рынок.

Используя стандартный модуль html, мы выведем два блока в шаблоне. Один будет баннером с картинкой на всю его ширину, с текстом и нарисованной в фотошопе кнопкой «Подробнее». Этот блок сделаем кликабельным, и ссылка может вести на карточку товара, акционный товар или категорию. Куда вам будет лучше, туда и поставите свою ссылку. Получится вот такой результат.

Второй текстовый блок html opencart представляет собой ряд на всю ширину шаблона с тремя колонками. В каждой колонке будет иконка со шрифта font-awesome, заголовок третьего уровня и параграф с текстом. Такой модуль html дает возможность оптимизировать главную страницу opencart под приоритетные вашему бизнесу поисковые запросы. Выбираете важные ключевые слова из своего семантического ядра, гармонично вставляете их и окружаете небольшим текстом. Такой текстовый блок в html opencart даст отличную возможность для поисковой оптимизации сайта. У меня получился вот такой seo-блок.

Итак, если вам интересно как вставить свой html код в opencart, то читаем далее.

Делаем seo оптимизацию с помощью модуля html

Итак, в консоли управления заходим в меню «Дополнения» и выбираем модуль «HTML содержимое». Жмем на кнопку «Редактировать». В открывшейся странице мы видим поля, которые нужно заполнить:

  1. Название модуля (будет отображаться в админке, для вас);
  2. Заголовок модуля (будет отображаться на сайте, для пользователей);
  3. Описание (html содержимое opencart);
  4. Статус (после редактирования нужно включить).

Используем сетку библиотеки bootstrap

Сайтов, описывающих работу с bootstrap великое множество. Есть ресурсы, как на русском, так и на английском языке. Я открою официальный сайт getbootstrap.com в разделе сетки css https://getbootstrap.com/docs/3.3/css/#grid и выберу из примера сетку, представляющую собой ряд с тремя равными колонками для мобильных устройств и планшетов. Любой контент, размещенный в этом ряду, автоматически подстроится под размер экрана устройства, с которого пользователь будет заходить на ваш сайт. Вот этот код:

В качестве текстового содержимого я возьму текст рыбу с сайта lipsum.com. А заголовками для примера я сделаю распространенные фразы: «Свежие поступления», «Акции и Скидки – 50%» и «Бесплатная доставка».

Теперь наш ряд с текстом в редакторе opencart в режиме исходного кода будет выглядеть так.

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

Описание html тегов

Вот теги, которые мы будем использовать для оформления:

Это div с классом row – один ряд.

Это div с классом col-md-4 – три раза ( создает три колонки в ряду row).

Параграф – текст «обернут» в тег

чтобы выровнять его по ширине с помощью служебного класса бутсрап text-justify».

Тег span – нужен для того чтобы обернуть часть текста в параграфе для применения к нему вспомогательных классов бутстрап text-danger и text-success.

Заголовки третьего уровня – 3 штуки.

Выделяем текст жирным шрифтом.

Применяемые классы bootstrap css

Ряд, строка контейнер в котором будет все будет размещен контент.

Выравниваем заголовок по центру блока.

Выравниваем параграф по краям блока.

Выделяем текст зелеными буквами для обозначения успешного действия.

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

Делаем вывод модуля opencart в шаблоне

Далее нам нужно сохранить все изменения в текстовом блоке html opencart и вывести его на главной странице. Чтобы сделать это, зайдите во вкладку «Дизайн» и потом «Схемы». Далее выбираем строку «Главная», отвечающую за главную страницу. Жмем на кнопку «Редактировать» и попадаем в настройки страницы. Здесь настраивается порядок вывода модулей.

Среди прочих модулей, мы находим модуль html по названию, которое ему дали. Я назвал его «Реклама на главной». Жмем на кнопку с карандашом и выбираем искомое. Его можно поднять на ряд выше, сместив предыдущий модуль ниже и т.д. Вставляем модуль в нужное нам место и сохраняем изменения.

Дальнейшая настройка html блока opencart

В дефолтном шаблоне опенкарт стоит маленький шрифт и не слишком темный цвет шрифта. Чтобы позаботиться о глазах посетителей, я бы хотел увеличить размер шрифта текста на пару пикселей и сделать его темнее. Также заголовок «Почему стоит заказать товар у нас» хотелось бы передвинуть в центр и увеличить отступ между ним и верхним рядом текста.

Еще я изменю семейство шрифтов для заголовков. По умолчанию в шаблоне OcStore для всех шрифтов применяется семейство OpenSans, шрифт без засечек. Это хороший шрифт и я оставлю его для параграфов текста, а для заголовков назначу шрифт Lora с засечкам для контраста.

Эти настройки невозможно сделать в стандартном редакторе опенкард поскольку в админке дефолтного шаблона нет доступа к файлам шаблона. Поэтому мне придется создать и подключить собственный файл со стилями css. Назову его custom.css. И так же подключу шрифты в файле header.tpl.

Как подключить собственный файл css к опенкарт

Все css стили для дефолтного шаблона движка опенкарт находятся в папке stylesheet. Найти ее можно пройдя по такому пути:

catalog/view/theme/default/stylesheet/stylesheet.css

Стили шаблона написаны в файле stylesheet.css

Стили библиотеки бутстрап подключены здесь:

catalog/view/javascript/bootstrap/css/bootstrap.min.css

Чтобы подключить собственный файл со стилями css, нам нужно найти файл header.tpl. Он находится в папке common. Движемся по такому пути:

catalog/view/theme/default/template/common/header.tpl

(Здесь же мы подключим шрифт из google fonts.)

В файле header.tpl записываются все служебные файлы и мета-теги для поисковых систем: таблицы стилей, java-скрипты и прочее. В общем, файл header.tpl в opencart это тоже, что header.php в wordpress

Можно было бы прописать собственные css объявления в файле stylesheet.css, отделив их от стилей шаблона комментарием. Назвать его, к примеру, /*my custom style */. Но опытные разработчики скажут, что это не комильфо, и нужно делать отдельный файл со стилями. Ну, в общем, так и сделаем.

Создаем файл custom.css и ложим его в папку stylesheet. Здесь будут все наши собственные стили. С их помощью мы по необходимости перебьем некоторые стили шаблона и стили библиотеки bootstrap.

Потом открываем файл header.tpl в любом редакторе кода.

Нам нужно найти строку 34 с таким кодом:

Копируем ее и вставляем под строкой 34 копию, изменив stylesheet.css на custom.css

Все, собственный файл css к opencart подключен.

Как подключить шрифт в opencart

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

Для этого в сервисе fonts.google.com я выбрал кириллический шрифт Lora и там же скопировал сформировавшуюся ссылку. Ее я вставлю под ссылкой, подключающей к шаблону шрифт OpenSans. Вот она:

Теперь наш файл header.tpl выглядит так

Дополнительный шрифт к опенкарт можно подключить и по-другому. В строку с подключением шрифта OpenSans через плюс добавляем свой. Вот так:

источник

php блок HTML блок

3 изображения

Информация о файле

Модуль позволяет выводить на страницах сайта произвольный HTML и PHP-код.

Возможности:

  • Отображение на страницах сайта пользовательских блоков;
  • Создание неограниченного количества блоков;
  • Выполнение PHP-кода (с возможностью отключения);
  • Управление кэшированием блоков;
  • Использование CSS-стилей;
  • Отображение блока на определенном магазине;
  • Вывод одного блока в нескольких регионах;
  • Поддерживается многоязычность;
  • Управление оформлением блоков.
  • Скопировать файлы из архива;
  • Установить модуль и выставить права доступа в панели администратора (Система → Пользователи → Группы пользователей).

Внимание! Обратите особое внимание на вставляемый вами PHP-код. Неправильно написанный сценарий может привести к проблемам безопасности.

Модуль тестировался на версиях v1.5.1.3, v1.5.3.1, v1.5.5.1

источник

Читайте также:  teamspeak 3 настройка lineage 2