Announcement

Collapse
No announcement yet.

Sub-level chevron for Primary Navigation

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Sub-level chevron for Primary Navigation

    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

    Code:
     <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

    Code:
    <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

    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    #2
    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
    Code:
    &mvt:navigationitem_level2:link;
    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    Comment


      #3
      I think I need another <mvt:else> but I'll need to figure out it's proper placement.
      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


        #4
        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.

        Code:
        <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>
        Nicholas Adkins
        Technical Training Specialist / Miva, Inc.
        [email protected]
        https://www.miva.com/mivalearn

        Comment


          #5
          Originally posted by Nick View Post
          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.

          Code:
          <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.
          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


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

            Code:
            <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>
            Nicholas Adkins
            Technical Training Specialist / Miva, Inc.
            [email protected]
            https://www.miva.com/mivalearn

            Comment


              #7
              Thanks Nick, it takes a village
              Leslie Kirk
              Miva Certified Developer
              Miva Merchant Specialist since 1997
              Previously of Webs Your Way
              (aka Leslie Nord leslienord)

              Email me: [email protected]
              www.lesliekirk.com

              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

              Comment

              Working...
              X