Modules

Starting with Version 1.3 of BidJS, we have begun to migrate to a modular codebase. This means that you can define which parts of BidJS you want to load and use, among other benefits outlined below.

During this migration phase, there will be some duplication / extra scripts required on your website. As this progresses, and modules replace an increasing amount of the BidJS application, this duplication will disappear.


The modules give various benefits, including:

  • Supporting both Bootstrap 3 and Bootstrap 4
  • Optionally being able to include any number of modules on a completely independent page to the main BidJS application
  • Ability to use HTML5 PushState (e.g. "/auctionDetails") instead of Hashbang URLs (e.g. "#!/auctionDetails")
  • No conflicts with other scripts (jQuery etc)
  • Lazy-loads each module as used, so customers don't need to download the entire application at first load
  • Far better performance


Implementation:

Before the end of the <head> tag:

<script>
window.bidjs = {  
config: {    
apiBase: 'MY_API_BASE_ENDPOINT', // e.g. demo.eu-west-2.bidjs.com/auction-007/api    
clientId: 'MY_CLIENT_ID', // e.g. demonstration    
googleMapsApiKey: 'YOUR_KEY' // currently only required for MySales    
staticBase: 'MY_STATIC_URL/VERSION', // e.g. demo.eu-west-2.bidjs.com/static/1.3    
staticCDN: 'https://static.bidjs.com', // Do not change    
staticVersion: 'MY_STATIC_VERSION', // e.g. 1.0    
templateVariant: 'bootstrap3' // either 'bootstrap3' or 'bootstrap4'  },  
modules: {    auctionDetails: '#!/auctionDetails/%AUCTION_ID%',    
auctionsArchived: true,
mySales: true  },  
options: {}}
</script>



Please note: Input formatting for this config section follows different rules to other areas of the BidJS code. Please see the notes next to each line of config for specific details


Where you want your module to display, within the <body> tags:

<div class="container bidlogix-app">
  <div id="bidjs"></div>
</div>



At the end of your <body> tag:

<script src="https://static.bidjs.com/MY_STATIC_VERSION/bootstrap3/js/bidjs-modules.chunk.js"></script>



Versioning

Please note that BidJS and BidJS Modules are versioned independently.

The version for one is not the same as the version for the other. Please reference the Upgrade Notes for which version of BidJS Modules should be used alongside which version of BidJS



Configuration Options


Modules

As parts of BidJS are migrated to modules, the list of modules here will grow. Each module has 3 possible values:

  • true - the module should be loaded on this page, in the modules container when the URL matches the module name
  • false - the module is disabled, and any links / references to this module should not display
  • "url" - the location where this module is hosted. If on the same page in the traditional BidJS application, this should be the "hashbang" URL. If on another page, it should be the address of the relevant page.

See the list of Current Modules below, as reference. This list will expand as more pages are migrated to modules.


Current Modules

Key

Name

Description

auctionsArchivedArchived AuctionsDisplays a searchable list of all archived auctions for all your auctioneers
mySalesMy SalesDisplays a history of sales per auction to your lot vendors
Please note: If you wish to turn these modules off, please change "true" to "false" in the implementation code shown above. 


Options

Key

Description

Required

Default

Version

analyticsCodeThe Google Analytics UA tracking code on which you wish for BidJS pageviews to be recordedfalse
1.1+
analyticsNamespaceIf your Google Analytics has already been initialised on your parent website and it has a specific namespace, you can specify that here to prevent conflicts. This is unlikely to be required in most situations.false
1.1+
defaultModule

The name of the module to be loaded at the "base url" of the current page.

If using modules on a page with the main BidJS application, then this is likely to be "empty".

If you are using modules on an independent page, you can specify which the default should be, e.g. "auctionsArchived"

false"empty"
standaloneDefines whether BidJS Modules are on their own page, i.e. "true", or whether they are featured on a page where BidJS is already embedded, i.e. "false".falsefalse1.0+
urlPattern

Should be either "hash" or "pushState".

Using "hash" will cause your module URLs to look like www.yourwebsite.com/yourpage#!/moduleKey

Using "pushState" will cause your module URLs to look like www.yourwebsite.com/yourpage/moduleKey
However, in order to use pushState you must make configuration changes to your webserver configuration, normally in NGINX or Apache to accommodate this.

false"hash"
unsupportedBrowserMessage

Will display an alert to users of Internet Explorer 11 and below with this content.

This should only be used if Modules are used on a separate page to BidJS, as BidJS will already display a message.

false
1.0+




Modules Versions (out of date)

Version Number

Release date

Currently supported

Version Update

1.3(TBC)YesAdds MySales Lot List view
1.203-06-19 YesAdds custom Google Analytics tracking support
1.103-05-19Yes

Adds MySales details module

1.012-04-19Yes
  1. Remove the following from your Modules implementation from the end of your body tag

    <script>!function (c) { function e(e) { for (var t, r, n = e[0], o = e[1], u = e[2], i = 0, a = []; i < n.length; i++)r = n[i], f[r] && a.push(f[r][0]), f[r] = 0; for (t in o) Object.prototype.hasOwnProperty.call(o, t) && (c[t] = o[t]); for (d && d(e); a.length;)a.shift()(); return p.push.apply(p, u || []), l() } function l() { for (var e, t = 0; t < p.length; t++) { for (var r = p[t], n = !0, o = 1; o < r.length; o++) { var u = r[o]; 0 !== f[u] && (n = !1) } n && (p.splice(t--, 1), e = s(s.s = r[0])) } return e } var r = {}, f = { 5: 0 }, p = []; function s(e) { if (r[e]) return r[e].exports; var t = r[e] = { i: e, l: !1, exports: {} }; return c[e].call(t.exports, t, t.exports, s), t.l = !0, t.exports } s.e = function (u) { var e = [], r = f[u]; if (0 !== r) if (r) e.push(r[2]); else { var t = new Promise(function (e, t) { r = f[u] = [e, t] }); e.push(r[2] = t); var n, o= document.getElementsByTagName("head")[0], i = document.createElement("script"); i.charset = "utf-8", i.timeout = 120, s.nc && i.setAttribute("nonce", s.nc), i.src = window.bidjs.config.staticCDN + "/" + window.bidjs.config.staticVersion + "/" + window.bidjs.config.templateVariant + "/js/" + ({}[u] || u) + ".chunk.js", n = function (e) { i.onerror = i.onload = null, clearTimeout(a); var t = f[u]; if (0 !== t) { if (t) { var r = e && ("load" === e.type ? "missing" : e.type), n = e && e.target && e.target.src, o = new Error("Loading chunk " + u + " failed.\n(" + r + ": " + n + ")"); o.type = r, o.request = n, t[1](o) } f[u] = void 0 } }; var a = setTimeout(function () { n({ type: "timeout", target: i }) }, 12e4); i.onerror = i.onload = n, o.appendChild(i) } return Promise.all(e) }, s.m = c, s.c = r, s.d = function (e, t, r) { s.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r }) }, s.r = function (e) { "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }), Object.defineProperty(e, "__esModule", { value: !0 }) }, s.t = function (t, e) { if (1 & e && (t = s(t)), 8 & e) return t; if (4 & e && "object" == typeof t && t && t.__esModule) return t; var r = Object.create(null); if (s.r(r), Object.defineProperty(r, "default", { enumerable: !0, value: t }), 2 & e && "string" != typeof t) for (var n in t) s.d(r, n, function (e) { return t[e] }.bind(null, n)); return r }, s.n = function (e) { var t = e && e.__esModule ? function () { return e.default } : function () { return e }; return s.d(t, "a", t), t }, s.o = function (e, t) { return Object.prototype.hasOwnProperty.call(e, t) }, s.p = "/", s.oe = function(e) { throw console.error(e), e }; var t = window.webpackJsonp = window.webpackJsonp || [], n = t.push.bind(t); t.push = e, t = t.slice(); for (var o = 0; o < t.length; o++)e(t[o]); var d = n; l() }([])</script><scriptsrc="https://static.bidjs.com/MY_STATIC_VERSION/bootstrap3/js/3.chunk.js"></script><scriptsrc="https://static.bidjs.com/MY_STATIC_VERSION/bootstrap3/js/main.chunk.js"></script>


  2. Replace the above with the following

    <script src="https://static.bidjs.com/MY_STATIC_VERSION/bootstrap3/js/bidjs-modules.chunk.js"></script>



  3. If your Modules are used on pages without BidJS, you may wish to input a custom Supported Browser message so that unsupported browsers are warned when visiting this page.
    You can do so by inserting your message in your window.bidjs.options object


  4. window.bidjs= {  ...  options {    unsupportedBrowserMessage: 'Your browser is not supported. Please use a browser such as Google Chrome or Microsoft Edge to ensure full functionality'  }}


  5. There is a new option to be passed into your Modules options: standlone. This is to define whether the modules are standalone, or deployed alongside a traditional BidJS application. (Please see our Techincal Documentation for more information.)
    This defaults to "false" if not specified


  6. window.bidjs= {  ...  options {    standlone: false  }}



0.1

09-11-18No

(Modules v0.1)

This implements the first BidJS Module, a new concept which is covered in detail within the Technical Documentation

The module implemented is: Archived Auctions

No change is necessary for clients unless they implement this or future modules, in which case the documentation should be followed.