[GELÖST] Accordion Menü in Shopseite einbinden

Morgen liebe Leute, ich möchte eine Hilfeseite in meinem Shop anlegen und würde diese gerne mit einem Accordion- Menü umsetzen. Da es sehr platzsparend ist und der Kunde sich nicht durch sämtliche Seiten klicken muss. Ein Beispiel habe ich hier gefunden: http://www.normansblog.de/simple-jquery-accordion/ Meine Frage ist nun, wo muss ich den Code eintragen? HTML Code logischerweise in die Shopseite, aber wo muss der Rest hin? Ich denke mal die jQuery Bibliottheken sind schon vorhanden oder? Also wenn es um jQuery geht, bin ich geistig total nackig. Könnte mir da jemand ein wenig helfen? Grüße

Hi, also wenn du es so machst wie in dem Tutorial dann hast du ja am Ende drei Dateien (HTML-Code, Javascript-Code, CSS). Der HTML-Code muss dann ganz normal in das entsprechende Template eingetragen werden, die Javascript und CSS-Datei wird über das Header-Template eingebunden. JQuery scheint standardmässig in der Version 1.4.2 im Shop eingebunden zu sein. Wo genau besteht das Problem? :slight_smile: Grüße

2 Likes

OK, danke, funktioniert super. Wusste nur nicht, wo ich den Javascriptcode hinpacken sollte. Läuft jetzt wie es soll. :happy:

Hallo ErikBrinx, könntest Du mal posten, was Du wo gemacht hast. Ist vielleicht auch für andere interessant ;-). Danke.

Morgen. Ja klar kein Problem. Habe im Template fronted/index/header.tpl einen neuen Block erstellt und den Javascriptcode dort eingefügt. {block name="frontend\_index\_header\_javascript\_accordion"}<script type="text/javascript" src="%7Blink%20file='frontend/_resources/javascript/jquery.shopware.js'%7D"></script><script type="text/javascript"> //<![CDATA[ $(document).ready( function() { $('.toggle_container').hide(); $('.trigger_active').next('.toggle_container').show(); $('.trigger').click( function() { var trig = $(this); if ( trig.hasClass('trigger_active') ) { trig.next('.toggle_container').slideToggle('slow'); trig.removeClass('trigger_active'); } else { $('.trigger_active').next('.toggle_container').slideToggle('slow'); $('.trigger_active').removeClass('trigger_active'); trig.next('.toggle_container').slideToggle('slow'); trig.addClass('trigger_active'); }; return false; }); }); //]]> </script> {/block} Naja und den HTMLcode dann in die Shopseite gepackt. Das war es schon. Wichtig ist nur, dass man den Verweis auf die jquery.shopware.js und nicht auf die jquery-1.4.2.js setzt, weil sonst die Aktualisierung vom Warenkorb nicht funktioniert, wenn man Artikel von der Detailseite in den Warenkorb legt. Noch ein Tipp, da sich das Menü ziemlich langsam schließt, sieht es bei langem Text etwas verschwommen und wackelig aus. Da würde ich von ‘slow’ auf ‘fast’ umstellen, sieht besser aus. Grüße Erik

Auch von mir ein Danke. Das werde ich auch mal probieren - und es löst wahrscheinlich auch gleich meine Frage, wo ich Facebook-Developer-Plugins hinpacke (auch JavaS.). :slight_smile: Grüße - Heiko

Hm, ich habe jetzt doch noch ein Problemchen entdeckt. Wenn ich den Code so in die header.tpl eingebe läuft zwar das Menü ordentlich, aber mir wird ein Artikel direkt 2x in den Warenkorb gelegt. Woran liegt das?

Hast du mal einen Link das man sich das optisch anschauen kann was du mit dem Script gemacht hast? Grüße Frank

Hm ok, wenn es nicht anders geht. Der Shop ist noch nicht eröffnet, aber ich schalte ihn mal kurz frei. http://www.brinx24.de Danke schonmal.

Wo hast du das denn einegbaut? EDIT: Habs gefunden

Den JavascriptCode in der fronted/index/header.tpl, den HTMLCode in der Shopseite. Zu finden unter Hilfe, links in den Informationen.

Ok, hab jetzt einfach eine Kopie der jquery-1.4.2.js angelegt, in ein anderes Verzeichnis gepackt und in der header.tpl auf diese Datei verwiesen. Jetzt geht´s!

Kann man sich das ganze mal bei dir anschauen? Grüße

Hi Erik, [quote=“ErikBrinx”]Ok, hab jetzt einfach eine Kopie der jquery-1.4.2.js angelegt, in ein anderes Verzeichnis gepackt und in der header.tpl auf diese Datei verwiesen. Jetzt geht´s![/quote] Kannst Du mal posten, wie Du das eingebunden hast? Wenn ich das mache, klappt zwar alles, dafür ist im Artikellisting dann der “Vergleichen” Button weg und ich weiß nicht, was noch alles nicht funktioniert.

Hi zusammen, ich hatte das schon einmal in eine Plugin-Struktur gebracht, falls einer die Template-Änderung nicht selber durchführen möchte. Ich habe es allerdings noch nicht komplett getestet. Daher bitte mal vorher in einem Testshop prüfen oder als Vorlage für die eigenen Anpassungen nutzen. Die CSS-Styles können über das Plugin direkt definiert werden. Ein manueller Eingriff in das Template um die Farben etc. anzupassen ist somit nicht erforderlich.

Hi Sebastian, klappt prima, alles funktioniert gut, es werden weder doppelte Artikel in den Warenkorb gelegt noch verschwinden Buttons - supi, vielen Dank dafür

Hallo Sebastian, hätte ich mich gar nicht so abmühen brauchen und 6 Liter Kaffee hätte ich mir auch gespart. :slight_smile: Aber als Plugin ist es einfach besser. Gruß Erik

ich würde gerne auch ein Accordion einbinden. Und zwar z.B. bei den Versandkosten wie hier bei http://www.getgoods.de/versandkosten . Könnte mir jemand genau sagen, wo ich was für das Accordion in den versandkosten eintragen muss? es kann gerne das Beispiel aus dem oben verlinkten Thema genommen werden. Ich weis nur einfach nicht, wo ich was wie eintragen soll-.- Wäre sehr nett:)

Hallo zusammen, ich habe nun auch das plugin über das Backend manuell hinzugefügt. Hat schonmal geklappt :wink: aber wie gehe ich die Sache nun an? Über eine kurze Erklärung würde ich mich sehr freuen :slight_smile: