Ctm Accordion Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require contao-thememanager/ctm-accordion
   

   Ensure your Laravel project is using Contao Manager (if applicable) or manually include the package in composer.json.

2. Publish Assets Run:

   php artisan vendor:publish --provider="ContaoThememanager\CtmAccordion\CtmAccordionServiceProvider" --tag=public
   

   This copies JS/CSS to public/vendor/ctm-accordion/.

3. Basic Usage Add the accordion to a Contao template via:

   {{ Contao\Thememanager\CtmAccordion::render('accordion_id', [
       'items' => [
           ['title' => 'Section 1', 'content' => 'Content 1'],
           ['title' => 'Section 2', 'content' => 'Content 2'],
       ],
   ]) }}
   

4. First Use Case

   • Create a dynamic FAQ section in a Contao page.
   • Use the items array to populate accordion entries from a database (e.g., FaqEntry model).

Implementation Patterns

Workflow Integration

1. Database-Driven Accordions Fetch data from Laravel models and pass to the accordion:

   $faqItems = FaqEntry::where('active', 1)->get()->map(function ($item) {
       return [
           'title' => $item->question,
           'content' => $item->answer,
           'icon' => $item->icon ?? null,
       ];
   });
   

2. Frontend Templating Extend Contao’s PageRegular template to include the accordion:

   {% block content %}
       {{ Contao\Thememanager\CtmAccordion::render('faq-accordion', {
           'items': faqItems|json_encode
       }) }}
   {% endblock %}
   

3. Dynamic Loading (AJAX) Use Laravel routes to fetch accordion items via AJAX:

   Route::get('/accordion/items/{id}', [AccordionController::class, 'getItems']);
   

   // Fetch and update accordion dynamically
   $.get(`/accordion/items/${accordionId}`, (data) => {
       $('#accordion-container').html(data);
   });
   

4. Thememanager Integration

   • Assign the accordion to a Contao theme via tl_theme table.
   • Use the ctm_accordion element in Contao’s Page Builder for drag-and-drop placement.

Gotchas and Tips

Pitfalls

1. Asset Loading Conflicts

   • Ensure the package’s JS/CSS is not overridden by other plugins.
   • Check public/vendor/ctm-accordion/ for missing files after updates.

2. Contao Dependency

   • Requires Contao CMS (not standalone Laravel). If using Laravel-only, consider a fork or alternative like Laravel Accordion.

3. Template Caching

   • Clear Contao’s cache (tl_cache table) or run:

     php artisan contao:cache:clear
     

     after changes to accordion templates.

4. JavaScript Errors

   • Verify jQuery is loaded before the accordion script:

     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="{{ asset('vendor/ctm-accordion/js/accordion.js') }}"></script>
     

Tips

1. Custom Styling Override CSS via Contao’s tl_style or a custom SCSS file:

   .ctm-accordion {
       .accordion-header {
           background: #f0f0f0;
       }
   }
   

2. Multi-Language Support Use Contao’s tl_language to localize titles/content:

   $items = FaqEntry::where('active', 1)->get()->map(function ($item) {
       return [
           'title' => $item->question[LANGUAGE],
           'content' => $item->answer[LANGUAGE],
       ];
   });
   

3. Debugging

   • Enable Contao’s debug mode in config/localconfig.php:

     $GLOBALS['TL_CONFIG']['debugMode'] = true;
     

   • Check browser console for errors (e.g., missing accordion_id).

4. Extending Functionality

   • Add Icons: Extend the items array with an icon key (e.g., ['icon' => 'fas fa-question']).
   • Nested Accordions: Use the nested option:

     'items' => [
         ['title' => 'Parent', 'content' => '...', 'nested' => true],
     ]