Tabel omzetten naar JSON

Onze tekstblokken zijn erg handig om bijvoorbeeld USP's beheerbaar te maken vanuit het platform. Ondanks dat de tekstblokken overal te gebruiken zijn, zit er wel de limitatie aan dat dit alleen tekst kan bevatten. Op sommige plekken is het erg handig om juist een JSON-structuur te gebruiken, zodat je bijv. over de data kan loopen.

Neem als voorbeeld een FAQ-blok die je kunt openen en sluiten door op de vraag te klikken. Om dit juist op te zetten zou je meerderen tekstblokken kunnen maken, en over deze tekstblokken kunnen loopen. Dit is echter voor de gebruiker erg veel werk om bijvoorbeeld tien tekstblokken bij te werken of aan te maken. Een makkelijkere manier is om een tabel in een tekstblok toe te voegen. In deze tabel kunnen we dan twee kolommen maken voor de vraag en het antwoord.

Tekstblok aanmaken

Ga naar het dashboard van je shop en klik op 'Tekstblokken'. Klik vervolgens op 'tekstblok toevoegen'. Vul in het veld 'Tekstblok' bijvoorbeeld een titel in die boven het FAQ-blok komt te staan, bijv. 'Veel gestelde vragen over verzending'. Vul vervolgens bij unieke naam een unieke naam (identifier) in die je binnen het template aan kunt roepen, bijv. 'shipping_faq'.

Bij het veld 'Tekstblokinhoud' gaan we de tabel opmaken. Dit kun je doen door onderstaande GIF te volgen. Maak een tabel met twee kolommen.

Vul de rijen nu met in de eerste kolom een vraag, en in de tweede kolom een antwoord en sla het tekstblok op.

In Twig de tabel omzetten naar JSON

Nu we een tekstblok met daarin een tabel hebben aangemaakt, kunnen we deze in de twig aanroepen en de content ervan in een variabele opslaan.

1{% set faq_tekstblok = blocks.shipping_faq.content %}

Om de JSON data ergens in te kunnen bewaren maken we ook hiervoor een variabele aan. We maken hem aan met een lege array waaran we de data gaan toevoegen.

1{% set faq_json = [] %}

Om bij de rijen te komen gaan we eerst een heleboel HTML-elementen strippen die we niet meer nodig zijn. Dit doen we d.m.v. het replace filter. We splitten deze vervolgens op '</tr>' om de rijen als array op te maken. De '[:-1]' zorgt ervoor dat de lege rij aan het einde niet wordt meegenomen. We hebben nu een array met twee entries die de twee cellen van elke rij bevat.

1{% set faq_tekstblok_rows = faq_tekstblok|replace({ "<table>": "", "</table>": "", "<tbody>": "", "</tbody>": "", "<tr>": "", "<td>": "" })|split("</tr>")[:-1] %}

Over deze rijen kunnen we nu een loop gaan maken om de variabele 'faq_json' te gaan vullen. We splitten eerst de rij op om tot de cellen te komen. Dit doen we door te splitten op '</td>'. Ook hier trimmen we de lege entry van de resulterende array. Om deze cellen als vraag en antwoord in 'faq_json' te zetten, gebruiken we het merge filter. Aan dit filter geef je een array of object (Dit hangt ervan af of de initiële waarde een object of array is) als parameter mee. Het filter voegt in geval de opgegeven array samen met wat er al in 'faq_json' staat. Dit wordt voor elke rij gedaan dankzij onze loop.

1{% for row in faq_tekstblok_rows %}
2    {% set row = row|split("</td>")[:-1] %}
3    {% set faq_json = faq_json|merge([{ "vraag": row|first|trim, "antwoord": row[1]|trim }]) %}
4{% endfor %}

Het resultaat dat in 'faq_json' nu is opgeslagen, is een array met twee objecten. Beide objecten hebben elk een 'vraag' en 'antwoord.

1[
2  {
3    vraag: "Hoelang heb ik om mijn bestelling retour te zenden?",
4    antwoord: "Je hebt standaard 30 dagen om je bestelling retour te zenden."
5  },
6  {
7    vraag: "Moet ik verzendkosten betalen?",
8    antwoord: "De verzendkosten nemen wij voor onze rekening."
9  }
10]

Met deze variabele kun je nu aan het werk en gebruiken binnen je Twig code. Je kunt nu bijvoorbeeld een loop maken waarin je een accordeon opmaakt op basis van Bootstrap.

1<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
2    {% for item in faq_json %}
3        <div class="panel panel-default">
4            <div class="panel-heading" role="tab" id="heading-{{loop.index}}">
5                <h4 class="panel-title">
6                    <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-{{loop.index}}" aria-expanded="false" aria-controls="collapse-{{loop.index}}">
7                        {{item.vraag}}
8                    </a>
9                </h4>
10            </div>
11            <div id="collapse-{{loop.index}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-{{loop.index}}">
12                <div class="panel-body">
13                    {{item.antwoord}}
14                </div>
15            </div>
16        </div>
17    {% endfor %}
18</div>