Grouping replicator sets in Statamic

In our quest to build highly customizable websites for customers we stumble in a lot of roadblocks. Giving the client the power to edit the content without breaking the website is one of our goals at Lucky Media.

Discovering Statamic: A Flat-File CMS

Luckily we discovered Statamic, which is a flat-file CMS that runs as a Laravel package and you can customize it in every way possible. It comes battery included, but you can always customize it to your own needs because it's built as a Laravel package.

The Challenge: Managing Large Sets in Replicator Field

Just recently, we had a client with a very complex website and with as many as 90+ pages. The client builds every page with the help of ready-to-use blocks that we made available from the CP. If you already use Statamic as a developer, you know the current limitation of the Replicator Field and large sets. If you include all the sets then you end up with a very large list of sets which is extremely difficult to navigate. In this post, we will talk about how to group your sets in a replicator field.

Here is a quick picture of what we saw before using the new technique for grouping them:

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.

Lucky Media is proud to be recognized as the #1 best Statamic Agency by Clutch, a leading B2B ratings and reviews platform.

Our Services and Specializations

At Lucky Media, we offer a range of services including website development, web application development, and mobile apps development. We specialize in Statamic, React Native, Next.js, AI and ML solutions. We also provide staff augmentation and TALL stack development services.

Case Studies: Our Work in Action

For more insights into our work, check out our case studies on revolutionising lead generation with AI, customized coaching site, healthcare digitization, next-level performance, lead generation and patient journey, WordPress to Statamic migration, and improving user experience. These case studies provide a glimpse into how we tailor our technology choices to meet specific client needs and deliver exceptional results.