MODX chunks

chunks - what are they and how to use them Website development
Chunks are small pieces of code that can be reused across multiple pages of a site. They function similarly to files or "blocks" in other content management systems.

Chunks in MODX can contain any HTML code, CSS styles, JavaScript scripts and other elements necessary to display a page. They are primarily used to separate the code to make it easier to navigate, for example, to put the code of the header and footer of the site, content blocks and much more in them.

Chunks cannot contain any PHP logic directly, but they can contain calls to Snippets, which are executable bits of PHP code that produce dynamic output.

How to create a chunk

Creating a chunk in MODX is very simple. To do this, go to the element tree, select the “Chunks” tab and click on “+” to create a new chunk.

How to create a new chunk in MODX 3

You can also right-click on the chunk tab to open the context window.

Create a chunk

Then you can add the necessary code to it and save.

Usage

Once you’ve created a chunk, you can use it on any page on your site or in templates using the [[$ChunkName]] tag or [[!$ChunkName]] if you want the chunk to be called uncached. For example, if you created a chunk called “Header”, you’d add it to a page by inserting the [[$Header]] tag in the right place in your page template.

You can also pass properties to a chunk. Let’s say you had a chunk called intro with the following content:

Hello, [[+name]]. You have [[+messageCount]] messages.

You could populate these values ​​with:

[[$intro? &name=`Sergey` &messageCount=`12`]]

Which will output:

Hello Sergey. You have 12 messages.

You could take it a step further by adding Template Variables which allows the user to specify a custom name for each resource:

[[!$intro? &name=`[[*usersName]]` &messageCount=`[[*messageCount]]`]]

or in the chunk itself:

Hello [[*usersName]]. You have [[*messageCount]] messages.

Processing a Chunk via API

Chunks are also often used to format the output of snippets. A chunk can be processed from a snippet using the process(); function, for example, given the following chunk named rowTpl:

<tr class="[[+rowCls]]" id="row[[+id]]">
<td>[[+pagetitle]]</td>
<td>[[+introtext]]</td>
</tr>

The following code snippet extracts it and processes it with an array of properties for all published resources and returns the results formatted as a table, setting the “alt” class for the even rows:

$resources = $modx->getCollection('modResource',array('published' => true));
$i = 0;
$output = '';
foreach ($resources as $resource) {
$properties = $resource->toArray();
$properties['rowCls'] = $i % 2 ? '' : 'alt';

$output .= $modx->getChunk('rowTpl',$properties);
$i++;
}
return '<table><tbody>'.$output.'</tbody></table>';

Modifying a chunk via API

Chunks can also be manipulated using the MODX API:

<?php
/* create a new chunk, give it some content and save it to the database */
$chunk = $modx->newObject('modChunk');
$chunk->set('name','NewChunkName');
$chunk->setContent('<p>This is my new chunk!</p>');
$chunk->save();

/* get an existing chunk, modify the content and save changes to the database */
$chunk = $modx->getObject('modChunk', array('name' => 'MyExistingChunk'));
if ($chunk) {
 $chunk->setContent('<p>This is my existing chunks new content!</p>');
 $chunk->save();
}

/* get an existing chunk and delete it from the database */
$chunk = $modx->getObject('modChunk', array('name' => 'MyObsoleteChunk'));
if ($chunk) $chunk->remove();
?>

Practice — breaking a static html template into chunks

Don’t create hundreds of chunks, as many recommend, because this creates loads, and it becomes inconvenient to administer the site. Take out only those layout elements that can change later.

Usually the entire appearance of the site is built on one design (template), i.e. the header, menu, footer of the site are the same on all pages (continuous), the internal content changes, the most ideal option for breaking it up, in my opinion, is the following.

We take out the entire template code (for now we only have one “Initial template”, see Template Integration) into a separate tpl chunk.

Quickly create a tpl chunk and transfer the code from the template to it

Then we call this chunk in the template itself [[$tpl]] and save it.

Call the chunk in the template and save it

If you now go to the main page, everything will be the same (it is exactly the same with all the transferred design will load).

Next, open the chunk tpl and cut (or copy) everything from it except for the through elements (usually this is everything except the header and footer), in my case this is everything that is in the main block, after which we quickly create a chunk with the name tpl.1 and paste this code into it and save.

Transferring non-through content to a new chunk

I did not touch the hero section, since it is outside the main and is used only on the main page, we will later we will take it out, or if you want, you can immediately take it out to the hero chunk and call it, for example, using the is modifier: [[*id:is=`1`:then=`[[$hero]]`]].

In place of the cut code, insert this construction [[$tpl.[[*template]]]] and save the chunk.

Save the updated chunk

Then go to the main page – it should load exactly the same as before breaking it into chunks.

The logic of this [[$tpl.[[*template]]]] construction: [[*template]] is a call to the standard modx field: id of the template that uses the resource (in our case, this is the main page with the Initial template, which has id = 1).

template id

Therefore, MODX turns [[$tpl.[[*template]]]] into a call to our chunk [[$tpl.1]].

What is all this for? In the future, we will create additional templates (for standard pages, for articles, etc.), we will call the tpl chunk in all of them – since we have a header, footer and other cross-cutting elements that are present on all other pages. Each new template will have its own id, therefore, we will create additional chunks tpl.2, tpl.3, …, tpl.7 and enter the missing content in them.

This will greatly simplify the administration of the site, for example, we need to connect a metric counter or change something in the header, we go to the tpl chunk, make changes and they are immediately reflected on all pages of the site.

Next, I suggest taking a closer look at what templates are and creating basic templates for other types of content.

Rate article
MODX 3
Add a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.