Child-Theme von Template aus dem Shop ableiten

wtjsh · 15. Dezember 2020 um 13:03

Mein Childtheme habe ich Wtjsh genannt. In meiner composer.json steht folgendes:

{
    "name": "wtjsh/childtheme",
    "description": "Child Theme - Plugin",
    "version": "v1.0.0",
    "license": "proprietary",
    "authors": [
        {
            "name": "wtjsh"
        }
    ],
    "require": {
        "shopware/core": "*"
    },
    "type": "shopware-platform-plugin",
    "autoload": {
        "psr-4": {
            "Wtjsh\\ChildTheme\\": "src/"
        }
    },
    "extra": {
        "shopware-plugin-class": "Wtjsh\\ChildTheme\\WtjshChildTheme",
        "copyright": "(c) by the wtjsh",
        "label": {
            "de-DE": "Child Theme - Plugin",
            "en-GB": "Child Theme - Plugin"
        },
        "description": {
            "de-DE": "Child Theme - Plugin",
            "en-GB": "Child Theme - Plugin"
        }
    }
}

Zu meinem Problem

Dann habe ich ein Childtheme (Wtjsh) angelegt mit obiger json-Datei. Das Ableiten der Dateien funktioniert wie von Shopware beschrieben. Sprich in den Kopf der zu beschreibenden Datei schreibe ich folgendes.

{% sw_extends '@Storefront/storefront/base.html.twig' %}

Die Datei-Struktur entspricht der Original-Dateistruktur und den Codeschnipsel habe ich demnach in meine eigens erstellte base.html.twig gesetzt. Unter diese Zeile setze ich dann folgendes

{% block base_header %}
    
		Mein Content
    
    {{ parent() }} // Erbt den Inhalt des Blocks vom Parent-Theme
{% endblock %}

Das klappt auch alles einwandfrei.

NUR wenn ich nun einen Strang des “Ruby Themes” abändern möchte, dann funktioniert das nicht.

Pfad: ROOT/ custom /plugins/ EmzPlatformRubyTheme /src/Resources/views/storefront/ emz /navigation/navigation.html.twig

Den Ordner " emz" gibt es ja eigentlich nicht. Die nutzen diesen aber und haben darin auch die Navigation abgelegt und abgeändert, die ja normalweise nicht dort sondern in “ROOT/ vendor /shopware/storefront/Resources/views/storefront/ layout /navigation” liegt. Alles was sich in dem Original-Ordner "…/storefront/emz/"des Ruby-Themes befindet, kann ich nicht abändern.
Egal ob ich die Ordnerstruktur und Pfade in meinem Plugin abbilde, oder ob ich in diesen Dateien als erste Zeile

{% sw_extends '@Storefront/storefront/emz/navigation/navigation.html.twig' %}

oder

{% sw_extends '@EmzPlatformRubyTheme/storefront/emz/navigation/navigation.html.twig' %}

schreibe. Was mache ich falsch. Hat jmd einen Tipp? So komme ich jedenfalls nicht weiter.

wtjsh · 18. Dezember 2020 um 07:26

Im gekauften Ruby-Theme (oder auch in anderen) muss man in der theme.json, die unter diesem Pfad zu finden ist ROOT:custom/plugins/EmzPlatformRubyTheme/src/Resources/theme.json das eigene Theme mit “@MyChildTheme” ergänzen

{
  "name": "EmzPlatformRubyTheme",
  "author": "8mylez GmbH",
  "previewMedia": "app/storefront/dist/assets/ruby-theme-01.jpg",
  "views": [
     "@Storefront",
     "@Plugins",
     "@EmzPlatformRubyTheme",
     "@MyChildTheme"
  ],

Wenn ich in meinem Strang zu einer anderen Datei verlinken möchte, muss ich nicht @Storefront oder @EmzPlatformRubyTheme schreiben, sondern muss mein @ verwenden. Also @MyChildTheme.

Ich hoffe, dass ich damit jmd anderem weiterhelfen konnte.

compact · 9. März 2021 um 06:25

Hallo wtjsh,
vielen Dank für diesen Tipp!
Wir möchten das gleiche Theme einsetzen, scheitern aber bereits bei der Child-Theme Einrichtung.
Was ist zu tun, wenn man ein Child-Theme auf Basis des Ruby-Themes erstellen möchte?
Muss man hierzu ein eigenes Plugin schreiben oder geht das einfacher? Wie bist du vorgegangen?
Danke.

wtjsh · 11. März 2021 um 14:47

@compact Ja, man muss ein eigenes Plugin schreiben. Außerdem habe ich herausgefunden, dass man nicht in dem Original-Ruby-Theme die Ergänzungen mit @MyChildTheme macht, sondern, dass man wirklich in seinem eigenem Plugin von dem Ruby-Theme ableitet was die „theme.json“-Datei angeht.

/custom/plugins/NutrixxionRubyTheme/src/Resources/theme.json

Hier ist der Code meiner theme.json
Dort sieht man auch, dass ich Dateien fürs Owl-Carousel eingebunden habe.

{
  "name": "MyChildTheme",
  "author": "Wtjsh",
  "views": [
     "@Storefront",
     "@Plugins",
     "@EmzPlatformRubyTheme",
     "@EmzPlatformConversionHeader",
     "@MyChildTheme"
  ],
  "style": [
    "app/storefront/src/scss/overrides.scss",
    "@EmzPlatformRubyTheme",
    "app/storefront/src/scss/base.scss",
    "app/storefront/src/scss/ownfolder/fonts.scss",
    "app/storefront/src/scss/ownfolder/core.scss"
  ],
  "script": [
    "@EmzPlatformRubyTheme",
    "app/storefront/dist/storefront/js/mychildtheme-ruby-theme.js",
    "app/storefront/dist/storefront/js/owl.carousel.min.js"
  ],
  "asset": [
    "@EmzPlatformRubyTheme",
    "app/storefront/src/assets"
  ],
  "config": {

    "blocks": {
      "emz-settings-gf": {
        "label": {
          "en-GB": "Google Font settings",
          "de-DE": "Google Font Einstellungen"
        }
      },
      "emz-settings": {
        "label": {
          "en-GB": "General settings",
          "de-DE": "Allgemeine Einstellungen"
        }
      },
      "emz-settings-header-topbar-colors": {
        "label": {
          "en-GB": "Header & Topbar colors",
          "de-DE": "Header & Topbar Farbeinstellungen"
        }
      },
      "emz-settings-body-colors": {
        "label": {
          "en-GB": "Body colors",
          "de-DE": "Body Farbeinstellungen"
        }
      },
      "emz-settings-footer-colors": {
        "label": {
          "en-GB": "Footer colors",
          "de-DE": "Footer Farbeinstellungen"
        }
      },
      "emz-settings-footer-fontcolors": {
        "label": {
          "en-GB": "Footer fontcolors",
          "de-DE": "Footer Schirftfarben"
        }
      }
    },

    "fields": {
      "emz-page-font-on": {
        "label": {
          "de-DE": "Google Font einbinden",
          "en-GB": "Add google font"
        },
        "type": "switch",
        "value": false,
        "editable": true,
        "block": "emz-settings-gf",
        "helpText": {
          "en-GB": "Activate or deactivate google fonts. When you use Google fonts, you have to update your privacy policy.",
          "de-DE": "Aktivieren oder deaktivieren Sie die Google Fonts. Des Weiteren beachten Sie bitte, dass Sie Ihre Datenschutzerklärung durch das Nutzen der Google Font aktualisieren müssen."
        }
      },
      "emz-page-font": {
        "label": {
          "de-DE": "Google Font link",
          "en-GB": "Google font link"
        },
        "type": "text",
        "scss": false,
        "value": "",
        "editable": true,
        "block": "emz-settings-gf",
        "helpText": {
          "en-GB": "Include your google font import link.",
          "de-DE": "Fügen Sie hier ihren Google Font Import-link ein."
        }
      },

      "emz-page-header-dropdown": {
        "label": {
          "de-DE": "Dropdown Navigation deaktivieren/aktivieren",
          "en-GB": "Deactivate/activate dropdown navigation"
        },
        "type": "switch",
        "value": true,
        "editable": true,
        "block": "emz-settings"
      },
      "emz-page-footer-icons": {
        "label": {
          "en-GB": "Footer Icons",
          "de-DE": "Footer Icons"
        },
        "type": "switch",
        "value": false,
        "editable": true,
        "block": "emz-settings",
        "helpText": {
          "en-GB": "Activate or deactivate the payment and shipping methode icons in the Footer.",
          "de-DE": "Aktivieren oder deaktivieren Sie die Icons für Zahlungsmethoden und Liefermethoden im Footer."
        }
      },
      "emz-page-font-weight": {
        "label": {
          "de-DE": "Font Weight",
          "en-GB": "Font Weight"
        },
        "type": "number",
        "value": "300",
        "editable": true,
        "block": "emz-settings",
        "helpText": {
          "en-GB": "Decide between 100, 200, 300 and 400 (default).",
          "de-DE": "Entscheiden Sie zwischen 100, 200, 300 und 400 (Standard)."
        }
      },

      "emz-page-top-bar-color": {
        "label": {
          "en-GB": "Topbar Color",
          "de-DE": "Topbar Farbeinstellungen"
        },
        "type": "color",
        "value": "#fff",
        "editable": true,
        "block": "emz-settings-header-topbar-colors"
      },

      "emz-page-top-bar-fontcolor": {
        "label": {
          "en-GB": "Topbar Font Color",
          "de-DE": "Topbar Schriftfarbe"
        },
        "type": "color",
        "value": "#4a545b",
        "editable": true,
        "block": "emz-settings-header-topbar-colors"
      },

      "emz-page-header-color": {
        "label": {
          "en-GB": "Header Color",
          "de-DE": "Header Farbeinstellungen"
        },
        "type": "color",
        "value": "#fff",
        "editable": true,
        "block": "emz-settings-header-topbar-colors"
      },

      "emz-page-body-breadcrumb-color": {
        "label": {
          "de-DE": "Breadcrumb Hintergrund Farbe",
          "en-GB": "Breadcrumb Background Color"
        },
        "type": "color",
        "value": "#3d3d3d",
        "editable": true,
        "block": "emz-settings-body-colors"
      },

      "emz-page-body-breadcrumb-active-color": {
        "label": {
          "de-DE": "Aktive Kategorie Schriftfarbe",
          "en-GB": "Breadcrumb active Fontcolor"
        },
        "type": "color",
        "value": "#3d3d3d",
        "editable": true,
        "block": "emz-settings-body-colors"
      },

      "emz-page-body-breadcrumb-font-color": {
        "label": {
          "de-DE": "Kategorie Schriftfarbe",
          "en-GB": "Breadcrumb Fontcolor"
        },
        "type": "color",
        "value": "#3d3d3d",
        "editable": true,
        "block": "emz-settings-body-colors"
      },

      "emz-page-footer-color-1": {
        "label": {
          "de-DE": "Copyright Footer",
          "en-GB": "Copyright Footer"
        },
        "type": "color",
        "value": "#3d3d3d",
        "editable": true,
        "block": "emz-settings-footer-colors"
      },
      "emz-page-footer-color-2": {
        "label": {
          "de-DE": "Content Footer",
          "en-GB": "Content Footer"
        },
        "type": "color",
        "value": "#f0f0f0",
        "editable": true,
        "block": "emz-settings-footer-colors"
      },
      "emz-page-footer-fontcolor-1": {
        "label": {
          "de-DE": "Content Title Fontcolor",
          "en-GB": "Content Title Fontcolor"
        },
        "type": "color",
        "value": "#008490",
        "editable": true,
        "block": "emz-settings-footer-colors"
      },
      "emz-page-footer-fontcolor-2": {
        "label": {
          "de-DE": "Content Fontcolor",
          "en-GB": "Content Fontcolor"
        },
        "type": "color",
        "value": "#4a545b",
        "editable": true,
        "block": "emz-settings-footer-colors"
      },
      "emz-page-footer-fontcolor-3": {
        "label": {
          "de-DE": "Copyright Footer Schriftfarbe",
          "en-GB": "Copyright Footer Fontcolor"
        },
        "type": "color",
        "value": "#ffffff",
        "editable": true,
        "block": "emz-settings-footer-colors"
      }
    }
  }
}

Dan kann man nämlich auch das eigene Theme als Theme im Backend auswählen und alle Felder zur Farbigkeit von bestimmten Bereichen werden mit übernommen.

compact · 10. Mai 2021 um 13:35

@wtjsh Vielen Dank! Hat mir sehr geholfen…

FloC3 · 10. Mai 2021 um 18:56

irgendwie krieg ich das mit der Vererbung zu einem Child-Theme nicht hin… kannst du mir helfen?
ich habe ein Parent Theme und ein Child Theme. Also die selbe Struktur wie du.

Problem 1: ich kann im Child Theme nicht die Theme-Config-Css-Variablen des Parent nutzen.
Problem 2: wenn ich das Child Theme dem Saleschannel zuweise, dann sind die Inhalte/Änderungen des Parents nicht mehr sichtbar.

hier die theme.json des Childs

{
„name“: „C3CustomerSpecificTheme“,
„author“: „C3 marketing agentur GmbH“,
„views“: [
„@Storefront“,
„@Plugins“,
„@MyParentTheme“,
„@MyChildTheme“
],
„style“: [
„@Storefront“,
„@Plugins“,
„@MyParentTheme“,
„app/storefront/src/scss/base.scss“
],
„script“: [
„@Storefront“,
„@MyParentTheme“
],
„asset“: [
„app/storefront/src/assets“
]
}

was mach ich falsch?

wtjsh · 11. Mai 2021 um 05:44

ich kenne mich auch nicht so gut damit aus, vermute aber, dass das daran liegen wird, dass du den config-Teil aus dem Parent-Theme nicht mit in deine json-Datei kopiert hast und du daher nicht auf deren Variblen zurückgreifen kannst und auch nicht die entsprechenden Felder im Backend siehst, wo du z. B. die Farbwerte einträgst. Das muss schon auch in deinem Theme gemacht werden. Alles was du im Backend im Parent-Theme machst, wird nicht in deinem Child-Theme übernommen, weil du ja das Child-Theme als Theme im Backend einstellt.

Das betrifft somit denke ich beide deiner Fragen.

FloC3 · 11. Mai 2021 um 07:00

sorry aber das ist doch dämlich. Dafür kannst du nichts…
wenn ich einen „Parent“ hab, dann will ich dort alles machen und im Child nur noch Ergänzungen.
Ich will doch nicht die komplette Config von Parent nach Child kopieren.
Was, wenns im Parent Updates gibt?

In Shopware 5 war das viel besser geregelt. Da konnte man die Config rein im Parent setzen und direkt vererben.

wtjsh · 11. Mai 2021 um 07:20

ich schrieb ja, dass ich mich selbst nicht wirklich damit auskenne. Das war nur eine Vermutung, dass das dann klappen könnte. Aber Fakt ist ja, wenn du den Config-Teil nicht in deine Child-json schreibst, dass du dann diese Felder auch im Backend nicht angezeigt bekommst. Daher habe ich vermutet, dass das wohl zusammenhängen wird.

Bei einem Update werden ja die neuen Template-Daten dennoch vom Parent-Theme übernommen, nur eben nicht die Backend-Ergänzungen. Und wenn du im Backend keine Farben hinterlegst, dann kann er wahrscheinlich keine ausgeben.

FloC3 · 11. Mai 2021 um 07:28

ich glaube du verstehst nicht was ich meine oder will.
Ich möchte die Config-Felder aus dem „Parent“ überhaupt nicht im Child haben. Im Child möchte ich nichts im Backend einstellen.
Ich möchte im „Parent“ in der Config beispielsweise einstellen „Textfarbe: rot“. Diese Textfarbe muss dann natürlich auch greifen, wenn das aktive Theme das Child ist. Außerdem möchte ich auf diese Textfarbe-Variable aus dem „Parent“ auch im „Child“ zugreifen können.

wtjsh · 11. Mai 2021 um 07:53

Doch, genau so habe ich das verstanden. Aber ich kenne dafür eben keine andere Lösung. Vllt gibt es ja noch andere, die sich hier mit einklinken können.

FloC3 · 11. Mai 2021 um 13:58

ich habe mir jetzt meine eigene Theme-Vererbung gebaut. War mir zu blöd, dass Shopware das nicht vernünftig hinkriegt.

senana · 14. Juli 2021 um 18:37

@FloC3

magst du teilen, wie man das löst mit dem Config-Teil aus der theme.json ?

Ich stehe vor der selben Herausforderung. Ich will eigentlich den ganzen Configkram nicht doppelt pflegen, sondern nur ein paar kleine Anpassungen an templatedateien updatesicher erstellen.

devkayba · 29. September 2022 um 10:15

Das würde mich auch interessieren.

rh-webdesign · 12. Dezember 2022 um 10:03

Schau mal hier: Child Theme | Shopware 6

Da findest du eine kostenlose Vorlage zum Download, die auf jedes Theme passt!

Thema		Antworten	Aufrufe
Von Plugin ableiten Shopware 6 (German)	9	276	19. April 2023
Shopware 6.5 Twig im Child-Theme nicht geladen Themes & Design	0	151	23. Oktober 2023
Child Theme html einfügen? Shopware 6 (German) programming	6	77	21. Februar 2024
Child Theme greift nicht bei der Rechungserstellung Shopware 6 (German)	2	75	15. August 2023
Childthemes Shopware 3.5 themes--design	11	2131	18. September 2012

Child-Theme von Template aus dem Shop ableiten

Verwandte Themen