Tabs beim Artikeldetail (mobile Ansicht) immer geschlossen

Thema wurde von GlobenShop, 9. Mai 2024 erstellt.

  1. GlobenShop

    GlobenShop Erfahrener Benutzer

    Registriert seit:
    31. Januar 2024
    Beiträge:
    76
    Danke erhalten:
    10
    Danke vergeben:
    16
    Hallo zusammen,

    bei der mobilen Version des Shops werden Tabs beim Artikel ja untereinander dargestellt.
    Der erste ist immer geöffnet, der zweite und ... immer geschlossen. Beim Klick darauf, schliesst sich der erste und der geklickte öffnet sich. Soweit so gut.

    Ist es möglich (z.B. Java-Script), dass in der mobilen alle Tabs zunächst geschlossen sind?

    Der Grund hierfür ist, wenn der erste Tag einen langen Inhalt darstellt, dann bekommt der User evtl. nicht mit, dass unten noch ein weiterer Tab vorhanden ist.

    Wie habt ihr die Problematik gelöst?
     
  2. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    17. Juli 2022
    Beiträge:
    60
    Danke erhalten:
    5
    Danke vergeben:
    28
    Moin,
    dies würde mich auch interessieren. Gibt es da eine Möglichkeit?

    VG, Tamay
     
  3. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    972
    Danke erhalten:
    831
    Danke vergeben:
    302
    Dafür muss die active-Klasse mindestens aus dem div.tab-pane entfernt werden.

    /themes/Malibu/html/system/product_info_product_description.html

    Bei meinen Tests hat es gereicht,
    Code:
    <div class="tab-pane active">
    zu ersetzen durch
    Code:
    <div class="tab-pane">
    sowie
    Code:
    <div class="tab-pane{if !$show_description_tab && $smarty.foreach.tabs_loop.first} active{/if}">
    durch
    Code:
    <div class="tab-pane">
    Da geht's irgendwie drum, ob das Beschreibungs-Tab angezeigt werden soll oder nicht. Es gibt noch 2 weitere Stellen für ein GXCustomizer-Tab und für Produktbewertungen. Aber die dürften ja eh selten erstes Tab in Erscheinung treten.

    In Honeygrid dürfte es genauso aussehen. Die Theme-Datei bzw. die benötigten Smarty-Blöcke sind update-sicher zu überladen durch ein Child-Theme oder Modul.
     
  4. Anonymous

    Anonymous Erfahrener Benutzer

    Registriert seit:
    5. Mai 2022
    Beiträge:
    1.638
    Danke erhalten:
    615
    Danke vergeben:
    232
    Das hatte ich auch schon versucht. Aber dadurch ist der Beschreibungs-Tab am Desktop auch geschlossen.
     
  5. Dominik Späte

    Dominik Späte Erfahrener Benutzer

    Registriert seit:
    16. Oktober 2018
    Beiträge:
    972
    Danke erhalten:
    831
    Danke vergeben:
    302
    Ups :rolleyes: Ja, sorry :) Dann mit JavaScript:

    Code:
    window.addEventListener('load', function(){
        if (window.innerWidth <= 768) {
            var activeTabPane = document.querySelector('.product-info-description .tab-content .tab-pane.active');
            if (activeTabPane) {
                activeTabPane.classList.remove('active');
            }
        }   
    });
    Als Modul zu packen in sowas hier:
    /GXModules/Entwicklername/Modulname/Shop/themes/All/Javascript/ProductInfo/mobilTabEinklappen.js