Hallo zusammen,
ich habe ein Problem beim erweitern der CMS-Section bzw. CMS-Section-Config.
Was ich bereits geschafft habe ist ein bestehendes Feld der CMS-Section-Config zu erweitern. Dafür habe ich einfach im Template der Section Config ein sw-select-field mit meinen Options gebaut und dann im computed Bereich der dazugehörigen index.js die Dropdown Auswahl mit Klassen gekoppelt. Nun habe ich anstatt des Color Pickers ein Dropdown mit von mir fest gelegten Farben.
Pfad zur Datei
custom/plugins/MeinCustomTheme/src/Resources/app/administration/src/module/sw-cms/component/sw-cms-section/index.js
computed: {
// Add custom section classes
sectionClasses() {
// Call the original method using super
const originalClasses = this.$super('sectionClasses');
return {
...originalClasses,
'is--indented': this.section.sizingMode === 'indented',
'container-fluid': this.section.sizingMode === 'container-fluid',
'theme-primary': this.section.backgroundColor === 'primary',
'theme-secondary': this.section.backgroundColor === 'secondary',
'theme-tertiary': this.section.backgroundColor === 'tertiary',
'theme-gray': this.section.backgroundColor === 'gray',
};
},
},
Pfad zur Datei
custom/plugins/MeinCustomTheme/src/Resources/app/administration/src/module/sw-cms/component/sw-cms-section/sw-cms-section-config/sw-cms-section-config.html.twig
{% block sw_cms_section_config_background_color_field %}
<sw-select-field
{% if VUE3 %}
v-model:value="section.backgroundColor"
{% else %}
v-model="section.backgroundColor"
{% endif %}
:label="$tc('sw-cms.detail.label.backgroundColorLabel')"
>
<option value="" selected>
{{ $tc('sw-cms.detail.label.color.none') }}
</option>
<option value="primary">
{{ $tc('sw-cms.detail.label.color.primary') }}
</option>
<option value="secondary">
{{ $tc('sw-cms.detail.label.color.secondary') }}
</option>
<option value="tertiary">
{{ $tc('sw-cms.detail.label.color.tertiary') }}
</option>
<option value="gray">
{{ $tc('sw-cms.detail.label.color.gray') }}
</option>
</sw-select-field>
{% endblock %}
Das alles klappt genau so wie ich es mir vorgestellt habe. Mein Dropdown mit den angelegten Options ist da und alles wird auch korrekt angewendet und gespeichert. Nun aber zum eigentlichen Problem.
Ähnlich wie beim überschreiben, wollte ich nun ein neues Feld hinzufügen. In der Administration soll ein Toggle eingebaut werden, welches einem Redakteur ermöglicht einen Parallax Effekt für ein Hintergrundbild einzustellen. Den Toggle habe ich im Template der SW-Section-Config hinterlegt und im computed Bereich der index.js eine get() und set() Funktion für die Value gebaut.
Pfad zur Datei
custom/plugins/MeinCustomTheme/src/Resources/app/administration/src/module/sw-cms/component/sw-cms-section/sw-cms-section-config/index.js
computed: {
backgroundMediaParallax: {
get() {
return this.section.backgroundMediaParallax !== undefined
? this.section.backgroundMediaParallax
: false;
},
set(value) {
this.$set(this.section, 'backgroundMediaParallax', value);
}
},
},
Pfad zur Datei
custom/plugins/MeinCustomTheme/src/Resources/app/administration/src/module/sw-cms/component/sw-cms-section/sw-cms-section-config/sw-cms-section-config.html.twig
{% block sw_cms_section_config_background_image_parallax_field %}
<sw-switch-field
{% if VUE3 %}
v-model:value="backgroundMediaParallax"
{% else %}
v-model="backgroundMediaParallax"
{% endif %}
:label="$tc('sw-cms.detail.label.backgroundMediaParallax')"
:disabled="!section.backgroundMediaId"
>
</sw-switch-field>
{% endblock %}
Mein Toggle erscheint auch schon an der richtigen Stelle und wenn ich den Active State ändere, kommt der Wert auch korrekt an. Das Problem ist aber, dass mein Wert erst angelegt wird, wenn ich den Toggle benutzt. Meine Variable wird nicht initial angelegt, wie es bei den anderen Feldern der CMS-Section-Config ist. Dadurch wird beim speichern die Änderung des Togglers wieder zurück gesetzt / nicht übernommen.
(Links) Vor Benutzung vom Toggle gibt es keine Variable backgroundMediaParallax. (Rechts) Nachdem ändern des Toggle wird meine Variable backgroundMediaParallax korrekt auf true gesetzt
Das ist quasi mein erstes SW6 Projekt, daher bin ich mir unsicher ob ich etwas grundlegendes falsch mache oder ob das erweitern der CMS-Section so vielleicht gar nicht erlaubt oder gewünscht ist? Im Moment weiß ich auch nicht ob ich ein Feld in der Datenbank dafür anlegen muss oder ob die Änderung über den VuexStore passiert und auch ohne DB persistiert? Muss ich die Value aus der SW-Section-Config irgendwie in die SW-Section übertragen und wenn ja wie mache ich das? Weil die anderen SW-Section-Config Values sind ja auch direkt zugreifbar.
Hoffe ich konnte mein Problem deutlich genug formulieren.
LG