Navigation

In früheren Versionen des Shops war die Navigation immer identisch mit den Artikelgruppen und ihrer Hierarchie und Links zu Hilfeseiten, Impressum, etc. waren fix im Layout festgelegt. Damit dies flexibel bleibt wurden im Centauri Shop die Navigation-Elemente eingefügt.

Eine Navigation ist eine einfache Liste von Navigationselementen, wobei jedes Navigationselement aber auch untergeordnete Navigationselemente besitzen kann.

Beispiele für eine einfache Liste von Navigationselementen sind die Links zu den Social Media Kanälen des Shop Betreibers oder die Logos der Zahlungsanbieter mit Links zu den Anbietern.

Beispiele für Listen mit hierarchisch gestuften Navigationselementen sind Menüs mit Artikelkategorien, Links zu verschiedenen Themen im Fußbereich des Shops oder ein detailiertes Hilfesystem - wie z.B. dieses Handbuch.

Eine Navigation kann also z.B. sein

Wichtig dabei: die Navigation speichert nur die Daten, also

• die Bezeichnungen der Navigationselemente,

• die Aktionen jedes Navigationselements (z.B. Links zu denen gesprungen werden soll),

• Parameter für die Sichtbarkeit, usw.

aber nicht die Darstellungsform am Bildschirm. Die gleiche Navigation kann in einem Popup Menü am oberen Bildschirmrand, in einem Burger-Menü auf mobilen Endgeräten, als Hierarchie von Links am unteren Bildschirmrand oder als hierarchische Darstellung als Seitenspalte neben dem Content dargestellt werden.

In jedem Layout (auch in unserem BASESHOP Layout für den Centauri BaseShop) kann der Designer verschiedene Menüs vorsehen und diese an eine Navigation im Shop binden. Dazu hat jede Navigation eine Identifikation, die der Designer im .cshtml Code angibt oder die er per REST API als JSON Struktur abfragt.

Das BASESHOP Layout fragt z.B. folgende Identifikationen ab und würde einen Fehler liefern, wenn diese in der Datenbank nicht vorhanden sind:

Wahlweise können auch diese Navigationen existieren (d.h. die Navigationen werden abgefragt und dargestellt, wenn sie vorhanden sind - es wird kein Fehler geliefert).

Nur der ID der Navigation ist für die Verknüpfung ins Layout wichtig. Die Navigation kann eine beliebige Bezeichnung haben.

Der BASESHOP MC hat ein eigenes Shared Layout und verwendet die MAIN Navigation zur Darstellung des horizontalen Menüs am oberen Bildschirmrand. Eine TOP Navigation wird ignoriert.

Erstellen einer Navigation

Die Navigation wird über das Amin Web im Menü Seiten / Navigation angelegt und kann dort gepflegt werden.

Die Elemente der Navigation werden im Cache des Shops gehalten. Bei Änderungen muss deshalb eventuell der Cache gelöscht werden, damit Änderungen sichtbar werden.

Die Navigation kann auch gelöscht werden, was die Webseite unbrauchbar machen kann. Wird die Navigation mit gleichem ID wieder neu angelegt, kann die Funktionsfähigkeit wiederhergestellt werden.

Um eine neue Navigation zu erstellen:

1. Klicken Sie im Menü auf Seiten / Navigation

2. Klicken Sie auf die Schaltfläche Hinzufügen

   

3. Geben Sie der neuen Navigation im Feld Name eine Bezeichnung und im Feld Identifikation eine eindeutige ID.

4. Klicken Sie anschließend auf Speichern. Die neue Navigation erscheint in der Liste der Navigationen.

5. Klicken Sie auf die >> Schaltfläche am Ende der Zeile mit der neuen Navigation. Es erscheinen die Liste mit den Navigationselementen - bei einer neuen Navigation ist die Liste noch leer.

6. Legen Sie mit der Hinzufügen Schaltfläche erste Elemente an. Wenn Sie hierarchische Navigationen aufbauen wollen, klicken Sie bei einem angelegten Navigationselement wieder auf die >> Schaltfläche am Ende der Zeile.

Eigenschaften von Navigationselementen

Mit den Feldern Titel, Untertitel und Kurzbeschreibung können Texte pro Navigationselement gespeichert werden. Wie die Texte dargestellt werden, hängt vom Layout des Shops bzw. vom benutzten Pages Modul ab, das für die Darstellung verwendet wird. In den meisten Layouts wird nur das Titel Feld verwendet.

Mit der Eigenschaft Position kann eine Reihenfolge festgelegt werden, in der die Navigationselemente angezeigt werden. Als Eingabe können beliebige ganzzahlige, nicht notwendigerweise fortlaufende Werte benutzt werden. Bei der Darstellung werden diese aufsteigend sortiert.

Mit der Eigenschaft Typ kann die Wirkung des Navigationselements festgelegt werden.

Wird das Menü komplett manuell zusammengestellt, wird der Typ Menu für alle Zwischenelemente und der Typ Hyperlink für die unterste Menüebene benutzt. Bei diesem Typ wird auch ein Feld für den Hyperlink in die Maske eingeblendet.

Der Typ Home und Kundenkonto sind spezielle Hyperlink Navigationselemente. Auch diese werden nur in der untersten Menüebene benutzt. Bei diesen Typen muss der Hyperlink aber nicht selbst eingetragen werden, sondern wird automatisch für die Startseite des Shops und für das Kundenkonto eingesetzt.

Der Typ Kategorie und Haupt/Unterkategorie werden für Zwischenelemente verwendet, bei denen die untergeordneten Navigationselemente auf Basis der Artikelkategorien automatisch erstellt werden. Der Typ Haupt/Unterkategorie erstellen zwei Ebenen automatisch.

Die Eigenschaft Stil kann Flags enthalten, mit denen die Darstellung im Layout angepasst werden kann.

Die Eigenschaft Bild kann eine Url auf ein Bild enthalten, das für die Darstellung des Navigationselements benutzt wird. Über die … Schaltfläche am Ende des Feldes, kann aus bereits bekannten Bildern gewählt oder neue Bilder hochgeladen werden.

Mit der Eigenschaft Hyperlink für Bild kann eine Url festgelegt werden, auf die mit einem Klick auf das Bild gesprungen wird.

Ob diese Eigenschaften im Layout benutzt werden, kann in der Navigation nicht erzwungen werden.

Sichtbarkeit von Navigationselementen

Neben Texten und Bildern (und eventuell den Hyperlinks beim Klicken auf die Navigationselemente) kann in den Eigenschaften noch die Sichtbarkeit festgelegt werden.

Prinzipiell sind alle Navigationselemente sichtbar. Um das umzuschalten, kann die generelle Sichtbarkeit auf Nie sichtbar gestellt werden. Das gilt sowohl für die Desktop, als auch für die Mobile Darstellung.

Soll in der mobilen Darstellung eine abweichende Sichtbarkeit gelten (z.B. in der mobilen Darstellung nicht sichtbar), kann die mobile Sichtbarkeit zusätzlich festgelegt werden, die dann die generelle Sichtbarkeit überschreibt.

Zusätzlich kann die Sichtbarkeit für den Anmeldestatus (Sichtbar wenn angemeldet oder nicht angemeldet), die Verwendung des Shops als Punchout Katalog (Sichtbar wenn Shop im Punchout Modus oder sichtbar wenn nicht im Punchout Modus) gewählt werden.

Außerdem kann die Sichtbarkeit überschrieben werden, wenn bestimmte Kunden am Shop angemeldet sind:

• der aktuelle Benutzer ein Kundenadministrator ist oder

• der aktuelle Benutzer ein Vertriebsmitarbeiter des Shop-Betreibers ist.

Mit der Tabelle am Ende des Eigenschaften Bildschirms kann die Sichtbarkeit überschrieben werden, wenn der aktuelle Kunde in einer der aufgelisteten Kundengruppen ist. Pro Kundengruppe kann die Sichtbarkeit entweder mit Sichtbar oder Nicht sichtbar überschrieben werden.

Alternativ zur Kundengruppe kann die Sichtbarkeit auf Basis der Quelle des Shops überschrieben werden. Das ist nur sinnvoll, wenn es mehrere Shops auf einer Datenbank gibt, die z.B. mit der Quellen-Identifikation B2B und B2C konfiguriert sind. Dann werden in der Navigation unterschiedliche Elemente sichtbar/unsichtbar gemacht.

Wird eine Kundengruppe und eine abweichende Sichtbarkeit gewählt, muss die Zeile mit der Hinzufügen Schaltfläche noch in die Tabelle ergänzt werden.

Für Menüs, die nur für bestimmte Kundengruppen sichtbar sein sollen:

Wählen Sie bei diesen Navigationselementen bei Genereller Sichtbarkeit die Option Nie anzeigen.

Wählen Sie unten in der Tabelle die Kundengruppe aus, die das Navigationselement sehen soll und wählen Sie dort Immer sichtbar. Danach klicken Sie am Ende der Zeile auf die Hinzufügen Schaltfläche.

Anzeigen einer Navigation in einem Menü

Meistens werden die Navigationselemente einer Navigation im Layout des Shops zu einem Menü zusammengebaut. Im Layout wird dazu das Megamenü des zugrundeliegenden MARTFURY Layouts benutzt. Der Code findet sich im Shared Layout /Views/Shared/_Layout.cshtml

@foreach (Centauri.Shop.Pages.NavigationItem item in new Centauri.Shop.Pages.Navigation("MAIN").ExpandedItems)
{
  if (item.Items.Count == 0)
  {
    <li><a href="@item.Url"><i class="icon-star contrast-color"></i> @item.Caption</a></li>
  }
  else
  if (item.Items[0].Items.Count == 0)
  {
    ... HTML Code für Menüs mit einer Unterebene
  }
  else
  {
    ... HTML Code für Menüs mit zwei Unterebenen
  }  
}

Damit z.B. das PAYMENT Menü optional in das Layout eingefügt wurde, wird dort zusätzlich das Vorhandensein des Layouts abgeprüft (ebenfalls in /Views/Shared/_Layout.cshtml):

 @if (Centauri.Shop.Pages.Navigation.Exists("PAYMENT"))
{
  <p>
    <span>Sichere Zahlungsmittel bei uns:</span>

    @foreach (Centauri.Shop.Pages.NavigationItem item in new Centauri.Shop.Pages.Navigation("PAYMENT").Items)
    {
      <a href="@item.Url"><img src="img/payment-method/1.jpg" alt="@item.Caption"></a>
    }

  </p>
}

Alternativ kann das Frontend Menüs auch dynamisch aufbauen (z.B. beim Mobilen Menü im MC Shop von ). Dazu kann im Shop die REST Endpunkte /api/Navigation bzw. /api/NavigationItem benutzt werden.

Darstellung von Navigationen mit Page Modulen

Alternativ zu den fest im Layout eingebauten Menüs kann eine Navigation auch mit einem Page Modul in einer Seite oder einer Zone angezeigt werden.

1. Wechseln Sie im Admin Web im Menü auf Seiten / Seiten

2. Klicken Sie auf die Hinzufügen Schaltfläche

3. Geben Sie der neuen Seite einen Namen und klicken Sie auf Speichern. Die neue Seite wird in der Liste dargestellt.

4. Klicken Sie in der Zeile der gewünschten Seite auf die Inhalt Schaltfläche. Die Seite wird im Bearbeiten Modus dargestellt.

5. Klicken Sie auf die Hinzufügen Schaltfläche im Bearbeiten Modus.

6. Wählen Sie aus der Liste der Page Module das Element Menü: Box (vertikale Darstellung) oder Menü: Zeile (horizontale Darstellung).