Navigation & Hooks

Navigation

BidJS comes with no navigation built in. As the application is being placed on your website, it's preferable to hook in to your existing navigation.

We explain how to do that in this section.

info

All examples given are assuming that BidJS is on the root page of your domain. If this is not the case, the given URLs will need to be adjusted accordingly.

Create Account

<ul class="nav navbar-nav navbar-right">
<li>...</li>
<li>...</li>
<li class="x-bidlogix--authenticated-hide hidden">
<a href='/#!/account'>Create Account</a>
</li>
</ul>

Invoices

You may not be using this part of the application, so may not require this functionality.

<ul class="nav navbar-nav navbar-right">
<li>...</li>
<li>...</li>
<li class="x-bidlogix--authenticated-show hidden">
<a href='/#!/invoices'>Invoices</a>
</li>
</ul>

Login

<ul class="nav navbar-nav navbar-right">
<li>...</li>
<li>...</li>
<li class="x-bidlogix--authenticated-hide hidden">
<a href='/#!/login'>Log In</a>
</li>
</ul>

Logout

<ul class="nav navbar-nav navbar-right">
<li>...</li>
<li>...</li>
<li class="x-bidlogix--authenticated-show hidden">
<a href='/#!/logout'>Logout</a>
</li>
</ul>

My Bids

<ul class="nav navbar-nav navbar-right">
<li>...</li>
<li>...</li>
<li class="x-bidlogix--authenticated-show hidden">
<a href='/#!/myBids'>My Bids</a>
</li>
</ul>

My Settings

<ul class="nav navbar-nav navbar-right">
<li>...</li>
<li>...</li>
<li class="x-bidlogix--authenticated-show hidden">
<a href='/#!/account'>My Settings</a>
</li>
</ul>

Search

<ul class="nav navbar-nav navbar-right">
<li>...</li>
<li>...</li>
<li>
<a href='/#!/search'>Search</a>
</li>
</ul>

Hooks

Sometimes there's a need for BidJS to have an effect on elements outside of the BidJS Container, such as navigation.

Fortunately, we cater for this. We'll explain how to implement each "Hook" below.

caution

We use a css class of .hidden to hide elements. If your site doesn't have Bootstrap installed, then you'll need to add the following CSS rule to ensure this functionality works

.hidden {
display: none;
}

Login state

You're able to show or hide elements on your site, based on whether the user is logged in.

This is particularly useful for "Login" or "Create Account" items in your navigation.

Show for authenticated users

You can attach the .x-bidlogix--authenticated-show class to any element to show it for authenticated users.

<ul class="nav navbar-nav navbar-right">
<li>...</li>
<li>...</li>
<li class="x-bidlogix--authenticated-show hidden">
<a href="/#!/mySettings">My Account</a>
</li>
</ul>

Hide for authenticated users

You can attach the .x-bidlogix--authenticated-hide class to any element to hide it for authenticated users.

<ul class="nav navbar-nav navbar-right">
<li>...</li>
<li>...</li>
<li class="x-bidlogix--authenticated-hide hidden">
<a href="/#!/login">Log In</a>
</li>
</ul>

Welcome message

Should you wish, you can add the display name of the authenticated user to your page, such as in your navigation.

BidJS will insert the display name in any element with the class .x-bidlogix--templated-user

<p class="x-bidlogix--authenticated-show hidden">
Welcome, <span class="x-bidlogix--templated-user"></span>
</p>

User Permissions

There are some navigation items that you may want to show or hide based on user permissions

Admin users

You can attach the .x-bidlogix--administrator-show class to any element to show it for administrator users only.

<ul class="nav navbar-nav navbar-right">
<li>...</li>
<li>...</li>
<li class="x-bidlogix--administrator-show hidden">
<a target="_blank" rel="noopener" href="#">Admin Login</a>
</li>
</ul>
info

You may note that the <a> tag in the example has an empty href attribute.

When this item is triggered, the href is automatically adjusted to point to the appropriate administration URL.

Vendors

Should you have vendors who will be accessing your website, you can restrict the element on your site to being displayed only for users with that permission

<ul class="nav navbar-nav navbar-right">
<li>...</li>
<li>...</li>
<li class="x-bidlogix--vendor-show hidden">
<a href='/#!/mySales'>My Sales</a>
</li>
</ul>