Оценок: 1

Модуль "Произвольные блоки" для Opencart 3

С помощью этого модуля можо вывести список преимуществ, несколько баннеров, статичных, или в виде слайдера. Внутри одного баннера может быть слайдшоу, остальные - статичные изображения. Другие варианты содержимого. Лучшего названия не придумал, пусть остаётся таким.

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

изображение или баннер (выбрать из баннеров). При выборе "Баннер", можно вывести как слйдшоу, так и случайное изображение.
заголовок
описание, для которого предусмотрено два поля - "Описание" и "Дополнительно", как их использовать - решайте сами.
CSS class
размеры изображения (если не заполнять, будут использованы из общих настроек модуля)
порядок сортировки

Что касается общих настроек, то здесь можно указать:

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

Есть возможность объединить все элементы в слайдер.

Для примера, создам пару блоков (модулей). В одном выведу "Преимущества", в другом - "Лучшие предложения".

Пример первый - "Преимущества"

Первый блок, три элемента, два из которых - указаное изображение, один - случайное изображение из баннеров. У каждого элемента заполнены - заголовок, дополнительно:

В общих настройках заданы:

размеры изображений,
CSS class контейнера - " preimuschestva box mod-items" (в некоторых версиях из-за небольшого бага в twig, значения из поля могут сливаться с заданными значениями в шаблоне, в этом случае рекомендую добавлять пробел вначале),
CSS класс для внутренних блоков - "mod-item",
немного стилей (чуть ниже покажу)

На странице получим такой HTML код:

Оформлять в CSS придется самостоятельно. Ниже будет приведен только небольшой пример, поскольку вариантов много. Для этого блока:

.mod-title {font-size: 22px;line-height: 1.2em;}
.preimuschestva {display: flex;justify-content: space-between;}
.preimuschestva .item .name {font-size: 18px;font-weight: bold;}

Результат будет выглядеть так:

Пример второй - "Лучшие предложения"

Здесь будет блок также из трех элементов, только все они будут в виде больших баннеров. два - статичные, третий - слайдшоу.

В коде на странице это выглядит так:

Внешний вид:

Над оформлением здесь не старался, как и над поиском изображений (взял что есть в demo), в целом думаю понятно, что можно получить. CSS код, который использовал:

.best-sale {display: flex;justify-content: space-between;}
.best-sale .slideshow {width:500px;margin-bottom:0px}
.best-sale .item {position:relative}
.best-sale .name {position:absolute;bottom:5px;left:5px; font-size: 18px;font-weight: bold;}