Child-Theme duplizieren

Möchtest Du ein Child-Theme für mehrere Verkaufskanäle einsetzen, so kannst Du das Child-Theme duplizieren und umbenennen. Im Folgenden zeigen wir Dir, wie das funktioniert.

Dauer: 5-10 Minuten Schwierigkeitsgrad: Einfach Programmierkenntnisse: Keine Programme: Editor oder Notepad

Ab Theme Version 4.4.0 hast Du die Möglichkeit, Dir über unser kostenfreies Child-Theme-Generator Plugin ein personalisiertes Child-Theme zu generieren und anschließend die gewünschte Demo-Vorlage zu importieren.

Child-Theme Generator für Zenit Design ThemesShopware Store

1. Vorlage herunterladen

Lade die gewünschte Vorlage als Zip-Datei auf unserer Webseite kostenlos herunter.

Navigiere dazu in den Bereich Demos (1) und filtere (2) auf den Namen des Themes, welches Du gekauft hast. Über den Vorlage Download (3) Link kannst Du die Zip-Datei herunterladen.

Bitte beachte, dass die in den Demos gezeigten Bilder und Demodaten aus urheberrechtlichen Gründen nicht Bestandteil des Themes und der Vorlagen sind.

Für dieses Beispiel verwenden wir Horizon Vorlage 2

2. Entpacke die Zip-Datei

Entpacke die Zip-Datei auf Deinem Computer. Du erhältst folgende Dateien:

Entpackte Zip zenitPlatformHorizonSet2

└── zenitPlatformHorizonSet2 (1)
    ├── composer.json (2)
    └── src
        ├── zenitPlatformHorizonSet2.php (3)
        └── Resources
            ├── theme.json (4)
            ├── app
            │   └── storefront
            │       ├── dist
            │       │   ├── assets
            │       │   │   └── ...
            │       │   └── storefront
            │       │       └── js
            │       │           ├── zenit-platform-horizon-set2 (5)
            │       │           │   └── zenit-platform-horizon-set2.js (5)
            │       │           └── zenit-platform-horizon-set2.js (5)
            │       └── src
            │           └── scss
            │               ├── base.scss
            │               └── overrides.scss
            └── config
                └── ...

3. Anpassungen vornehmen

Es sind kleine Namensänderungen an 5 stellen notwendig. Wir haben in der obigen Abbildung die einzelnen Dateien mit Nummern gekennzeichnet.

Ordnername zenitPlatformHorizonSet2 (1)

Ändere den Ordnernamen in den gewünschten technischen Namen des neuen Themes. Am einfachsten ist es, wenn Du Set2 durch eine beliebige Zeichenfolge ersetzt. In unserem Beispiel wird aus zenitPlatformHorizonSet2 => zenitPlatformHorizonSetBeispiel

Umschreibungen in der composer.json (2)

Öffne die Datei in einem Editor oder Notepad.

• Zeile 1: zenit/horizon-set-2 → zenit/horizon-set-beispiel

• Zeile 20: zenit\\PlatformHorizonSet2\\zenitPlatformHorizonSet2 →zenit\\PlatformHorizonSetBeispiel\\zenitPlatformHorizonSetBeispiel

• Zeile 24-25: Gib Deinem Child-Theme einen Namen

• Zeile 28-29: Gib Deinem Child-Theme eine Beschreibung

• Zeile 42: zenit\\PlatformHorizonSet2\\→ zenit\\PlatformHorizonSetBeispiel\\

composer.json

{
    "name": "zenit/horizon-set-2",
    "description": "Theme Horizon by Zenit Design",
    "version": "3.6.5",
    "type": "shopware-platform-plugin",
    "license": "proprietary",
    "authors": [
        {
            "name": "Zenit Design",
            "homepage": "https://zenit.design",
            "role": "Manufacturer"
        }
    ],
    "require": {
        "shopware/core": "^6.5",
        "shopware/storefront": "^6.5",
        "zenit/horizon": ">=3.0.0"
    },
    "extra": {
        "shopware-plugin-class": "zenit\\PlatformHorizonSet2\\zenitPlatformHorizonSet2",
        "plugin-icon": "src/Resources/config/plugin.png",
        "copyright": "(c) by Zenit Design",
        "label": {
            "de-DE": "Theme HORIZON | Pro - Set 2",
            "en-GB": "Theme HORIZON | Pro - Set 2"
        },
        "description": {
            "de-DE": "Theme HORIZON | Pro - Set 2",
            "en-GB": "Theme HORIZON | Pro - Set 2"
        },
        "manufacturerLink": {
            "de-DE": "https://store.shopware.com/zenit-design.html",
            "en-GB": "https://store.shopware.com/en/zenit-design.html"
        },
        "supportLink": {
            "de-DE": "https://help.zenit.design",
            "en-GB": "https://help.zenit.design"
        }
    },
    "autoload": {
        "psr-4": {
            "zenit\\PlatformHorizonSet2\\": "src/"
        }
    }
}

Umschreibungen der zenitPlatformHorizonSet2.php (3)

Abgesehen vom Dateinamen müssen auch in der Datei zwei Stellen angepasst werden.

1. Passe den Namen der Datei an den neuen Namen an: zenitPlatformHorizonSet2.php → zenitPlatformHorizonSetBeispiel.php

2. Schreibe in der Datei die Namen um, öffne die Datei in einem Editor oder Notepad.

   Zeile 3: zenit\PlatformHorizonSet2 → zenit\PlatformHorizonSetBeispiel

   Zeile 8: zenitPlatformHorizonSet2 → zenitPlatformHorizonSetBeispiel

zenitPlatformHorizonSetBeispiel.php

<?php declare(strict_types=1);

namespace zenit\PlatformHorizonSet2;

use Shopware\Storefront\Framework\ThemeInterface;
use Shopware\Core\Framework\Plugin;

class zenitPlatformHorizonSet2 extends Plugin implements ThemeInterface
{
    public function getThemeConfigPath(): string
    {
        return 'theme.json';
    }
}

Umschreibungen in der theme.json (4)

Öffne die Datei in einem Editor oder Notepad.

• Zeile 2: Gib Deinem Child-Theme einen beliebigen Namen

• Zeile 9: @zenitPlatformHorizonSet2 → @zenitPlatformHorizonSetBeispiel

• Zeile 19: app/storefront/dist/storefront/js/zenit-platform-horizon-set2.js → app/storefront/dist/storefront/js/zenit-platform-horizon-set-beispiel.js

• Zeile 20 (ab Version 4.0.0): app/storefront/dist/storefront/js/zenit-platform-horizon-set2/zenit-platform-horizon-set2.js

  → app/storefront/dist/storefront/js/zenit-platform-horizon-set-beispiel/zenit-platform-horizon-set-beispiel.js

theme.json

{
    "name": "Theme HORIZON | Pro - Set 2",
    "author": "Zenit Design",
    "previewMedia": "config/horizon-set-2-preview.png",
    "views": [
        "@Storefront",
        "@zenitPlatformHorizon",
        "@Plugins",
        "@zenitPlatformHorizonSet2"
    ],
    "style": [
        "app/storefront/src/scss/overrides.scss",
        "@zenitPlatformHorizon",
        "app/storefront/src/scss/base.scss"
    ],
    "script": [
        "@Storefront",
        "@zenitPlatformHorizon",
        "app/storefront/dist/storefront/js/zenit-platform-horizon-set2.js"
        "app/storefront/dist/storefront/js/zenit-platform-horizon-set2/zenit-platform-horizon-set2.js"
    ],
    "asset": [
        "@Storefront",
        "@zenitPlatformHorizon",
        "app/storefront/dist/assets"
    ],
    "configInheritance": [
        "@Storefront",
        "@zenitPlatformHorizon"
    ],
    "config": {
        ...
    }

Anpassen des Dateinamens der zenit-platform-horizon-set2.js (5)

Zum Schluss muss nur noch der Dateiname der Javascript-Datei auf den im vorigen Schritt geänderten Namen aus der theme.json (Zeile 19) geändert werden.

zenit-platform-horizon-set2.js → zenit-platform-horizon-set-beispiel.js

Solltest du eine Child-Theme Version 4.0.0 oder höher verwenden, muss zusätzlich auf dieser Ebene ein Ordner und darin eine weitere Javascript-Datei umbenannt werden. Ordner: zenit-platform-horizon-set2 → zenit-platform-horizon-set-beispiel Javascript-Datei: zenit-platform-horizon-set2.js → zenit-platform-horizon-set-beispiel.js

4. Fertig

Zippe nun den Ordner wieder und lade die Datei manuell in Deinem Shop hoch. Du kannst das duplizierte Child-Theme nun wie gewohnt installieren.