[gelöst] Codezeile aus jQuery in Smarty übernehmen

Shopware 5 Programmierung
1

Hi,
heute stehe ich schon wieder vor einem Problem mit Javascript (aber ich lerne dazu :wink: ):

Je nach Browserbreite soll eine Variable (Zahl) an das Template übergeben werden. Das auslesen der Browserbreite habe ich, auch wenn der Kunde das Browserfenster mit der Maus verkleinert. Die berechnete $Zahl soll nun an Smarty übergeben werden:

wenn $Zahl = 4 dann setze das

Eventuell habe ich auch einen Denkfehler und es geht anders (CSS) ?

wenn tabletLandscapeViewportWidth dann

Konnte aber nichts finden und habe sowas noch nicht gemacht.

Das Einzige, was ich hinbekommen habe, ist die Übergabe von HTML aus jQuery->Smarty. Nur wurde der Code nicht umgesetzt sondern ausgegeben als Text.

$("div.countFarbicon").empty().html("{if $z < 3}{$z = $z+1}{else}{$z = 1}{/if}");

Hatte auch schon überlegt, den Wert als Cookie zu schreiben und dann in Smarty lesen. Würde denke ich auch klappen, aber nur wenn die Seite neu geladen wird. Ändert der User dagegen das Browserfenster durch ziehen, wir der Cookie im Smarty ja nicht neu geladen, …

Habe ich einen Denkfehler ? Kann mir jemand helfen, mir einen Tipp geben?

Vielen Dank im Voraus
HEPI

2

Die Frage wäre zu allerst einmal, ob das überhaupt der richtige Ansatz ist.

Was willst du im Detail machen?

3

Auf der Detailseite habe ich für die einzelnen Textilfarben Icons. Im Moment habe ich es so eingestellt, dass 5 Icons pro Zeile sind. Je nach Bildschirmbreite will ich aber 6 oder auch nur 4 Stück haben, damit es übersichtlicher ist. 

Manchmal sind die Farbnamen entsprechend lang, so dass diese in zwei oder drei Zeilen geschrieben werden. Daher musste ich um die Icons + Namen einen DIV-Container ziehen, damit die darunter liegenden Icons nicht versetzt dargestellt werden, wenn der Name über zwei Zeilen geht. Hier muss ich dem Server aber sagen, wann er den DIV-Container schließen muss und eine neue Zeile anfängt. Und hierfür brauche ich diese Abfrage.

Siehe hier: Artikel mit langen Farbbezeichnungen

4

Dazu brauchst du gar kein Javascript. Das ist doch viel zu dirty.

Das geht alles über CSS, schau dir dazu mal die CSS Media Queries an -> Responsive Web Design Media Queries

Und parallel dazu kannst du dir auch flexbox anschauen -> CSS Flexbox (Flexible Box)

1 „Gefällt mir“