Template nicht "boxed" 1160px sondern 1260px anzeigen.

Shopware 5 Themes & Design
1

Hallo, ich möchte die Elemente der Einkaufswelten nicht in einer „Box“ mit Breite 1160px sondern ohne „Box“ auf 1260px anzeigen lassen. Bündig mit der Top-Navigation und Footer. Einstellung/Lösung body-bg und box-shadow sind bekannt. Einstellungen Einkaufswelt: „NICHT über kompletten Bildschirm.“ Dieses soll beibehalten werden. Jemand eine Idee oder Lösungsansatz?

2

Hallo Haehnen,

Darf ich mich hier erkundigen ob du eine Lösung gefunden hast?
JS generiertes CSS einfach überschreiben scheint mir hier nicht der richtige Ansatz zu sein.

Beste Grüsse

Arya_Svitkona

3

Hallo,

Grundsätzlich sind die Einkaufswelten ja responsive, das heißt eigentlich gibt nur der umliegende Container die Breite vor. Allerdings gibt es für einige Einkaufswelten-Modi eine so genannte baseWidth , welche in JavaScript für die Skalierung verwendet wird. Diese wird in Smarty in der widgets/emotion/index.tpl gesetzt. Ab Shopware 5.2 gibt es hier einen neuen Block widgets/emotion/index/config  um die Config-Variablen zu bearbeiten. Wichtig ist hier auch noch, dass auf den Kategorie-Seiten mit Sidebar eine andere Breite gesetzt wird.

Hier die Datei:
shopware/index.tpl at 5.2 · shopware/shopware · GitHub

Der Rest sollte allein durch CSS realisierbar sein.

Sonnige Grüße,
Phil

1 „Gefällt mir“
4

Hallo Philipp,

ich habe in der entsprechenden Datei folgendes geschrieben:

{extends file="parent:widgets/emotion/index.tpl"}
            
{* Config block for overriding configuration variables of the shopping world *}
{block name="widgets/emotion/index/config"}
    {$smarty.block.parent}
    {$baseWidth = 1400}
{/block}

im Quelltext wird das data-basewitdth auch korrekt auf 1400 erweitert. Allerdings bekommt die EK durch das Javascript immer noch 1160px als max-width. Ist das ein Bug oder mache ich etwas falsch?

 

EDIT: Shopware 5.2.1

5

Die maximale Breite ist durch den .container bei mir auf 1260px begrenzt. Dadurch läßt sich die Einkaufswelt auch auf max 1260 px wirkungsvoll erweitern.

Hat zwar nicht direkt mit deinem Problem zu tun, aber deine Änderung überschreibt die Breite des Listing-Controllers weiter unten m Block. Vielleicht ist es gewollt.

6

In der “alten” Einkaufswelt, also vor 5.2, hat das funktioniert. Da konnte man das data-Attribut für die maximale Breite der Einkaufswelt setzen, sodass das Javascript das ausgelesen und angewendet hat. In der jetzigen Version wird das data-Attribut korrekt über den neuen config-Block erstellt - jedoch gibt das Javascript immernoch inline 1160px als max-width mit - und das ist nicht gewollt

7

Hta hier jemand eine Idee? oder ist das ein BUG in der 5.2.1

8

Ich löse das zur Zeit mit einer Kombination aus JS und CSS

$.subscribe("plugin/swEmotion/onDataAttributes", function(event, el, opts) {
    opts.baseWidth = 1260;
});

An sich sollte das schon ausreichen. Tatsächlich hatte ich allerdings auch neuerdings das Problem, das trotzdem noch die alte max-width gesetzt war. Hab es dann noch zusätzlich in den less components überschrieben:

.emotion--wrapper {
    max-width: 1260px;
}

 

9

hm… also shopware möchte ja, dass man in {block name=„widgets/emotion/index/config“} die Variablen neu definiert. In der 5.2.2 funktioniert das auch. In der 5.2.1 habe ich beobachtet, dass dies nicht funktioniert.