Inhalte aufrufen

Profilbild
- - - - -

Eigene Links im Header & Footer


  • Bitte melden Sie sich an, um eine Antwort zu verfassen.
9 Antworten zu diesem Thema

#1 Michael Herzog

Michael Herzog

    SmartStore AG

  • Administrators
  • 3497 Beiträge

Geschrieben: 28 June 2017 - 16:33

Der Wunsch eigene Links im Header oder im Footer zu platzieren ist groß. Darum beinhaltet dieser Beitrag eine einfache Anleitung dafür.

Hierfür sind keine Anpassungen im Code nötig. Die Links können über sogenannte Widget-Zones in die Menus injiziert werden. 

Dazu muss man zunächst wissen wo Widget-Zones zur Verfügung stehen und wie diese heißen. Um das herauszufinden geht 

man zunächst zu Admin > Plugins > Developer Tools und aktiviert hier Widget-Zonen darstellen. Keine Sorge, die Widget-Zones sind nur für angemeldete Administratoren sichtbar.

 

 

Header

 

Das sieht dann beim Header wie in folgendem Screenshot aus. Wenn man mit der Maus über die grauen Bereiche fährt, öffnet sich ein Tooltip der den Namen der Widget-Zone enthält. 

 

screen-header.png

 

Wenn man nun einen Link vor dem Menu platzieren möchte, wäre die entsprechende Widget-Zone header_menu_before.

Um einen Link zu platzieren, geht man nun zu Admin > CMS > Seiten und Inhalte, klickt auf den Button NEU 

und konfiguriert das Topic wie in folgendem Screenshot zu sehen ist.

 

screen-admin.png

 

Für Links innerhalb von Dropdown-Menus (Hilfe & Service oder MyAccount) sollte statt der CSS-Klasse menubar-link die Klasse dropdown-item verwendet werden.

 

Also z.B.:

<a href="http://www.mein-shop.de/mein-link" class="dropdown-item">Mein Link</a>

 

 

Footer

 

Für den Footer gab es bis jetzt (SmartStore.NET 3.0.1) noch keine Widget-Zonen für die Injizierung von eigenen Links. Diese stehen erst ab SmartStore.NET 3.0.2 zur Verfügung. Wer nicht so lange warten möchte kann die angehängte Datei (Footer.rar) an folgende Stelle entpacken \Views\Common\Partials

 

Nun stehen für jede Footer-Spalte Widget-Zones zur Verfügung. Die Namen lassen sich auch hier mit den Developer-Tools, wie oben beschrieben, in Erfahrung bringen. 

<li><a class="footer-link" href="/my-link">Mein Link</a></li>

 

 

Wichtig: Ruft man das erstellte Topic auf und speichert es wieder, wird vom HTML-Editor ein <p>-Tag um den eigenen HTML-Code gelegt, das zu sehr unschönen Darstellungen inerhalb von Menus führen wird, weil man damit die HTML-Struktur der Menus zerstört.

 

Anmerkungen & Ergänzungen sind herzlich willkommen!!!

Angehängte Bilder


Michael Herzog
Smartstore AG


#2 Katze

Katze

    Neuer Benutzer

  • Members
  • PunktPunkt
  • 14 Beiträge

Geschrieben: 29 June 2017 - 18:29

Hallo Herr Herzog,

danke für die Anleitung.

Würden aber lieber die Verknüpfung mit eigenen Seiten in der Menü Datei vornehmen, da die Optik gleich der Auswahl Kontakt und Hilfe & Service aussehen soll. Sonst sieht es wie im Anhang aus und das sieht nicht so gut aus.

Gibt es hierfür auch eine Anleitung?

Wir bedanken uns im Voraus und verbleiben

Mit freundlichen Grüßen

Katrin Wenda

#3 Michael Herzog

Michael Herzog

    SmartStore AG

  • Administrators
  • 3497 Beiträge

Geschrieben: 30 June 2017 - 09:59

Hallo Frau Wenda,

 

bzgl. Optik sollte es bei Beachtung meines Beitrag eigentlich keine Probleme geben. Insbesondere sollten die Klassen und die HTML-Struktur beachtet werden. 

Ich konnte keinen Anhang in Ihrem Beitrag entdecken. Bitte posten Sie doch mal die genutzte Widget-Zone und den verwendeten HTML-Code.

 

Viele Grüße,

Michael Herzog


Michael Herzog
Smartstore AG


#4 Katze

Katze

    Neuer Benutzer

  • Members
  • PunktPunkt
  • 14 Beiträge

Geschrieben: 05 July 2017 - 15:09

Hallo Herr Herzog,

 

nachdem ich nun nochmal Zeit hatte, habe ich Ihre Anleitung für das Menü probiert und es funktioniert, wie ich es mir vorgestellt habe. Noch einmal viele Dank für ihre Hilfe, nun kann es mit der Einrichtung weiter gehen.

 

Viele Grüße

 

Katrin wenda



#5 Gasmen

Gasmen

    Erfahrener Benutzer

  • Members
  • 486 Beiträge

Geschrieben: 28 December 2017 - 16:35

Wichtig: Ruft man das erstellte Topic auf und speichert es wieder, wird vom HTML-Editor ein <p>-Tag um den eigenen HTML-Code gelegt, das zu sehr unschönen Darstellungen inerhalb von Menus führen wird, weil man damit die HTML-Struktur der Menus zerstört.

Wie kann ich das verhindern? sobald ich den Link einfüge und speichere wird das <p> Tag eingefügt.


https://www.rc-racearena.ch/
Ich arbeite nur noch mit Smartstore Net. :D


#6 Marcus Gesing

Marcus Gesing

    SmartStore AG

  • Administrators
  • 3799 Beiträge

Geschrieben: 28 December 2017 - 18:04

Ich würde das umschließende p-Tag in ein div-Tag ändern. Damit sollte das Menü klarkommen und der Editor lässt die Auszeichnung in Ruhe.
 
PS: Man kann das p-Tag zwar abstellen, aber nur global, indem man in der Datei \Content\editors\ckeditor\config.js folgende Zeile einfügt:
config.autoParagraph = false;
Das kann aber an anderer Stelle unerwünschte Effekte nach sich ziehen. Darum würde ich darauf verzichten.

Angehängte Bilder

  • div-tag.png

Marcus Gesing

Smartstore AG


#7 Gasmen

Gasmen

    Erfahrener Benutzer

  • Members
  • 486 Beiträge

Geschrieben: 29 December 2017 - 13:15

Hallo Marcus,
sieht immer noch nicht schön aus, zu viel Abstand.

service.JPG

 

<div><a class="footer-link" href="/wiederufsformular">Muster-Widerrufsformular</a></div>


https://www.rc-racearena.ch/
Ich arbeite nur noch mit Smartstore Net. :D


#8 Marcus Gesing

Marcus Gesing

    SmartStore AG

  • Administrators
  • 3799 Beiträge

Geschrieben: 29 December 2017 - 13:39

Bei mir sieht's ok aus, wenn für Links innerhalb von Dropdown-Menüs als class "dropdown-item" verwendet wird.

Angehängte Bilder

  • menu-links.png

Marcus Gesing

Smartstore AG


#9 Marcus Gesing

Marcus Gesing

    SmartStore AG

  • Administrators
  • 3799 Beiträge

Geschrieben: 29 December 2017 - 13:46

...und Footer mit class "footer-link":

Angehängte Bilder

  • footer-links.png

Marcus Gesing

Smartstore AG


#10 Michael Herzog

Michael Herzog

    SmartStore AG

  • Administrators
  • 3497 Beiträge

Geschrieben: 31 July 2019 - 19:13

Hi,

 

falls noch mal jemand über diesen Beitrag stolpert: Das geht jetzt (seit Smartstore.NET 3.2.0) alles mit ein paar Klicks im Admin-Bereich. 

 

Admin > CMS > Menüs

 

MfG


Michael Herzog
Smartstore AG