Accordion & Tabs

Інструкція з налаштування для OpenCart 3.x

Гнучке управління блоковим контентом з 18 типами відображення та підтримкою Schema.org мікророзмітки.

18 типів блоків ✓ Шорткоди ✓ Schema.org ✓ Export / Import ✓ Демо-дані
⚠ Важливо для власників попередніх версій

Версія 3.0 — major оновлення з новою системою активації

Якщо ви оновлюєтесь з попередньої версії модуля, прочитайте це перед завантаженням нових файлів:

  • Версія 3.0 є major оновленням з новою системою ліцензування — це фактично новий продукт.
  • Після встановлення нових файлів буде відображено форму активації. Без активаційного ключа модуль працювати не буде.
  • Власники попередніх версій отримують знижку 50% на придбання v3.0.
  • Старі файли продовжують працювати без обмежень — оновлення на v3.0 не є обов'язковим.
Придбати v3.0 зі знижкою 50% → Зв'яжіться з нами для отримання оновлень

🚀 З чого почати — перші 5 кроків

  • Встановити і увімкнути модуль Розширення → Модулі → Accordion & Tabs → Встановити → Увімкнути.
  • Додати модуль у схему (макет) Дизайн → Схеми → вибрати потрібну схему (наприклад, Home) → додати Accordion & Tabs у позицію (content_top, content_bottom тощо).
    Пропустіть цей крок, якщо плануєте виводити блоки тільки через шорткоди.
  • Створити перший блок Натисніть dropdown "Новий" → "Згенеруйте блок у 1 клік" — отримаєте готовий приклад із заповненим вмістом. Або "Новий: вибрати тип" для ручного налаштування.
  • Задати зв'язки блоку У формі блоку, вкладка "Зв'язки": вибрати сторінки, групи покупців і пристрої для виводу.
  • Перевірити на сайті Відкрити потрібну сторінку і переконатися, що блок відображається.
💡 Хочете вивести блок у конкретне місце сторінки, а не в позицію макету? Скопіюйте шорткод блоку зі списку та вставте у опис товару, категорії або twig-файл шаблону.

1. Виведення блоків

Блоки модуля можна виводити двома способами — через макети OpenCart або через систему шорткодів.

  • Макети — ідеально, якщо вам підходять стандартні позиції шаблону (зліва, справа, верх, низ) і блок треба виводити на багатьох сторінках певного типу.
  • Шорткоди — ідеально для виводу в описах товарів, категорій, статей, ocfilter-сторінок або twig-файлів шаблону.

1.1 Додавання модуля у схему (макет)

При виводі блоку шорткодом додавати головний модуль у схеми не потрібно.

Модуль можна додати одразу на всі схеми сайту. Якщо до сторінки не прив'язаний жоден блок — модуль виводитися не буде.

Відповідність макетів до сторінок:

  • Головна — Home (common/home)
  • Контакти — Contact (information/contact)
  • Список виробників — Manufacturer (product/manufacturer)
  • Сторінка виробника — створити схему product/manufacturer/info
  • Кошик — створити схему checkout/cart
  • Особистий кабінет — Account (account/%)
  • Стаття магазину — information/information
  • Категорія — Category (product/category)
  • Товар — Product (product/product)

1.2 Система шорткодів

Кожен блок має свій шорткод. Скопіювати його можна прямо зі списку блоків — натисніть іконку </> у рядку потрібного блоку. Також шорткод видно у вкладці "Зв'язки" у формі редагування.

Два варіанти шорткоду:

  • [ldev_question_block_id=1] — виводить блок завжди, де є цей шорткод (якщо блок увімкнений).
  • [ldev_question_block_id=1&rel=1] — виводить блок тільки якщо виконуються зв'язки, задані у блоці. Зручно при вставці шорткоду у twig-файл шаблону.

Вставляйте шорткод у будь-яке текстове поле адмінки (опис товару, категорії, статті) або у twig-файл — при генерації сторінки система автоматично підставить блок.

1.3 Виведення у різних позиціях на одній сторінці

Використовуйте шорткоди у поєднанні зі стандартним модулем "HTML контент":

  1. Створіть кілька примірників модуля "HTML контент", вставте у поле опису кожного свій шорткод.
  2. У макеті додайте ці модулі "HTML контент" кожен у бажану позицію — замість головного модуля Accordion & Tabs.

Альтернатива — поле "Прив'язка блоку по селектору" (вкладка "Перевизначення позиції виводу"): вкажіть CSS-селектор і метод вставки, блок переміститься туди через JS після завантаження сторінки.

2. Зв'язки блоку

Вкладки "Зв'язки", "Зв'язки з товарами" та "Зв'язки по URL" керують тим, на яких сторінках відображається блок:

  • Конкретна сторінка — категорія, виробник, стаття
  • Головна, контакти, кошик, особистий кабінет тощо
  • Довільний URL або його частина (вкладка "Зв'язки по URL")
  • Конкретний товар або підбір товарів за параметрами
  • Авторизація та група покупця
  • Пристрій відвідувача (мобільний, планшет, десктоп)
  • Магазин (при мультимагазині)

2.1 Зв'язки з товарами

Варіанти прив'язки до товарів:

  • Виводити для усіх товарів
  • Конкретні товари — вибір вручну
  • Підбір за параметрами — найпотужніша опція

Підбір за параметрами дозволяє задавати умови з комбінаціями:

  • Приклад 1. Дві умови: (Виробник: Apple) + (Атрибут: Cores = 8) АБО (Кількість < 5). Блок показується якщо виконана хоча б одна умова.
  • Приклад 2. Одна умова з трьох параметрів — блок тільки якщо всі три виконані одночасно.

Доступні типи умов: виробник, категорія, назва товару, знижка (special), тег, атрибут, поле товару (ціна, кількість, вага тощо).

Оператори порівняння: =, !=, >, <, >=, <=, LIKE, BETWEEN, IS EMPTY, IS NOT EMPTY.

Після додавання умови доступні: кнопка 👁 Перегляд — показує кількість товарів, що відповідають умові; кнопка ✏ Редагувати — відкриває модаль з відновленими даними. Кнопка ? поруч з "Додати умову" відкриває довідку з прикладами.

Зв'язки за параметрами оновлюються при збереженні блоку або вручну кнопкою ↺ у списку блоків. Підтримується оновлення по cron.

3. Блоки

3.1 Типи блоків

Тип блоку вибирається у вкладці "Тип блоку, дизайн, налаштування", поле "Стиль виводу". Налаштування кожного типу — у відповідній секції праворуч.

ТипОпис
Акордеон (collapse)Розкладні секції. Toggler, "Розгорнути/Згорнути все", deep-link за URL-хешом, мультиколонковий розклад
Вкладки (tabs)Горизонтальні або вертикальні вкладки з підтримкою deep-link за URL-хешом
Панель (panel)Простий блок з заголовком і текстом без взаємодії
Галерея (gallery)Сітка зображень або слайдер із підтримкою popup, підписів, пропорцій (ratio)
Банер (banner)Один банер або слайдер банерів із підписами поверх зображення, overlay, анімацією
Сітка (grid)Контентна сітка з картками: заголовок, текст, зображення, кнопки, hover-ефект
Popup (popup)Спливаюче вікно, яке відкривається за кнопкою або посиланням
Кроки (steps)Покрокова інструкція або wizard
Список (list)Простий список елементів
Контейнер (container)Обгортка для виводу сторонніх модулів або довільного HTML через зв'язки
Показати більше (show_more)Блок контенту з кнопкою розгортання прихованої частини
Меню (menu)Навігаційне меню з підменю (dropdown)
Підказка (tooltip)Контентний блок у вигляді підказки (tooltip / popover)
TimelineХронологічна стрічка. 8 форм точок (circle/square/diamond/ring/hexagon/star/pin/cross), нумерація, анімація
Flip cardsКартки з 3D-перевертанням (hover / click / горизонтально / вертикально)
Лічильники (counter)Анімовані числові лічильники. Стилі: plain / bar / circular. Запуск при скролі до елемента
Таблиця тарифів (pricing_table)Grid-картки цінових планів. Акцентний колір, бейдж "Популярний", список переваг, CTA-кнопки
Таблиця порівняння (comparison_table)HTML-таблиця порівняння товарів/тарифів. Назви рядків із поля "Про блок", значення комірок із елементів, підтримка галочок і хрестиків, кнопки у підвалі

3.2 Поля блоків і елементи

Кожен блок складається з елементів, які додаються кнопкою + у вкладці "Дані". Кількість необмежена.

Залежно від типу поля елемента використовуються по-різному:

  • Акордеон / Вкладки — назва = заголовок секції/вкладки, текст = вміст
  • Банер — назва = заголовок поверх картинки, текст = текст поверх, зображення = сам банер
  • Flip card — назва + зображення = лицьова сторона; текст + кнопки = зворотна сторона
  • Лічильник — назва = число, текст = мітка/підпис, marker = суфікс (+, % тощо)

Для кожного елемента доступні: розміри зображення, видимість на пристроях, фоновий і текстовий колір, кількість колонок (для grid / flip_card / counter). Кожен елемент може мати до 2 кнопок з індивідуальними посиланнями.

3.3 Змінні та віджети

Виводять динамічні дані з бази магазину у вміст блоку (назву категорії, дані товару, список товарів тощо). Доступні змінні залежать від сторінки виводу.

Де можна використовувати: опис блоку, назва елемента, текст елемента.

Натисніть "Вставка змінної" — відкриється модаль із пошуком і групуванням за секціями. Вибрану змінну можна скопіювати та вставити у потрібне поле. Деякі групи змінних доступні лише на відповідних сторінках (змінні товару — тільки на сторінці товару).

Доступні групи змінних:

  • Товар — назва, ціна, спеціальна ціна, зображення, рейтинг, вага, наявність, бали лояльності, мінімальна кількість, дата додавання, переглядів, опис, виробник
  • Категорія — назва, опис, кількість товарів
  • Магазин — URL, телефон, факс, валюта
  • Глобальні — поточний рік ([current_year]), поточна дата ([current_date])

Шорткод [ldev_countdown date="..."] — таймер зворотного відліку до вказаної дати. Зовнішній вигляд налаштовується у параметрах модуля.

4. Управління блоками

4.1 Створення блоку з демо-даними

Два варіанти запуску — кнопка Demo ▾ у тулбарі або посилання "Є складнощі? Згенеруйте блок у 1 клік" у dropdown "Новий":

  • Згенеруйте блок у 1 клік — виберіть тип і варіант, система створить блок із заповненим прикладом вмісту.
  • Додати всі демо-блоки — одночасно створює по одному демо-блоку кожного типу. Зручно для першого знайомства.

Деякі типи мають кілька варіантів демо (наприклад, різні стилі timeline або counter).

4.2 Експорт / Імпорт / Резервна копія

Доступні у тулбарі списку блоків і у кожному рядку списку, а також у формі редагування блоку:

  • ↓ Експорт — вміст блоку (назви, тексти, елементи) у JSON-файл. Без зв'язків і block_id. Для перенесення між магазинами.
  • ☐ Резервна копія — повний дамп з block_id і зв'язками (сторінки, категорії). Для відновлення на тому ж сайті.
  • ↑ Імпорт — завантажує JSON (експорт або резервну копію). Режим визначається автоматично. Підтримує маппінг мов.

Масовий експорт/бекап — позначте блоки галочками у списку і натисніть відповідну кнопку у тулбарі.

📥 Імпорт блоків з демо-сайту
Будь-який блок з accordion.likedev.pro можна завантажити за 3 кроки:
1. Відкрийте адмін демо-сайту, знайдіть блок, натисніть ↓ Експорт у його рядку.
2. У своїй адмінці натисніть ↑ Імпорт і завантажте отриманий JSON-файл.
Зв'язки і зображення не переносяться — налаштуйте вручну після імпорту.

4.3 Вкладка "Додатково" — кастомізація блоку

  • Кастомний код — HTML/JS/CSS, який додається у вивід блоку.
  • Кастомний шаблон — власний twig-файл замість стандартного (розміщується у user_templates/). Ім'я файлу задається у цьому ж полі.
  • Кастомний CSS-клас — додатковий клас до обгортки блоку для власної стилізації.

4.4 Редактор шаблонів (Template Editor)

Вбудований редактор Twig-шаблонів — доступний у Розширення → Модулі → Accordion & Tabs → вкладка "Шаблони".

  • Створити шаблон — виберіть тип блоку, введіть ім'я файлу і натисніть + Створити. Новий файл з'явиться у user_templates/.
  • Відкрити та редагувати — виберіть існуючий файл зі списку і натисніть Відкрити. CodeMirror-редактор з підсвічуванням синтаксису Twig/HTML.
  • Зберегти — кнопка "Зберегти" записує зміни безпосередньо на сервер (без FTP).

Після збереження вкажіть ім'я файлу у полі "Кастомний шаблон" у вкладці "Додатково" конкретного блоку, щоб застосувати власний шаблон.

💡 Кастомні шаблони успадковують доступ до всіх змінних стандартного шаблону — block_id, list, heading, about та всіх налаштувань блоку.

Часті запитання

Не виводиться блок на сторінці
  1. Перевірте статус модуля у Розширення → Модулі — має бути увімкнений.
  2. Перевірте статус самого блоку у вкладці "Тип блоку, дизайн, налаштування".
  3. Перевірте відображення на пристроях у вкладці "Зв'язки" — позначено хоча б один.
  4. Перевірте групи покупців — позначена хоча б одна.
  5. При виводі через макети — чи додано головний модуль у відповідний макет.
  6. При виводі через шорткод — чи збігається id блоку і чи є шорткод у потрібному місці.
  7. Перевірте зв'язки блоку — якщо задані, блок виводиться лише на відповідних сторінках.
Кілька блоків на одній сторінці через макети
Так, можна прив'язати будь-яку кількість блоків. Порядок виводу регулюється полем "Порядок сортування" у вкладці "Тип блоку, дизайн, налаштування".
Кілька блоків на одній сторінці у різних позиціях
Використовуйте шорткоди + модулі "HTML контент" у різних позиціях макету. Або поле "Прив'язка блоку по селектору" у вкладці "Перевизначення позиції виводу".
Як вивести блок у довільне місце на сторінці
  1. Шорткоди — вставте шорткод блоку у будь-яке текстове поле або twig-файл.
  2. Прив'язка по селектору — вкажіть CSS-селектор і метод вставки у вкладці "Перевизначення позиції виводу".
Не працює перемикання табів/акордеону, злетіли стилі
Модуль (версія 3.0+) використовує власну CSS/JS систему і не залежить від Bootstrap теми.
  1. Переконайтесь, що на сторінці підключений jQuery.
  2. Перевірте консоль браузера (F12 → Console) на JS-помилки від інших модулів.
  3. Перевірте конфлікти CSS-стилів теми з класами ldev-* через F12 → Elements.
Сумісність з модулями мікророзмітки (microdata pro, sp seo faq)
Модуль не залежить від інших модулів мікророзмітки. Проблем сумісного використання не виявлено.
Важливо: Google дозволяє один блок FAQ і один HowTo на сторінці — не розміщуйте два блоки з однаковим типом мікророзмітки на одній сторінці. Тип задається у списку блоків у колонці "Мікророзмітка".
Не працює слайдер у галереї або банері
Слайдер використовує бібліотеку Slick. Переконайтесь, що у налаштуваннях модуля (Розширення → Модулі → Accordion & Tabs) увімкнена опція "Підключити Slick JS".
Де знайти шорткод блоку?
Натисніть іконку </> у рядку потрібного блоку у списку — з'явиться дропдаун з обома варіантами шорткоду і кнопкою копіювання. Також шорткод відображається у вкладці "Зв'язки" у формі редагування.

Контакти автора

З питань щодо модуля пишіть автору:

👤OpenCartForum ✉️seriusisu@gmail.com 🧩Всі розширення ✈️Telegram

Сайт розробника: likedev.pro