close

Somewhere, in a parallel universe,
the-other-you just clicked on
"Subscribe To Our Monthly Newsletter"

The-other-you seems eager to stay updated with the technological changes.

Please enter your name.
Please enter your email. Please enter your email.

An Easy Approach To Template Partials Using Stash Module

Post by|ExpressionEngine19 October,2020
142 View

As ExpressionEngine developers, we know that the standard way to deal with EE layouts is to compare a template and a page, a template, and a content type. Templates incorporate a header and footer, which are generally done as snippets or embeds, and some content (conceivably inline, potentially utilizing more snippets as well as embeds).

Stash extends ExpressionEngine’s template language with powerful features such as variables, lists, parse-order control, template partials, inheritance, layouts, caching, and more. It will transform the way you think and write templates during ExpressionEngine development.

So we are talking about template partials by using the stash module. Stash allows all you ExpressionEngine developers to stash text and snippets of code for reuse throughout your templates.

What Are The Benefits Of Template Partials?

The main benefits of using the template partials pattern are:

  • Code reuse
  • Clarity/practicality
  • Execution

These three things aren’t easy to separate from each other, of course—what improves one will tend to strengthen the others. So rather than splitting them out into separate sections, let’s look at some code and see the effects in an integrated way.

For Template Partials, we need to install the stash module first and set the path.

Installing Stash

Download the latest version of Stash, unzip it, and move the

system/expressionengine/third_party/stash folder to 
./system/expressionengine/third_party/
  1. In the CP, navigate to Add-ons > Modules and click the ‘Install’ link for the Stash module and the Stash extension.
  2. Create a folder to contain your Stash template files, e.g., ‘stash_templates.’ Ideally, this should be above the public webroot of your website.
  3. Create a folder to contain your Stash static cache files, e.g., ‘static_cache.’ This must be below the public webroot of your website. Set permissions to 777 or change the directory (CHOWN) to the user PHP runs as.

Open your ./system/expressionengine/config/config.php file (EE2) or ./system/user/config/config.php (EE3)(EE4)(EE5), add the following lines at the bottom of the file:

$config['stash_file_basepath'] = '/path/to/stash_templates/';
$config['stash_file_sync'] = TRUE; // set to TRUE to sync stash embed file changes during development
$config['stash_static_basepath'] = '/path/to/static_cache/';

(of course, if you’re using a custom config bootstrap file, add the config items there instead) After installing and configuring the stash file basepath, we need to create the web site’s layout, where developers need to add the website’s global structure.

  1. _layout
  2. pages
  3. includes

Now some helpful _layout(index.html) structure adds the below structure.

<!DOCTYPE html>
<html>
<head>
{if {exp:stash:not_empty name="page_title"}}
    <title>{exp:stash:get name='page_title'}</title>
{/if}
{if {exp:stash:not_empty name="meta_description"}}
    <meta name="description" content="{exp:stash:get name='meta_description'}">
{/if}
</head>
<body>
  {exp:stash:get name="banners"}
    <div class="wrapper">
      {exp:stash:get name='content'}
    </div>
</body>
</html>

Here Are Some Useful Tags

exp:stash:not_empty
For checking the stash variable empty or not

{exp:stash:get}
For showing the data or content which was set by {exp:stash:set}

{exp:stash:set}
Set the value of content with different ExpressionEngine tags. (Channel tags, Channel Categories)

It is a monstrously proficient module; it is useful for reserving labels on a client or whole site level (possibly expanding execution a lot on tag-substantial pages), just as doing some wonderfully muddled things with ordinary articulations when setting or recovering factors. Likewise, it can sabotage the ExpressionEngine parse request by parsing different labels inside reserve labels and pre-parsing aspects inside various labels.

{stash:embed}
This is similar to an EE embed,

Example.

{exp:stash:embed name="my_template" stash:my_var="my_value"}

{!-- inside my_template inline variables can be accessed like so --}
{stash:my_var}

Here Are Some Structures We Can Use With Partials

1. Template Setup

First, of course, set up your template group in a way that satisfies your instincts. We use Structure for most of my sites, so there’s no integral binding of a template team to a section or channel. On large sites, we may also use that type of setup anyway because it’s convenient now not to have one directory with the entirety in it. (Some partials may also be used throughout channels, so assume about where to put those.) However, on average-sized sites, we tend to use one listing for wrappers and one for partials, alternatively than splitting the partials out.

Examples of both of these “typical” setups are shown below. Note that in each case, wrappers are for all of the wrapper templates; you should continually hold those in a separate template group. We’ve left out index.html templates in Group where they’re not sure being used.

Average size site

wrappers
.home.html
.interior.html
.modals.html
layouts
detail-pages.html
forms.html
listings.html
section-main-pages.html

Large Site

blog
article.html {!-- partial --}
events
index.html {!-- partial --}
detail.html {!-- partial --}
forms
form.html {!-- partial --}
global
listings.html {!-- partial --}
wrappers
.home.html
.interior.html
.modals.html
static-pages
detail.html {!-- partial --}

The template partials pattern requires thinking inside-out about your EE templates, at least at first. You can see that your wrapper templates are all marked as hidden—that’s the first signal of that inside-out thinking. In no way will you name any wrapper template directly; you will solely use them in embeds.

2. Create Partial Folder
3. In the Template folder, Create pages.group
4. Look into the repeated section which comes into each page
5. Separate its HTML Structure and create a template in a partial folder
6. After set the HTML Structure wrap with “{exp:stash:set name=”my_var”}your html{/exp:stash:set}”
7. Then get the data by “{exp:stash:get name=”my_var”}”

Conclusion

The radiant If:Else(http://devot-ee.com/add-ons/ifelse) and Switchee(https://devot-ee.com/add-ons/switchee), the two of which handle contingent rationale in a manner that is better than EE’s local parsing of conditionals. Both are incredible instruments for extending your collection of layout methods and for dealing with those events when you need contingent rationale in your formats. You should find this happens altogether less frequently when utilizing the format partials design, yet it will occur at any rate periodically.

In case you have any questions regarding this concept, because sometimes even an ExpressionEngine developer needs a friend, you can always reach out to ZealousWeb to make your ExpressionEngine development easier.

FAQ

What is the Useful or Supporting Plugin with a Stash?

Use Switchee and Structure plugin with a stash. This combination makes your website more flexible and user-friendly.

Does stash have a caching module?

Yes, developers can wrap the stash code with “{exp:stash:cache}.”


Speak Your Mind

Please enter your comment.
Please enter your name.