Dawn Theme - Einklappbare Reihen automatisch schließen/Nur eine zur Zeit geöffnet

Deutsch Diskussion Shopify Design
1

Hallo zusammen,

ich suche nach einer Lösung um auf meinen Produktseiten im Shopify Dawn-Theme einen Code zu implementieren, der bewirkt, dass nur eine einklappbare Reihe zur Zeit geöffnet ist, d.h, wenn die nächste geöffnet wird, soll sich die vorherige direkt schließen, damit die Seite nicht extrem in die Länge gezogen wird. Ich habe bereits einige Lösungen aus der englischsprachigen Community probiert, diese haben allerdings alle nicht funktioniert. Kann da jemand weiterhelfen?

Vielen Dank im Voraus & liebe Grüße aus Bremen

2

Hey @psyvin

Moin Moin an Bremen und Danke für den Use-Case denn das leuchtet ein was du haben möchtest. Es ist aber nicht leicht zu implementieren denn das verlangt eine komplexe Logik.

Wenn beispielsweise eine Reihe per Klick Event ausgeklappt wird, dann muss gleichzeitig ein Code executed werden der eine Suche nach einer immer noch offenstehenden Reihe ausführt und diese dann schließt bevor die andere Reihe ausgeklappt werden kann. Das kann außerdem zu etwas Lag in den Collapsible Tabs bzw. verlängerten Ladezeiten führen.

Folgendes ist etwas JavaScript sowie CSS Code das ich aus etlichen Ressourcen entnommen wie W3Schools.com, unserer Developer Doku und den Englischen Forums, der aber sehr komplex ist. Wenn du es selber auf deiner Produktseite programmieren möchtest dann bitte immer in einer Themekopie/Testumgebung zuerst testen und zusammen mit einem Experten/Programmierer.

Änderungen zu deinem Theme Code können auch 1) die Page Loading Speeds negative beeinflussen und 2) dein Theme aus den Theme Updates ausschließen. Das folgende ist Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!

Du kannst entweder deinen base.css im Theme → Aktionen → Duplizieren → Code bearbeiten öffnen und den folgenden Code hinzufügen (oder eben den neuen CSS Editor innerhalb des Theme Editors dafür verwenden) und einen Code wie den folgenden hinzufügen - ich habe aber diesen Code selber noch nicht getestet:

.accordion {
  display: flex;
  flex-direction: column;
}

.accordion-item {
  background-color: #fff;
  border-bottom: 1px solid #ddd;
}

.accordion-item button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 1rem;
  font-size: 1rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
}

.accordion-item button:focus {
  outline: none;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.accordion-item.open .accordion-content {
  max-height: 500px;
}

Fügen den folgenden JavaScript-Code in die “theme.js” Datei ein:

document.addEventListener("DOMContentLoaded", function () {
  const accordionItems = document.querySelectorAll(".accordion-item");

  function closeAllExcept(item) {
    accordionItems.forEach(function (accordionItem) {
      if (accordionItem !== item) {
        accordionItem.classList.remove("open");
      }
    });
  }

  accordionItems.forEach(function (item) {
    const button = item.querySelector("button");
    button.addEventListener("click", function () {
      closeAllExcept(item);
      item.classList.toggle("open");
    });
  });
});

Erstelle nun den HTML-Code für die Akkordeon-Elemente auf der gewünschten Produktseite:


  

    
    

      

Inhalt für Titel 1

    

  

  
    
    

      

Inhalt für Titel 2

Diese Akkordeon-Funktionalität sollte dann auf der Produktseite funktionieren. Sobald man eine Sektion öffnet, sollten alle anderen geschlossen werden, um zu verhindern, dass die Seite zu lang wird.

Wenn du nicht den ganzen Code oben brauchst, dann entnehme einfach die relevanten Code Schnipsel aus den obigen Code Beispielen die du dem bereits bestehenden Code einfach ergänzen kannst.

Es ist halt Theme-abhängig, ohne Gewähr und dient lediglich dazu dich in die richtige Richtung zu weisen!