# Erstes Element einer Einkaufswelt identifizieren

**URL:** https://forum.shopware.com/t/erstes-element-einer-einkaufswelt-identifizieren/54114
**Category:** Allgemein
**Created:** [17. Juli 2018 um 06:49 UTC](https://forum.shopware.com/t/erstes-element-einer-einkaufswelt-identifizieren/54114 "2018-07-17T06:49:30Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)
#### Post date: [17. Juli 2018 um 06:49 UTC](https://forum.shopware.com/t/erstes-element-einer-einkaufswelt-identifizieren/54114/1 "2018-07-17T06:49:30Z")

</div>

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?

---

<div class="post-metadata">

### Author: ![brettvormkopp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/brettvormkopp/32/7788_2.png) [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)
#### Post date: [17. Juli 2018 um 07:25 UTC](https://forum.shopware.com/t/erstes-element-einer-einkaufswelt-identifizieren/54114/2 "2018-07-17T07:25:59Z")

</div>

Eine Frage dazu, das erste Element in welchem Viewport?

---

<div class="post-metadata">

### Author: ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)
#### Post date: [17. Juli 2018 um 07:27 UTC](https://forum.shopware.com/t/erstes-element-einer-einkaufswelt-identifizieren/54114/3 "2018-07-17T07:27:57Z")

</div>

@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.

---

<div class="post-metadata">

### Author: ![brettvormkopp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/brettvormkopp/32/7788_2.png) [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)
#### Post date: [17. Juli 2018 um 07:57 UTC](https://forum.shopware.com/t/erstes-element-einer-einkaufswelt-identifizieren/54114/4 "2018-07-17T07:57:03Z")

</div>

Man könnte sich durch alle&nbsp; **$element.viewports** schlawienern und **&nbsp;$viewport.startCol** sowie&nbsp; **$viewport.endCol** abklopfen. Wenn diese dann in jedem Viewport&nbsp;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&nbsp;EKW zugreifen und dich dort weiterhangeln&nbsp;, z.B.

```
*CSS*

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

```

&nbsp;

---

<div class="post-metadata">

### Author: ![simkli](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/simkli/32/13124_2.png) [@simkli](https://forum.shopware.com/u/simkli)
#### Post date: [17. Juli 2018 um 09:48 UTC](https://forum.shopware.com/t/erstes-element-einer-einkaufswelt-identifizieren/54114/5 "2018-07-17T09:48:35Z")

</div>

> [@brettvormkopp schrieb:](https://forum.shopware.com/profile/6611/brettvormkopp "brettvormkopp")
> 
> Man könnte sich durch alle&nbsp; **$element.viewports** schlawienern und **&nbsp;$viewport.startCol** sowie&nbsp; **$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](https://forum.shopware.com/discussion/55065/seo-einkaufswelten-reihenfolge-der-ausgabe-der-einkaufswelten-elemente-im-code-fuer-seo-sinnvoll)

Viele Grüße

---

<div class="post-metadata">

### Author: ![FloC3](https://avatars.discourse-cdn.com/v4/letter/f/838e76/32.png) [@FloC3](https://forum.shopware.com/u/FloC3)
#### Post date: [17. Juli 2018 um 11:48 UTC](https://forum.shopware.com/t/erstes-element-einer-einkaufswelt-identifizieren/54114/6 "2018-07-17T11:48:27Z")

</div>

@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?

&nbsp;

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

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) }&nbsp;

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) }&nbsp;

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) }&nbsp;

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) }&nbsp;

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) }&nbsp;

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) }&nbsp;

&nbsp;

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

---

<div class="post-metadata">

### Author: ![simkli](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/simkli/32/13124_2.png) [@simkli](https://forum.shopware.com/u/simkli)
#### Post date: [17. Juli 2018 um 13:08 UTC](https://forum.shopware.com/t/erstes-element-einer-einkaufswelt-identifizieren/54114/7 "2018-07-17T13:08:58Z")

</div>

> 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?&nbsp;startCol und startRow ist wichtig.

---

<div class="post-metadata">

### Author: ![brettvormkopp](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/brettvormkopp/32/7788_2.png) [@brettvormkopp](https://forum.shopware.com/u/brettvormkopp)
#### Post date: [17. Juli 2018 um 13:20 UTC](https://forum.shopware.com/t/erstes-element-einer-einkaufswelt-identifizieren/54114/8 "2018-07-17T13:20:03Z")

</div>

Sorry, habe mich verschrieben. Ich meine&nbsp; **startRow** und **startCol&nbsp;** @FloC3‍
