emotion--wrapper eigene Class geben

Ich fummel nun schon die ganze Zeit rum. Bekomme es aber nicht gebacken, ich sehe keinen Weg.

Gibt es irgendeinen Weg den Container mit der Class  emotion–wrapper der Einkaufswelt eine Class zuzuweisen? Die Freitextfelder sind lediglich für den Container darin ( emotion–container ).

Gibt es keine Möglichkeit hier irgendwie noch eine individuelle Class zu hinterlegen?

Welche Möglichkeit soll es geben?

Gibt es eine im Backend? 

Ansonsten so: Frontend Guides

@NextMike schrieb:

Welche Möglichkeit soll es geben?

Gibt es eine im Backend? 

Ansonsten so: https://developers.shopware.com/designers-guide/

Das ist ja eben die Frage :) 
Im Backend gibt es keine Einstellung. Die Freitextfelder der Einkaufswelten sind leider eben nur für die Ebene darunter.

Hardcoded ins Template geht auch nicht, da die Class nur bei bestimmten Einkaufswelten angezeigt werden soll.

Grund ist: Ich möchte der Einkaufswelt einen Hintergrund geben. Dieser soll über die volle Breite gehen. Der Inhalt soll aber ganz normal im Container bleiben. 

Die Freitextfelder der Einkaufswelten sind leider eben nur für die Ebene darunter.

wie meinst Du das? 

@NextMike schrieb:

Die Freitextfelder der Einkaufswelten sind leider eben nur für die Ebene darunter.

wie meinst Du das? 

Ich versuche es hier einmal zu verdeutlichen -> http://d.pr/i/KDyWp

Man könnte natürlich der Class is–fullscreen entsprechend einen Background zuweisen. Dieser wäre dann aber eben global für jede volle Breite und nicht individuell. Außerdem würde dann wieder der .container fehlen, dass eben der eigentliche Inhalt nicht über die volle Breite geht.

Ich glaube ich würde in Template die EinkaufsweltID oder was auch immer abfragen und die Klasse setzen.

@NextMike schrieb:

Ich glaube ich würde in Template die EinkaufsweltID oder was auch immer abfragen und die Klasse setzen.

Das Problem ist: Der Container emotion–wrapper, welcher die EK umfasst hat keine ID. Die einzige Möglich wäre dann wohl per Javascript den emotion–wrapper Containern eine fortlaufende ID zuzuweisen, damit man diese dann entsprechend direkt ansprechen kann … 

Da steht doch emotionID/2

Ist das nicht die ID der Einkaufswelt?

1 „Gefällt mir“

@NextMike schrieb:

Da steht doch emotionID/2

Ist das nicht die ID der Einkaufswelt?

Ne - Da steht nur ein data Attribut, um die entsprechende EK zu laden.

Ich habe es jetzt einfach so gelöst, dass ich jeden Wrapper eine ID per JS zuweise.

$.subscribe('plugin/swEmotionLoader/onInit', function() {
  $('.is--ctl-index .content--emotions .emotion--wrapper').attr('id', function(i) {
     return 'emotion--'+(i+1);
  });
});

So hat dann jeder Container eine eigene ID, welche ich ansprechen kann -> http://d.pr/i/nZ8bYF

Allerdings ist das natürlich nicht die beste und sauberste Variante … Schöner wäre es, wenn ich genau diesen Mutter Element über das Backend eine Class zuweisen könnte. Aber das geht wohl nicht.

Und man hat natürlich den Inhalt auch nicht in einen Container bei voller Breite … Ich denke ich mache dann dafür noch ein neues Template.

Hallo,

du suchst also genau die Funktion, die exakt dieses Shopware Plugin bietet: http://store.shopware.com/digi147422673213/vollflaechiger-hintergrund-bei-nicht-vollflaechigen-einkaufswelten.html . Dort kannst du sogar alles ohne LESS- oder JavaScript-Eingriffe direkt im Shopware Backend festlegen.

Beste Grüße

Sebastian

Guten Abend Zusammen!

Das Thema ist schon was älter, vielleicht wäre aber eine weitere Lösung für Andere noch hilfreich.

Ich habe das wie folgt mit CSS und etwas jQuery gelöst:

  1. Gebe in der Einkaufswelt einem Element eine X-Beliebige Klasse, nach der ich mittels jQuery suchen kann, z.B. “test”. Das emotion–element hat nun die zusätliche CSS-Klasse test bekommen.

  2. CSS Klasse definiert, welche z.B. der emotion–wrapper oder jedes Andere vorherige Parent Element bekommen soll.

  3. Script:

    $.subscribe(‘plugin/swEmotionLoader/onLoadEmotionFinished’, function() {

     $(".test").parents("div.emotion--wrapper").addClass("test33");
    

    });

 

Es wird gewartet bis der Eventhändler zum Laden der Einkaufswelt komplett geladen ist. Dann erst wird das Script ausgeführt. Wartet man nicht bis der Eventhändler komplett geladen ist, wird das Script schon bevor die Elemente der Eeinkaufswelt geladen sind ausgeführt und somit keine CSS Klassen hinzugefügt.

jQuery nimmt nun das Element mit der CSS Klasse test und geht zurück bis zum gewünschten Element und fügt die Klasse, Bsp.: test33 hinzu.

Mittels .parents() kann man nun z.B. den emotion–wrapper auswählen oder die "section class=“emotion–container”, also aller vorherigen Parent Elemente im DOM.

jQuery nimmt nun das Element mit der CSS Klasse test und geht zurück bis zum gewünschten Element und fügt die Klasse, Bsp.: test33 hinzu.

 

Grüße

das funktioniert wohl nun, beim resize wird es problematisch. Gibt es hier eine Lösung für?