Как сделать слайдшоу и галерею в модуле HTML-контент в OpenCart из коробки


424

В дефолтном OpenCart модуль HTML-контент - это сплошное разочарование. Ты вставляешь свой HTML, а система оборачивает его в какую-то ненужную div-обертку. Никто не просил! Это не просто лишний мусор в разметке - это лишает смысла саму суть модуля, ПРОИЗВОЛЬНЫЙ HTML и именно его я хочу вставить в нужное место. Зачем мне ваша обёртка?

А теперь представь: хочешь вставить в этот модуль слайдер Swiper или галерею Fancybox. Что делать? Либо вручную подключать их скрипты и стили прямо внутри HTML (о сжатии и скриптов/стилей забудь), либо вешать глобально на весь сайт (ты серьёзно?), либо надеяться, что какой-то другой модуль уже подключил эти библиотеки (удачи). Не забудь ёще, что Summernote вырежет твой js с инициализацией Swiper или Fancybox, поэтому инициализацию нужно будет пихать в common.js.

Годы опыта и борьбы в вселенской глупостью сделали своё дело, я переделал HTML-модуль так, как должно быть изначально.

Без обертки - чистый HTML

Теперь модуль выводит ровно то, что ты вставил в поле контента. Без div.module-html, без wrapper, без лишних классов. Хочешь свой контейнер - сам его пишешь. Хочешь голый div или section - пожалуйста. Никаких сюрпризов в разметке. Стили и скрипты не ломаются, потому что ничего лишнего не добавляется.

Опциональное подключение Swiper и Fancybox для каждого модуля

В настройках каждого экземпляра HTML-модуля добавил две галочки:

  • Подключить Swiper (js + css)
  • Подключить Fancybox (js + css)

Поставил галочку - библиотека подключается только на странице с этим модулем (если другие модули не дергают те же библиотеки, конечно). Не поставил - не подключается. Никакой глобальной нагрузки, никаких конфликтов версий, никаких "я подключил в footer, а тут не работает". Скрипты и стили подключенных библиотек автоматически попадают в бандл. Всё локально и с пониманием, как это работает на деле.

Редактор: прощай Summernote, привет CodeMirror

По умолчанию в HTML-модуле стоит Summernote (он кстати ничего так, хотя многие говорят что слабоват) - WYSIWYG-редактор, который пытается "помочь" форматировать текст. Но это же HTML-модуль! Тут нужен код, а не визуальный редактор, который добавляет свои теги, удаляет твои и ломает твои художества. Убрал Summernote полностью. Теперь используется CodeMirror - лёгкий, быстрый редактор кода с подсветкой синтаксиса HTML/CSS/JS. Плюс кнопка "Полноэкранный режим" - удобно править большие блоки.

Всё из коробки. Поставил сборку, создал HTML-модуль, включил Swiper/Fancybox по желанию, вставил нужный HTML + js (тут будь осторожен, надеюсь ты понимаешь что делаешь) - и получил именно то, что хотел, без плясок.

Если ты хочешь делать современные лендинги, галереи и слайдеры (да вообще любые сайты для бизнеса) без борьбы с платформой - exopencart рабочая лошадка.

Не хочешь? Ну не делай, у нас это дело добровольное.


Написать комментарий
Введите код с картинки