Bootstrap Plugin Collapse im Frontend zur „Akkordeon-Darstellung“

Thema wurde von Anonymous, 27. Oktober 2016 erstellt.

  1. Ed

    Ed Erfahrener Benutzer

    Registriert seit:
    6. November 2011
    Beiträge:
    388
    Danke erhalten:
    188
    Danke vergeben:
    140
    Hi Achim, auch Attribute, Eigenschaften und Customizer X-Sell Artikel werden unterstützt.
    Der einzige Unterschied ist, dass sich diese natürlich nicht direkt in den Warenkorb legen lassen, sondern es öffnet sich die jeweilige Produkt Seite, damit eine notwendige Auswahl getroffen werden kann.
    Auch machen wir das manchmal so, dass nur xsell Artikel ohne Attribute... angezeigt werden, damit alle, die angezeigt werden, auch direkt in den Warenkorb gelegt werden können (wenns solche gibt).

    ED
     
  2. Akkordion für Tabs Produkt-Info noch mal angepasst. Gambio v3.6.3.0 (geht auch mit 3.7.3.0, als USERMOD oder darüber anpassen mit {block} als overload)
     

    Anhänge:

  3. markus_wick

    markus_wick Erfahrener Benutzer

    Registriert seit:
    10. Oktober 2018
    Beiträge:
    717
    Danke erhalten:
    133
    Danke vergeben:
    100
    #43 markus_wick, 17. Dezember 2019
    Zuletzt bearbeitet: 17. Dezember 2019
    Ich hab das hier mal aufgegriffen, um im aktuellen 3.14.3.0 einen Info-Seite mit dem Collapse-Effekt aufzubauen. Im Grund hat das auch geklappt.
    Das Problem nun: eine Zeile die ins eigene CSS muss, kollidiert wohl irgendwie mit dem Suchfeld im Header.... :confused:
    Sobald ich ich:
    .collapse {display: none;}
    ins eigene CSS nehme, ist das Suchfeld futsch... wie das?

    Hab grade das Ganze ein wenig untersucht:
    Das Suchfeld wird im Inspector dargestellt mit div.navbar-search.collapse

    Das ".collapse" kollidiert hier wohl irgendwie...

    Was kann ich da tun?
     
  4. markus_wick

    markus_wick Erfahrener Benutzer

    Registriert seit:
    10. Oktober 2018
    Beiträge:
    717
    Danke erhalten:
    133
    Danke vergeben:
    100
    So, ich hab mal ganz brachial (und dilettantisch) im eigenen CSS alle "collapse" in "collapse2" umbenannt... und im html-code dann auch statt der class "collapse" "collapse2" geschrieben. Nun kann ich die Dinge wieder ausklappen und die Suche ist auch wieder im header. Aber das Ausklappen ist ruckarting, die class "collapsing" wird wohl nicht genutzt, ichmüsste also auch das .js modifizieren, oder???
    Oder kann ich das Suchfeld irgendwie aus dem "collapse" befreien?
     
  5. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    29. November 2019
    Beiträge:
    211
    Danke erhalten:
    78
    Danke vergeben:
    31
    Du musst dieses ".collapse" im css genauer anweisen,
    wenn man .collapse{ ....} im css angibt, greift das für alle .collapse im Shop.
    Gibt man z.B. .product-info .collapse greift das nur bei Product-Info.
    Prinzip klar?
     
  6. markus_wick

    markus_wick Erfahrener Benutzer

    Registriert seit:
    10. Oktober 2018
    Beiträge:
    717
    Danke erhalten:
    133
    Danke vergeben:
    100
    Danke, werd mich mal mehr eindenken/einarbeiten, für "nebenher" ist das manchmal echt kompliziert :)
     
  7. markus_wick

    markus_wick Erfahrener Benutzer

    Registriert seit:
    10. Oktober 2018
    Beiträge:
    717
    Danke erhalten:
    133
    Danke vergeben:
    100
    Ha, hat tatsächlich funktioniert! Danke! Das eigene css habe ich nun so:
    Code:
    /* Benötigte Bootstrap CSS Formatierungen zur „Akkordeon-Darstellung“ */
    
    .panel-group .collapse {
      display: none;
    }
    
    .panel-group .collapse.in {
      display: block;
    }
    
    .panel-group tr.collapse.in {
      display: table-row;
    }
    .panel-group tbody.collapse.in {
      display: table-row-group;
    }
    
    .panel-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;
    }
    Klappt.
     
  8. Anonymous

    Anonymous Mitglied

    Registriert seit:
    17. Dezember 2018
    Beiträge:
    5
    Danke erhalten:
    0
    Danke vergeben:
    1
    Moin,
    ich muss mal das Thema aufgreiffen...
    Ich habe jetzt mal die Dateien von postel hinterlegt nur steh ich grade völlig auf dem Schlauch wie ich das realisiere das es auch angezeigt in den Artikelinfos bzw. im extra angelegten TAB...
    Ich brauche nur nen kleinen Anschupser ;-)
     
  9. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    29. November 2019
    Beiträge:
    211
    Danke erhalten:
    78
    Danke vergeben:
    31
    Das funktioniert nicht mehr (war bis Gambio 3.6.x.x), baue es lieber wieder aus.
    Welche Shop-Version hast du und Template oder Theme?
    Habe das Akkordion für Tabs Produkt-Info inzwischen angepasst an aktuelle Gambio-Versionen.
     
  10. Anonymous

    Anonymous Mitglied

    Registriert seit:
    17. Dezember 2018
    Beiträge:
    5
    Danke erhalten:
    0
    Danke vergeben:
    1
    Hallo Gerd,
    das es in der aktuellen Version nicht mehr läuft hab ich mir schon fast gedacht und erklärt wohl auch weshalb ich nicht wirklich damit weiterkomme :-(
    Als Shop Version hab ich mittlerweile 4.0.0.1....
     
  11. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    29. November 2019
    Beiträge:
    211
    Danke erhalten:
    78
    Danke vergeben:
    31
    Hallo Sven,
    habe in deinem SeitenOuellText gesehen das du das Template Honeygrid hast.
    Nimm dieses und passe dir das Css an deinen Style an.
     

    Anhänge:

  12. Anonymous

    Anonymous Mitglied

    Registriert seit:
    17. Dezember 2018
    Beiträge:
    5
    Danke erhalten:
    0
    Danke vergeben:
    1
    Danke Gerd,

    ...ich probiere das mal aus...
     
  13. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    13. Mai 2019
    Beiträge:
    263
    Danke erhalten:
    49
    Danke vergeben:
    83
    #53 Anonymous, 6. Juni 2020
    Zuletzt bearbeitet: 9. September 2021
    Ich wollte mich mal bedanken, dieser Thread hat mir enorm geholfen unsere FAQ-Seite mit Accordeons zu gestalten.

    Wer es sich anschauen möchte: https://bogensportshop.eu/de/info/faq-haeufig-gestellte-fragen.html

    Ich finde es immer wichtig, auch etwas zurückzugeben wenn man hier Hilfe aus der Community in Anspruch nimmt. Von daher: Wie auch andere hatte ich bei der Lösung von @GnuZilla Probleme, dass durch den zusätzlichen CSS-Code die Suche im Header verschwunden ist und ein paar andere Sachen nicht mehr so aussahen wie vorher. Daher habe ich .collapse und collapse.in zu faq.collapse und faq.collapse.in umbenannt. Dazu habe ich noch die Klasse panel-heading zu faq-panel-heading umbenannt und padding auf 0px gesetzt, weil ich fand, dass der zusätzliche Rahmen drumherum zu viel Platz einnimmt.

    Das ist dann der CSS-Teil:

    Code:
    .faq.collapse {
      display: none;
    }
    .faq.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;
    }
    
    .faq-panel-heading {
      padding: 0px;
    }
    Ich habe mehrere FAQ-Abschnitte, was aber ein großes Accordion ist, damit immer nur eine Frage aufgeklappt ist und egal wo ich was aufklappe, die gerade geöffnete Frage geschlossen wird. Dafür müssen alle buttons data-parent="#accordion" haben, das ist die id des ganzen Accordion. Der Link muss aber auf eine eindeutige id des divs verweisen, in dem die Antwort steht. Also z.B. href="#collapseTwoTwo", das ist die zweite Frage im zweiten Abschnitt. Das div hat dann id="collapseTwoTwo". Ich denke die Idee ist klar.

    Eine funktionierenden, einfache Version des ganzen habe ich mal zusammengekürzt:

    HTML:
    <div class="panel-group" id="accordion" role="tablist">
    
      <div class="panel panel-default">
        <div class="faq-panel-heading" role="tab" id="headingOneOne">
          <h4 class="panel-title">
            <button style="text-align:left; white-space:normal;" class="btn btn-block" type="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOneOne">
              <i style="color:red;" class="fa fa-question-circle"></i> Das ist eine Frage im ersten Abschnitt?
            </button>
          </h4>
        </div>
        <div id="collapseOneOne" class="faq panel-collapse collapse in" role="tabpanel">
          <div class="panel-body"><p>Das ist eine Antwort!</p>
          </div>
        </div>
      </div>
    
      <div class="panel panel-default">
        <div class="faq-panel-heading" role="tab" id="headingOneTwo">
          <h4 class="panel-title">
             <button style="text-align:left; white-space:normal;" class="btn btn-block" type="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOneTwo">
              <i style="color:red;" class="fa fa-question-circle"></i> Noch eine Frage im ersten Abschnitt?
            </button>
          </h4>
        </div>
        <div id="collapseOneTwo" class="faq  panel-collapse collapse" role="tabpanel">
          <div class="panel-body"><p>Das ist die zweite Antwort dazu!</p>
          </div>
        </div>
      </div>
    
    <br/>
    <h3>Überschrift für den zweiten Abschnitt</h3>
    
      <div class="panel panel-default">
        <div class="faq-panel-heading" role="tab" id="headingTwoOne">
          <h4 class="panel-title">
            <button style="text-align:left; white-space:normal;" class="btn btn-block" type="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwoOne">
              <i style="color:red;" class="fa fa-question-circle"></i> Ist das die erste Frage im zweiten Abschnitt?
            </button>
          </h4>
        </div>
        <div id="collapseTwoOne" class="faq panel-collapse collapse" role="tabpanel">
          <div class="panel-body"><p>So ist es, und das ist die erste Antwort im zweiten Abschnitt!</p>
          </div>
        </div>
      </div>
    
      <div class="panel panel-default">
        <div class="faq-panel-heading" role="tab" id="headingTwoTwo">
          <h4 class="panel-title">
            <button style="text-align:left; white-space:normal;" class="btn btn-block" type="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwoTwo">
              <i style="color:red;" class="fa fa-question-circle"></i> Und hier kommt dann die zweite Frage im zweiten Abschnitt nehme ich an?
            </button>
          </h4>
        </div>
        <div id="collapseTwoTwo" class="faq panel-collapse collapse" role="tabpanel">
          <div class="panel-body"><p>Ich denke die Idee ist klar, so geht das jetzt immer weiter!</p>
          </div>
        </div>
      </div>
    
    </div>
    Dazu musste nur wie von GnuZilla beschrieben die bootstrap-collapse.min.js in den Ordner /templates/Honeygrid/usermod/javascript/Global/ geschoben werden, ansonsten waren keine weiteren Scripte notwendig.

    Ein weiteres Problem war, dass lange Fragen aus den Buttons rausgelaufen sind, gerade mobile ging das gar nicht. das habe ich durch
    Code:
    white-space:normal;
    in den Buttons gelöst. Ich sehe gerade, dass ich das zum Testen direkt in die Buttons reingepackt habe. Müsste eigentlich wieder raus und in die allgemeine css-Definition. Naja, funktioniert aber ;-).
     
  14. masson

    masson Aktives Mitglied

    Registriert seit:
    31. März 2020
    Beiträge:
    34
    Danke erhalten:
    0
    Danke vergeben:
    11
    Hallo und vielen Dank für die Anleitung. Ich habe noch das Problem, dass ich die CSS-Angaben nicht eingebunden kriege. Ich habe eine "_usermod-scss" im Verzeichnis "/themes/Honeygrid/styles/system/custom" angelegt. Leider funktioniert das nicht, obwohl in dem Ordner eine TXT-Datei liegt, die genau diese Vorgehensweise beschreibt.
     
  15. barbara

    barbara G-WARD 2014-2020

    Registriert seit:
    14. August 2011
    Beiträge:
    33.578
    Danke erhalten:
    10.418
    Danke vergeben:
    1.498
    Ich habe das hier nur kurz überflogen, aber ich denke Du überschreibst kein bestehenden scss.
    Du legst ein neues an.
    Ich würde das in
    themes/DEIN-THEME/styles/custom/
    in einer
    _akkordeon.scss
    versuchen
     
  16. masson

    masson Aktives Mitglied

    Registriert seit:
    31. März 2020
    Beiträge:
    34
    Danke erhalten:
    0
    Danke vergeben:
    11
    Müsste diese aber nicht noch irgendwie eingebunden werden?
     
  17. masson

    masson Aktives Mitglied

    Registriert seit:
    31. März 2020
    Beiträge:
    34
    Danke erhalten:
    0
    Danke vergeben:
    11
    Ich musste den Cache leeren :)

    Danke!
     
  18. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    26. November 2015
    Beiträge:
    2.466
    Danke erhalten:
    396
    Danke vergeben:
    1.173
    Das sieht sehr schön aus, hast Du gut gemacht :) Ich war da etwas fauler und habe es in Livezilla in die Wissensdatenbank gepackt, aber erfüllt auch den Zweck ;)
     
  19. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    30. Oktober 2015
    Beiträge:
    2.746
    Danke erhalten:
    540
    Danke vergeben:
    408
    Hat das schonmal jemand in Malibu ausprobiert?
     
  20. MosTec

    MosTec Erfahrener Benutzer

    Registriert seit:
    10. Februar 2014
    Beiträge:
    182
    Danke erhalten:
    15
    Danke vergeben:
    23
    Da würde ich mich anschließen.