Anleitung: Mobile Footer Menü automatisch aufklappen

Shopware 5 Themes & Design
1

Hallo,

anbei eine kurze Anleitung wie man die Menüpunkte des Mobile Footers automatisch aufklappt.

mobilmenu
mobilmenu387×732 31.1 KB

  1. In /Frontend/DeinTheme/ Theme.php folgendes einfügen (oberhalb der letzten „}“)
protected $javascript = [
    'src/js/offen.js'
];
  1. In /Frontend/DeinTheme/frontend/_public/src/js/ die Datei „offen.js“ anlegen
  2. Je nachdem welche Punkte offen sein sollen den folgenden Code einfach einfügen:

KONTAKT (Hotline)

$.subscribe('plugin/swCollapsePanel/onInit', function() {
         $('.footer--columns .column--hotline .column--headline').addClass('is--active');
         $('.footer--columns .column--hotline div').addClass('is--collapsed');
         $('.footer--columns .column--hotline div').css('display', 'block');
     });

SERVICE (Unten Spalte 1)

$.subscribe('plugin/swCollapsePanel/onInit', function() {
         $('.footer--columns .footer--column:nth-child(1) .column--headline').addClass('is--active');
         $('.footer--columns .footer--column:nth-child(1) nav').addClass('is--collapsed');
         $('.footer--columns .footer--column:nth-child(1) nav').css('display', 'block');
     });

RECHTLICHES (Unten Spalte 2)

$.subscribe('plugin/swCollapsePanel/onInit', function() {
         $('.footer--columns .footer--column:nth-child(2) .column--headline').addClass('is--active');
         $('.footer--columns .footer--column:nth-child(2) nav').addClass('is--collapsed');
         $('.footer--columns .footer--column:nth-child(2) nav').css('display', 'block');
     });

BLEIBE INFORMIERT (Newsletter)

$.subscribe('plugin/swCollapsePanel/onInit', function() {
         $('.footer--columns .column--newsletter .column--headline').addClass('is--active');
         $('.footer--columns .column--newsletter div').addClass('is--collapsed');
         $('.footer--columns .column--newsletter div').css('display', 'block');
     });
  1. Theme kompilieren & fertig

Bei Fragen gerne Fragen!

2 „Gefällt mir“