Ctm Tabs Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require contao-thememanager/ctm-tabs
   

   Publish the package assets (if needed):

   php artisan vendor:publish --provider="ContaoThememanager\Tabs\TabsServiceProvider" --tag=assets
   

2. Basic Usage

   • Register a tab in your config/ctm-tabs.php:

     'tabs' => [
         'my_custom_tab' => [
             'label' => 'Custom Tab',
             'icon' => 'fas fa-cog',
             'priority' => 10,
             'content' => function () {
                 return view('vendor.ctm-tabs.custom-tab-content');
             },
         ],
     ],
     

   • Use the ctm-tabs directive in your Blade template:

     @ctmTabs(['my_custom_tab'])
     

3. First Use Case

   • Extend a Contao backend module with dynamic tabs (e.g., for theme customization).
   • Example: Add a "Theme Preview" tab to the Contao tl_theme module.

Implementation Patterns

Dynamic Tab Registration

• Runtime Registration Register tabs dynamically via service providers or events:

  public function boot()
  {
      \ContaoThememanager\Tabs\TabsManager::registerTab('dynamic_tab', [
          'label' => 'Dynamic Tab',
          'content' => function () { /* ... */ },
      ]);
  }
  

• Conditional Tabs Use closures to conditionally render tabs:

  'tabs' => [
      'admin_only_tab' => [
          'label' => 'Admin Tools',
          'content' => function () {
              return auth()->check() ? view('admin.tools') : null;
          },
      ],
  ],
  

Integration with Contao Backend

• Extend Existing Modules Hook into Contao’s backend modules to inject tabs:

  Event::listen('contao.backend.module.load', function ($module) {
      if ($module->name === 'main') {
          \ContaoThememanager\Tabs\TabsManager::addToModule($module, 'my_tab');
      }
  });
  

• Tab-Specific Permissions Restrict tabs via Contao’s permission system:

  'tabs' => [
      'restricted_tab' => [
          'label' => 'Restricted',
          'content' => function () {
              return \BackendUser::getInstance()->hasAccess('restricted_tab', 'modules');
          },
      ],
  ],
  

Frontend Integration

• Blade Directives Use @ctmTabs in frontend templates for dynamic content:

  @ctmTabs(['homepage_tab', 'footer_tab'], ['active' => 'homepage_tab'])
  

• JavaScript Events Trigger tab changes via JS:

  document.querySelector('.ctm-tab-switcher').addEventListener('click', (e) => {
      e.preventDefault();
      const tabId = e.target.dataset.tab;
      ctmTabs.switchTab(tabId);
  });
  

Gotchas and Tips

Common Pitfalls

• Missing Assets If tabs don’t render, ensure assets are published:

  php artisan vendor:publish --tag=assets --provider="ContaoThememanager\Tabs\TabsServiceProvider"
  

• Priority Collisions Tabs with the same priority may render unpredictably. Use unique values (e.g., 10, 20).

• Closure Scope Issues Avoid referencing undefined variables in tab closures. Use use ($var) or pass data explicitly:

  'content' => function () use ($model) {
      return view('tab.view', ['model' => $model]);
  },
  

Debugging

• Check Registration Verify tabs are registered via:

  \ContaoThememanager\Tabs\TabsManager::getTabs();
  

• Log Tab Content Debug content rendering:

  'content' => function () {
      \Log::debug('Tab content loaded');
      return view('...');
  },
  

Extension Points

• Custom Tab Types Extend the TabInterface for reusable tab logic:

  class MyCustomTab implements TabInterface {
      public function render() { /* ... */ }
  }
  

• Override Default Views Publish and override Blade templates:

  php artisan vendor:publish --tag=views
  

• Localization Use Contao’s translation system for tab labels:

  'label' => ['en' => 'Custom Tab', 'de' => 'Benutzerdefinierte Registerkarte'],