Erstes Element einer Einkaufswelt identifizieren

Shopware 5 Allgemein
1

Hallo,

ich möchte in einer Einkaufswelt das erste Element eines Typs identifizieren. Den Typ habe ich selbst erstellt und habe deshalb vollen Einfluss auf das Template. Grund ist CSS Styling.

Rein mit CSS Kind-Selektoren klappt das nicht, weil da zu viele Container außen rum sind.

Ich habe schon versucht, mit einer Prüfung einfach eine Klasse zu vergeben:

{if $emotion.elements[0].id == $element.id}is--first{/if}

Habe dann allerdings festgestellt, dass das [0]-Element im Elements-Array nicht immer unbedingt das erste ist… warum ist das so durcheinander? Und wie finde ich nun mein erstes?

2

Eine Frage dazu, das erste Element in welchem Viewport?

3

@brettvormkopp‍

in jedem Viewport. Ganz oben in der Einkaufswelt ist immer das selbe Element, egal für welchen Viewport. Elemente dieses Typs kommen jedoch auch noch weiter unten in den Einkaufswelten, deshalb muss ich exakt das erste identifizieren.

4

Man könnte sich durch alle  $element.viewports schlawienern und  $viewport.startCol sowie  $viewport.endCol abklopfen. Wenn diese dann in jedem Viewport immer 1 sind, ist es das erste Element. Aber das ist eine sehr hässliche Umsetzung. Hast du schonmal versucht die Elemente mit einem Counter durchzuzählen? Freitextfelder und CSS-Klasse auch nicht. Sowas wie CSS kommt gar nicht in Frage? So kannst du auf die EKW zugreifen und dich dort weiterhangeln , z.B.

*CSS*

[data-controllerurl="/widgets/emotion/index/emotionId/HIERDIEIDDEREKW/controllerName/index"] section{
 color:red;
}

 

5

@brettvormkopp schrieb:

Man könnte sich durch alle  $element.viewports schlawienern und  $viewport.startCol sowie  $viewport.endCol abklopfen.

Das ist zwar nicht ganz richtig, da endCol egal ist und startRow wichtig ist, aber im Prinzip ist das eine gute Lösung. Das sind die Merkmale, die für die Position zuständig sind. Einfach danach sortieren und danach das erste Element rausnehmen.

Übrigens ist das ähnlich zu diesem Thema: https://forum.shopware.com/discussion/55065/seo-einkaufswelten-reihenfolge-der-ausgabe-der-einkaufswelten-elemente-im-code-fuer-seo-sinnvoll

Viele Grüße

6

@simkli‍

ok das klingt erstmal plausibel… so wie ich das sehe, kann ich es dann jedoch nur nach einem einzigen Viewport sortieren. Heißt ich müsste mich beispielsweise auf „xl“ = Desktop festlegen oder?

 

außerdem habe ich festgestellt, dass einige Elemente in der Einkaufswelt den selben Wert für startRow haben… 

array(9) { [„id“]=> int(220) [„emotionId“]=> int(7) [„elementId“]=> int(44) [„alias“]=> string(2) „xl“ [„startRow“]=> int(1) [„startCol“]=> int(1) [„endRow“]=> int(1) [„endCol“]=> int(6) [„visible“]=> bool(true) } 

array(9) { [„id“]=> int(225) [„emotionId“]=> int(7) [„elementId“]=> int(45) [„alias“]=> string(2) „xl“ [„startRow“]=> int(2) [„startCol“]=> int(1) [„endRow“]=> int(2) [„endCol“]=> int(3) [„visible“]=> bool(true) } 

array(9) { [„id“]=> int(230) [„emotionId“]=> int(7) [„elementId“]=> int(46) [„alias“]=> string(2) „xl“ [„startRow“]=> int(3) [„startCol“]=> int(1) [„endRow“]=> int(3) [„endCol“]=> int(2) [„visible“]=> bool(true) } 

array(9) { [„id“]=> int(235) [„emotionId“]=> int(7) [„elementId“]=> int(47) [„alias“]=> string(2) „xl“ [„startRow“]=> int(2) [„startCol“]=> int(4) [„endRow“]=> int(2) [„endCol“]=> int(6) [„visible“]=> bool(true) } 

array(9) { [„id“]=> int(240) [„emotionId“]=> int(7) [„elementId“]=> int(48) [„alias“]=> string(2) „xl“ [„startRow“]=> int(3) [„startCol“]=> int(3) [„endRow“]=> int(3) [„endCol“]=> int(4) [„visible“]=> bool(true) } 

array(9) { [„id“]=> int(245) [„emotionId“]=> int(7) [„elementId“]=> int(49) [„alias“]=> string(2) „xl“ [„startRow“]=> int(3) [„startCol“]=> int(5) [„endRow“]=> int(3) [„endCol“]=> int(6) [„visible“]=> bool(true) } 

 

das liegt wohl am mehrspaltigen Aufbau… es muss also die startCol noch mit einfließen so wie ich das sehe.

7

das liegt wohl am mehrspaltigen Aufbau… es muss also die startCol noch mit einfließen so wie ich das sehe.

Genau das habe ich doch geschrieben? startCol und startRow ist wichtig.

8

Sorry, habe mich verschrieben. Ich meine  startRow und startCol  @FloC3‍