Plugin-System Overview

Das SMG Mall CMS Plugin-System ermöglicht es Entwicklern, das CMS mit eigenen Funktionen zu erweitern. Erfahren Sie hier alles über die Plugin-Architektur.

Plugin-Typen

Block-Plugins

Wiederverwendbare UI-Komponenten für den Page-Editor.

interface BlockPlugin {
  id: string;
  name: string;
  description: string;
  version: string;
  category: 'layout' | 'content' | 'media' | 'form' | 'navigation';
  organizationId?: string; // Optional: Theme-spezifisch
  
  schema: JSONSchema;
  component: React.ComponentType;
  previewComponent: React.ComponentType;
  
  defaultContent: Record<string, any>;
  tags: string[];
}

Beispiele:

• Hero-Sections
• Shop-Grids
• Contact-Forms
• Image-Galleries
• Newsletter-Signups

Theme-Plugins

Vollständige Design-Systeme mit Templates und Styling.

interface ThemePlugin {
  id: string;
  name: string;
  description: string;
  version: string;
  organizationId: string;
  
  pageTemplates: PageTemplate[];
  menuTemplates: MenuTemplate[];
  
  colors: ThemeColors;
  typography: ThemeTypography;
  spacing: ThemeSpacing;
  
  customCSS?: string;
}

Beispiele:

• HBB Standard Theme
• CM-IMMO Lifestyle Theme
• SMG Professional Theme

Service-Plugins

Backend-Services und API-Erweiterungen.

interface ServicePlugin {
  id: string;
  name: string;
  description: string;
  version: string;
  
  routes: APIRoute[];
  middleware: Middleware[];
  hooks: Hook[];
  
  dependencies: string[];
}

Beispiele:

• Payment-Gateways
• Analytics-Services
• External-APIs
• Custom-Workflows

Plugin-Architektur

1. Plugin-Registry

Zentrale Verwaltung aller Plugins.

class PluginRegistry {
  private plugins: Map<string, Plugin> = new Map();
  
  register(plugin: Plugin): void;
  unregister(pluginId: string): void;
  get(pluginId: string): Plugin | undefined;
  getByCategory(category: string): Plugin[];
  getByOrganization(orgId: string): Plugin[];
}

2. Plugin-Loader

Dynamisches Laden von Plugins zur Laufzeit.

class PluginLoader {
  async loadPlugin(pluginPath: string): Promise<Plugin>;
  async loadFromNPM(packageName: string): Promise<Plugin>;
  async loadFromURL(url: string): Promise<Plugin>;
}

3. Plugin-Context

Zugriff auf CMS-APIs und -Services.

interface PluginContext {
  // CMS APIs
  api: {
    content: ContentAPI;
    media: MediaAPI;
    users: UserAPI;
    centers: CenterAPI;
  };
  
  // Utilities
  utils: {
    storage: StorageAPI;
    cache: CacheAPI;
    logger: LoggerAPI;
    events: EventAPI;
  };
  
  // Theme System
  theme: {
    getCurrentTheme(): ThemePlugin;
    applyTheme(themeId: string): void;
    getThemeConfig(): ThemeConfig;
  };
}

Plugin-Entwicklung

1. Plugin-Interface implementieren

import { BlockPlugin } from '@smg-mall-cms/sdk';

const MyPlugin: BlockPlugin = {
  id: 'my-awesome-plugin',
  name: 'My Awesome Plugin',
  description: 'Ein fantastisches Plugin',
  version: '1.0.0',
  category: 'content',
  
  schema: {
    type: 'object',
    properties: {
      title: { type: 'string', title: 'Titel' },
      content: { type: 'string', title: 'Inhalt' }
    }
  },
  
  component: MyComponent,
  previewComponent: MyPreview,
  
  defaultContent: {
    title: 'Standard Titel',
    content: 'Standard Inhalt'
  },
  
  tags: ['content', 'text']
};

export default MyPlugin;

2. React-Komponente erstellen

import React from 'react';
import { PluginProps } from '@smg-mall-cms/sdk';

function MyComponent({ block, context }: PluginProps) {
  const { title, content } = block.content;
  
  return (
    <div className="my-plugin">
      <h2>{title}</h2>
      <p>{content}</p>
    </div>
  );
}

3. Schema-basierte UI

Das CMS generiert automatisch ein Bearbeitungsformular basierend auf dem JSON-Schema:

const schema = {
  type: 'object',
  properties: {
    title: {
      type: 'string',
      title: 'Titel',
      description: 'Der Haupttitel des Blocks'
    },
    style: {
      type: 'string',
      title: 'Stil',
      enum: ['default', 'highlighted', 'minimal'],
      enumNames: ['Standard', 'Hervorgehoben', 'Minimal']
    },
    showButton: {
      type: 'boolean',
      title: 'Button anzeigen',
      default: true
    }
  }
};

Theme-Integration

1. Theme-spezifische Plugins

const HBBHeroPlugin: BlockPlugin = {
  id: 'hbb-hero-standard',
  name: 'HBB Hero Standard',
  organizationId: 'hbb', // Nur für HBB-Theme verfügbar
  // ...
};

2. Theme-Overrides

function MyComponent({ block, context }: PluginProps) {
  const theme = context.theme.getCurrentTheme();
  const colors = theme.colors;
  
  return (
    <div 
      className="my-plugin"
      style={{ 
        backgroundColor: colors.primary,
        color: colors.text 
      }}
    >
      {/* Content */}
    </div>
  );
}

Plugin-Distribution

1. NPM-Packages

{
  "name": "@my-org/smg-hero-plugin",
  "version": "1.0.0",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "keywords": ["smg-mall-cms", "plugin", "hero"],
  "peerDependencies": {
    "@smg-mall-cms/sdk": "^1.0.0",
    "react": "^18.0.0"
  }
}

2. Plugin-Marketplace

Plugins werden automatisch im CMS-Marketplace verfügbar, wenn sie mit den korrekten Tags veröffentlicht werden.

3. Private Plugins

// Lokale Plugin-Registrierung
import MyPrivatePlugin from './plugins/my-private-plugin';

pluginRegistry.register(MyPrivatePlugin);

Plugin-Discovery

1. Automatische Erkennung

// Plugins aus node_modules laden
const plugins = await pluginLoader.discoverPlugins([
  '@smg-mall-cms/*',
  '@my-org/smg-*'
]);

2. Manuelle Registrierung

// Plugin manuell registrieren
import CustomPlugin from './custom-plugin';
pluginRegistry.register(CustomPlugin);

Best Practices

Do's

• TypeScript verwenden für Type-Sicherheit
• Schema validieren für robuste UI-Generierung
• Responsive Design für alle Geräte
• Accessibility beachten (ARIA, Keyboard-Navigation)
• Performance optimieren (Code-Splitting, Lazy Loading)

Don'ts

• Globale Styles vermeiden (CSS-in-JS oder CSS-Modules nutzen)
• Direkte DOM-Manipulation vermeiden
• Externe Dependencies minimieren
• Hardcoded Werte vermeiden (Schema nutzen)

Nächste Schritte

• Block-Plugin erstellen - Praktisches Tutorial (Coming Soon)
• Theme-Plugin entwickeln - Theme-Entwicklung (Coming Soon)
• API-Referenz - Vollständige API-Dokumentation (Coming Soon)
• Examples - Praktische Beispiele (Coming Soon)

---

Bereit für Ihr erstes Plugin? Starten Sie mit unserem Getting Started Guide.