Mosaic — модули в ряд и сеткой, без правки темы

Вышла новая версия v1.2.0 от 08.08.2026
Все кто купил модуль получают обновления безопасности и нового функционала бесплатно. Скачать можно на вкладке "Файлы для скачивания".
Заходите в группу в Max чтобы быть в курсе всех обновлений моих модулей. Обновления для модулей бесплатны.

В OpenCart модули встают только столбиком: слайдер, под ним баннеры, под ними всё остальное. Поставить блоки рядом — слайдер слева, баннеры справа — штатными средствами нельзя. Обычно это правка темы или работа верстальщика.

Mosaic решает эту задачу визуально: выбираете готовую раскладку, назначаете свои модули в ячейки — сцена собрана за минуту.

Mosaic строит сетку — не переделывает модули. Он отвечает за размер, позицию и обрезку каждой ячейки, но вставляет модули такими, какие они есть, ничего не меняя внутри них. Это осознанный выбор: любое вмешательство в чужую вёрстку работает на одной теме и ломается на другой — а сетка, которая ничего не трогает, работает везде одинаково. Поэтому результат зависит не только от Mosaic, но и от самих модулей.

ДЕМО:
Демонстрация разных раскладок на главной странице: https://mosaic.telecart.pro
Демонстрация в описании товара: ссылка
Демонстрация в описании категории: ссылка
Демонстрация в статье блога: ссылка
Демонстрация админки: ссылка (логин/пароль: demo/demo)



Что делает Mosaic

• Расставляет существующие модули OpenCart (слайдеры, баннеры, любые другие) рядом, в сетке — без правки шаблона темы.
• Готовые раскладки: выбрали —> назначили модули —> работает.
• Точный размер каждой ячейки — сразу видно, под какие размеры готовить картинки, чтобы всё выглядело идеально ровно.
• Любая раскладка настраивается мышью: блоки двигаются и растягиваются.
• Своя адаптивная версия для мобильных — из коробки.
• Вставка раскладки в текст — в описание товара, статью или новость, одной короткой меткой

Как это работает

• Создаёте модуль Mosaic и выбираете готовую раскладку из галереи.
• Назначаете свои модули в ячейки.
• Корректируете настройки, если требуется.
• Сохраняете и ставите модуль в нужную позицию через редактор макетов OpenCart или shortcode в текст описания товара, статьи и т.д.

Не требуется править файлы темы, программиста и серьёзных навыков вёрстки.



Не гадаете с размером картинок

Одна из главных причин, почему собранная руками раскладка выглядит криво — разные пропорции слайдера и баннеров. Mosaic сразу показывает точный размер каждой ячейки — готовите картинку по подсказке, и она встаёт ровно, без белых полей и обрезки.



Работает с вашей темой

Mosaic строит собственную сетку и не трогает вёрстку шаблона — поэтому одинаково работает на дефолтной теме, ocStore, ЛайвСторе и сторонних темах. Проверено на нескольких популярных бесплатных и платных темах.



Готовые раскладки внутри

Галерея — 7 сцен на выбор, каждая с уже настроенными пропорциями:

• Слайдер + два баннера — классика главной страницы.
• Слайдер + баннер — тоже классика.
• Два баннера — промо-сплит.
• Три в ряд — три модуля в ряд с одинаковой шириной.
• Четыре в ряд — тоже самое что предыдущее, только 4 модуля.
• Сетка баннеров 2×3 — на планшете автоматически перестраивается в 2 колонки × 3 ряда.
• Большой баннер + четыре малых — витрина в духе маркетплейсов.

Взяли раскладку как есть — или настроили под себя.



Вставка Mosaic раскладки в текст.



Модуль регистрирует ShortCode, позволяющий с помощью специального макроса вида `[mosaic:2]`, где `2` это ID Mosaic блока, вставлять Mosaic модуль в любое месте в описание товара, в тексте статей и т.п.
Работает максимально чисто, без модификации системных файлов - на стандартных событиях OpenCart.

ShortCode для вставки выводится в конструкторе Mosaic.



Демонстрация в описании товара: ссылка
Демонстрация в описании категории: ссылка
Демонстрация в статье блога: ссылка

Мобильная версия — из коробки

Каждая раскладка сама собирается в аккуратный столбик на телефоне. Ничего не съезжает, ничего не пропадает.

Тонкая настройка — для тех, кому нужно

Если ваша тема добавляет модулям собственные отступы или оформление — в настройках блока есть поле для точечных CSS-правок именно этой ячейки. Большинству пользователей это поле не понадобится вообще.

Совместимость

OpenCart 3.x, ocStore 3.x, ЛайвСтор. Работает с любой темой; список тем, на которых модуль тестировался:

• Стандартная тема OpenCart 3.
• Стандартная тема OcStore 3.
• Стандартная теме LiveStore 3.
• Unishop2 Free.

Список будет дополняться.

Поддержка

В поддержку входит выпуск обновлений безопасности и исправление ошибок модуля.
Индивидуальная адаптация под дизайн вашей темы — не входит в стоимость модуля и доступна отдельной услугой (от 1000 рублей).

Цена 2490 ₽. На запуске — 1490 ₽ (скидка 40%, ограничено по времени).

Заходите в группу в Max чтобы быть в курсе всех обновлений моих модулей. Обновления для модулей бесплатны.

Частые вопросы

Q: Почему нельзя просто «подогнать любую картинку под ячейку» автоматически?
A: Технически это означало бы, что Mosaic заглядывает внутрь чужого модуля и меняет его содержимое — а у каждой темы своя вёрстка баннеров и слайдеров, и правило, работающее у одной, ломается у другой (мы проверяли на нескольких темах и получали то обрезанные рамки, то белые поля, то и вовсе игнорируемые стили). Поэтому Mosaic отвечает только за ячейку — её размер, позицию и точную подгонку под общую сетку, — а с содержимым не спорит. Взамен модуль сам подсказывает точный размер для каждой ячейки: подготовили картинку нужного размера по подсказке — она встаёт идеально, на любой теме и в любой раскладке, без сюрпризов.

Q: У баннера моей темы остаются небольшие отступы по краям — что делать?
A: Некоторые темы добавляют собственным баннерам внутренние поля. Для точной подгонки используйте поле CSS-правок в настройках блока.

Q: Можно ставить модуль не только на главную?
A: Да, Mosaic работает в штатной системе позиций OpenCart — на категории, товаре, информационных страницах, где угодно.

Q: Что будет с моей текущей главной после установки модуля?
A: Ничего, пока вы сами не поставите Mosaic в нужную позицию вместо существующего макета. Установка ничего не ломает.

Q: Тема сама ограничивает высоту картинки в баннере — можно ли это обойти?
A: Если тема жёстко режет высоту своих баннеров, это её собственное ограничение — Mosaic не переопределяет чужую вёрстку по умолчанию. Решение — использовать функционал "Кастомный CSS" в свойствах такого блока, чтобы переопределить поведение темы.

Версия 1.2.0 (08.08.2026)

✨ Добавлено

• Свой стиль для всей раскладки. Раньше свой стиль можно было задать только отдельным блокам — теперь и самой раскладке целиком: фон, отступы, рамки, поведение на разных экранах. Настройка на вкладке "Сетка", раздел "Расширенные". Стили отдельных блоков работают как работали: новая возможность их дополняет, а не заменяет.

????️ Безопасность

• Обновили внешние библиотеки — закрыли 9 уязвимостей в 6 компонентах. Ни одна из них не была в коде Mosaic: это внешние инструменты, которыми модуль собирается, и на работу вашего магазина они не влияли. Мы обновляем поставку сразу, как выходит исправление, — чтобы модуль, который вы ставите себе на сайт, всегда был собран из чистых компонентов. Проверить можно по официальным карточкам:
  
  • postcss 8.5.15 → 8.5.26: GHSA-r28c-9q8g-f849, GHSA-fxqj-rqcc-2cmp
  • nanoid 3.3.12 → 3.3.18: GHSA-28wg-ghj8-5hjv, GHSA-2v37-7h3g-55p8
  • immutable 5.1.5 → 5.1.9: GHSA-v56q-mh7h-f735, GHSA-xvcm-6775-5m9r
  • ws: GHSA-96hv-2xvq-fx4p
  • esbuild 0.27.7 → 0.28.1: GHSA-g7r4-m6w7-qqqr
  • @babel/core 7.28.0 → 7.29.7: GHSA-4x5r-pxfx-6jf8

Версия 1.1.0 (21.07.2026)

✨ Добавлено

• Вставка раскладки прямо в текст. Раскладку можно поставить не только в стандартные места темы, но и внутрь текста: в описание товара или категории, в информационную страницу, в статью блога. Для этого в редакторе копируется короткий код вида `[mosaic:2]` и вставляется туда, где должна появиться раскладка. Никакие файлы темы при этом не правятся.
• Защита от случайного срабатывания. Код работает только в текстах, которые пишет администратор. Если посетитель напишет такой же код в отзыве или комментарии, ничего не произойдёт — код просто исчезнет. Чтобы раскладка построилась, код должен стоять отдельной строкой, а не внутри предложения.

Версия 1.0.0 (11.07.2026)

Первый выпуск Mosaic — конструктора раскладок для OpenCart 3.0.x, ocStore и LiveStore.

✨ Добавлено

• Визуальный конструктор. Блоки расставляются мышью: перетащить, растянуть, поменять местами. В каждый блок назначается любой уже установленный модуль вашего магазина — Mosaic только размещает его, ничего не меняя внутри.
• Блоки становятся рядом и на разной высоте. Штатными средствами OpenCart модули встают только друг под другом; здесь слайдер может стоять слева, а два баннера — справа, один над другим.
• Своя раскладка для каждого экрана. Компьютер, ноутбук, планшет и телефон настраиваются отдельно: блок можно переставить или вовсе скрыть на нужном размере экрана. На телефоне блоки автоматически выстраиваются в одну колонку.
• Высота рядов подбирается сама. На выбор: одинаковая высота для всех, заданная пропорция или подстройка под высоту выбранного блока — например, чтобы баннеры заканчивались ровно на одной линии со слайдером.
• Два режима содержимого — "Как есть" и "Обрезать": модуль либо показывается целиком, либо лишнее по краям отсекается.
• Подсказка размера картинки. Для каждого блока показывается, какого размера готовить изображение, и напоминание указать тот же размер в настройках самого модуля — иначе магазин впишет картинку в свои размеры и добавит поля.
• Галерея готовых раскладок. Собранные сцены с уже настроенными пропорциями — можно взять как есть или доработать. Есть "Своя раскладка", очистка сцены и копирование раскладки целиком.
• Тонкая настройка блока: отступы со всех сторон, выравнивание содержимого, снятие лишнего отступа, который модуль добавляет сам.
• Подсказки простым языком у каждой неочевидной настройки — с короткой анимацией, показывающей, что именно изменится.
• Свой стиль для отдельного блока (для тех, кто умеет работать с оформлением) — с подсветкой и предпросмотром.

Написать

Ваше Имя:


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

Оценка: Плохо           Хорошо

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

Файлы будут доступны после покупки