# Service/Hilfe als Off-Canvas-Panel wie Warenkorb

**URL:** <https://forum.shopware.com/t/service-hilfe-als-off-canvas-panel-wie-warenkorb/30461>\
**Category:** Themes & Design\
**Created:** [13. September 2015 um 22:18 UTC](https://forum.shopware.com/t/service-hilfe-als-off-canvas-panel-wie-warenkorb/30461 "2015-09-13T22:18:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![raschu](https://avatars.discourse-cdn.com/v4/letter/r/839c29/32.png) [@raschu](https://forum.shopware.com/u/raschu)\
**Post date:** [13. September 2015 um 22:18 UTC](https://forum.shopware.com/t/service-hilfe-als-off-canvas-panel-wie-warenkorb/30461/1 "2015-09-13T22:18:01Z")

</div>

Hallo zusammen, ich möchte gerne bei “Klick” auf Service/Hilfe anstatt des Drop-Down-Menüs ein Off-Canvas-Panel öffnen, das wie das Warenkorb-Panel sich von rechts öffnet und dann weitere Infos anzeigt. Ich habe dazu bereits die Datei widgets/checkout/info.tpl in mein Theme kopiert und dort einen Button “Service/Hilfe” erzeugt, der im Header neben dem “Account-Button” angezeigt wird und die Seite “Info” aufruft (im Prinzip genau wie der Button “Account”). Die “Info” Seite möchte ich gerne als Off-Canvas-Panel anzeigen. Kennt da jemand eine Lösung? Mein Code für den “einfachen Button”: [code]{block name=“frontend\_index\_checkout\_actions\_service”}

- [{s namespace=‘frontend/index/checkout\_actions’ name=‘IndexLinkService’}{/s}]({url controller=‘info’} “{”)  
{/block} [/code]

---

<div class="post-metadata">

**Author:** ![raschu](https://avatars.discourse-cdn.com/v4/letter/r/839c29/32.png) [@raschu](https://forum.shopware.com/u/raschu)\
**Post date:** [15. September 2015 um 12:57 UTC](https://forum.shopware.com/t/service-hilfe-als-off-canvas-panel-wie-warenkorb/30461/2 "2015-09-15T12:57:33Z")

</div>

Kann jemand einen Tip geben, wie oder wo man suchen muss? Gibt es im Standard Funktionen für die Off-Canvas-Aufrufe? In der Doku habe ich auch nicht viel gefunden was weiterhilft: [https://developers.shopware.com/styletile/\_components-offcanvas-button.html](https://developers.shopware.com/styletile/%5C_components-offcanvas-button.html) oder [https://developers.shopware.com/styletile/\_components-offcanvas-menu.html](https://developers.shopware.com/styletile/%5C_components-offcanvas-menu.html) haben mich nicht richtig weiter gebracht. Helfen evt. die folgenden Scripte im Ordner themes/Frontend/Responsive/frontend/\_public/src/js/ : jquery.off-canvas-button.js jquery.off-canvas-menu.js jquery.offcanvas-html-panel.js Oder gibt es Beispiele, wie man diese Scripte nutzen kann? Solche Off-Canvas-Panels sind doch immer recht nützlich, wenn man Infos seitlich einspielen möchte…

---

<div class="post-metadata">

**Author:** ![mitho-media](https://avatars.discourse-cdn.com/v4/letter/m/7ea924/32.png) [@mitho-media](https://forum.shopware.com/u/mitho-media)\
**Post date:** [29. September 2015 um 08:01 UTC](https://forum.shopware.com/t/service-hilfe-als-off-canvas-panel-wie-warenkorb/30461/3 "2015-09-29T08:01:12Z")

</div>

Hallo Raschu, Du solltest Dir den StateManager ansehen. Durch Aufruf des StateManagers in JS kannst Du Deine eigenen offCanvas Elemente bestimmen. Hierzu gibst Du den Trigger und das Datenelement an, bestimmst die Viewports und schreibst wie beim Warenkorb oder Menü deine HTML Container in das Template. Durch Aufruf des StateManagers und der Übergabe der CSS Klasse des Trigger-Elements sowie der CSS Klasse des Inhalts-Ziels-Elements bestimmst Du ein eigenständiges offCanvas Element. Das hat Shopware, wie ich finde, sehr gut gelöst. Als PluginType übergibst das gewünschte offCanvas Plugin, z.B. HTML Panel. Den Inhalt hinterlegst Du statisch im Quellcode (Inhalt-Ziel-Element) oder lädst diesen per ajax in das Inhalts-Element. Doc: [https://developers.shopware.com/designe … luginbase/](https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/) … viel Spaß beim experimentieren!

---

<div class="post-metadata">

**Author:** ![Christian.Saeum](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/christian.saeum/32/15763_2.png) [@Christian.Saeum](https://forum.shopware.com/u/Christian.Saeum)\
**Post date:** [11. März 2019 um 10:25 UTC](https://forum.shopware.com/t/service-hilfe-als-off-canvas-panel-wie-warenkorb/30461/4 "2019-03-11T10:25:18Z")

</div>

Ist schon ein wenig her. Habe was ähnliches vor, hast du ein Ergebniss damals erlangt @raschu‍

---

<div class="post-metadata">

**Author:** ![raschu](https://avatars.discourse-cdn.com/v4/letter/r/839c29/32.png) [@raschu](https://forum.shopware.com/u/raschu)\
**Post date:** [11. März 2019 um 10:38 UTC](https://forum.shopware.com/t/service-hilfe-als-off-canvas-panel-wie-warenkorb/30461/5 "2019-03-11T10:38:11Z")

</div>

Hallo csaeum,

nein leider nicht. Ich habe das dann nicht weiter verfolgt und habe das anders gelöst.

---

<div class="post-metadata">

**Author:** ![Christian.Saeum](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/christian.saeum/32/15763_2.png) [@Christian.Saeum](https://forum.shopware.com/u/Christian.Saeum)\
**Post date:** [11. März 2019 um 11:14 UTC](https://forum.shopware.com/t/service-hilfe-als-off-canvas-panel-wie-warenkorb/30461/6 "2019-03-11T11:14:46Z")

</div>

ich überlege auch gerade es nicht mit Bordmitteln zu lösen,

aber mal schauen, erstmal noch ein wenig testen und bauen
