How to add a nav link in the section "My account"

Question

I was trying to add a new link to navbar in my account, I added a new item to navbar beside Account Settings. But I am unable to set a link to it using like {{urls.account.cards}}. How i implemented the new navbar item is like below.

Ref: Cornerstone github repo

1. Edited cornerstone/lang/en.json - Added new object to

"account": {
    "nav": {
        "recently_viewed": "Recently Viewed",
        "settings": "Account Settings",
        "cards": "Cards",
    },
    carditems": {
        "heading" : "Testing Cards",
        "no_items": "The cards you've saved on our site will appear below."
    }
}

2. Edited cornerstone/templates/components/account/navigation.html - Added new list under Account Settings

<li class="navBar-item {{#if account_page '===' 'carditems'}}is-active{{/if}}">
    <a class="navBar-action" href="{{urls.account.carditems}}">{{lang 'account.nav.cards'}}</a>
</li>

3. Edited cornerstone/templates/components/common/navigation-menu.html - Added new list under Account Settings

<li class="navPage-subMenu-item">
    <a class="navPage-subMenu-action navPages-action" href="{{urls.account.carditems}}" aria-label="{{lang 'account.nav.cards'}}">{{lang 'account.nav.cards'}}</a>
</li>

4. Created new file carditems.html at

cornerstone/templates/pages/account/carditems.html

5. carditems.html

{{#partial "page"}}
<div class="account">
    {{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
    <h2 class="page-heading">{{lang 'account.carditems.heading' }}</h2>
    {{> components/account/navigation account_page='carditems'}}

    {{#unless customer.recently_viewed_products.items}}
        {{> components/common/alert/alert-info (lang 'account.carditems.no_items')}}
    {{/unless}}
</div>
{{/partial}}
{{> layout/base}}

But I cant get the link to work, so I am not able to show the carditems page

Tried to insert new navbar item and attach link to it. I was able to add new navbar item but cannot attach link and page to it

Answer 1

You cannot manipulate the Stencil context to add another URL here. And you cannot add new account links. You could, however, create a web page for your new account page and add a direct link to it in the account bar.

And you could add the account navigation to this new page by specifying a custom page template for it, or with a conditional statement inside page.html.