Installing BidJS - Modules (BidJS V0.1

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
auctionsArchived	Archived Auctions	Displays a searchable list of all archived auctions for all your auctioneers
mySales	My Sales	Displays 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
analyticsCode	The Google Analytics UA tracking code on which you wish for BidJS pageviews to be recorded	false		1.1+
analyticsNamespace	If 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"
standalone	Defines 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".	false	false	1.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)	Yes	Adds MySales Lot List view
1.2	03-06-19	Yes	Adds custom Google Analytics tracking support
1.1	03-05-19	Yes	Adds MySales details module
1.0	12-04-19	Yes	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> Replace the above with the following <script src="https://static.bidjs.com/MY_STATIC_VERSION/bootstrap3/js/bidjs-modules.chunk.js"></script> 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 window.bidjs= { ... options { unsupportedBrowserMessage: 'Your browser is not supported. Please use a browser such as Google Chrome or Microsoft Edge to ensure full functionality' }} 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 window.bidjs= { ... options { standlone: false }}
0.1	09-11-18	No	(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.

Bidlogix