Accordion & Tabs

1.1 Adding the Module to a Layout

When displaying via shortcode you do not need to add the module to any layout.

You can add the module to all layouts at once. If no block is linked to a page, the module will produce no output.

Layout-to-page mapping:

• Home page — Home (common/home)
• Contact — Contact (information/contact)
• Manufacturer list — Manufacturer (product/manufacturer)
• Manufacturer page — create layout product/manufacturer/info
• Cart — create layout checkout/cart
• Account — Account (account/%)
• Information page — information/information
• Category — Category (product/category)
• Product — Product (product/product)

1.2 Shortcode System

Every block has a shortcode. Copy it from the block list by clicking the </> icon in the block row. The shortcode is also visible in the "Relations" tab of the block form.

Two shortcode variants:

• [ldev_question_block_id=1] — displays the block always wherever the shortcode appears (if the block is enabled).
• [ldev_question_block_id=1&rel=1] — displays the block only if its relations are satisfied. Useful when embedding shortcodes in twig template files.

Paste the shortcode in any admin text field (product description, category, article) or a twig file — the system substitutes the block automatically when the page renders.

1.3 Multiple Positions on One Page

Use shortcodes combined with the standard "HTML Content" module:

1. Create several "HTML Content" module instances, each with a different shortcode in its description.
2. In the layout, add these "HTML Content" modules to the desired positions — instead of the main Accordion & Tabs module.

Alternative — the "Append to selector" field (tab "Override output position"): specify a CSS selector and insertion method — the block will be moved there via JS after page load.

2.1 Product Relations

Options:

• Display for all products
• Specific products — selected manually
• Filter by parameters — the most powerful option

Filter by parameters lets you combine conditions:

• Example 1. Two conditions: (Manufacturer: Apple) + (Attribute: Cores = 8) OR (Quantity < 5). Block shows if at least one condition matches.
• Example 2. One condition with three parameters — block shows only if all three match simultaneously.

Available condition types: manufacturer, category, product name, discount (special), tag, attribute, product field (price, quantity, weight, etc.).

Comparison operators: =, !=, >, <, >=, <=, LIKE, BETWEEN, IS EMPTY, IS NOT EMPTY.

After adding a condition you can: click 👁 Preview to see how many products match; click ✏ Edit to reopen the condition for changes. The ? button next to "Add condition" opens a help panel with examples.

3.1 Block Types

Select the type in the "Block type, design, settings" tab, field "Display style". Type-specific settings appear in the corresponding section to the right.

3.2 Block Fields and Items

Each block consists of items added via the + button in the "Data" tab. The number of items is unlimited.

How item fields are used depends on the block type:

• Accordion / Tabs — title = section/tab heading, text = content
• Banner — title = heading over image, text = text over image, image = the banner itself
• Flip card — title + image = front side; text + buttons = back side
• Counter — title = number, text = label/caption, marker = suffix (+, %, etc.)

Per-item options: image dimensions, device visibility, background and text color, column count (for grid / flip_card / counter). Each item can have up to 2 buttons with individual links.

3.3 Variables and Widgets

Output dynamic data from the store database (category name, product data, product lists, etc.) directly into block content. Available variables depend on the page where the block is displayed.

Usable in: block description, item title, item text.

Click "Insert variable" — a modal opens with a searchable list grouped by section. Select a variable, copy it, and paste it into the desired field. Some variable groups are only available on the corresponding page type (product variables — only on the product page).

Available variable groups:

• Product — name, price, special price, image, rating, weight, availability, reward points, minimum quantity, date added, views, description, manufacturer
• Category — name, description, product count
• Store — URL, phone, fax, currency
• Global — current year ([current_year]), current date ([current_date])

Shortcode [ldev_countdown date="..."] — inserts a countdown timer to the specified date. Appearance is configured in module settings.

4.1 Creating Blocks from Demo Data

Two entry points — the Demo ▾ button in the toolbar or "Not sure where to start? Generate a block in 1 click" in the "New" dropdown:

• Generate a block in 1 click — choose a type and variant; the system creates a block with sample content.
• Add all demo blocks — creates one demo block of each type at once. Great for first-time exploration.

Some types have multiple demo variants (e.g. different timeline or counter styles).

4.2 Export / Import / Backup

Available in the block list toolbar, in each row, and in the block edit form:

• ↓ Export — saves block content (names, texts, items) as a JSON file. No relations or block_id. For transferring content between stores.
• ☐ Backup — full dump with block_id and relations (pages, categories). For restoring on the same site.
• ↑ Import — loads a JSON file (export or backup). Mode is auto-detected. Supports language mapping.

Bulk export/backup — check multiple blocks in the list and click the button in the toolbar.

4.3 "Additional" Tab — Block Customization

• Custom code — HTML/JS/CSS appended to the block output.
• Custom template — your own twig file instead of the default (place it in user_templates/). Enter the filename in this field.
• Custom CSS class — extra class on the block wrapper for custom styling.

4.4 Template Editor

A built-in Twig template editor — available in Extensions → Modules → Accordion & Tabs → "Templates" tab.

• Create a template — choose a block type, enter a filename, and click + Create. The new file is placed in user_templates/.
• Open and edit — select an existing file from the list and click Open. A CodeMirror editor with Twig/HTML syntax highlighting opens inline.
• Save — the Save button writes changes directly to the server (no FTP needed).

After saving, enter the filename in the "Custom template" field in the "Additional" tab of the target block to apply your template.