Skip to main content

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.

Nutzungsstatistik: Seitenaufrufe werden anonymisiert erfasst. Im Umami-Dashboard nach diesem Pfad filtern: /en/developer-guide/plugins/overview