CODEWITHSUNDEEP
handlebars.jsjekyllbigcommerceyaml-front-matter
Devin Luby
Devin Luby

Reputation: 176

Front Matter Global Variable on all pages in BigCommerce theme

I'm trying to create a dropdown menu when the user hovers over in my navigation displays account information such as previous orders.

I'm using Stencil/Cornerstone. I've tried declaring a Front Matter Object on page.html using

---
customer: 
    orders: 
        limit 5
---

but that doesn't seem to work, the only place the menu is pulling the customers orders through is if the user is on an account page. I need this to be available on all pages as it's the sites main navigation.

menu-bar.html

(snippet)

{{#if customer}}
    <li class="nav-page"><a href="/account.php">My Account</a>
        <div class="sub-menu">
            <div class="nav-col">
                <h4>Hello, {{customer.name}}</h4>
            </div>
            <div class="nav-col">
                <!-- orders -->
                <h5>Orders</h5>
                <ul class="account-order-list">
                    {{#if customer.orders}} {{#each customer.orders}}
                    <li><a href="{{details_url}}"><i class="fa fa-tag" aria-hidden="true"></i> Order #{{id}}</a>
                        <div class="order-details-list">
                            <a class="details" href="{{details_url}}">
                                <span><strong>Date:</strong> {{date}} </span>
                                <span><strong>Amount:</strong> {{total.formatted}} </span>
                                <span><strong>Status:</strong> {{status}}</a></span>

                        </div>
                    </li>
                    {{/each}} {{else}}
                    <span>You have no orders.</span> {{/if}}
                </ul>
            </div>
            <div class="nav-col">
                <h5></h5>
            </div>
        </div>
    </li>
    {{else}}
    <li class="nav-page"><a href="/login.php">Sign In</a></li>
    {{/if}}
</ul>

Upvotes: 0

Views: 309

Answers (1)

David Jacquel
David Jacquel

Reputation: 52809

From jekyll/liquid point of view, if you want a global variable, you can declare it :

1 - in _config.yml 

customer: 
    orders: 
        limit: 5 # and not "limit 5"

and use it like this : {{ site.customer.orders.limit }}

2 - or in a common (to all pages) layout like _layouts/default.html

It will be available in any page with : {{ page.customer.orders.limit }}

Upvotes: 0

Related Questions