Navigation Set With Category Tree Images

[SidFeyDesigns]

I was in need of a secondary navigation element so that if a user gets to the bottom of a category and did not find what they were looking for it, it shows relevant categories that I can now assign through a navigation set.

I figured out the code necessary so I thought I would share.

Here it is:

<div class="row bottom-shadow o-layout u-grids-2 u-grids-3--xxs u-grids-4--xs u-grids-5--s u-grids-6--m sub-category-layout">
    <mvt:foreach iterator="navigationitem" array="readytheme:navigationitems">
        <mvt:if expr="l.settings:navigationitem:link_type EQ 'C'">
            <mvt:do file="g.Module_Library_DB" name="l.success" value="Category_Load_Code( l.settings:navigationitem:link_dest, l.settings:category_navigation )" />
            <mvt:do file="g.Module_Root $ '/modules/component/cmp-cssui-cattree.mvc'" name="l.success" value="CSSUI_CatTree_Load( l.settings:category_navigation:id, l.settings:cattree )" />
            <a href="&mvt:navigationitem:url;" target="&mvt:navigationitem:link_targ;" title="&mvt:navigationitem:name;" class="o-layout__item sub-category">
                <div class="place-holder">
                    <img class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==" width="102" height="102" data-src="&mvt:cattree:image;" alt="&mvt:navigationitem:name;" title="&mvt:navigationitem:name;" />
                    <noscript><img src="&mvt:cattree:image;" width="102" height="102" alt="&mvt:navigationitem:name;" title="&mvt:navigationitem:name;" /></noscript>
                </div>
                &mvt:navigationitem:name;
            </a>
        </mvt:if>
    </mvt:foreach>
</div>

Obviously, you will need to apply your html and CSS styling to suit your needs.

This also allows me to create as many different navigation sets I may need and add them to any category footer or miva store page I see fit.

Hope this helps someone out there lol. Cheers