Category Parent & Children Loop Layout Help

Question

I'm trying to create a specific layout that makes use of categories and category children. I'm trying to use GW Code Categories but can't seem to make the layout work as I need it to.

I basically need to loop through parent categories with title & description and then within that loop, go through all child categories and display title, description & image.

This is the code to be looped. I've put in descriptive variables to illustrate what I'm trying to do.

<!-- This is the main parent category loop -->
<div class="product-group">
    <div class="row">
        <div class="col-2-3 centered text-center">
            <h1 class="margin-none">{parent_cat_name}</h1>
            <p>{parent_cat_description}</p>
        </div>
    </div>

    <div class="row">
        <div class="col-2-3 centered">
                <div class="grid product-grid">
                    <!-- This is the child category loop -->
                    <div class="grid-item grid-item-2">
                        <div class="cell">
                            <a href="#"><img src="{child_cat_image}" /></a>
                            <h2>{child_cat_name}</h2>
                            <p>{child_cat_description}</p>
                        </div>
                    </div>
                    <!-- This is the end of the child category loop -->
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End of the main parent category loop -->

So this entire block will loop for however many parent categories there are. And then the child categories will loop within the parent categories.

Is there a way to get this to work with GW Code Categories or any other plugin or native way?

Hope this makes sense.

Thanks for any help.

Answer 1

I decided to go a different route using just parent categories and making the child categories channel entries. Got everything working as I needed to using this method and also took the headache out of using categories in general.