Profile cover photo
Profile photo
xp24 | Marco Thrum - Shopware Freelancer
2 followers
2 followers
About
Posts

Post has attachment
Handling der "ausgeblendeten" und "verknüpften" Elemente in den Breakpoints (Views) der Shopware Einkaufswelten

Einkaufswelten und Digital Publishing

Jeder Viewport(von Shopware Breackpoints genannt) kann die gleichen bzw. andere(angepasste) Elemente enthalten wie die anderen 4 Breackpoints. Es ist also möglich völlig verschiedene (an den View angepasste) Elemente in den einzelnen Breackpoints zu verwenden.

Im Standard (beim ersten anlegen einer E-Welt - „Einkaufswelt“) sind alle Breackpoints miteinander verknüpft, diese Verknüpfung löst sich automatisch wenn Breackpoints bewusst angepasst werden. Wenn man z. B. im Breackpoint „Desktop“ ein anderes Bannerelement benutzt als im Breackpoint „Mobile Portrait“. Dazu muss das bereits angelegte Element in der Regel aus dem zu manipulierenden Breackpoint „entfernt“ werden und ein neues Element hier angelegt werden. Dies geschieht über die Benutzung des „blauen X“. Mit dem „roten X“ wird das zu bearbeitende Element aus allen Breackpoints sicher gelöscht und bei den „ausgeblendeten Elementen“ abgelegt, löscht man es dann hier, ist es tatsächlich entfernt.

Die Verknüpfungen zwischen den Breackpoints lassen sich auch wieder herstellen, dadurch wird der Inhalt und die Anordnung des zu manipulierenden Breackpoints mit dem Inhalt des aktuell aktiven(ausgewählten) Breackpoints überschrieben. Änderungen in den verknüpften Breackpoints wirken sich immer auf alle verknüpften Breackpoints aus.

Shopware beschreibt dies in seiner Dokumentation folgendermaßen (Zitat):

Platzieren von Elementen

Damit Du ohne separate Einkaufswelt ein alternatives Layout mit anderen Elementen für spezielle Breakpoints erstellen kannst, können Elemente nun ausgeblendet werden. Ausblenden ist nur dann nötig, wenn Du ein Element im aktuellen Breakpoint nicht wiederverwenden möchtest, aber es in anderen Breakpoints zur Verfügung stehen soll.

..............

Das blaue X blendet ein Element auf dem aktuellen Breakpoint aus, sodass es in anderen Breakpoints noch zur Verfügung steht, während das rote X das Element aus der kompletten Einkaufswelt löscht und somit auch aus allen anderen Breakpoints gelöscht wird!

Ausgeblendete Elemente

Befinden sich ausgeblendete Elemente in Deiner Einkaufswelt, wird Dir das anhand des Icons (1) dargestellt:

............

Bei Klick auf das Icon öffnet sich eine kleine Leiste mit den ausgeblendeten Elementen:

...........

Diese Elemente kannst Du dann wieder auf der Einkaufswelt platzieren oder löschen. Beachte, dass die Elemente beim Löschen komplett aus der Einkaufswelt entfernt werden, also auch in anderen Breakpoints nicht mehr zur Verfügung stehen!

Zitat Shopware ENDE

Um nun den Überblick in den einzelnen Breackpoints nicht zu verlieren, habe ich mir angewöhnt das neu hinzu gekommene Feld CSS Klasse zu mißbrauchen um hier Phantasie-Bezeichnungen einzutragen die mir bei der Unterscheidung der Elemente Unterstützung bieten. So z. B. „mobPortr“, „mobLS“, „tabPortr“, „tabLS“ und „desk“. So lässt sich durch öffnen/bearbeiten des Elements (auch bei den „ausgeblendeten Elementen“ ist ein öffnen/manipulieren möglich) feststellen, welches Element tatsächlich verwendet wird. Allerdings ist ein sorgfältiges arbeiten und ein gut durchdachtes, sauber vorbereitetes Konzept absolut hilfreich bei der Umsetzung der E-Welten. Es müssen z. B. die passenden Digital-Publishing Banner vorbereitet werden um dann an passender Stelle integriert zu werden.

Es ist bei komplexen Einkaufswelten absolut denkbar, das die Anzahl der ausgeblendeten Elemente „extrem“ ansteigt, da für jeden Breackpoint viele eigens erstellte Elemente Verwendung finden. Elemente die z. B. nur in dem Breckpoint „Mobile Portrait“ Verwendung finden sind als ausgeblendete Elemente in allen anderen Breackpoints zu finden, ausser Sie werden dort bewusst eingesetzt. Die ausgeblendeten Elemente werden im Frontend mit ausgeliefert, egal in welchem View man sich befindet. Hier kann es also rasch zu einer "Ressourcenverschwendung" kommen.

Falls ein Digital-Publishing Element in allen Breackpoints Verwendung findet, werden Änderungen in diesem DP-Element auch gleichermaßen in allen Breackpoints sichtbar sein. Wird in den „kleineren“ Breackpoints ein speziell für diese Views angelegtes DP-Element eingesetzt, betrifft die Änderung des DP-Elements im Desktop Breackpoint nur diesen und die beiden Views „Tablet Portrait“ und „Tablet Landscape“.

Weitere Inhalte und Hilfen sind hier zu finden!
https://community.shopware.com/Einkaufswelten_detail_1852_655.html#Ausgeblendete_Elemente
Add a comment...
Wait while more posts are being loaded