Bootstrap Plugin Collapse im Frontend zur „Akkordeon-Darstellung“

Thema wurde von Anonymous, 27. Oktober 2016 erstellt.

  1. Anonymous

    Anonymous Mitglied

    Registriert seit:
    21. Dezember 2011
    Beiträge:
    13
    Danke erhalten:
    12
    Danke vergeben:
    5
    #1 Anonymous, 27. Oktober 2016
    Zuletzt bearbeitet: 9. November 2016
    #############################################################################
    Ergänzung:
    Die Vorgehensweise zum praktischen Einsatz der nachfolgend beschriebenen „Akkordeon-Darstellung“ habe ich hier beschrieben:
    (Link nur für registrierte Nutzer sichtbar.)
    #############################################################################

    Ich möchte gerne im Frontend (z. B. in einem Beitrag wie "index (Mitte)" via Gambio Content-Manager) das Bootstrap JavaScript Plugin Collapse (collapse.js) nutzen, um Inhalte platzsparend in einer „Akkordeon-Darstellung“ anzuzeigen, wie hier zu sehen:
    (Link nur für registrierte Nutzer sichtbar.)

    Im Beitrag "Vorlage: Einfache Accordion Box“
    (Link nur für registrierte Nutzer sichtbar.)
    wurde die IMHO sehr interessante Thematik schon mal angerissen aber dann leider nicht mehr weiter verfolgt.

    Der freundliche Hinweis von Steffen auf die Nutzung von data-menu-accordion in box_categories.html (HoneyGrid Template) konnte von mir leider nicht zur Lösung der Problematik umgesetzt werden, da ich mit den Interna des Gambio GX 3 Shop-Systems derzeit anscheinend noch nicht genug vertraut bin.

    Eine Beschreibung/Hilfestellung zur Nutzung von Bootstrap Komponenten im Gambio GX 3 Frontend (HoneyGrid Template) wäre sicherlich für einige Shop-Besitzer sehr interessant.

    Viele Grüße
    Holger

    bootstrap-accordeon.png
     
  2. sirtet

    sirtet Erfahrener Benutzer

    Registriert seit:
    4. Juli 2012
    Beiträge:
    1.114
    Danke erhalten:
    88
    Danke vergeben:
    88
    Interessiert mich auch...
    @postel hat das bei sich (https://www.moertel-schlauch.de/) im mobilen Footer...
    Ich hätte gerne, dass der accordeon-effekt im mobilen Kategorien Menu animiert wäre.
    (Wenn man unterkat. auf/zu macht.)
    Und die Artikel-Content tabs hätte ich bei mobil auch gerne als accordion.
    (Die verhalten sich bei Mobil ja fast wie Accordeon, ausser a) alle schliessen geht nicht und b) ist nicht animiert.)
     
  3. leider hat Gambio die weiteren notwendigen Bootstrap Komponenten für das Accordion (Animationen etc.) nicht in den
    bootstrap.scss mit bei Honeygrid eingebaut, da kommt ihr so nicht weiter.
    Habe das alles und vieles anderes ausprobiert.
    Bin dann bei https://jqueryui.com/accordion/ gelandet und finde diese Lösung einfach gut. Auch gibt es keine Probleme mit den schon vorhandenen Gambio-Accordion Elementen.
    Das habe ich dann bei mir als Mobile-Footer-Accordion eingebaut.
    Die Umsetzung ist mit ein bisschen Programmier-Wissen eigentlich schnell gebaut.
    Wenn ihr Fragen dazu habt, helfe gerne weiter.
     
  4. Da bin ich einen anderen Weg gegangen, habe da für mobil ein Accordion mit Slider gebaut und selbst die Produkte und Preise erstellt. Dadurch bin ich unabhängig von den Slidern die Gambio für Neue Artikel, Angebote, Empfehlungen u.s.w.
    zur Verfügung stellt und kann einstellen an Artikeln wie ich will.
     
  5. sirtet

    sirtet Erfahrener Benutzer

    Registriert seit:
    4. Juli 2012
    Beiträge:
    1.114
    Danke erhalten:
    88
    Danke vergeben:
    88
    @postel, da meinst du etwas anderes als ich. Ich rede von den Tabs (desktop) wie Beschreibung etc, die bei Mobil zu sowas wie Accrodions werden.
    Aber die zu ändern, ist wohl ne grössere Sache.
     
  6. Was möchtest du denn da ändern?
     
  7. sirtet

    sirtet Erfahrener Benutzer

    Registriert seit:
    4. Juli 2012
    Beiträge:
    1.114
    Danke erhalten:
    88
    Danke vergeben:
    88
    Also, bei mobile werden die tabs ja zu einer Art von akkordeon. Aber wie bei tabs ist immer genau einer offen. Also man kann nicht alle schliessen und nicht mehrere offen haben.
    Das ist nach meinen Beobachtungen weniger intuitiv als wenn alle tabs unabhängig auf und zu gehen können.
    Und wenn das auf zu animiert ist, finden sich user auch leichter zurecht.
    Also hätte ich das gerne genau so wie in deinem footer...
     
  8. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.755
    Danke erhalten:
    1.516
    Danke vergeben:
    1.051
    @postel ich habe ja im mobilen Footer das Akkordeon von Netdexx. Habe mir darunter aber noch eine Zeile eingebaut wo man sofort die AGB etc. anklicken kann.
    Ich meine nämlich dass es Pflicht ist dass man diese Punkte OHNE 2. Klick sofort sichtbar hat!?
     
  9. Das ist absolut richtig, habe deshalb den mobilen Footer-(Accordion) so eingestellt, das die Box Rechtliches immer beim Aufruf der Seite und auch nach jeden Klick z.B. auf ein Produkt oder jedem Seitenwechsel, offen ist.
    Also auch wenn jemand die Box Rechtliches schliesst und dann irgendeine Seite aufruft, ist die Box Rechtliches wieder offen.
    Habe nächste Woche wieder mal eine Tiefenprüfung vom Händlerbund, mal sehen was die sagen.
     
  10. Habe das gestern abend mal getestet, das Accordion kann leider mit Angaben aus der product_description (Abfrage aus der Datenbank) wie
    HTML:
    {foreach name=tabs_loop item=tab_item from=$tabs}
                    <div class="tab-pane{if !$show_description_tab && $smarty.foreach.tabs_loop.first} active{/if}">
                        <div class="tab-heading">
                            <a href="#">{$tab_item.title}</a>
                        </div>
                        <div class="tab-body{if !$show_description_tab && $smarty.foreach.tabs_loop.first} active{/if}">
                            {$tab_item.content}
                        </div>
                    </div>
                {/foreach}
    nicht umgehen, aber wenn ich Zeit habe schaue ich mir das noch mal an.
     
  11. Anonymous

    Anonymous G-WARD 2015/2016

    Registriert seit:
    20. Februar 2012
    Beiträge:
    8.755
    Danke erhalten:
    1.516
    Danke vergeben:
    1.051
    sehr schön :), hatte ich nicht gesehen....
     
  12. Anonymous

    Anonymous Mitglied

    Registriert seit:
    21. Dezember 2011
    Beiträge:
    13
    Danke erhalten:
    12
    Danke vergeben:
    5
    #12 Anonymous, 5. November 2016
    Zuletzt bearbeitet: 10. November 2016
    Anleitung zum Einsatz des Bootstrap JavaScript Plugins "Collapse/Accordion" im Frontend zur „Akkordeon-Darstellung“ von Inhalten im Gambio GX 3.x mit HoneyGrid

    Accordion.png

    Für dieses Endergebnis sind die folgenden Schritte notwendig (wie immer vorher Backup und Änderungen auf eigenes Risiko):

    [1]
    Im Verzeichnis
    /templates/Honeygrid/usermod/javascript/Global/
    die Datei “bootstrap-collapse.min.js"
    hinterlegen.

    [2]
    Einzufügen im Abschnitt „Eigenes CSS einfügen“ im Gambio StyleEdit ist die nachfolgende Ergänzung:
    (Datei "add_to_own_css.css" im Anhang)

    Code:
    /* Benötigte Bootstrap CSS zur „Akkordeon-Darstellung“ */
    @import "../bootstrap/bootstrap/component-animations“;
    
    /* Benötigte Bootstrap CSS Formatierungen zur „Akkordeon-Darstellung“ */
    .collapse {
      display: none;
    }
    .collapse.in {
      display: block;
    }
    tr.collapse.in {
      display: table-row;
    }
    tbody.collapse.in {
      display: table-row-group;
    }
    .collapsing {
      position: relative;
      height: 0;
      overflow: hidden;
      -webkit-transition-property: height, visibility;
      -o-transition-property: height, visibility;
         transition-property: height, visibility;
      -webkit-transition-duration: 0.35s;
      -o-transition-duration: 0.35s;
         transition-duration: 0.35s;
      -webkit-transition-timing-function: ease;
      -o-transition-timing-function: ease;
         transition-timing-function: ease;
    }
    
    Anmerkung zum Import der bereits im Gambio GX 3 System enthaltenen _component-animations.scss: in der akut mir vorliegenden Gambio GX 3.1.3.1 ist die Einbindung via main.scss noch deaktiviert.
    Sehr wahrscheinlich wird in einer aktuelleren Version _component-animations.scss einmal standardmäßig eingebunden werden und daraus resultierend die zusätzliche Einbindung via @import "../bootstrap/bootstrap/component-animations“; obsolet.

    [3]
    In einer Content-Manager-Seite euer Wahl, wie z. B. Index (Mitte) oder Index (unten) folgenden Quellcode (File "accordion-demo.html") zur Generierung eines Beispiels, wie oben illustriert, eingeben:
    HTML:
    <div class="panel-group" id="accordion" role="tablist">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <button style="text-align:left" class="btn btn-primary btn-block" type="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
              <i class="fa fa-bars"></i> Hier Überschrift #1
            </button>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">
          <div class="panel-body"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <h4 class="panel-title">
             <button style="text-align:left" class="btn btn-primary btn-block" type="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
              <i class="fa fa-bars"></i> Hier Überschrift #2
            </button>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel">
          <div class="panel-body">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
          </div>
        </div>
      </div>
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
          <h4 class="panel-title">
            <button style="text-align:left" class="btn btn-primary btn-block" type="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
              <i class="fa fa-bars"></i> Hier Überschrift #3
            </button>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel">
          <div class="panel-body">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</div>
        </div>
      </div>
    </div>
    
    Anmerkungen
    [1] Sollen die Tab-Panel die Akkordeon-Eigenschaft verlieren, also unabhängig voneinander zu Öffnen und Schliessen sein, so muss lediglich in der ersten Zeile der "accordion-demo-html" die id="accordion" entfernt werden wie folgt:
    HTML:
    <div class="panel-group" role="tablist">
    [2] Die Animationen zum Öffnen und Schliessen der Tab-Panel erfolgen über die bereits im Gambio GX 3 enthaltene jQuery Version und dies minimiert die potentielle Gefahr einen Versionskonflikts und entspricht von der Dynamik des Ablaufs her den anderen im Shop enthaltenen Animationen, was ein harmonisches Erscheinungsbild vermittelt.

    [3] Der Parameter "in" im Class Attribut eines Tab-Panel bestimmt, dass dieses Tab-Panel beim Öffnen der Seite standardmässig bereits geöffnet sein soll.
    Beispiel:
    HTML:
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">
    Viele Grüße
    Holger
     

    Anhänge:

  13. Habe viele Accordions ausprobiert und die Lösung gefunden: https://jqueryui.com/accordion/
    Dieser lässt sich auf Product-info-Content-Höhe anpassen, ist animiert, man kann jede Box öffnen und schliessen, ist ab Gambio 3.2.0.0 als Grund-css eingebaut und versteht {foreach}.
    In meinem Testshop 3.2.0.0 war es relativ leicht umsetzbar, im Liveshop 3.0.0.0 etwas komplizierter.
    Kannst du dir in meinem Shop anschauen, habe es da eingebaut.

    Wenn Interesse besteht, stelle ich das hier gern bereit.
     

    Anhänge:

  14. sirtet

    sirtet Erfahrener Benutzer

    Registriert seit:
    4. Juli 2012
    Beiträge:
    1.114
    Danke erhalten:
    88
    Danke vergeben:
    88
    Ah, du hast die Tabs gleich komplett ersetzt... Ja, ist vielleicht auch nicht schlecht.
    Ich hatte erst nur an die Mobilansicht gedacht, aber das wäre wohl aufwändiger...
    Ohnehin sehen die Tabs nicht mehr sehr gut aus, falls sie auf eine 2. Zeile umbrechen, weil es zu viele sind.

    Ein Problem hast du noch, dass wenn man einen kurzen "Tab" öffnet, er aus dem Viewport verschwindet...
    Ich würde das so konfigurieren, falls man kann, dass die alle unabhängig sind, dass öffnen von C keine Auswirkung hat auf A und B...
    accordion.gif
     
  15. Danke für den Tip, sehr schöne Präsentation, musst mir mal verraten wie das geht. Kann man auch für den Shop verwenden.
    Nun aber:
    Habe aber einfach bei diesen Produkten die kurzen Info-Texte in den mittleren Content verlegt und nun bleiben die im Viewport. Das alle unabhängig sind gefällt mir nicht so, weil wenn alle offen sind, ist wieder endloses scrollen angesagt.
    Habe nun auch die Styles für die einfachen Produkt-Informationen angepasst und nun passt´s.
     
  16. sirtet

    sirtet Erfahrener Benutzer

    Registriert seit:
    4. Juli 2012
    Beiträge:
    1.114
    Danke erhalten:
    88
    Danke vergeben:
    88
    ScreenToGif heisst das tool...
    Texte verteilen hilft aber nur halb. springt immernoch rum.
    Sind das denn aber in der Administration schon tabs, oder hast du alle deine accordion tabs zusammen in der Artikelbeschreibung?
     
  17. Die Tabs sind aus der Artikelbeschreibung (siehe Bild) und diese werden von der product_desciption.html
    ausgelesen, dort habe ich das accordion eingefügt.
    Original:
    HTML:
    {foreach name=tabs_loop item=tab_item from=$tabs}
                    <div class="tab-pane{if !$show_description_tab && $smarty.foreach.tabs_loop.first} active{/if}">
                        <div class="tab-heading">
                            <a href="#">{$tab_item.title}</a>
                        </div>
                        <div class="tab-body{if !$show_description_tab && $smarty.foreach.tabs_loop.first} active{/if}">
                            {$tab_item.content}
                        </div>
                    </div>
                {/foreach}
    geändert in:
    HTML:
    <div id="accordion2">               
                {foreach name=tabs_loop item=tab_item from=$tabs}
                <div>
                   {$tab_item.title}
                </div>
                <div>
                    {$tab_item.content}
                </div>
               {/foreach}
               </div>
    Bildschirmfoto vom 2016-11-10 um 17.19.31.png
     
  18. sirtet

    sirtet Erfahrener Benutzer

    Registriert seit:
    4. Juli 2012
    Beiträge:
    1.114
    Danke erhalten:
    88
    Danke vergeben:
    88
    ok, und der Haupptext ist dann leer? Der ist ja sonst der 1. Tab aus user-sicht...
     
  19. Nein, Gambio hat das eigentlich in der product_desciption.html an alle Artikel-Beschreibungen angepasst (auch an ältere Gambio-Versionen).
    Ich habe auch viele Artikelbeschreibungen nur im 1.Tab, also ohne weitere Tab`s, und die werden angezeigt
    (natürlich ohne Accordion bei mir)
    Das kann ich nicht nachvollziehen, habe das mal mit deinem Tipp (ScreenToGif, Danke dafür) aufgezeichnet.
    Es ist aber klar ein Frage der Textlänge! accordion2.gif
     
  20. matthiash

    matthiash Mitglied

    Registriert seit:
    26. Oktober 2015
    Beiträge:
    11
    Danke erhalten:
    4
    Danke vergeben:
    3
    Hallo Gerd,

    also ich hätte daran Interesse wie das eingebaut hast ;-)