Hallo,
das Service /Hilfe Menü wird bei mir nicht oben rechts angezeigt, sondern nur im Footer ganz unten als waagerechte Zeile. Habe ich da was übersehen beim Einstellen…??
Das Service / Hilfe-Menü wurde so wie in den Docs und dem YouTube Video beschrieben angelegt Schritt für Schritt eingehalten. Cache gelöscht. Das Menü bleibt immer noch unten im Footer.
Mir ist aufgefallen, daß in den Docs das Menü einmal im Screenshot in der obersten Ebene mit HOME angelegt ist und einmal in einem Screenshot eine Ebene darunter, da wo auch das Menü ShopService und Informationen liegt (Tutorials SW6)…
Doch, genau das, welches oben rechts im Shopheader war.
Kann man das in SW6.4 wieder oben in den Header bekommen? Für unsere und meine Zwecke war das gut da oben und ist auch wichtig für die schnellen Shop Infos.
Das Service Menü wurde in den Footer verschoben, da viele dieser Links (Impressum, etc.) mit einem Klick ohne Umschweife (und nicht erst durch das Anklicken eines Menüs) im Shop erreichbar oder sichtbar sein sollen und müssen. Die Position hat also einen berechtigten Grund.
Ja, das trifft schon zu. Nur, die unter „Informationen“ stehenden Impressum, AGB, Datenschutz, usw. sind in der Desktop-Ansicht mit einen Click erreichbar, in den Tablet- und Mobil-Ansichten mit zwei Clicks unter Informationen.
D.h., die sind dann nicht „Rechtssicher“…??
Im Prinzip sind dann alle wichtigen Informationen in der Desktop-Ansicht zweimal zu sehen im Footer.
Hmm…
es sollte leicht erkennbar und unmittelbar erreichbar sein - wenn man erst noch einen Klick machen muss, um es zu finden oder zu erreichen, musst du selbst wissen, ob das dann zutrifft. Am besten mal einen Anwalt fragen. Nach der 6.4 - Lösung im Footer ist dies aber auf jeden Fall der Fall.
Ist es denn möglich das Service/Hilfe-Menü zweimal zu installieren?
Einmal im Footer für die Rechtsinformationen und einmal im Header als Service/Hilfe2 für andere Links im Shop…?
Das wäre das, was ich eigentlich bräuchte.
also ein „One-Click-Variante“ über die Administration geht dein Featurewunsch nicht. Über eine eigene App und somit eine eigene Anpassung aber natürlich jederzeit.
In der mobilen Versionen werden doch auch alle Links aus dem Footer erst angezeigt wenn man die Boxen aufklappt.
Nachtrag: Ach ne… mir wird gerade bewusst, dass ich das Footer Service Menü nie genutzt habe, genau aus dem Grund, dass man dann die Links unnötig doppelt im Footer hat. Und das mit dem einfach aus dem Footer in den Header klatschen geht nicht auf.
Im Footer wird im Gegensatz zum top-header kein Dropdown Menü mit Button genutzt. Das muss man sich dann selbst noch zussamenbretzeln.
So komm ist zwar ne Weile her, aber das Thema ist ja nach wie vor aktuell für den ein oder anderen. Ich hab es gestern mal umgesetzt.
Das ist die Liste mit den Links:
<div class="g2g-service-dropdown-container">
<!-- Der "Service"-Link, der das Dropdown-Menü öffnet -->
<a href="#" class="g2g-service-dropdown-toggle" id="g2gServiceDropdownToggle">
{{ "header.indexLinkService"|trans|sw_sanitize }}
</a>
<!-- Das Dropdown-Menü -->
<ul class="g2g-service-dropdown-menu" id="g2gServiceDropdownMenu">
{% for serviceMenuItem in page.header.serviceMenu %}
<li class="g2g-service-dropdown-item">
<a class="g2g-service-dropdown-link"
href="{{ category_url(serviceMenuItem) }}"
{% if category_linknewtab(serviceMenuItem) %}target="_blank"{% endif %}
title="{{ serviceMenuItem.translated.name }}">
{{ serviceMenuItem.translated.name }}
</a>
</li>
{% endfor %}
</ul>
</div>
Um die Box zu öffnen brauchst du ne kleine Portion CSS:
/* Container für das Dropdown-Menü */
.g2g-service-dropdown-container {
position: relative; /* Erforderlich für das Positionieren des Dropdown-Menüs */
}
/* Der Link, der das Dropdown-Menü öffnet */
.g2g-service-dropdown-toggle {
display: inline-block;
text-decoration: none; /* Entfernt die Unterstreichung des Links */
}
/* Aufklapp-Icon hinter dem Link */
.g2g-service-dropdown-toggle::after {
display: inline-block;
margin-left: 0.255em;
vertical-align: 0.255em;
content: "";
border-top: 0.3em solid;
border-right: 0.3em solid transparent;
border-bottom: 0;
border-left: 0.3em solid transparent;
}
/* Das Dropdown-Menü, anfänglich versteckt */
.g2g-service-dropdown-menu {
display: none; /* Versteckt das Dropdown-Menü standardmäßig */
position: absolute; /* Positioniert das Dropdown-Menü relativ zum Container */
top: 100%; /* Positioniert das Dropdown-Menü direkt unter dem Toggle-Link */
left: 0;
background-color: white; /* Hintergrundfarbe des Dropdown-Menüs */
border: 1px solid #ddd; /* Rahmen des Dropdown-Menüs */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Schatten für das Dropdown-Menü */
z-index: 1000; /* Stellt sicher, dass das Dropdown über anderen Inhalten liegt */
list-style: none; /* Entfernt die Aufzählungszeichen der Liste */
padding: 0; /* Entfernt das Padding */
margin: 0; /* Entfernt das Margin */
margin-top: 10px;
}
/* Dropdown-Menü-Elemente */
.g2g-service-dropdown-item {
padding: 10px; /* Padding für die einzelnen Listenelemente */
}
.g2g-service-dropdown-item:hover {
background: red;
}
/* Links im Dropdown-Menü */
.g2g-service-dropdown-link {
text-decoration: none; /* Entfernt die Unterstreichung der Links */
display: block; /* Macht den Link blockartig, um die ganze Breite des Listenelements einzunehmen */
}
/* Dropdown-Menü anzeigen */
.g2g-service-dropdown-menu.show {
display: block; /* Zeigt das Dropdown-Menü an, wenn die Klasse "show" hinzugefügt wird */
}
und eine Löffelspitze JS:
<script>
document.addEventListener('DOMContentLoaded', function() {
var toggleButton = document.getElementById('g2gServiceDropdownToggle');
var dropdownMenu = document.getElementById('g2gServiceDropdownMenu');
toggleButton.addEventListener('click', function(event) {
event.preventDefault(); // Verhindert die Standard-Link-Aktion
dropdownMenu.classList.toggle('show');
});
// Schließt das Dropdown-Menü, wenn der Benutzer außerhalb klickt
document.addEventListener('click', function(event) {
if (!toggleButton.contains(event.target) && !dropdownMenu.contains(event.target)) {
dropdownMenu.classList.remove('show');
}
});
});
</script>
So ähnlich habe ich es gerade in unserem Theme eingebaut. Das sollte dir und allen Mitlesern als Ansatz weiterhelfen.
