best way to clean up multiple antlers loops

[fredbouin]

In the below block of code I loop through {{ taxonomy:products }} 3 times which gets a bit messy to look at. Obviously I can't simply put opening and closing taxonomy:products tags on the outside of the code block and remove all the inner ones as it screws up the structure. So I'm wondering if there is a cleaner way to approach something like this..

I was trying things with the as modifier but it didn't seem to do what I wanted, anyway just wondering if I can optimize this type of situation.

(The actual code I'm working on uses alpine which I removed below for clarity, so right now it doesn't necessarily make much sense but you get the gist)

<div class="grid grid-cols-12 {{ taxonomy:products limit='1' }}{{ slug }}{{ /taxonomy:products }}' }">
    <div class="col-span-6 space-y-6">
        {{ taxonomy:products }}
        <div> 
            <h2>
                <button class="{{ slug }}"
                    <span>{{ title }}</span>
                </button>
            </h2>
            <div>
                <p>{{ collection_description }}</p>
                <a href="{{ url }}">view collection</a>
            </div>
        </div>
        {{ /taxonomy:products }}
    </div>
    <div class="col-span-6">
        {{ taxonomy:products }}
            <div class="{{ slug }}">{{ responsive:hero_image }}</div>
        {{ /taxonomy:products }}
    </div>
</div>

[jackmcdade]

You can alias the results of the first {{ taxonomy:products }} tag into a variable (like {{ products }} and then loop through that whenever you want. This isn't tested, but something like this should work:

{{ taxonomy:products as="products" }}
    <div class="grid grid-cols-12 {{ products.0.slug }}">
        <div class="col-span-6 space-y-6">
            {{ products }}
            <div>
                <h2>
                    <button class="{{ slug }}">
                        <span>{{ title }}</span>
                    </button>
                </h2>
                <div>
                    <p>{{ collection_description }}</p>
                    <a href="{{ url }}">view collection</a>
                </div>
            </div>
            {{ /products }}
        </div>
        <div class="col-span-6">
            {{ products }}
                <div class="{{ slug }}">{{ responsive:hero_image }}</div>
            {{ /products }}
        </div>
    </div>
{{ /taxonomy:products }}

[fredbouin]

great! thanks jack, wondering about {{ products.0.slug }} nice way to tidy that up, I haven't seen that syntax before though, is there documentation about it?

[jackmcdade]

Yep! https://statamic.dev/antlers#accessing-data (uses colons but dots work too)