CODEWITHSUNDEEP
bigcommerce
Lucy Brown
Lucy Brown

Reputation: 384

Changing Bigcommerce Stencil category menu to pages menu in header

I'm just starting out with Bigcommerce stencil, I need to show the pages menu as the header emnu instead of the category menu, I've managed to change the top level to pages instead of categories, but the sub menu items are still showing as categories, how can I do this?

To change the top level menu's all I changed was this - 

<ul class="navPages-list">
   {{#each categories}}
     <li class="navPages-item">
        {{> components/common/navigation-list}}
     </li>
   {{/each}}
 </ul>

To this - 

<ul class="navPages-list">
       {{#each pages}}
         <li class="navPages-item">
            {{> components/common/navigation-list}}
         </li>
       {{/each}}
     </ul>

In the navigation-menu.html file. It then calls navigation-list.html for the sub-categories, but if I change anything in there from category to page, it doesn't work, had anyone else had this issue?

Any help would be much appreciated,

Thanks!

Upvotes: 0

Views: 1547

Answers (1)

thannes
thannes

Reputation: 778

In your navigation-menu.html file, if you only plan on showing the pages, there is no need to loop the navigation-list file inside each page.

You can change your bottom code sample you have to this, and it will display each page name with the correct link address to the page.

<ul class="navPages-list">
   {{#each pages}}
      <li class="navPages-item">
         <a href="{{url}}">{{name}}</a>
      </li>
   {{/each}}
</ul>

When you are inside the {{#each}} handelbar helper, it is looping each pages data, and displaying the results. To get a better idea and visualize how this works, you can append ?debug=bar on the end of your localhost address and scroll down to the bottom of the page to inspect the available data in JSON form. Search the JSON for the value "pages" and you'll see each page has a name, and url.

Upvotes: 3

Related Questions