BidJS Client Hooks

As the BidJS Client has no top-level navigation of its own, we provide you with the ability to place items anywhere on your site, which we can hook into.

The examples below use Bootstrap navigation, but the solution is agnostic to however you have implemented your navigation or elements.(20)

(20) Each of the navigation items have a class of .hidden. This is a standard Bootstrap utility class that ensures this is hidden until the class is removed by the BidJS Client Hook.

If your site doesn't have Bootstrap on all pages this navigation is shown, you will need to add this CSS rule to your site, ensuring that these Navigation items don't appear unnecessarily.

.hidden {    displaynone;}


Visual Hooks

Visual Hooks allow elements in the navigation to change depending on the state of the BidJS Client. (Please note that Modules may have additional triggers. Please see our Modules documentation for further information.)


Admin

This displays the Admin navigation item to users who have admin permissions.

Use the class .x-bidlogix--administrator-show to display the element if the user is logged in with admin permissions.

<ul class="nav navbar-nav navbar-right">

  <li>...</li>

  <li>...</li>

  <li class="x-bidlogix--administrator-show hidden"><a target="_blank" rel="noopener">Admin</a></li>

</ul>

(21)

(21) You may note that the <a> tag in the example has no href attribute. When this item is displayed, the href to the admin section is populated automatically by the BidJS Client, as long as it is an <a> tag within the element containing the admin class.


Authenticated

This allows elements to be shown only when the user is logged into the BidJS Client.

Use the class .x-bidlogix--authenticated-show to display the element if the user is logged in.

<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>


Unauthenticated

This allows elements to be shown only when the user is not logged into the BidJS Client.

Use the class .x-bidlogix--authenticated-hide to display the element if the user is not logged in.

<ul class="nav navbar-nav navbar-right">

  <li>...</li>

  <li>...</li>

  <li class="x-bidlogix--authenticated-hide hidden"><a href="...">You're not logged in!</a></li>

</ul>


Vendors

This allows elements to be shown only when the user is logged into the BidJS Client as a user with Vendor permissions.


<ul class="nav navbar-nav navbar-right">

  <li>...</li>

  <li>...</li>

  <li class="x-bidlogix--vendor-show hidden"><a href='...'>My Sales</a>

</li>

</ul>


Welcome

This allows the name of the logged in user to be displayed.

Use the class .x-bidlogix--templated-user to replace the contents of the element with the name of the logged in user.

<p class="x-bidlogix--authenticated-show hidden">

  Welcome, <span class="x-bidlogix--templated-user"></span>

</p>


Triggers

Triggers allow the parent website to cause an action within the BidJS Client


Create Account

This changes the BidJS Client to display the Create Account page.

Use the class .x-bidlogix--trigger-register to cause navigation within the BidJS Client to the Create Account page.

<ul class="nav navbar-nav navbar-right">

  <li>...</li>

  <li>...</li>

  <li class="x-bidlogix--authenticated-hide hidden"><a class="x-bidlogix--trigger-register clickable">Create Account</a></li>

</ul>


Login

This triggers the Login Modal, allowing users to enter credentials.

Use the class .clickable x-bidlogix--trigger-login to cause the Login Modal to display within the BidJS Client.

<ul class="nav navbar-nav navbar-right">

  <li>...</li>

  <li>...</li>

  <li class="x-bidlogix--authenticated-hide hidden"><a class="x-bidlogix--trigger-login clickable">Login</a></li>

</ul>


Logout

This removes the current session for the logged in user.

Use the class .clickable x-bidlogix--trigger-logout to cause the user's session to end immediately.

<ul class="nav navbar-nav navbar-right">

  <li>...</li>

  <li>...</li>

  <li class="x-bidlogix--authenticated-show hidden"><a class="x-bidlogix--trigger-logout clickable">Log Out</a></li>

</ul>



My Settings

This navigates the user to their Account Settings page.

Use the class .clickable x-bidlogix--trigger-my-settings.

<ul class="nav navbar-nav navbar-right">

  <li>...</li>

  <li>...</li>

  <li class="x-bidlogix--authenticated-show hidden"><a class="x-bidlogix--trigger-my-settings clickable">Account Settings</a></li>

</ul>



My Bids

This navigates the user to their My Bids / Watchlist page.

Use the class .clickable x-bidlogix--trigger-my-bids.

<ul class="nav navbar-nav navbar-right">

  <li>...</li>

  <li>...</li>

  <li class="x-bidlogix--authenticated-show hidden"><a class="x-bidlogix--trigger-my-bids clickable">My Watch List</a></li>

</ul>


Invoices

This navigates the user to their Invoices page.

<ul class="nav navbar-nav navbar-right">

  <li>...</li>

  <li>...</li>

  <li class="x-bidlogix--authenticated-show hidden"><a class="#!/invoices">My Invoices</a></li>

</ul>




Noteworthy Sections

Noteworthy Sections are parts of the application you may wish to link directly to in some cases.

Whilst the noteworthy sections aren't "Client Hooks", they often go hand in hand with the Visual Hooks, for example, to hide and show certain navigation items or links to these noteworthy sections, based on whether the user is logged in.

Section

Address

Notes

Searchhttp://yourWebsiteAddress.com/pathToBidJSPage/!#/search
My Bidshttp://yourWebsiteAddress.com/pathToBidJSPage/!#/myBidsShould only be used for Authenticated Users
Account Settingshttp://yourWebsiteAddress.com/pathToBidJSPage/!#/mySettingsShould only be used for Authenticated Users
My Saleshttp://yourWebsiteAddress.com/pathToBidJSPage/!#/mySales
Should only be used for Authenticated Users
Invoices
http://yourWebsiteAddress.com/pathToBidJSPage/!#/invoices
Should only be used for users who have invoices available