Grouping replicator sets in Statamic

As we venture to create highly customizable websites tailored to our clients' needs at Lucky Media, we often encounter various challenges. One of our primary objectives is to empower clients with the ability to edit their website content seamlessly, without the risk of compromising site functionality.

Embracing Statamic: The Versatile Flat-File CMS

Our journey led us to the discovery of Statamic—a cutting-edge flat-file Content Management System (CMS) that seamlessly integrates as a Laravel package. Statamic stands out due to its incredible flexibility; it arrives with a comprehensive set of features out-of-the-box, yet provides the freedom to be extensively customized to fit any project's requirements, thanks to its Laravel package foundation.

In this article, we will delve into a strategy for effectively organizing your sets within the Replicator Field to enhance usability.

Addressing Complexity: Simplifying the Replicator Field in Statamic

One of our recent projects involved a client with a particularly intricate website, encompassing over 90 pages. The client utilized a collection of pre-designed blocks, accessible from the Control Panel (CP), to construct each page. For developers familiar with Statamic, the limitations of the Replicator Field when dealing with large numbers of sets are well-known. Presenting all available sets results in a cumbersome list that can be daunting to navigate.

Before we reveal our new grouping technique, here's a glimpse at the overwhelming array of sets we encountered initially:

In our project we had roughly 40+ sets and the above picture is a bit hard to read through.

The Solution: Grouping Sets in a Replicator Field

So how can we group all of this? Natively Statamic doesn't support this yet although an idea was already submitted to the ideas repo. Until there is an official way to group sets, let's take a look at our solution.

To save some time, I will assume you already have a Statamic project running, in our case we use Tailwind CSS for styling but you are free to use anything you want.

Setting Up the Blueprint Configuration

In the page blueprint, we have the following configuration:

As you can see for now we only have one replicator field called blocks that we will add new sets into it.

Grouping Sets: A Practical Approach

We start by grouping our sets, as you saw in the picture, we have Header Sections, Featured Sections, etc.. and for now, they are ordered as 1, 2, 3 etc. But, we will start by writing just the category name in our case it will be like this:

• Header Section

• CTA Section

• Featured Section

• Logo Cloud

• Testimonial Section

• Partner Section

• Gallery Section

Here we have only 6 categories, and inside them, we can have as many variations as we want. Usually, you might have 2-3 variations for each block depending on the scale of your website. So how do we target each file in these sets? In our case, we decided to go with the button group but you are free to use select for a more compact view.

Configuring Sections: An Example with CTA Section

Here is a config for one of our sections, the CTA Section:

As you can see for our CTA Section we have a button group for each version, the values of each option represent one file in our template. Basically, cta_section_1 should be under partials/sets/cta_section/cta_section_1.antlers.html but we will touch on this a bit later. Note that there is a default value on our button group, this is to mitigate any error when used in a Live Preview window.

Also very important for your button group (or if you prefer select) to have a handle name of the version as we will use this in the frontend. Our CTA Section has a title, description and a link field.

You can go into more detail and add more fields for each CTA field and then trigger their visibility by the version value but that is up to you.

Organizing Files in the Frontend

Here is how we organize our files in the frontend, under resources/views/ we have a folder for sets. Under sets we have the following structure:

• cta_section

  • cta_section_1.antlers.html

  • cta_section_2.antlers.html

  • cta_section_3.antlers.html

• logo_cloud

  • logo_cloud_1.antlers.html

  • logo_cloud_2.antlers.html

  • logo_cloud_3.antlers.html

You can do this for all the block categories that you have and create different versions for each one of them.

Please note that the root folder is the name of the handle, and the file names should be based on the options that you provided under versions in the config above.

Displaying Sets in the Frontend

To display each set in our frontend, we have to go to resources/views/pages/show.antlers.html and add the following code:

The Result: A Cleaner and User-Friendly Interface

And now in our replicator for each section we only have the name of the category:

This is way cleaner and more user-friendly than what we had before.

In our control panel, every section is neatly displayed and you can select different versions for each section in a simple way. Here is what our CTA Section looks like with 3 versions:

Check the code and look at a basic example repo here.

Bring Your Ideas to Life 🚀

Kickstart Your Statamic Project with the #1 Statamic Agency

Are you planning a new Statamic project or thinking about migrating your WordPress site to Statamic? Learn more about our expertise as a renowned Statamic development agency.