Hi,
ich habe vor, für einige Artikel einen 360 Grad Slider einzubinden. Dazu muss ich j-querry, eine css datei und eine weitere javascript datei eibinden. Wie kann ich das in Abhängigkeit vom Artikel machen? Oder macht es vielleicht Sinn, die drei Dateien immer zu inkludieren?
Viele Grüße
Eine andere Idee war gerade, ein iFrame zu verwenden.
Performancetechnisch macht es vermutlic nicht Sinn, alles immer laden zu lassen. Wir könnte ich denn in der header.tpl die Dateien inkludieren in Abhängigkeit z.B. von einem Wert in einem Freitextfest oder Attribut?
In der detail/header.tpl
{extends file='parent:frontend/detail/header.tpl'}
{block name="frontend_index_header_css_screen" append}
{* attr.1 durch dein attribut ersetzen *}
{if $sArticle.attr1}
{/if}
{/block}
Aber Achtung: Im header steht dir zur Renderzeit noch kein jQuery zur Verfügung. Dieses wird im Footer eingebunden. Wenn dein Skript abhänging von jQuery ist solltest du es eher an den Block {block name=“frontend_index_header_javascript_jquery”} anhängen ( /detail/index.tpl ) . Auch wenn der Block “header” im Namen hat steht er ganz unten im Source kurz vor dem schließenden Body-Tag.
Aber Achtung: Im header steht dir zur Renderzeit noch kein jQuery zur Verfügung. Dieses wird im Footer eingebunden. Wenn dein Skript abhänging von jQuery ist solltest du es eher an den Block {block name=„frontend_index_header_javascript_jquery“} anhängen ( /detail/index.tpl ) . Auch wenn der Block „header“ im Namen hat steht er ganz unten im Source kurz vor dem schließenden Body-Tag.
Guter Hinweis. Der Block heißt allerdings frontend_index_header_javascript_jquery_lib Mein Beispiel war jetzt allerdings aber auch nur für die CSS im Head. Für Javasript hängst du dich am besten an diesen Block: https://github.com/shopware/shopware/blob/5.2/themes/Frontend/Bare/frontend/index/index.tpl#L219 oder diesen https://github.com/shopware/shopware/blob/5.2/themes/Frontend/Bare/frontend/index/index.tpl#L226
Danke für eure Hilfe, das werde ich ausprobieren und mich melden, ob alles geklappt hat!
Danke für eure Hilfe, das werde ich ausprobieren und mich melden, ob alles geklappt hat!
Hallo,
man kann das JavaScript / jQuery natürlich auch in jeden x-beliebigen Block einfügen, Hauptsache man prüft, ob das Dokument schon vollständig geladen und jQuery ready ist.
Beste Grüße
Sebastian
So, das erweitern der index/index.tpl und detail/header.tpl hat insoweit funktioniert, als dass die drei Dateien nun beim Artikel mit dem Attribut im Quelltext zu finden sind. So, jetzt will ich den Slider mit diesem kleinen Text im Shopware Backend einfügen:
0%
Aber shopware löscht jedes mal
und damit läd zwar der Slider mit den Bildern, aber es ist kein Bild zu sehen. Wo ist das Problem? Und ist das sinnig, dass die javascript dateien erst am Ende geladen werden?
So, jetzt will ich den Slider mit diesem kleinen Text im Shopware Backend einfügen
Etwa in der Beschreibung eines Artikels bzw in einem Tiny-MCE Editor? Dann kann das Ding wirklich einige Tags rausfiltern.
Und ist das sinnig, dass die javascript dateien erst am Ende geladen werden?
Somit wird die Seite etwas schneller angezeigt, als wenn die JS Dateien am Anfang geladen und geparst werden müssen
Genau, über tinyMCE, das anscheinend kein
mag und direkt wieder raushaut. Gibt es eine einfache Lösung für das Problem? Vielleicht über Freitextfelder? Damit kenne ich mich bisher leider zu wenig aus.
Meine Idee: in einem weiteren Attribut den Code schreiben und im Template als erstes i.d. Beschreibung ausgeben lassen, falls attr8=1.
Klar, dann aber vermutlich nicht attr8==1 prüfen, sonder einfach das Attribut-Feld, in dem der o.g. Code gespeichert wird.
Also etwa so (in der Datei /themes/Frontend//frontend/detail/tabs/description.tpl):
{extends file="parent:frontend/detail/tabs/description.tpl"}
{* hide "Frage zum Artikel" *}
{block name='frontend_detail_actions_contact'}{/block}
{block name='frontend_detail_description_title' prepend}
{if $sArticle.attr8}
{$sArticle.attr8}
{/if}
{/block}
Sehr cool, der Slider ist drin und funktioniert. Besten Dank. Kann ich das noch auf Desktops eingrenzen, sodass der Slide nicht bei mobilen Geräten angezeigt wird?
Klar. Du kannst ja mit JS die Breite des Screens auslesen und dementpsrechend entscheiden, ob der Slider anegeigt werden soll oder nicht.
Ich könnte mir vorstellen, dass das nicht ganz sauber ist, weil Retina Displays eine höhere Auflösung haben, als manche Desktop LCDs. Gibt es da keine klare Abgrenzung, bzw. erkennt Shopware nicht sowieso von sich aus, ob es sich um ein mobiles Gerät handelt? So funktionieren doch auch die Einkaufswelten, oder wird das dort nur über die Größe gemacht?
Entweder machst du es über den Statemanager oder einfach ganz normal über CSS Media Queries.
Statemanager bspw.
StateManager.registerListener([{
state: 'xs',
enter: function() { $('.deinslider)).hide(); },
exit: function() { $('.deinslider)).show(); }
}]);
CSS bspw.
@media screen and (max-width: @phoneLandscapeViewportWidth) {
.deinslider {
display:none;
}
}
Danke für deine Hilfe. Jetzt bin ich aber leider noch zu sehr Anfänger um zu wissen, wie das in die description.tpl eingebunden wird.
Wollte es eigentlich nach der if-abfrage machen, aber dann wird es leider als string ausgegeben. Beim css Beispiel krieg ich eine Fehlermeldung und es wird nichts mehr i,d, Description ausgegeben. Mir kommt allerdings gerade der Gedanke, dass der Statemanager in eine .js Datei gehört
Kann mir vlt. einer noch kurz eine Hilfe zur Syntax geben, wie das zu verwenden ist? Sorry für die Mühe, ich hoffe, dass andere Nutzer davon auch einen Nutzen ziehen können.
Du solltest erst einmal grundlegend HTML/CSS/JS lernen und dazu den Shopware Theme Guide: Shopware 5 Theme Startup Guide
sowie die anderen Artikel des Designs Guide: Frontend Guides
Haste sicherlich in einen halben Tag durch und danach bist du auch schlauer 
Das der Statemanager eine Javascript Datei ist, hättest du spätestens dann gemerkt, wenn du JS zumindest im Ansatz kennen würdest, oder zumindest dem von mir genannten Link gefolgt wärst anstatt Copy&Paste zu betreiben.
Hast ja recht, Mit HTML, php, css hab ich keine Probleme, nur leider JS und dem Konstrukt von SW Templates. Danke für die Links, ich schau mir erstmal die Seiten genauer an und melde mich, falls ich es immer noch nicht schnalle, danke dir.
Ich hatte es mal in JS eingebunden, hat nur leider nicht funktioniert, weil ich eben zu wenig JS kann.