Faq's via CGSimpleSmarty

Binnen de CMS Made Simple Forge heb ik tot op heden geen handig werkende Frequently Asked Questions module gevonden. In deze blog laat ik zien hoe je op een alternatieve manier veel gestelde vragen (faq's) op je website kunt weergeven.

De basis bestaat uit een content pagina (hoofdpagina) met hieronder voor iedere faq een subpagina. Met behulp van CGSimpleSmarty een module met handige Smarty functies haal ik de gegevens van alle subpagina's op en geef deze op de hoofdpagina weer.

Stappenplan

Stap 1: Installeer CGSimpleSmarty

• Extensions -> Module Manager [Available Modules] [C]
• CGSimpleSmarty install.

Stap 2: Maak een nieuwe pagina aan met als alias "faq"

• Ga naar Content -> Pages -> [Add new Content]
• Plaats in het content veld: {global_content name='faq'}
• Onder de tab [Options] / Page Alias vul je: faq in.

Stap 3: Maak onder de faq pagina een aantal vraag en antwoord pagina's aan

• Ga naar Content -> Pages -> [Add new Content]

Title: Vraag 01
Content: Antwoord 01
etc.....

Wanneer je van plan bent om je vragen en antwoorden in categorieën te verdelen dan kan je werken met Extra Page Attributes.

• Content -> Pages -> [Edit page] -> [Options tab] Extra Page Attribute:

category_01 etc.....

Stap 4: Maak een global content block aan met als naam: "faq"

• Ga naar Content -> Global Content Blocks [Add Global Content Block]

Onder name vul je: faq in.
Onder content vul je in:

{$cgsimple->get_children('faq','','items')} 

{if count($items)} 

<h1>Category 01</h1>

{foreach from=$items item='item'} 
{if $item.show_in_menu} 

{$cgsimple->get_page_content($item.alias,'extra1', '_extra1')}

{if $_extra1 == 'category_01'}
<h2 class="trigger"><a href="{$smarty.server.REQUEST_URI}#">{$item.menutext}</a></h2>

{$cgsimple->get_page_content($item.alias,'', '_content')}

<div class="toggle_container">
{$_content}
</div>

<div class="hr"></div>

{/if}


{/if} 
{/foreach}

Stap 5: Met Jquery de antwoorden in en uit laten klappen

Met de volgende JavaScript / Jquery code worden alle antwoorden bij het inladen van de pagina onzichtbaar gemaakt. Op het moment dat er op de header (h2) geklikt wordt het antwoord via een animatie (slideToggle) zichtbaar.

<script src="/js/jquery-min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript"> 
[literal]
    $(document).ready(function() {

            $(".toggle_container").hide();

            $("h2.trigger").click(function() {
                    $(this).toggleClass("active").next().slideToggle("slow");
            });
    });
[/literal]    
</script>

Documentatie

• CG Simple Smarty documentatie