VDL Webdevelopment 

Specificaties en andere tabellen

Bij het migreren van websites kom ik nogal eens tabellen tegen. Vaak om specificaties toe te voegen aan een product maar soms ook om andere informatie gestructureerd weer te geven. Nu zijn tabellen heel handig maar voor de eigenaar van een website zijn ze lastig te beheren. Een WYSIWYG-editor is vaak niet groot genoeg en de kans dat de weergave heel lelijk wordt is groot. Dat kan veel eleganter.

Laatst moest ik een site migreren met product specificaties. Op iedere productpagina waren tabellen opgenomen met de specificaties er in. De positie van de tabellen was niet consistent en eigenlijk vond de beheerder het er ook niet uitzien. Ik heb daarop een oplossing gebouwd met een repeater-field en deze in een apart tabje geplaatst op de product bewerkpagina.

repeater-field-edit.jpg

Een repeater-field kun je toevoegen via de builder plugin. Je maakt dan eerste een extra veld aan in de databasetabel. Je voegd daarna een formulierelement toe door te kiezen voor Add Control > Widgets > Repeater. Bij het vak 'Field name' vul je de naam van de databasekolom in. In het repeater veld kies je voor 'Add control' en kies voor een tekstveld.

Het tekstveld geef je een naam en een label. Dit herhaal je nog een keer voor de tweede kolom in je specificatie-tabel (en daarna eventueel nog eens etc.). Het repeater veld is daarna beschikbaar bij het bewerken van een backenditem in dit model. Er kan alleen og geen waarde worden opgeslagen. Het model moet nog weten dat de informatie voor dit element als JSON moet worden weggeschreven.

Dus voeg je onderstaande code toe aan het model:

  protected $jsonable = ['specificaties'];

Als het goed is worden de waarden nu allemaal opgeslagen.

Repeater veld aan een bestaande plugin toevoegen

Als je een bestaande plugin hebt waar je de repeater wilt toevoegen volg je onderstaande stapppen.

Maak een veld aan in de database (met de naam 'specificaties' bijvoorbeeld) Voeg onderstaande code toe aan het .yaml-bestand

tabs:
    fields:
        specificaties:
            label: Specificaties
            oc.commentPosition: ''
            prompt: 'Add new item'
            span: auto
            type: repeater
            tab: 'Tab 1'
            form:
                fields:
                    specificaties:
                        label: 'Kolom 1'
                        oc.commentPosition: ''
                        span: auto
                        type: text
                    inhoud:
                        label: 'Kolom 2'
                        oc.commentPosition: ''
                        span: auto
                        type: text

Voeg deze code toe aan je model:

protected $jsonable = ['specs'];

Daarna zal alles werken. Je kunt bij het bewerken van je item zoveel tabelrijen toevoegen als je wilt. Alle data zal in dat ene veld worden opgeslagen in JSON-formaat. Je kunt vervolgens in je template via een for-loop de waarden in je HTML opnemen.

<table>
{% for specificatie in record.specificaties %}
    <tr>
     <td class="labelcol">{{ specificatie.specificaties }}</td><td>{{ specificatie.inhoud }}</td>
    </tr>
{% endfor %}
</table>

In dit geval heb ik tekstvelden gebruikt om een tabel te genereren. Maar je kunt ook andere velden gebruiken.

Posted in October CMS on Mar 23, 2017