Fragestellung in unserer Internetagentur bei einer Onlineshop Erstellung mit Shopware: Wie verhindert man beim Öffnen des OffCanvas-Menüs in den mobilen Ansichten (Viewport "s" und "xs"), dass auch bei Kategorien ohne Subkategorien das Kategoriemenü gezeigt wird, mit dem man dann erst wieder beim nächsten Klick zurück zur weiteren Navigation gelangt? Dieses von Shopware in der Grundinstallation ausgelieferte Verhalten kommt mithilfe von einem Plugin ("swSubCategoryNav") zustande, welches auf das Attribut "[data-subcategory-nav="true"]" abstellt. Festgelegt wird dieses Verhalten in der Datei
/themes/Frontend/Responsive/frontend/_public/src/js/jquery.shopware-responsive.js
In dieser findet man die Zeile
.addPlugin('*[data-subcategory-nav="true"]', 'swSubCategoryNav', ['xs', 's'])
,die eben dafür sorgt, dass für die beiden benannten Viewports das Unterkategoriemenü zuerst ausklappt, auch wenn keine Unterkategorien vorhanden sind. Was ist jetzt zu tun? Wir können das Plugin mit einer eigenen Javascript-Datei überschreiben / erweitern oder aber direkt im Template die Ausprägung des Attributes "data-subcategory-nav" beeinflussen. Letzteres macht mehr Sinn, wenn man die Anzeige z.B. in Abhängigkeit davon beeinflussen möchte, ob Subkategorien vorhanden sind oder nicht. So finden wir das zugrundeliegende Element in der Datei (Erweiterung des parent-Files in eigenem Theme):
/themes/Frontend/DEIN_THEME/frontend/index/sidebar.tpl
Hier suchen wir nun die Stelle
data-subcategory-nav="true"
und ändern diese in
data-subcategory-nav="{if $childrenCount > 0}true{else}false{/if}"
Das ist natürlich nur die halbe Wahrheit, denn die Variable $childrenCount müssen wir uns zuerst bereitstellen, dies geschieht oberhalb des Elements durch den Ersatz von
{* if sCategoryContent is not available use sArticle.categoryID *}
{if isset($sCategoryContent) && $sCategoryContent.id}
{$subCategoryId = $sCategoryContent.id}
{elseif isset($sArticle) && $sArticle.categoryID}
{$subCategoryId = $sArticle.categoryID}
{elseif isset($sCustomPage) && $sCustomPage.id}
{$subCategoryId = $sCustomPage.id}
{else}
{$subCategoryId = 0}
{/if}
mit
{* if sCategoryContent is not available use sArticle.categoryID *}
{$childrenCount = 0}
{* if sCategoryContent is not available use sArticle.categoryID *}
{if isset($sCategoryContent) && $sCategoryContent.id}
{$subCategoryId = $sCategoryContent.id}
{$childrenCount = $sCategoryContent.childrenCount}
{elseif isset($sArticle) && $sArticle.categoryID}
{$subCategoryId = $sArticle.categoryID}
{elseif isset($sCustomPage) && $sCustomPage.id}
{$subCategoryId = $sCustomPage.id}
{else}
{$subCategoryId = 0}
{/if}
So wird das Subkategorie-Menü für die beiden Viewports nur dann ausgespielt, wenn auch Unterkategorien vorhanden. Gesehen in unserer Internetagentur bei einer Shoperstellung mit Shopware 5.5.6 Professional Edition.
