[gelöst] eigenes Script und Css bzw. Less einbinden

Hallo, ich habe in meinen Shop eine relativ breite Größentabelle, die für die mobile Ansicht zu breit ist. Nun habe ich hier… was gefunden muss aber dazu eine Script und Css-Datei einbinden. Wie mache ich das in der 5’er Version um die ganze Sache mal zu testen. Die Css-Datei habe ich schon in den Ordner /Responsive/frontend/_public/src/less/_components geschoben, von .css in .less umbenannt und die components.less mit den Eintrag “@import “_components/responsive-tables.less”;” erweitert und diese wird auch geladen, aber was mach ich mit dem Script? Habe ich jetzt in den Ordner /Responsive/frontend/_public/src/js kopiert aber da wird er leider nicht mitgeladen und finde bei den Scripten ja auch keine Datei bei der ich entsprechende JS-Datei, wie in der CSS, mit eintragen kann. Kann mir auch jemand sagen wie ich es auch mit der Css updatesicher machen kann, habe ja die Änderung jetzt nur erst mal im /Responsive/frontend/ gemacht. Besten dank im voraus.

Dafür solltest du ein eigenes Template anlegen: https://devdocs.shopware.com/designers- … tup-guide/ Viele Grüße

Hallo Aquatuning, das eigene Template hatte ich schon angelegt, mir war nur nicht bewust wie ich jetzt die Css und Js-Dateien einbinde. Den Beitrag auf dem Du verlinkt hast hatte ich mir auch schon versucht mehrmals durch zulesen, aber da ich mit der englischen Sprache nicht so vertraut bin(over 50), habe ich es irgendwie nicht so ganz verstanden. Aber wenn man es sich dann ein wenig zusammenreimt ist es recht einfach. Die Css-Dateien in den Ordner „/Dein_Template/frontend/_public/src/css“ und die Js-Dateien in den Ordner „/Dein_Template/frontend/_public/src/js“ dann in die /Dein_Template/Theme.php vor: public function createConfig(Form\Container\TabContainer $container) { } } folgendes rein: /\*\* @var array Defines the files which should be compiled by the javascript compressor \*/ protected $javascript = array( 'src/js/deine\_name.js' ); /\*\* @var array Defines the files which should be compiled by the javascript compressor \*/ protected $css = array( 'src/css/deine\_name.css' ); Beide Dateien werden dann zum Ende der komprimierten CSS bzw. JS eingefügt

1 „Gefällt mir“

Hallo, hierzu habe ich mal eine Anfänger Frage! Gibt es eine Möglichkeit - Änderungen direkt nach Veränderung der Datei ansehen zu können? Also ohne das kompilieren? Ich bearbeite die Dateien direkt per FTP und muss bei jeder Änderung neu kompilieren. Geht dies auch einfacher? LG Mikele

Ich versuche gerade eine CSS-Datei einzubinden.

Ich habe eine css-Datei, diese benenne ich um in .less

In der Datei all.less schreibe ich @import "_components/nekton.less dazu.

Die Datei lieht natürlich im Ordner _components

Nun hab ich den Cache geleert, aber leider sehe ich keine Veränderung.

In meiner CSS steht lediglich:

// Logo

.logo–link {
background-color: #ffdd44;
}

Was mache ich falsch??

@msiegler‍ Hast du denn auch dein Theme im Theme Manager neu zugewiesen, sodass deine Änderungen kompiliert werden?

  1. .logo–link könnte noch differenzierter gestyled werden z.B. mit .class .logo–link {backgournd-color: @background-color;} oder so ähnlich?

  2. Im html Element z.B.

    könnte ein Bild eingebunden sein mit Hintergrundfarbe welches über die gesamte Element-Größe geht?

    1. Kompiliert nach dem Cache löschen?

    2. Ein link wäre praktisch

Muss ich unbedingt ein neues Theme erstellen?

Ich hab nur die beiden Schritte wie oben beschrieben gemacht.

Oder reicht es wenn ich nun das bestehende Theme nochmal zuweise??

Muss ich unbedingt ein neues Theme erstellen?

Ja. Wenn man etwas macht, dann richtig. Ist aber total einfach über das Backend zu realisieren und hier gibt es Tutorials:

Überprüf doch einfach mal Punkt 1. und 2. von mir und mach Punkt 3. und 4.

@n8lauscher schrieb:

Hallo,

hierzu habe ich mal eine Anfänger Frage!
Gibt es eine Möglichkeit - Änderungen direkt nach Veränderung der Datei ansehen zu können? Also ohne das kompilieren?

Ich bearbeite die Dateien direkt per FTP und muss bei jeder Änderung neu kompilieren.
Geht dies auch einfacher?

LG
Mikele

klar

https://developers.shopware.com/designers-guide/best-practice-theme-development/ 

aber NICHT auf einem Live System :-)  

es gibt noch das RemoteLiveReload-Extension für den Chrome. 

@msiegler schrieb:

Muss ich unbedingt ein neues Theme erstellen?

Ich hab nur die beiden Schritte wie oben beschrieben gemacht.

Oder reicht es wenn ich nun das bestehende Theme nochmal zuweise??

Hallo,

wenn du kein eigenes Theme erstellst, dann kann und wird es wahrscheinlich bei deinem nächsten Update von Shopware dazu kommen, dass deine Änderungen wieder verloren gegangen sind, da bei einem Update die Basis-Themes überschrieben werden.

Ein eigenes Theme kannst du ja über den Theme Manager erstellen, wie du in diesem bspw. eine LESS-Datei mit CSS-Änderungen anlegst, ist bspw. im Punkt " Styling" hier beschrieben: Example - Custom detail page .

Bei Änderungen an den LESS-Dateien solltest du auch immer das Theme neu kompilieren.

Beste Grüße

Sebastian