Skip to main content

v4.0 Upgrade Guide

The following changes are required for upgrading to v4.0

Estimated Time to Upgrade: 1-3 hours

1 - Reworked Configuration​

The BidJS configuration in the <head> of your page has been consolidated.

Many of the previous required settings are now default.

Current (v3)
<script>
  window.bidjs = {  
    config: {    
      apiBase: 'MY_API_BASE_ENDPOINT',
      clientId: '<<YOUR_CLIENT_ID>>',
      googleMapsApiKey: '<<YOUR_KEY>>',
      staticBase: 'MY_STATIC_URL/VERSION',
      staticCDN: 'https://static.bidjs.com',
      staticVersion: 'VERSION',
      websocketBase: 'wss://broadcast.YOUR_REGION.bidjs.com'
    },
    modules: {    
      auctionDetails: '#!/auctionDetails/%AUCTION_ID%',
      auctionsArchived: true,
      invoices: true,
      lotDetails: '#!/itemDetails/%AUCTION_ID%/%ITEM_ID%',
      mySales: true,
      webcast: true,
      login: true,
      register: true  
    },  
    options: {}
  }
</script>
Upgraded (v4)
<script>
  window.bidjs = {  
    config: {
      clientId: '<<YOUR_CLIENT_ID>>', // e.g. demonstration
      googleMapsApiKey: '<<YOUR_KEY>>',
      region: '<<YOUR_SERVER_REGION>>', // e.g. eu-west-2
      server: '<<YOUR_SERVER_NAME>>' // e.g. hove
    }
  }
</script>

If any of your configuration differs from the defaults specified in the before example, then you can simply keep those differing configuration options.

caution

Please note that this configuration should now come before any of the other BidJS script tags

2 - Consolidated Script Tags​

Previously, script tags were required in the <head> and at the end of the <body>.

These have now been consolidated into the <head> only.

Current (v3)
<head>
  ...
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <script defer src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Promise"></script>
  <script defer src="https://maps.googleapis.com/maps/api/js?key=<<YOUR_GOOGLE_MAPS_API>>" type="text/javascript"></script>
  <script defer src="MY_STATIC_URL/VERSION/js/bid-dependencies.min.js"></script>
  <script defer src="MY_STATIC_URL/VERSION/prettyphoto/jquery.prettyPhoto.min.js"></script>
  <script defer src="MY_STATIC_URL/VERSION/js/hbs-bid.min.js"></script>
  <script defer src="MY_STATIC_URL/VERSION/js/bid.min.js"></script>
  <script>
    window.bidjs = { ... } // your BidJS config goes here
  </script>
  ...
</head>
<body>
...
  <noscript id="deferred-styles">
    <link href="MY_STATIC_URL/VERSION/prettyphoto/jquery.prettyPhoto.min.css" rel="stylesheet" type="text/css">
    <link href="MY_STATIC_URL/VERSION/css/bid.min.css" rel="stylesheet" type="text/css">
  </noscript>
  <script>
    window.addEventListener('DOMContentLoaded', function() {
        (function($) {
            $(document).ready(function() {
              PageApp.start();
            });
        })(jQuery);
    });

    var loadDeferredStyles = function() {
      var addStylesNode = document.getElementById("deferred-styles");
      var replacement = document.createElement("div");
      replacement.innerHTML = addStylesNode.textContent;
      document.body.appendChild(replacement)
      addStylesNode.parentElement.removeChild(addStylesNode);
    };
    var raf = requestAnimationFrame;
    if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
    else window.addEventListener('load', loadDeferredStyles);
  </script>
  <script src="https://static.bidjs.com/VERSION/bootstrap3/js/bidjs-modules.chunk.js">
  </script>
</body>
Upgraded (v4)
<script>
  window.bidjs = { ... } // your BidJS config goes here
</script>
<script defer src="<<APPLICATION_URL>>/static/<<VERSION>>/js/bid-dependencies.min.js"></script>
<script defer src="<<APPLICATION_URL>>/static/<<VERSION>>/js/hbs-bid.min.js"></script>
<script defer src="<<APPLICATION_URL>>/static/<<VERSION>>/js/bid.min.js"></script>
<script defer src="https://static.bidjs.com/<<VERSION>>/bootstrap3/js/bidjs-modules.chunk.js"></script>
<noscript><link href="<<APPLICATION_URL>>/static/<<VERSION>>/css/bid.min.css" rel="stylesheet" type="text/css"></noscript>
<link rel="preload" href="<<APPLICATION_URL>>/static/<<VERSION>>/css/bid.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Please take particular note of the addition of the bidjs-modules.chunk.js to this section, as well as the following noscript and link tags.

To generate your <<APPLICATION_URL>> please see our installation guide.

There is no longer any requirement for script tags at the end of the body, so this can be entirely removed.

3 - HTML Snippet change​

A small change has been made to the HTML snippet to better allow us to isolate any BidJS CSS, ensuring it doesn't affect the parent site.

This code should be within your <body> tags, where you want the BidJS container to appear on your site.

Current (v3)
<div class="container">
  <div id="bidlogix-app" class="bidlogix-app">
  </div>
</div>

<div class="bidlogix-app">
  <div id="bidlogix-modal"></div>
</div>

<div class="container bidlogix-app">
  <div id="bidjs"></div>
</div>
Upgraded (v4)
<div class="container">
  <div id="bidlogix-app" class="bidlogix-app bidjs-app">
  </div>
</div>

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

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

4 - Potential CSS changes to Auction Details & Item Details pages​

One of the main features of this release is the reworked Auction and Item Details pages

This is a full system-wide rework of the "Timed Auction" and "Webcast Prebidding" behaviour, which will ensure better usability and system stability. Architectural changes also mean that the system is able to handle over 40x the previous load ceiling, meaning more consecutive users and more bidding.

No changes are required to see this feature, unless you have applied a great deal of custom CSS to the previous view, in which case you may need to adjust the CSS to match accordingly.

5 - Automatic image resizing and DPR (Breaking Changes)​

There were previously three image sizes defined within the system. Original, Medium and Thumbnail. The images are now delivered sized automatically depending on the device.

This also means that we will now be delivering higher DPR images for devices which support it (such as devices with Retina displays).

As a side-effect of this, we have removed a previously an undocumented image sizing options in BidJS. Most customers will not have been using this.

New options & Defaults​

Previously images have default to using the pad setting, defined on bidjs.options.imageCropMode (see options).

With v4, we now use fill as the default setting, as this is a setting which gives the best visuals for most of our clients.

Should you wish to retain the pad setting you can override this in the options described.

Gravity:​

Along with the abovementioned change to the default imageCropMode, we've also added the following option: bidjs.options.imageGravity.

This only has an effect when using fill cropMode, and has a default of auto.

When used in combination with fill this intelligently crops the image to try and focus on the "most interesting" part.

Below is an example of how setting imageGravity: 'auto' adjusts how an image may be cropped.

Gravity Center

Gravity Auto

Should you wish to opt out of this behaviour, you can set imageGravity: 'center'.

Removed options​

The following BidJS options will no longer function:

  • bidjs.options.imageHeightThumbnail
  • bidjs.options.imageWidthThumbnail
  • bidjs.options.imageHeightMedium
  • bidjs.options.imageWidthMedium
  • bidjs.options.imageHeight
  • bidjs.options.imageWidth

6 - Additional options​

The following options have been implemented, which you may wish to set at the point of upgrade

  • bidjs.options.socialLinks - See documentation
  • bidjs.options.setMarketplaceDefault - Sets home tab to default to Marketplace. See documentation
  • bidjs.options.disableBranding - Disables the BidJS branding at the bottom of the application - See documentation
  • bidjs.options.biddingRequiredForReserve - Controls the visibility of the reserve labels based on whether the user has bid - See documentation
  • bidjs.options.webcastGalleryAutoplayInterval - The webcast image carousels no longer autoplay by default. This can still be opted into. - See documentation

7 - Change in SEO MetaData option defaults​

The below options were previously false by default. They are changing to true, so you must opt out of this if you want to handle Meta Titles and Descriptions yourself.

  • bidjs.options.allowMetaDescriptionChange
  • bidjs.options.allowTitleChange

8 - Reserve Progress bar changed to Badges​

Previous to V4, the progress made against reserve was shown as a progress bar, only to users who had placed bids.

With V4 this switches to a "badge" with text, advising of position against reserve.

9 - Removal of Bootstrap spacing classes​

Previously we've made use of the Bootstrap 4 spacing classes, such as px-3, my-1 etc.

We've had feedback that these classes have caused conflicts with some clients, predominantly due to the use of the !important flag within these styles.

These have now been removed. There is unlikely to be any change required for most clients, though those who have had to work around these in the past will no longer need to do so.

10 - Update navigation links​

V4.0 introduces some changes to navigation links. This includes links to pages such as My Settings, Create Account, Login, etc. Below is an example of the changes.

Previously, the Create Account link was configured as follows:

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

Now, from V4.0 onwards it is configured like this:

<li class=“x-bidlogix--authenticated-hide hidden”><a href=“#!/account” class=“nav__item--create-account”>Create Account</a></li>

You can find all new configuration for navigation links here.