# \[GELÖST\] Accordion Menü in Shopseite einbinden

**URL:** <https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273>\
**Category:** Shopware 3.5\
**Tags:** templates--design\
**Created:** [26. November 2011 um 10:58 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273 "2011-11-26T10:58:24Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![ErikBrinx](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@ErikBrinx](https://forum.shopware.com/u/ErikBrinx)\
**Post date:** [26. November 2011 um 10:58 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/1 "2011-11-26T10:58:24Z")

</div>

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/](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

---

<div class="post-metadata">

**Author:** ![km\_hbg](https://avatars.discourse-cdn.com/v4/letter/k/ebca7d/32.png) [@km\_hbg](https://forum.shopware.com/u/km_hbg)\
**Post date:** [26. November 2011 um 17:26 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/2 "2011-11-26T17:26:57Z")

</div>

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? 🙂 Grüße

---

<div class="post-metadata">

**Author:** ![ErikBrinx](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@ErikBrinx](https://forum.shopware.com/u/ErikBrinx)\
**Post date:** [26. November 2011 um 18:17 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/3 "2011-11-26T18:17:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![eWeniger](https://avatars.discourse-cdn.com/v4/letter/e/9de053/32.png) [@eWeniger](https://forum.shopware.com/u/eWeniger)\
**Post date:** [28. November 2011 um 07:44 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/4 "2011-11-28T07:44:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ErikBrinx](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@ErikBrinx](https://forum.shopware.com/u/ErikBrinx)\
**Post date:** [28. November 2011 um 09:02 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/5 "2011-11-28T09:02:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![digitalwaagen123](https://avatars.discourse-cdn.com/v4/letter/d/9dc877/32.png) [@digitalwaagen123](https://forum.shopware.com/u/digitalwaagen123)\
**Post date:** [28. November 2011 um 12:23 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/6 "2011-11-28T12:23:08Z")

</div>

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.). 🙂 Grüße - Heiko

---

<div class="post-metadata">

**Author:** ![ErikBrinx](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@ErikBrinx](https://forum.shopware.com/u/ErikBrinx)\
**Post date:** [29. November 2011 um 08:54 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/7 "2011-11-29T08:54:21Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![taaucher](https://avatars.discourse-cdn.com/v4/letter/t/ac8455/32.png) [@taaucher](https://forum.shopware.com/u/taaucher)\
**Post date:** [29. November 2011 um 09:29 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/8 "2011-11-29T09:29:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ErikBrinx](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@ErikBrinx](https://forum.shopware.com/u/ErikBrinx)\
**Post date:** [29. November 2011 um 10:45 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/9 "2011-11-29T10:45:15Z")

</div>

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](http://www.brinx24.de) Danke schonmal.

---

<div class="post-metadata">

**Author:** ![taaucher](https://avatars.discourse-cdn.com/v4/letter/t/ac8455/32.png) [@taaucher](https://forum.shopware.com/u/taaucher)\
**Post date:** [29. November 2011 um 11:21 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/10 "2011-11-29T11:21:57Z")

</div>

Wo hast du das denn einegbaut? EDIT: Habs gefunden

---

<div class="post-metadata">

**Author:** ![ErikBrinx](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@ErikBrinx](https://forum.shopware.com/u/ErikBrinx)\
**Post date:** [29. November 2011 um 11:23 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/11 "2011-11-29T11:23:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ErikBrinx](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@ErikBrinx](https://forum.shopware.com/u/ErikBrinx)\
**Post date:** [29. November 2011 um 12:09 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/12 "2011-11-29T12:09:57Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![geniusgmbhtv](https://avatars.discourse-cdn.com/v4/letter/g/a698b9/32.png) [@geniusgmbhtv](https://forum.shopware.com/u/geniusgmbhtv)\
**Post date:** [29. November 2011 um 16:09 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/13 "2011-11-29T16:09:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![eWeniger](https://avatars.discourse-cdn.com/v4/letter/e/9de053/32.png) [@eWeniger](https://forum.shopware.com/u/eWeniger)\
**Post date:** [7. Dezember 2011 um 13:41 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/14 "2011-12-07T13:41:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![SebastianKloepper](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sebastiankloepper/32/21435_2.png) [@SebastianKloepper](https://forum.shopware.com/u/SebastianKloepper)\
**Post date:** [8. Dezember 2011 um 08:20 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/15 "2011-12-08T08:20:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![eWeniger](https://avatars.discourse-cdn.com/v4/letter/e/9de053/32.png) [@eWeniger](https://forum.shopware.com/u/eWeniger)\
**Post date:** [8. Dezember 2011 um 14:55 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/16 "2011-12-08T14:55:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ErikBrinx](https://avatars.discourse-cdn.com/v4/letter/e/b5ac83/32.png) [@ErikBrinx](https://forum.shopware.com/u/ErikBrinx)\
**Post date:** [8. Dezember 2011 um 15:15 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/17 "2011-12-08T15:15:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![alemo24](https://avatars.discourse-cdn.com/v4/letter/a/a587f6/32.png) [@alemo24](https://forum.shopware.com/u/alemo24)\
**Post date:** [5. September 2012 um 10:18 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/18 "2012-09-05T10:18:10Z")

</div>

ich würde gerne auch ein Accordion einbinden. Und zwar z.B. bei den Versandkosten wie hier bei [http://www.getgoods.de/versandkosten](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:)

---

<div class="post-metadata">

**Author:** ![Rella](https://avatars.discourse-cdn.com/v4/letter/r/51bf81/32.png) [@Rella](https://forum.shopware.com/u/Rella)\
**Post date:** [3. September 2013 um 17:05 UTC](https://forum.shopware.com/t/gelost-accordion-menu-in-shopseite-einbinden/5273/19 "2013-09-03T17:05:35Z")

</div>

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