How to make BigCommerce Category Description accessible to display within navigation

Question

I am building a custom navigation for a BigCommerce site and need to display category descriptions within the navigation items in addition to name and url.

My navigation is being displayed via a component so I know I can't request Front Matter there, but as name and url are already accessible I thought the description would be as well..

Here is part of my navigation code where i'm trying to display the data. Any tips on how to achieve this would be appreciated!

{{#each children}}
  <li class="navigation__submenu-item">
    <a class="navigation__submenu-action has-subMenu"
      href="{{url}}"
    >
      {{#if image}}
      <img class="navigation__submenu-img" src="{{getImage image}}" alt="{{image.alt}}" />
      {{/if}}
     <div>{{name}}</div>
<small class="navigation__submenu-msg">{{description}}</small>
  </a>
  </li>
{{/each}}

Answer 1

You do indeed need to specify to show the description with Front Matter. Something that is not explained well in the BC documentation is that you can actually specify global Front Matter in the config.json file. Assuming you are developing local with the Stencil CLI, you can edit the config.json file. You will look for the "resources" object and append the following code to it:

"categories": {
  "description": true
}

So, if your resources object looks like this (default Cornerstone):

"resources": {
  "cart": false,
  "bulk_discount_rates": false,
  "shop_by_brand": {
    "limit": 10
  }
},

Change it to this:

"resources": {
  "cart": false,
  "bulk_discount_rates": false,
  "shop_by_brand": {
    "limit": 10
  },
  "categories": {
    "description": true
  }
},