Toggle Menu

Shopware 5 Themes & Design
1

Hallo, ich scheitere grade daran ein Toogle Menü einzubinden. Folgendes habe ich getan: 1. In der Theme.php meine .js Datei eingebunden: [code]<?php namespace Shopware\Themes\MEINTEMPLATE;

use Shopware\Components\Form as Form;

class Theme extends \Shopware\Components\Theme
{
protected $extend = ‘Responsive’;

protected $name = <<<'SHOPWARE_EOD'

Theme von MeinerWebseite.de
SHOPWARE_EOD;

protected $description = <<<'SHOPWARE_EOD'

Theme von MeinerWebseite.de
SHOPWARE_EOD;

protected $author = <<<'SHOPWARE_EOD'

Mein Author
SHOPWARE_EOD;

protected $license = <<<'SHOPWARE_EOD'

SHOPWARE_EOD;

protected $javascript = array(
'src/js/meintogglemenu.js'

);

public function createConfig(Form\Container\TabContainer $container)
{
}

}

[/code]

  1. Javascript Datei erstellt in meinem Template unter /src/js/meintogglemenu.js mit folgendem Inhalt:

[code]$(function () {
StateManager
// Collapse panel
.addPlugin(’.collapse–header, .collapse–content’, ‘collapsePanel’, [‘l’, ‘xl’])

});[/code]

Dann habe ich versucht das Menu mit folgendem Code aufzurufen, leider tut sich nichts:

[code]

Collapse box title

This content will be shown by the is–collapsed class.

Collapse box title

Lorem ipsum dolor

Collapse box title

Lorem ipsum dolor
[/code] Welchen Denkfehler habe ich drin? :frowning:

2

Keiner? :frowning:

3

Bitte helft mir…

4

[quote=“Goethe”]Bitte helft mir…[/quote] Würde mich auch über eine Antwort freuen.:thumbup:

5

Du meinst wohl eher das Collapse Plugin und nicht ein “toggle menu” oder? -> https://github.com/shopware/shopware/bl … e-panel.js Und nehme mal den absoluten Namen swCollapsePanel nicht den Alias, dann geht es. $(function () { StateManager // Collapse panel .addPlugin('.collapse--header, .collapse--content', 'swCollapsePanel', ['l', 'xl']) }); Möchtest du weitere Parameter übergeben, würdest du es so schreiben: $(function () { StateManager // Collapse with param .addPlugin('.collapse--wrapper, .collapse--header', 'swCollapsePanel', { animationSpeed: 500, }, ['l', 'xl']) }); .collapse-wrapper ist indem Fall die Class welche alle collapse Elemente umfasst. Die möglichen Parameter stehen in den default Werten des Plugins: https://github.com/shopware/shopware/bl … js#L18-L68

2 Likes
6

Hallo in die Runde. Ich versuche auch gerade eine Collapse Box einzufügen, bin allerdings auch noch relativ unbeholfen, was Javascript etc angeht. Ich verwende ein Childtheme auf Basis eines gekauften Templates. Habe jetzt folgendes versucht: Theme.php [code]<?php namespace Shopware\Themes\MeinTheme;

use Shopware\Components\Form as Form;

class Theme extends \Shopware\Components\Theme
{
protected $extend = ‘GekauftesTheme’;

protected $name = <<<'SHOPWARE_EOD'

GekauftesTheme MeinTheme
SHOPWARE_EOD;

protected $description = <<<'SHOPWARE_EOD'

SHOPWARE_EOD;

protected $author = <<<'SHOPWARE_EOD'

MeinAdmin
SHOPWARE_EOD;

protected $javascript = array(

‘src/js/collapse-panel.js’);

protected $license = <<<'SHOPWARE_EOD'

MeineLizenz

public function createConfig(Form\Container\TabContainer $container)
{
}

}[/code]

unter src/js/collapse-panel.js

[code]
$(function ()
{
StateManager
// Collapse with param
.addPlugin(’.collapse–wrapper, .collapse–header’, ‘swCollapsePanel’, {
animationSpeed: 500,
}, [‘l’, ‘xl’])

});[/code]

und zu guter Letzt habe ich folgendes HTML Element in die Einkaufwelt eingefügt:

[code]

Collapse box title

This content will be shown by the is–collapsed class.

Collapse box title

Lorem ipsum dolor

Collapse box title

Lorem ipsum dolor
[/code] Habe ich noch etwas vergessen oder falsch eingetragen?

7

Push

8

Hi, also ich hatte es immer mit folgende Javascipt gehabt, was bei mir jetzt aber seit dem Update heute auf 5.1.2 nicht mehr läuft…

 

$(function () {

 StateManager

// Collapse panel

.addPlugin('.collapse--header, .collapse--content', 'collapsePanel', ['xs', 's', 'm', 'l', 'xl'])  

});
$('.collapse--content *').click(function( event ) {
    event.stopPropagation();
});

 

9

@konsi,

Kayyy hat doch schon eine Antwort darauf gegeben, hast es mal mit   ‚swCollapsePanel‘  statt  ‚collapsePanel‘ versucht?

Gruß Uwe

 

Edit: Gerade gesehen das du dir die Frage schon selbst beantwortet hast: http://forum.shopware.com/discussion/comment/150911/#Comment_150911