Smarty - Best way to create reusable components

33 Views Asked by At

We are using Smarty for our UI in our platform which is very complex, used by thousands of users per hour, and we're looking for a way to uniformize a bit more our UI by creating some sort of component sets.

We did this for a couple of elements, for example Buttons, Text Inputs and complex elements by using the registerPlugin to register many blocks and functions.

For example, using the following in our Smarty templates:

{Button title="Try now"}

Will run this:

public static function simple($params, $smarty)
{
    $smarty->assign('button', $params);
    $smarty->caching = false;
    return $smarty->fetch(self::$componentsPath . '/UI/buttons/btn-simple.html', false);
}

Results in:

<button type="button" class="btn btn--primary">
    <span class="btn__label">Try now</span>
</button>

With this, we make sure that all our buttons will look the same, but I get the impression we are overusing the registerPlugin and $smarty->fetch functions even for some things that could be simple.

This was most notable when today we had to implement a Card element. The Card itself could be really simple, but it may have an header, content and actions elements inside of it.

So, for example, to get the following HTML

<div class="card">
    <div class="card__header">
        <img class="card__logo" src="test.jpg" alt="title">
        <div class="card__titles">
            <div class="card__label">Title Grayed</div>
            <div class="card__title">Title Main</div>
            <div class="card__subtile">Title Subtitle</div>
        </div>
    </div>
    <div class="card__content">
        Add some custom content
    </div>
    <div class="card__actions">
        <button class="btn btn--primary">Try now</button>
    </div>
</div>

We would simply do the following to make sure all our cards would look the same:

{Card}
    {CardHeader logo="test.jpg" title="Title Main" label="Title Grayed" subtitle="Title Subtitle"}
    {CardContent}
        Add some custom content
    {/CardContent}
    {CardActions}
        {Button title="Try now"}
    {/CardActions}
{/Card}

It does look better, but I don't know if it feels right to do so many $smarty->fetch to in the end, draw only a couple <div> elements...

Is there any better way of doing it or any suggestion?

0

There are 0 best solutions below