Sub-level chevron for Primary Navigation

[lesliekirk]

I need to had a toggle for a "level-2" to open and close a level-3 subset of links in the Primary Navigation that is activated by the hamburger menu

As I was posting the code I was working with it dawned on me what I needed to make this work with the code that had been originally modified (by me with Matt Zimmermann help

Here's the code I started off with

 <mvt:if expr="NOT ISNULL l.settings:readytheme:navigationitems">
<mvt:foreach array="readytheme:navigationitems" iterator="navigationitem">
<li class="color--white">
<mvt:if expr="NOT ISNULL l.settings:navigationitem:items">
<input data-toggle id="l-&mvt:navigationitem:id;-toggle" type="checkbox">
<label for="l-&mvt:navigationitem:id;-toggle">&mvt:navigationitem:name;<span class="icon--chevron-down"></span></label>
<ul>
<mvt:foreach array="navigationitem:items" iterator="navigationitem_level2">
<li class="color--white">&mvt:navigationitem_level2:link;</li>
<mvt:if expr="NOT ISNULL l.settings:navigationitem_level2:items">
<ul>
<mvt:foreach array="navigationitem_level2:items" iterator="navigationitem_level3">
<li class="color--white some-class-for-level-3">&mvt:navigationitem_level3:link;</li>
</mvt:foreach>
</ul>
</mvt:if>
</mvt:foreach>
</ul>
<mvt:else>
&mvt:navigationitem:link;
</mvt:if>
</li>

</mvt:foreach>
<!-- <li><hr class="border--secondary"></li> -->
</mvt:if>

While posting the code I saw exactly what was missing. Here is what I came up with that now enables the "level2" items that have subcats to have a down chevron to display them

<mvt:if expr="NOT ISNULL l.settings:readytheme:navigationitems">
<mvt:foreach array="readytheme:navigationitems" iterator="navigationitem">
<li class="color--white">
<mvt:if expr="NOT ISNULL l.settings:navigationitem:items">
<input data-toggle id="l-&mvt:navigationitem:id;-toggle" type="checkbox">
<label for="l-&mvt:navigationitem:id;-toggle">&mvt:navigationitem:name;<span class="icon--chevron-down"></span></label>
<ul>
<mvt:foreach array="navigationitem:items" iterator="navigationitem_level2">
<li class="color--white some-class-for-level-2">&mvt:navigationitem_level2:link;
<mvt:if expr="NOT ISNULL l.settings:navigationitem_level2:items">
<input data-toggle id="l-&mvt:navigationitem_level2:id;-toggle" type="checkbox">
<label for="l-&mvt:navigationitem_level2:id;-toggle">&mvt:navigationitem_level2:name;<span class="icon--chevron-down"></span></label>
<ul>
<mvt:foreach array="navigationitem_level2:items" iterator="navigationitem_level3">
<li class="color--white some-class-for-level-3">&mvt:navigationitem_level3:link;</li>
</mvt:foreach>
</ul>
</mvt:if></li>
</mvt:foreach>
</ul>
<mvt:else>
&mvt:navigationitem:link;
</mvt:if>
</li>

</mvt:foreach>
<!-- <li><hr class="border--secondary"></li> -->
</mvt:if>

I gratefully appreciate the encouragement I received to post something I figured out but might be useful to someone else down the road. Thanks Jamie! @jsdva

[lesliekirk]

Well, I spoke too soon. Now to figure out what is causing

"On Sale" to be displayed twice.

sYAZqt.png

I think I see it. Maybe one too many

&mvt:navigationitem_level2:link;

[lesliekirk]

I think I need another <mvt:else> but I'll need to figure out it's proper placement.

[Nick]

It looks like you are outputting &mvt:navigationitem_level2:link; then there is a conditional that outputs the &mvt:navigationitem_level2:name;

I wrote some HTML comments to your snippet below where each one is being printed to the page.

<mvt:if expr="NOT ISNULL l.settings:readytheme:navigationitems">
    <mvt:foreach array="readytheme:navigationitems" iterator="navigationitem">
        <li class="color--white">
            <mvt:if expr="NOT ISNULL l.settings:navigationitem:items">
                <input data-toggle id="l-&mvt:navigationitem:id;-toggle" type="checkbox">
                <label for="l-&mvt:navigationitem:id;-toggle">&mvt:navigationitem:name;<span class="icon--chevron-down"></span></label>
                <ul>
                <mvt:foreach array="navigationitem:items" iterator="navigationitem_level2">
                    <li class="color--white some-class-for-level-2">

                        &mvt:navigationitem_level2:link; <!-- First output -->

                        <mvt:if expr="NOT ISNULL l.settings:navigationitem_level2:items">
                            <input data-toggle id="l-&mvt:navigationitem_level2:id;-toggle" type="checkbox">

                            <label for="l-&mvt:navigationitem_level2:id;-toggle">

                                &mvt:navigationitem_level2:name; <!-- second output -->

                                <span class="icon--chevron-down"></span></label>

                            <ul>
                                <mvt:foreach array="navigationitem_level2:items" iterator="navigationitem_level3">
                                    <li class="color--white some-class-for-level-3">&mvt:navigationitem_level3:link;</li>
                                </mvt:foreach>
                            </ul>
                        </mvt:if>
                    </li>
                </mvt:foreach>
                </ul>
            <mvt:else>
                &mvt:navigationitem:link;
            </mvt:if>
        </li>
    </mvt:foreach>
    <!-- <li><hr class="border--secondary"></li> -->
</mvt:if>

[lesliekirk]

It looks like you are outputting &mvt:navigationitem_level2:link; then there is a conditional that outputs the &mvt:navigationitem_level2:name;

I wrote some HTML comments to your snippet below where each one is being printed to the page.

<mvt:if expr="NOT ISNULL l.settings:readytheme:navigationitems">
<mvt:foreach array="readytheme:navigationitems" iterator="navigationitem">
<li class="color--white">
<mvt:if expr="NOT ISNULL l.settings:navigationitem:items">
<input data-toggle id="l-&mvt:navigationitem:id;-toggle" type="checkbox">
<label for="l-&mvt:navigationitem:id;-toggle">&mvt:navigationitem:name;<span class="icon--chevron-down"></span></label>
<ul>
<mvt:foreach array="navigationitem:items" iterator="navigationitem_level2">
<li class="color--white some-class-for-level-2">

&mvt:navigationitem_level2:link; <!-- First output -->

<mvt:if expr="NOT ISNULL l.settings:navigationitem_level2:items">
<input data-toggle id="l-&mvt:navigationitem_level2:id;-toggle" type="checkbox">

<label for="l-&mvt:navigationitem_level2:id;-toggle">

&mvt:navigationitem_level2:name; <!-- second output -->

<span class="icon--chevron-down"></span></label>

<ul>
<mvt:foreach array="navigationitem_level2:items" iterator="navigationitem_level3">
<li class="color--white some-class-for-level-3">&mvt:navigationitem_level3:link;</li>
</mvt:foreach>
</ul>
</mvt:if>
</li>
</mvt:foreach>
</ul>
<mvt:else>
&mvt:navigationitem:link;
</mvt:if>
</li>
</mvt:foreach>
<!-- <li><hr class="border--secondary"></li> -->
</mvt:if>

Thanks Nick, yes, I figure that out. My problem is how do I correct the issue? If I remove the "first output" it breaks everything. I'm thinking the toggle needs it's own IF statement to check for level3 categories and then decide to use the toggle or use the "first output" for the level2:link. I got sidetracked by a plumber visit followed by a site that is having payment issues and haven't taken more time to dink around with this.

[Nick]

You need to add an else statement on the conditional after the &mvt:navigationitem_level2:link;

<mvt:if expr="NOT ISNULL l.settings:readytheme:navigationitems">
    <mvt:foreach array="readytheme:navigationitems" iterator="navigationitem">
        <li class="color--white">
            <mvt:if expr="NOT ISNULL l.settings:navigationitem:items">
                <input data-toggle id="l-&mvt:navigationitem:id;-toggle" type="checkbox">
                <label for="l-&mvt:navigationitem:id;-toggle">&mvt:navigationitem:name;<span class="icon--chevron-down"></span></label>
                <ul>
                <mvt:foreach array="navigationitem:items" iterator="navigationitem_level2">
                    <li class="color--white some-class-for-level-2">
                        <mvt:if expr="NOT ISNULL l.settings:navigationitem_level2:items">
                            <input data-toggle id="l-&mvt:navigationitem_level2:id;-toggle" type="checkbox">
                            <label for="l-&mvt:navigationitem_level2:id;-toggle">
                                &mvt:navigationitem_level2:name; <!-- second output -->
                                <span class="icon--chevron-down"></span></label>
                            <ul>
                                <mvt:foreach array="navigationitem_level2:items" iterator="navigationitem_level3">
                                    <li class="color--white some-class-for-level-3">&mvt:navigationitem_level3:link;</li>
                                </mvt:foreach>
                            </ul>

                        <mvt:else>
                            &mvt:navigationitem_level2:link; <!-- First output -->
                        </mvt:if>
                    </li>
                </mvt:foreach>
                </ul>
            <mvt:else>
                &mvt:navigationitem:link;
            </mvt:if>
        </li>
    </mvt:foreach>
    <!-- <li><hr class="border--secondary"></li> -->
</mvt:if>

[lesliekirk]

Thanks Nick, it takes a village