Template zum FAQ-Manager als Accordion auslegen

Lesezeit 4 min

Nicht jedes Template ist exakt gleich gebaut. Auch die Darstellung der Informationen auf der Detailseite können nicht nzr als Tabs sondern als Accordion ausgelegt werden. Das FAQ-Plugin bringt einige Templates mit um es an das eigene Design und Struktur anzupassen.

Templates für Accordion-Darstellung vorbereiten

Die Templates zum Plugin findet man unter
/includes/plugins/southbridge_faq/version/1xx/frontend/themes/406/

Für unser Vorhaben brauchen wir zwei Templates

  • tab_faq_head.tpl
  • tab_faq.tpl

Template tab_faq.tpl anpassen

Öffne die Vorlage und passe die Struktur wie folgt an:

<div class="panel panel-default">
    <div class="panel-heading" role="tab" id="tab-faq-name">
        <p class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion-detail" href="#tab-faq" aria-expanded="false" aria-controls="tab-faq">
                {$tabName} ({$artikelAnzahl})
                <span class="pull-right glyphicon glyphicon-chevron-down"></span>
                <span class="clearfix"></span>
             </a>
        </p>
    </div>
</div>

Die Struktur deines Accordions kann evtl. etwas anders aussehen. Passe sie entsprechend deinem Template an.

Template tab_faq.tpl anpassen

Öffne die Vorlage und passe die Struktur wie folgt an:

<div id="tab-faq" class="panel-collapse collapse" role="tabpanel" aria-labelledby="tab-faq-name" aria-expanded="true">
    <div class="panel-body">

    <div id="faq" class="jtl4">
        {foreach name=faqTab from=$tablist item=liste}
        <h3>{$liste->FAQItem->cName}{$liste->cName}</h3>
        <div class="description bottom10">{$liste->FAQItem->cBeschreibung}{$liste->cBeschreibung}</div>
        {if $liste->FAQ}
            {foreach name=fa from=$liste->FAQ item=f}
                <strong><span class="fa fa-angle-down"></span> {$f->cName}</strong>
                <div style="margin:10px 0 15px;">
                    {$f->cBeschreibung|stripslashes}
                </div>
            {/foreach}
        {/if}
        {/foreach}
    </div>

    </div>
</div>

Einstellungen der Selectoren anpassen

Jetzt ist es an der Zeit die Einstellungen, wo die FAQ angezeigt werden entsprechend anpzupassen. Der Überschrift wird als Erster erstellt und bekommt den Selector des Accordions. Die FAQs müssen nach der Überschrift platziert werden und somit direkt nach der Überschrift.

TAB-Selector für Überschrifte (Detailseite): #accordion-detail
TAB-Selector für Body (Detailseite): #accordion-detail .panel-default:last-child