Mobile Ansicht - Warenkorb Icon umsetzen

Shopware 6 (German) Themes & Design
1

Ich arbeite gerade unseren Mobilen Header um.

Im Desktop soll er den Platz wie Original behalten. Aber in der Mobilen Ansicht soll er einen neuen Platz bekommen. Dazu habe ich den Warenkorb ein 2tes mal im Header eingebunden.

Problem ist nun das er scheinbar irgendwas per JS mit den Warenkorb Icon macht. Weil beide kurz aufblinken und dann beide verschwinden. Wenn ich aber nur eines einbaue dann passiert das nicht.

Kann mir einer sagen was hier im Hintergrund abläuft und wie ich das verändern kann?

2

Warum gehst du nicht hin und setzt das Warenkorb icon um bei der Mobilen Ansich im CSS ? Das habe ich jedenfalls so gemacht und funktioniert :slight_smile:

3

Weil das für mich kein sauberer Ansatz ist.

Das Icon muss von einer ROW in eine andere. Ich hätte es lieber wenn ich es nochmal einbinde und blende es dann per Bootstrap ein und aus.

Klar wäre eine Positionierung eine Möglichkeit aber sie ist halt auch nicht „die feine“ Art sondern eher eine Quick und Dirty.

Aber danke für deine Antwort wenn nich muss ich es so machen.

4

Also ich habe es bei einem Kunden so gemacht, dass ich das ganze im twig gelöst hab. Da ich hier ein kompletten Customheader bauen musste und auch das ganze dann in 2 eigenen Klassen gebaut hab einmal für Desktop einmal für Mobile - in meinem Fall war es hier dann aber nicht der Warenkorb sondern das Menü. Auch hier sollte im Desktop dann das mobile Menü kommen.

Vielleicht wäre das ein Ansatz für dich?

5

Im Twig habe ich es ja schon umgesetzt. Aber wie ich schrieb, wird dann kurz beides angezeigt und dann verschwinden beide.

Ich denke das, das JS vom „data-off-canvas-cart“ dazu führt das, das Element nicht doppelt auf der Seite bestehen darf.

Bildschirmfoto_20241016_132035--Mobile

Das möchte ich erreichen das das Icon nach oben rutscht bei Mobile.

Ich schaue mal wie gut es mit Position klappt.

6

So sieht es nach dem Laden der Seite aus wenn man beide eingebaut hat:

Bildschirmfoto_20241016_133334--Mobile2

das Grüne ist nur zum darstellen, aber man sieht gut das das Icon nicht mehr da ist.

7

Ok konnte es lösen.

Das Icon verschwindet zwar aber nicht der Container selbst.

Nach einen Test und einen „festen Leerzeichen“ vor dem Icon, verschwindet es nicht mehr.

Also gelöst :slight_smile:

8

das ist aber auch eine seltsame Lösung dass es mit dem Leerzeichen funktioniert aber gut. Gelöst ist Gelöst :slight_smile:

9

Dieses Thema wurde automatisch 30 Tage nach der letzten Antwort geschlossen. Es sind keine neuen Antworten mehr erlaubt.