css und js in eigenem Einkaufswelt Element

Liebes Forum :slight_smile: :slight_smile: ich habe für die Einkaufswelten Komponenten per Plugin erstellt. (Wird übrigens hier beschrieben http://community.shopware.com/_detail_1459.html). Dafür möchte ich gerne Javascript und css einbinden. Wenn ich das im Template-Snippet der Einkaufswelt-Komponente mache, dann wird es mit jedem Einkaufselement dieser Art eingebunden. Macht ja keinen Sinn. Im User-Template möchte ich es aber auch nicht machen, ist ja dann kein Plugin mehr. Wo/wie binde ich css und JS am besten ein? Liebe Grüße Kerstin

Hab gerade das gleiche Problem. Hat jemand eine Lösung?

Du könntest dynmamisch JS und CSS in jedem EKW-Element laden und vorher aber immer vorher mit JS abfragen ob es z.B. in den head geladen ist. Alternativ dazu das JS und CSS einmalig in das Template einbinden, ggf ein Plugin dazu.

Hallo, ich habe aktuell das selbe Problem. Ich will das javascript der lightbox in einem eigenen Einkaufswelt Element laden, habe es jetzt einfach mal über diesen Weg versucht in der .tpl aber ohne Erfolg… {\* Add stylesheet \*} {block name="frontend\_index\_header\_css\_screen" append}<link type="text/css" media="screen, projection" rel="stylesheet" href="%7Blink%20file='frontend/_resources/css/swag_lightbox.css'%7D">{/block} {\* Add javascript \*} {block name="frontend\_index\_header\_javascript\_jquery" append}<script type="text/javascript" src="%7Blink%20file='frontend/_resources/js/jquery.swag_lightbox.js'%7D"></script><script type="text/javascript"> $(document).ready(function() { $('a[rel^=lightbox]').swagLightbox({ fadeTo: {$SwagLightbox.fadeTo}, fadeSpeed: {$SwagLightbox.fadeSpeed}, resizeSpeed: {$SwagLightbox.resizeSpeed} }); }); </script>{/block}

Was heisst ohne Erfolg? Welcher Fehler wird ausgeschmissen in der Console? Bei JS immer auf literal achten: http://www.smarty.net/docsv2/de/languag … iteral.tpl Bei der EK musst du außerdem schauen, dass dein JS erst nach der EK geladen wird. Also am besten mit .ajaxComplete()

okay, also mit nach der Einkaufswelt übersteigt das meinen wissensstand… wie macht man das dann? ich habe es jetzt mal mit dem literal versucht, zumindest wird der fehler in der konsole angezeigt dass die swag_lightbox.css nicht verfügbar ist. die ist aber auch noch nicht verfügbar, aber das javascript wird trotzdem in der einkaufswelt nicht geladen

[quote=„kayyy“][quote=„kayyy“]Bei der EK musst du außerdem schauen, dass dein JS erst nach der EK geladen wird. Also am besten mit .ajaxComplete()[/quote][/quote] übersteigt mein wissen, kannst du mir bitte einen tipp geben? habe mir den link (http://api.jquery.com/ajaxcomplete/) angeschaut, bin da leider nicht so der meister drin =/

Da steht doch alles? Muss man natürlich auch ein wenig lesen, Meister muss man dafür nicht sein :slight_smile: Im Prinzip: $( document ).ajaxComplete(function() { DEINJS }); Dann führt er dein JS erst aus, nachdem alles - also auch die EK - geladen worden ist. Wird dein JS denn überhaupt eingebunden und ist die Datei aufrufbar? Allerdings frage ich mich auch, warum du nochmal eine lightbox einbindest, Shopware kommt doch schon mit nem modal Plugin? -> https://github.com/shopware/shopware/bl … y.modal.js Dafür empfehle ich noch: https://developers.shopware.com/designe … luginbase/

ich habe diesen text jetzt 10 mal gelesen, ich verstehe es einfach nicht… meister ist gut, ich denke ich bin noch meilen entfernt mich anfänger zu schimpfen :smiley: also das javascript wird in der einkaufswelt nicht geladen… [code]{* Add stylesheet *} {block name=“frontend_index_header_css_screen” append} {literal}{/literal} {/block} {* Add javascript *} {block name=“frontend_index_header_javascript_jquery” append} {literal}{/literal} {literal}{/literal} {/block} {block name=“widget_emotion_component_lightbox_banner”}

{block name=“widget_emotion_component_html_content”}

{$Data.cms_title }

 

{$Data.cms_title}
{/block}
{/block}[/code] ich habe jetzt deinen code einfach mal ganz am anfang in dem javascript eingefügt und am ende den schluss, es geht immer noch nicht… das kann doch wohl nicht so schwer sein :frowning: mir geht es ja genau dadrum, ich habe ein einkaufswelt element erstellt und möchte dass das verlinkte bild in dieser modal box (lightbox) sich öffnet… alles was ich bis jetzt versucht habe, hat nicht geklappt… die letzte lösung für mich war jetzt das javascript der lightbox einzubinden, weil es auf allen anderen seiten funkt. ausser in der einkaufswelt

bzgl. Modal: Schau dir mal folgendes an: https://blog.hostianer.de/shopware-5-sh … dal-laden/ Und dann entsprechend einfach auch mal die Datei samt der Kommentare, welche erklären: https://github.com/shopware/shopware/bl … s#L92-L229 Für ein Image bspw: [code]

Button Text

[/code] Demo: http://d.pr/i/17e42

ich hatte das schonmal auf einen ähnlichen weg versucht, leider ohne erfolg. wenn ich es jetzt auf diesem weg mache, ladet die einkaufswelt nicht mehr: [code]

{$Data.cms_title }
{$Data.cms_title}

[/code] Also egal was ich mache, es öffnet sich nie die modal box… :cry:

ich weiß nicht mehr weiter… es will einfach nicht in der blöden einkaufswelt laden… ich habe jetzt auch mal deinen code 1:1 übernommen, in der einkaufswelt öffnet er dann einfach immer eine neue seite mit dem link

[quote=„konsi“]ich weiß nicht mehr weiter… es will einfach nicht in der blöden einkaufswelt laden… ich habe jetzt auch mal deinen code 1:1 übernommen, in der einkaufswelt öffnet er dann einfach immer eine neue seite mit dem link[/quote] Das wird daran liegen, dass es nicht nach der EK geladen wird. Im Prinzip wird hier erst das Plugin ansich geladen und dann die EK. Das Plugin muss aber erst warten, bis die EK geladen ist. Da wird die console wohl auch den entsprechenden Fehler ausgeben. Daher sagte ich auch vorher, dass man es mit ajaxComplete() machen sollte, oder eben sich an den Callback des EK jQuery Plugin hängen und eine kleine Zusatz Funktion schreiben für die EK für dieses Modal. Ist halt alles nicht ganz so einfach, zur Not musst du dir dann eben jemanden holen, der dir das macht. Auch wenn es nur was kleines ist :slight_smile:

warum gibt es dazu nicht mal ein tutorial… ^^ wahrscheinlich wird es dann wohl da enden das mir entweder jemand hilft oder ich es sein lasse…