Dropdown Menü Footer Craft

[Mr_Diet_]

 

Hallo zusammen. Ich habe im Craft Theme im Footer ein Dropdown erstellt aber es funktioniert nicht mit dem aufklappen. Vielleicht kann mir jemand hier sagen wie ich vorgehen könnte mit Codes oder ähnlichem. Icn bedanke mich im Vorraus.

https://2cfea3-9e.myshopify.com/?_ab=0&_fd=0&_sc=1

PW Michel@1977

[Gabe]

Hey @Mr_Diet_ 

Danke für den Link und dazu habe ich jetzt einen Video zusammengefasst wo ich das näher 👀 und in meinem Testshop teste.

• Siehe diesen Video dazu hier.

Im Grunde brauchen wir weitere Angaben von dir (wie ich im Video erkläre) um genau verstehen zu können, wo bei dir der 🪱 sitzt.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Mr_Diet_]

Hey und herzlichen Dank . Ich habe das Dropdown nur in der mobilen Ansicht eingestellt. Auf dem Desktop sieht man ein ganz normales Menü was ich auch so haben wollte. Das Problem ist das ich in der mobilen Ansicht die einzelnen Punkte nicht aufklappen kann also die zu bleiben. Wenn du natürlich ein Code hättest wo ich das so machen kann wie ich jetzt habe in de rmobilem Ansicht , also ganz unten die rechtstexte nebeneinander und ob drüber die klappbaren( mobile Ansicht ) und das einfacher ist als die Fehlersuche, würde ich das natürlich bevorzugen. Ich mache immer Kopien und teste alles selbst die Codes wenn ich weiß an welchen Ort . Beste Grüße 

[Gabe]

@Mr_Diet_ 

Ah verstehe. Ja, ich sehe es jetzt:

Somit wird es nicht ganz einfach leider. Um die Dropdown-Menüs in der mobilen Ansicht deines Shopify Dawn Themes funktionsfähig zu machen, musst du sicherstellen, dass das JavaScript korrekt eingebunden und konfiguriert ist, damit die Menüpunkte auf Klickereignisse reagieren können.

Hier eine Methode, wie du die JavaScript-Funktionalität für deine Dropdown-Menüs implementieren kannst:

JavaScript hinzufügen

1. Öffne den Shopify Admin-Bereich.
2. Gehe zu Online Store > Themes.
3. Klicke neben deinem aktuellen Theme auf Actions > Edit code.
4. Such nach der theme.js Datei oder einer anderen relevanten JavaScript-Datei, die bereits existiert und für solche Funktionalitäten verwendet wird.

JavaScript-Code für das Dropdown-Menü

Füge folgenden JavaScript-Code hinzu, der die Dropdown-Funktionalität steuert:

document.addEventListener("DOMContentLoaded", function() {
  var toggleButtons = document.querySelectorAll('.footer-block__heading');

  toggleButtons.forEach(function(toggle) {
    toggle.addEventListener('click', function() {
      var content = this.nextElementSibling;
      if (content.style.display === 'block') {
        content.style.display = 'none';
      } else {
        content.style.display = 'block';
      }
    });
  });
});

Überprüfe auch, ob du passende CSS-Regeln hast, um die Menüs standardmäßig zu verbergen und bei Aktivierung anzuzeigen:

.footer-block__details-content {
  display: none;
}

Dieser JavaScript-Code fügt einen Event Listener zu jedem Element der Klasse .footer-block__heading hinzu. Wenn ein Benutzer auf die Überschrift klickt, wird das nächste Element (das sollte die Liste sein, die du anzeigen möchtest) ein- oder ausgeblendet.

Hoffe das hilft dir weiter! 😉

[Mr_Diet_]

Hey. Leider funktioniert das nicht. Ich habe gerade einen Code gefunden Den du glaube ich mal verlinkt hast von einer Seite ich weiß aber nicht wo ich den einfügen muss . Wenn du mir das noch kurze sagen könntest. Danke dir ..

.accordianNav {
/* this width is arbitrary and here for display only */
max-width: 300px;
background: #222;
margin: 5em 2em 0 5em;
padding: 1em 0;
border-radius: 4px;
}

.accordianNav a,
.accordianNav h3 {
display: block;
line-height: 2.5em;
color: #757575;
letter-spacing: 2px;
position: relative;
z-index: 1;
cursor: pointer;
padding-left: 1em;
font-size: 1em;
font-weight: 100;
}

.accordianNav a {
text-decoration: none;
padding-left: 0;
}

[Gabe]

@Mr_Diet_ 

Warum nicht eine unserer Akkordeon Apps stattdessen verwenden (manche sind sogar Free)...

Den Code müsstest du am ende der base.css Datei des Themes fügen. Du brauchst ausserdem einen JavaScript imtheme.js oder script.js, um die Akkordeon-Funktionalität zu ermöglichen (falls noch nicht implementiert)... hier ein einfaches Beispiel:

document.addEventListener("DOMContentLoaded", function() {
 var acc = document.getElementsByClassName("accordianNav");
 for (var i = 0; i < acc.length; i++) {
   acc[i].addEventListener("click", function() {
     this.classList.toggle("active");
     var panel = this.nextElementSibling;
     if (panel.style.maxHeight){
       panel.style.maxHeight = null;
     } else {
       panel.style.maxHeight = panel.scrollHeight + "px";
     } 
   });
 }
});

Dieser JavaScript-Code fügt eine einfache Logik hinzu, um jedes Element mit der Klasse accordianNav als Akkordeon-Element zu behandeln, das sich ausklappen lässt.

[Mr_Diet_]

Hey nochmal . So . Ich mache das jetzt so : das Original Footer Menü von Craft als dropdown das klappt im Test ganz gut . Ich brauch dann nur noch ne Möglichkeit wie ich ganz unten dann links ohne dropdown im Querformat zufügen kann dann habe ich es wenn du da noch was weißt . Sage schon mal besten Dank.

[Gabe · Accepted solution]

@Mr_Diet_ 

Hmm ja, bevor ich hier für das W-Ende Feierabend mache, vielleicht noch ein paar Workarounds für dich, wenn du die Tabs Apps nicht verwenden möchtest.

Um ein nicht-aufklappbares Menü in der Fußzeile deines Shopify-Themas im Querformat einzufügen, kannst du beispielsweise ähnliche Techniken anwenden, wie sie für das Hinzufügen von Navigationslinks in einer Navigationsleiste (Navbar) verwendet werden. Hier sind einige Anleitungen und Überlegungen, die dir helfen können:

1. Responsive Navbar verwenden: Shopify erlaubt die Verwendung von responsiven Navbars, die sich automatisch an verschiedene Bildschirmgrößen anpassen. Du kannst eine einfache Navbar mit horizontal ausgerichteten Links erstellen, die sich ideal für den Fußbereich in einer Desktop-Ansicht eignen würde. Dies erfordert minimale CSS-Anpassungen, um die Links horizontal anzuordnen und bei Bedarf das Erscheinungsbild anzupassen.

2. Bootstrap für die Strukturierung verwenden: Wenn du mit Bootstrap vertraut bist, kannst du dessen Navbar-Komponenten nutzen, um eine responsive und horizontal ausgerichtete Navbar zu erstellen. Bootstrap-Navbars bieten eine einfache Möglichkeit, Links horizontal anzuzeigen, besonders auf größeren Bildschirmen, und sie automatisch auf kleineren Bildschirmen zu einem Dropdown-Menü zu kollabieren.

3. CSS-Anpassungen: Um sicherzustellen, dass dein Menü immer horizontal angezeigt wird und nicht in ein Dropdown übergeht, kannst du spezifische CSS-Klassen verwenden, um die Darstellung zu steuern. Verwende Klassen wie .navbar-expand-lg oder .navbar-expand-md, um zu steuern, ab welcher Bildschirmgröße die Navbar kollabieren soll oder eben nicht.

4. Einfache Links hinzufügen: Um Links zu deiner Navbar hinzuzufügen, kannst du einfach HTML verwenden und Links innerhalb des <nav>-Elements platzieren. Dies ermöglicht es dir, eine klare und einfache Benutzeroberfläche für den Footer zu schaffen, die auf allen Geräten gut funktioniert.

5. CSS für Sichtbarkeit und Ästhetik: Stelle sicher, dass du passende CSS-Regeln hast, um die Menüs ansprechend zu gestalten. Dazu gehören Stilregeln für Farben, Hover-Effekte und die allgemeine Ausrichtung der Menülinks.

Hier ist ein einfaches Beispiel, wie du eine Bootstrap-Navbar für den Footer erstellen kannst, basierend auf den allgemeinen Praktiken:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a href="#" class="navbar-brand">Brand</a>
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">Home</a>
                <a href="#" class="nav-item nav-link">Profile</a>
                <a href="#" class="nav-item nav-link">Messages</a>
            </div>
        </div>
    </div>
</nav>

In diesem Beispiel bleibt die Navbar immer horizontal und klappt nicht in ein Dropdown-Menü auf, ideal für eine Footer-Navigation in einem Desktop-Layout​ (mehr dazu hier in der Tutorial Republic)​.

Hoffe das hilft dir weiter! 😉