Für die Produktseite habe ich ein eigenes Produktseitenlayout eingerichtet, welches auch Bilder enthält.
Als Vorbild dient die folgende Darstellung von Produkten, bei der sich Artikelbilder und Text abwechseln, um das Produkt ansprechend in Szene zu setzen:
Die Bilder und Texte können über den „Layout“ Tab im Artikel bequem ersetzt und angepasst werden. Dieses ist jedoch nur auf Produktebene möglich und nicht auf der Variantenebene!
Wenn ich nun aber rote und grüne T-Shirts verkaufe und diese als Variantenartikel konfiguriert habe, so möchte ich auch das grüne T-Shirt mit mehreren Bildern in der Artikelbeschriebung im Detail zeigen, genauso wie das rote.
Als eleganteste Lösung funktioniert dies bisher leider nur mit dem Cover Bild, indem ich im eigenen Produktseitenlayout als Bild über Datenzuordnung → „product.cover.media“ auswähle. So wird das (unterschiedliche) Cover Bild korrekt bei beiden Varianten angezeigt.
Für weitere Bilder ist dies meines Wissens nicht möglich. Lassen sich auch die weiteren pro Produkt hinterlegten Bilder irgendwie im Layout ansteuern?
Oder ist andernfalls die Layoutänderung manuell doch auf Variantenebene realisierbar?
tatsächlich lässt sich meines Wissens nach das Layout nicht auf Variatenebene in einem Produkt ändern, falls du dieses Feature für sinnvoll hältst kannst du dazu gerne ein Ticket erstellen https://issues.shopware.com/, bei genügend Votes wird es dann evtl. bei den nächsten Shopware Updates berücksichtigt.
Wenn du kurzfristig einen Workaround dafür suchst, würde ich dir empfehlen das Layout, welches du gerade mit dem Erlebniswelten-Editor erstellt hast, mit HTML in der Produktbeschreibung oder evtl. in einem Zusatzfeld (Shopware 6 - Einstellungen - Zusatzfelder) nachzubauen.
Das sollte bei diesem einfachen Layout wie in dem Bild, kein großes Problem sein.
Als Workaround klappt es bisher den entsprechenden html Code in die Produktbeschreibung zu kopieren. Dies ist jedoch nur semi-optimal, da Bild-URLs und auch Informationen, wie diese Bilder in den verschiedenen Auflösungen zu handeln sind (lazySizes) „hart“ mit kopiert wurden. Sollten die Artikelbilder angepasst werden, bedeutet dieses einen sehr hohen Anpassungsaufwand.
Die elegentere Möglicheit scheint mir die von dir beschriebene zu sein, die Informationen über Zusatzfelder in den Produkten zu hinterlegen. Hier habe ich Media-Felder, über welche Bilder zugeordnet werden können, und Texteditor-Felder verwendet. Die gute Nachricht: Ich kann diese auch auf Produkt-Variantenebene entsprechend befüllen!
Jetzt habe ich gedacht könnte ich im Layout-Editor unter „Datenzuordnung“ (siehe Bild) auf die erstellten Zusatzfelder zugreifen. Dies ist jedoch nicht möglich, die Costum-Felder werden nicht angezeigt… Hast du eine Idee, wie ich auf die Zusatzfelder im Layout Editor wieder zugreifen kann?
Danke nochmals für deine tolle Hilfe!
Viele Grüße
Momme
In den Erlebniswelten kann man ohne Plugin keine Zusatzfelder abfragen (mein Wissensstand). Entweder über ein Plugin, dass twig in der Erlebniswelt zulässt oder per CMSResolver selber bereitstellen.
Daran hat sich bis heute aber glaube ich nichts geändert… leider.
Am besten fügst du den Inhalt aus den Zusatzfeldern also meiner Meinung nach über das Theme ein:
vielen Dank für deine Antwort! Die Lösung über ein Plugin wäre doch gar kein Problem! Das habe ich lieber als selbst im Code etwas zu ändern ohne genau zu wissen was ich tue…
Dieses twig-Plugin ist doch super bewertet und dazu noch kostenlos: twig-Plugin
D.h. ich gehe folgendermaßen vor:
Ich baue das Layout im Grid System in den Erlebniswelten nach.
In das Grid wird das neue „twig / html“ Element reingezogen.
In dem neuen Element wird twig-Code hinterlegt, der den Bezug zu den Zusatzfeldern herstellt.
Somit kann ich mit einem allgemein gültigen Layout pro Produktvariante auf die jeweiligen individuellen Inhalte (Bilder / Texte) der Zusatzfelder zurückgreifen.
Jetzt muss ich nur noch rausfinden wie die twig-Zuordnung funktioniert, ich habe noch nie mit twig gearbeitet. Ich versuche es mal mit dem Code aus dem Shopware 6 Tutorial „Änderungen am Template“, den du gepostet hast…
das Plugin habe ich so noch nie genutzt, aber schon viel Gutes darüber gehört. Der Plugin Entwickler ist auch sehr aktiv hier im Forum, also falls es Probleme gibt, hilft er dir mit ein bisschen Glück auch weiter.
Theoretisch sollte das aber so funktionieren, wie du dir es vorstellst. Um den Inhalt aus dem Zusatzfeld anzeigen zu lassen, musst du nur die Variabel in Twig einbauen:
Deinen Code, den ich im Twig-Element unter html hinterlegt habe sieht so aus:
{% if page.product.translated.customFields.technischerNameMeinesTEXTZusatzfeldes%}
{{ page.product.translated.customFields.custom_product_description_grid_text1 }}
{% endif %}
bzw.
{% if page.product.translated.customFields.technischerNameMeinesBILDZusatzfeldes%}
{{ page.product.translated.customFields.custom_product_description_grid_text1 }}
{% endif %}
Daraus ergeben sich zwei Fragen für mich:
Wie schaffe ich es, dass der html-Text auch in html kompiliert ausgegeben wird?
Bei der Bildausgabe ist mir klar, dass ich den twig code noch in das img src=„“ Element einbauen muss. Hier unterscheidet sich die Ausgabe des Zusatzfeldes (ich denke ein Hash, siehe oben) nur komplett von dem benötigen Pfad des Bildes.
Wenn du die Variabel für das Bild einfach so ausgibst, erhältst du die Media-Id „ich denke ein Hash“, damit musst du dir mit der searchMeida-Funktion die URL zum Bild holen: Using custom fields of type media - Shopware Developer
Wie heißen den deine beiden Zusatzfelder bisher?
Text: custom_product_description_grid_text1 ?
Bild: ?
Dann erstelle ich dir mal den kompletten Twig Code, ist relativ einfach, wenn man weiß, wie es geht
Kleiner Tipp: Um das Bild auf die Grid höhe zu begrenzen verwendest du am besten die Boostrap Klassen.
<img class="mh-100" src="{{mommeMedia.url}}">
Oder google mal nach Boostrap Class object fit, da musst du nur darauf achten die richtige Boostrap version auszuwählen, bis Shopware 6.4 Boostrap 4.X, ab Shopware 6.5 Boostrap 5.X
um das Thema einmal zu vervollständigen und abzuschließen:
Die Bildgröße lässt sich in meinem Fall nicht mit dem Bootstrap Element „mh-100“ ändern. Das Bild wird weiterin in Originalgröße dargestellt, das Grid-Element richtet sich wahrscheinlich nach der Bildergröße.
Ich kann das Bild händisch über style=„width: 800px“ begrenzen. Es wird im Hintergrund allerdings natürlich immer die Originalgröße geladen, was gerade bei mehreren Bildern natürlich auf die Performance geht.
Hierzu habe ich den folgenden Abschnitt in der Doku gefunden, der beschreibt, wie die Bilder als Thumbnails geladen werden können: Working with sw_thumbnail
Ich versuche den Code in unser Beispiel einzubauen, komme aber nicht weiter:
Dann wäre es wahrscheinlich am einfachsten das Bild in 800px breite abzuspeichern
sw_thumbnails wäre für diese Anwendung wahrscheinlich etwas übertrieben
Die Bilder, die ich unten in der erweiterten Artikelbeschriebung nochmals einbinden möchte, sind die Artikelbilder, die oben in der Galerie dargestellt werden. D.h., die Bilder liegen schon in der Originalgröße 1920x1920 vor.
Warum wäre „sw_thumbnails“ übertrieben? Ist dies zu datenbanklastig oder zu kompliziert einzubinden?
Zu einem habe ich damit bisher kaum gearbeitet und weiß nicht so richtig wie das funktioniert zum anderen führst du damit ja wieder Twig code, Abfragen aus, obwohl es sich auch mit CSS lösen lässt. Obwohl es natürlich Sinn macht die Bilder schon in der richtigen Größe bereitzustellen.
Aber probiere das ruhig mal mit sw_thumbnails, vielleicht kann dann noch was lernen.
Du kannst auf jeden Fall in der Medienverwaltung bei dem Ordner für die Produktmedien die Thumbnail-Größen festlegen:
Ich melde mich, falls ich eine Lösung für die Thumbnail-Bilder finde!
Vielen Dank nochmals für deine Hilfe, ich bin begeistert, wie gut es jetzt funktioniert!!
