Statische Ressourcen wie Bilder, Schriften im Plugin Public Folder

Shopware 6 (German) Programmierung
1

Moin moin, 

hat es schon mal jemand geschafft eine statische Ressource wie ein Bild oder eine Schriftart über ein Plugin einzubinden und in CSS / SCSS zu verwenden?

 

Unter Add Custom Assets | Shopware Documentation steht dort Folgendes:

If you want to add static assets like images or fonts, you can place them in the public folder of your Plugin. They will be copied to the public folder of Shopware 6 when you build the storefront. Your plugin shouldn’t put its assets into another directory outside of its scope though - but how do those assets from plugins actually work then?

 

Das hilft mir jedoch nicht weiter. Wie muss dieser Ordner aussehen? Und wie verwende ich ein Bild darin beispielsweise als Hintergrundbild in einem CSS Befehl - also wie lautet der Pfad zur Datei… 

 

2

Ich habe eine Schrift eingebunden, indem ich ich sie unter src/Resources/storefront/asset/font/arial eingefügt und dann über font-face eingebunden habe.

// src/Resources/storefront/style/_arial-fontface.scss
@font-face {
    font-family: 'Arial';
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url(../asset/font/arial/arial.woff2) format('woff2'),
    url(../asset/font/arial/arial.woff) format('woff');
}

Danach einmal ./psh.phar storefront:build ausführen. 

Ich habe den asset-Ordner genommen, weil der bei der Generierung des Plugins automatisch erstellt wurde und ich in den Docs nichts finden konnte. Es kann also sein, dass sich an der Ordnerstruktur noch was ändert, aber das wäre ja auch kein Problem. Habe es nur mit dem master auf Github getestet, nicht mit der EA.

Liebe Grüße

PS: Komischerweise funktioniert es nur dann, wenn die scss-Datei direkt im style-Ordner liegt. Wenn ich in styles einen neuen Ordner vendor anlege, die scss-Datei dort platziere und @font-face an den neuen Pfad anpasse, kommt es zu Fehlern.

PPS: Ich sehe gerade, dass es mit dem vendor-Ordner funktioniert, wenn man den Pfad nicht anpasst. Eigentlich müsste man den Pfad mit …/…/asset/usw angeben, aber dann kommt es zu Fehlern. Wenn ich den Pfad falsch mit …/ angebe, kompiliert Shopware alles korrekt. Nur PhpStorm meckert, weil der Pfad so ja eigentlich falsch ist. Das liegt vermutlich an der Art wie Shopware die Themes zur Zeit kompiliert.

2 „Gefällt mir“
3

Ich hatte das so versucht und die Pfade mit …/…/asset/ in einem vendor- Ordner angegeben. Meine IDE hat die Datei so finden können, aber in der Storefront waren die Pfade nicht passend. Ich werde das mal testen, wie du beschrieben hast. Danke!

4

Ich hatte damit bisher auch keine Probleme in SW6 (Font und Images per SCSS).

Was ich allerdings nicht hinbekommen habe ist, ein Bild aus dem Plugin Ordner direkt (img-Tag) in einem Template zu integrieren.
Die Assets werden im Public Ordner immer in einem dynamisch benannten Ordner abgelegt. Ich habe aber keine Möglichkeit gefunden, an den dynamischen Pfad zu kommen.

Hat da evtl. jemand einen Tipp?

5

@Larineso‍

Irgendwie funktioniert das bei mir nicht. Getestet in verschiedenen aktuellen commits… 

 

Ich habe meine Schriftart unter verschiedenen Ordnern getestet: 

  • src/Resources/storefront/ asset /font/SCHRIFT.ttf
  • src/Resources/storefront/ assets /font/SCHRIFT.ttf
  • src/Resources/ dist /storefront/ asset /font/SCHRIFT.ttf
  • src/Resources/ dist /storefront/ assets /font/SCHRIFT.ttf

Angegeben habe ich die Schriftart im SCCS vendor Ordner (src/Resources/storefront/style/vendor/font.scss):

  • …/ asset /font/SCHRIFT.ttf
  • …/ assets /font/SCHRIFT.ttf

Im Frontend sucht das System die Schriftart unter: 

 

Wenn ich mir dir Sources anschaue habe ich nicht das Gefühl, dass meine Schriften irgendwie erreichbar wären… Der Order theme/18c30fa9eb1a357e7d3a2f16b472566d beinhaltet nur css und js…

 

 

307×576 10.8 KB

6

Der Pfad sieht gut aus. Wenn ich den Pfad richtig angegeben habe, hat shopware immer in theme/asset/usw gesucht, also ohne hash.

Offenbar werden die assets nur nicht in dein Theme geladen.

Hast du ./psh.phar storefront:build ausgeführt?

Liebe Grüße

1 „Gefällt mir“
7

Hallo @Larineso‍

ich habe  ./psh.phar storefront:build und auch  ./psh.phar storefront:dev ausgeführt und das ganze auch mit einem ganz frischen Commit einmal getestet. 
Bevor wir hier aneinander vorbei reden. Es geht hier um ein reines Plugin. Kein Plugin-Theme. Gibt es hierbei unterschiede?

Muss man noch irgendwas tun, damit die assets in das Theme geladen werden?

Es gab ja vor ein paar Wochen noch eine Anleitung wie man JS und SCSS mit einer main.js und Webpack kompiliert. Meines Wissens nach wurde dabei im Theme auch immer ein dist/ Ordner angelegt?!

8

Nein, das sollte so reichen. Ein ./bin/console cache:clear kann aber auch nicht schaden.

Inwiefern sich in dem Punkt reine Plugins von Plugin-Themes unterscheiden habe ich noch nicht getestet. Ich teste es nachher mal mit einem normalen Plugin. Ich nutze ein Plugin-Theme, das ich auch in der Konfiguration der Storefront ausgewählt habe.

Liebe Grüße

1 „Gefällt mir“
9

Mit einem normalen Plugin funktioniert es bei mir auch nicht. Ob es eine Möglichkeit gibt, die Schrift in das normale Theme zu kompilieren, kann ich dir leider nicht sagen.

Liebe Grüße

1 „Gefällt mir“
10

Okay, dann hat Shopware wohl für normale Plugins keinen Public-folder implementiert. Schade … dann heißt es also weiterhin warten … 

11

[@Moritz Naczenski](http://forum.shopware.com/profile/14574/Moritz Naczenski „Moritz Naczenski“)‍ übersehen wir hier etwas oder gibt es hierzu noch keine Möglichkeit?

Das ist für viele Frontend Storefront-Plugins wirklich wichtig Sticking-out-tongue

12

Keine Ahnung - wenn ich helfen könnte, würde ich es tun :wink:

Ich hab den Thread mal den Kollegen rüber geschickt, bei Zeit wird sich das sicher mal jemand ansehen.

1 „Gefällt mir“
13

Hallo zusammen,

ich hatte das gleiche Problem beim setzen eines Hintergrund-Bildes.

Ich hoffe, ich erzähle Euch nichts, was Ihr schon wisst.

Beim Theme-Plugin habe ich es wie folgt geschafft:

Im Ordner

⁨development/custom/plugins/DEIN-PLUGIN-NAME/src/Resources⁩/storefront/asset

finden sich alle Assets, die beim build mit kopiert werden. Sie sind nachher hier zu finden:
www.Deine-URL.de/theme/HASH-xyz-123/asset/dein-bild.jpg

Um später in der SCSS-Datei darauf zuzugreifen:
background: url("…/asset/dein-bild.jpg");

Ich hoffe das hilft irgendwem…

14

Hallo @el_afilador‍

es geht hier leider nicht um ein Theme-Plugin. In normalen Plugins scheint das so nicht zu funktionieren. Siehe weiter oben im Beitrag.

15

[@Moritz Naczenski](http://forum.shopware.com/profile/14574/Moritz Naczenski „Moritz Naczenski“)‍

 

gibt es irgendeine Rückmeldung vom Kollegen?

16

Moin!

Das Handling von assets funktioniert in Shopware 6 ein wenig anders als man das von z.B. von Shopware 5 kennt. Ihr könnt assets in den public Order eures Plugins legen. Bei jedem ./psh.phar storefront:build wird dann am Ende der Befehl bin/console assets:install ausgeführt. Dieser kopiert die assets von eurem public Order im Plugin in den public Ordner der Shopware Installation. Um genau zu sein, in den Ordner public/bundles/{bundleName}/

Wenn ihr die assets innerhalb eines Twig Templates nutzen möchtet, könnt ihr asset(‚bundles/my-plugin/image.jpg‘) nutzen. So wird der asset Pfad automatisch aufgelöst. Per CSS/JS ist es etwas schwieriger.

CSS/JS wird seit der EA1 Version konkateniert und unter public/theme/{themeHash}/css/all.cs bzw js/all.js abgelegt. Von dort würdet ihr relativ per …/…/…/bundles/{bundleName}/image.jpg auf euer asset kommen.

2 „Gefällt mir“
17

@Jens_K schrieb:

Moin!

Das Handling von assets funktioniert in Shopware 6 ein wenig anders als man das von z.B. von Shopware 5 kennt. Ihr könnt assets in den public Order eures Plugins legen. Bei jedem ./psh.phar storefront:build wird dann am Ende der Befehl bin/console assets:install ausgeführt. Dieser kopiert die assets von eurem public Order im Plugin in den public Ordner der Shopware Installation. Um genau zu sein, in den Ordner public/bundles/{bundleName}/

Wenn ihr die assets innerhalb eines Twig Templates nutzen möchtet, könnt ihr asset(‚bundles/my-plugin/image.jpg‘) nutzen. So wird der asset Pfad automatisch aufgelöst. Per CSS/JS ist es etwas schwieriger.

CSS/JS wird seit der EA1 Version konkateniert und unter public/theme/{themeHash}/css/all.cs bzw js/all.js abgelegt. Von dort würdet ihr relativ per …/…/…/bundles/{bundleName}/image.jpg auf euer asset kommen.

Übrigens - für alle, die vor dem selben Problem stehen: mit „public Order im Plugin“ ist das Verzeichnis „custom/plugins/DeinPlugin/src/Resources/public“ gemeint.

1 „Gefällt mir“
18

Ich greife das Thema nochmal auf, da mittlerweile etwas Zeit verstrichen ist.

Frage : Wie müssten Dateien im public Ordner des Plugins aufbereitet sein, dass Sie beim Installieren des Plugins direkt verwendet werden können?

 

Hintergrund : nehmen wir an, man hat ein Plugin mit ein paar Bildern die im Plugin unter /src/Resources/public/img liegen. Ich müsste nun ./psh.phar storefront:build aufrufen, damit die Dateien in den Shopware-Bundles Ordner gelangen.

Für ein Plugin, welches in den Shopware Store soll, ist es aber ungünstig, wenn der Kunde zunächst über eine Konsole storefront:build aufrufen müsste damit die Bilder angezeigt werden können.

 

Viele Grüße
Dennis

1 „Gefällt mir“
19

Wenn Bilder in custom/plugins/DeinPlugin/src/Resources/public abegelegt werden und dann ein storefront:build ausgeführt wird, geht es.

Aber storefront:hot-proxy funktioniert nicht mehr und gibt immer Fehlermeldung aus.

https://forum.shopware.com/discussion/67068/webpack-error-no-loader-configured-hintergrundbild#latest

20

@masmut schrieb:

Wenn Bilder in custom/plugins/DeinPlugin/src/Resources/public abegelegt werden und dann ein storefront:build ausgeführt wird, geht es.

Aber storefront:hot-proxy funktioniert nicht mehr und gibt immer Fehlermeldung aus.

https://forum.shopware.com/discussion/67068/webpack-error-no-loader-configured-hintergrundbild#latest

Hi!
Ich glaube du hast meine zweite Frage nicht ganz verstanden: Ich suche nach einer Lösung, die genau dies beim Installieren des Plugins übernimmt. EIn Kunde, der das Plugin bspw. im Shopware Store kauft, herunterlädt und dann in seinem Shop installiert, hat ggf. nicht die Ahnung, dass noch ein zusätzlicher Befehl über die Konsole ausgeführt werden muss.

Die Erwartungshaltung ist da natürlich, dass das Plugin installiert wird und die entsprechenden Bilder direkt und ohne weiteres zutun angezeigt werden.

Viele Grüße
Dennis