Advanced Menu - Erweitertes Menü - Anpassung mit Produkt-Anzeige-Menü

Shopware 5 Themes & Design
1

Im Advanced Menu fehlt für meine Vorstellung eine Anzeige der Produkte „Produkt-Listing-Ansicht“. Leider werden im Grundgerüst nur die Kategorien dargestellt, daher habe ich selbst „Hand“ angelegt um es nach meinen Wünschen umzustellen.

Ich möchte euch meine bisherige Umsetzung aufzeigen und was ich bisher gemacht habe.  

  1. Installation des Plugins „Erweitertes Menü - Attribute“ Mit diesem Plugin werden die Attributfelder aus den Kategorien im „Erweiterten Menü“ verfügbar gemacht.

  2. Unter-Kategorien angelegt und entsprechende Verweise (extern Verlinken) auf die Produktseiten gesetzt.

  3. Freitextfeld Nr. 6 im Backend hinzugefügt (attr6)

  4. Freitextfeld Nr. 6 in den neu erstellten Kategorien mit Pfad zum Produktbild gesetzt.

  5. Anpassung der index.tpl im Advanced-Menu-Plugin, in dem Ordner /engine/Shopware/Plugins/Default/Frontend/Advanced-Menu/Views/frontend/advanced-menu/index.tpl (ca. Zeile 25 - Der Link)

    {$category.name}

  6. Anpassung der advanced-menu.less im Pluginordner des Advanced Menu. (hier habe ich nur die geänderten Bereiche eingefügt, da ansonsten die Zeichensumme für das Forum hier überschritten wird)

    .menu–list {
    background-image: -webkit-linear-gradient(left,rgba(14, 177, 14, 0.1) 0%,#FFFFFF 70%);
    background-image: -moz-linear-gradient(left, rgba(14, 177, 14, 0.1) 0%,#FFFFFF 70%);
    text-overflow:ellipsis;
    overflow:hidden;
    }

     .menu--list-item-link {
     .unitize-padding(5, 0);
     .unitize(font-size, 16);
     .transition(all 0.1s ease);
     color: @adv-menu-link-color;
     background-repeat: no-repeat;
     background-size: cover;
     background-position: right center;
     background-size: 50px 50px;
 display: block;

     &:hover {
         .unitize-padding(5, 0, 5, 3);
         color: @adv-menu-link-hover-color;
     }
 }

 .button-container {
     .unitize(font-size, 16);
     .unitize-padding(20, 30, 20, 0);
     background: #05af05;
     color: @adv-menu-header-text-color;
     font-weight: bold;

     .button--category {
         .unitize-padding(20, 50);
         .transition(padding .1s ease);
         color: @adv-menu-header-text-color;
         position: relative;

         &:hover {
             .unitize-padding(20, 50, 20, 55);
         }
     }

    .navigation-main .navigation–list .navigation–entry.is–hovered {
    .border-radius-multi(3px, 3px);
    .tap-highlight-color(rgba(0, 0, 0, 0));
    background: @adv-menu-header-bg;

     .navigation--link {
     background: #000000;
     color: @adv-menu-header-text-color;
 }

    }

Nach diesen Änderungen kommen ich zu folgendem Ergebnis wenn ich mit der Maus über die Kategorie (hier Trockenfrüchte) fahre:

1895×997 187 KB

Bisher sind nur 6 Produkte im Shop unter dieser Kategorie angelegt, daher ist die Anzeige bis hier auch kein Problem und läuft weiter unten nicht aus. Bei mehreren Produkten zieht natürlich das „Elternelement“ mit nach unten.

Ich wollte die bisherige Ansichtsgröße des Produktlistings so beibehalten und hatte dafür einen scrollbaren Bereich erstellt. Nach Betrachtung aber festgestellt dass dieses äußerst „bescheiden“ aussieht, da per HTML5 im rechten Bereich direkt hinter den kleinen Produktbildern eine Scrollbar angezeigt wird. Habe für meinen Kenntnisstand sämtliche „overflow“-Möglichkeiten ausprobiert, doch diese „gruselige“ Scrollbar ist hatnäckig und nicht wegzubekommen.

Vielleicht kennt jemand eine Möglichkeit für diesen Bereich ein „ansehnliches“ Produktlisting per Scroll generieren zu können?

Oder vielleicht hat auch jemand eine Ideee wie man die Produktattribute an das Advanced-Menu übergeben kann? So könnte man sich das anlegen mit den Unterkategorien sparen.

Bin für jegliche Verbesserung und Info zu haben. :slight_smile:

Liebe Grüße und einen schönen Abend wünshe ich.