MODX Chunks and Templates Configuration

MODX Chunks and Templates Configuration

Chunks are reusable HTML blocks without PHP logic. Templates are HTML wrappers for pages with placeholders. Proper organization of chunks and templates is the foundation of a maintainable MODX project.

Chunk Organization

Name chunks with prefixes to categorize by type:

Header and footer:
header               - main header
header.mobile        - mobile header version
footer
footer.minimal       - minimal footer for landing pages

Cards and blocks:
card.product         - product card
card.article         - article card
card.team            - employee card
block.cta            - call to action
block.features       - features block
block.testimonials   - testimonials

Forms:
form.contact         - contact form
form.callback        - callback form

Email templates:
email.contact        - email after request
email.order          - order confirmation

Product Card Chunk

[[- card.product ]]
<article class="product-card">
    [[+image:notempty=`
    <figure class="product-card__image">
        <a href="[[+link]]">
            <img src="[[+image]]" alt="[[+pagetitle]]" loading="lazy" width="400" height="300">
        </a>
    </figure>
    `]]

    <div class="product-card__body">
        <h3 class="product-card__title">
            <a href="[[+link]]">[[+pagetitle]]</a>
        </h3>

        [[+introtext:notempty=`<p class="product-card__desc">[[+introtext]]</p>`]]

        [[+price:notempty=`
        <p class="product-card__price">
            [[+price:number_format=`0,.`, ` `]] ₽
        </p>
        `]]

        <a href="[[+link]]" class="btn btn--primary">More Info</a>
    </div>
</article>

Templates: One or Many?

Recommended approach — multiple specialized templates:

Passing Data from Template to Chunk

[[- In template ]]
[[$block.features?
    &title=`Why Choose Us`
    &items=`[[*tv.features_json]]`
    &columns=`3`
]]

[[- Chunk block.features ]]
<section class="features features--[[+columns]]col">
    <h2>[[+title]]</h2>
    <div class="features__grid">
        [[+items]]
    </div>
</section>

Chunk Conditions

[[- Show "New" badge if resource created less than 30 days ago ]]
[[+createdon:gt=`[[*id:math=`[[!+current_timestamp]] - 2592000`]]`:then=`<span class="badge badge--new">New</span>`]]

[[- Or through TV ]]
[[+tv.is_new:is=`1`:then=`<span class="badge">New</span>`]]

Storage in Files

assets/
├── chunks/
│   ├── header.html
│   ├── footer.html
│   └── card.product.html
└── templates/
    ├── home.html
    └── inner.html

In chunk editor: Source Type = File, Filename = assets/chunks/header.html.

Timeline

Creating and organizing 15–25 chunks for typical website — 3–5 days (as part of template development).