Back to topic list

Templatitator

Templatitator helps you structure your content in an object-like fashion.

Example

Let us have a list of animals:

{
    animals: [
        {
            animal_type: 'Dog',
            name: 'Rufus',
            barks: true
        },
        {
            animal_type: 'Parrot',
            name: 'Pedro',
            talks: false
        },
    ]
}

and you want to be able to add either a dog or a parrot to the list. Notice their properties are different, dog can bark and parrot can talk. What you do is you create templates for each of these animals:

{
    animal_types: {
        dog: {
            animal_type: 'dog',
            name: '',
            barks: false
        },
        parrot: {
            animal_type: 'parrot',
            name: '',
            talks: false
        },
    }
}

And then use the cool templatitator feature to enable user to select from these two animal types:

{
    $animals_templatitator: '@@animal_types',
    animals: []
}

Now user has a nice way to add either a parrot or a dog to his animal list:

Test it out

If you just want to quickly see how this works in your project, just copy/paste this into your context file:

{
    $animal_types_hidden: true,
    animal_types: {
        dog: {
            $animal_type_type: 'title',
            animal_type: 'dog',
            name: '',
            barks: false
        },
        parrot: {
            $animal_type_type: 'title',
            animal_type: 'parrot',
            name: '',
            talks: false
        },
    },
    $animals_templatitator: '@@animal_types',
    animals: [],
}

Templates folder

Whatever you place in global/templates folder will not be visible in admin ui, what is very convenient for storing templatitator templates, such as the animal types above.

Splitting templates into multiple files

Who wants to have a huge file with ten templates, right? You can easily split the templates into more files:

/cms/global/templates/animals/dog.js

animal_types: {
    dog: {
        $animal_type_type: 'title',
        animal_type: 'dog',
        name: '',
        barks: false
    },
},

/cms/global/templates/animals/parrot.js

animal_types: {
    parrot: {
        $animal_type_type: 'title',
        animal_type: 'parrot',
        name: '',
        talks: false
    },
},

enduro will merge both dog and parrot into single animal_types object. Since it's located in cms/global directory it will be accessible by:

{
    $animals_templatitator: '@@global.animal_types',
    animals: [],
}
Back to topic list

Shout out to pexels and freepik