The Departures widget allows you to show information to your customers about departures that are available, ahead of them reaching the hosted IBIS E-Commerce transaction pages. Below is the IBIS Departure Widget implementation example. Full article can be found here.
ibishelp.freshdesk.com
IBIS Departure Widget – Multiple Widgets on One Page
Widget #1 (with no product specified = showing all products)
Widget #2 (showing one specific product ‘Walk’)
Widget #3 (showing a product group ‘ProdGroup-Transport’)
Below are the HTML, basic JavaScript function call used to produce the widgets above, all the available options for the function and a list of required files.
<h4>Widget #1</h4> <div class="ibis-widget-departures"></div> <h4>Widget #2</h4> <div class="ibis-widget-departures2"></div> <h4>Widget #3</h4> <div class="ibis-widget-departures3"></div>
// Set variables const $appURL = 'https://book.yourwebsite.com', $cartDir = '/cart', $mode = 'iframe', $rollover = '15:00' // First calendar widget call for .ibis-widget-departures div // ibisWidgetDepartures({ appURL: $appURL, cartDir: $cartDir, mode: $mode, rollover: $rollover, then: function () { // Second calendar widget call for .ibis-widget-departures2 div with prodCode = 'walk' // ibisWidgetDepartures({ container: '.ibis-widget-departures2', appURL: $appURL, cartDir: $cartDir, mode: $mode, rollover: $rollover, prodCode: 'Walk', then: function () { // Third calendar widget call for .ibis-widget-departures3 div with prodCode = 'ProdGroup-Transport' // ibisWidgetDepartures({ container: '.ibis-widget-departures3', appURL: $appURL, cartDir: $cartDir, mode: $mode, rollover: $rollover, prodCode: 'ProdGroup-Transport' }) } }) } })
// First calendar widget call for .ibis-widget-departures div // ibisWidgetDepartures({ appURL: $appURL, cartDir: $cartDir, mode: $mode, theme: 'dark', rollover: '15:00', then: function () { // Second calendar widget call for .ibis-widget-departures2 div with prodCode = 'walk' // ibisWidgetDepartures({ container: '.ibis-widget-departures2', appURL: $appURL, cartDir: $cartDir, mode: $mode, prodCode: 'walk', theme: 'dark', then: function () { // Third calendar widget call for .ibis-widget-departures3 div with prodCode = 'ProdGroup-Transport' // ibisWidgetDepartures({ container: '.ibis-widget-departures3', appURL: $appURL, cartDir: $cartDir, mode: $mode, prodCode: 'ProdGroup-Transport', theme: 'dark', }) } }) } })
The “then” option is a callback function for when the parent ibisWidgetDepartures() is completed.
In the example above, the first ibisWidgetDepartures() function generates the calendar widget in the .ibis-widget-departures div. ibis-widget-departures is the default class name for the IBIS Departure Widget.
The second ibisWidgetDepartures() call, which is nested in the first “then”, generates the second calendar widget in the .ibis-widget-departures2 div. This class name is what is specified in the second ibisWidgetDepartures() function call in the “container” option. The same process is repeated one more time, for the .ibis-widget-departures3 div.
It is compulsory to have a unique class name for each widget. If the same class name is repeated more than once, or if “container” is not set for more than one call, only the first widget with the same class name will be generated.
Nesting the next calendar call in the “then” option is compulsory. Making multiple calls in parallel can lead to a widget error.
Tip: Wrap the above function calls in the DOMContentLoaded/DOM ready event (developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event), unless you are sure that the call is placed after all the DOM elements required for the widget.
appURL [compulsory]
This is where your IBIS E-Commerce website URL goes, and is compulsory. It needs to be a full URL with a protocol and WITHOUT a trailing ‘/’
- Format: String
-
Examples:
- Good: https://www.google.com
- Bad: www.google.com (does not have the protocol i.e. https://)
- Bad: https://www.google.com/ (has a trailing forward-slash)
container [compulsory only for the second widget onward on the page]
This is where you specify the class or ID name of the element into which the widget is generated.
- Format: String
- Default: ‘.ibis-widget-departures’
cartDir [compulsory for iframe only]
This is where you specify the shopping cart directory that you have created in the previous step. If you created a shopping cart page on https://yourwebsite.com/cart then the value here should be ‘/cart’. The ‘/’ at the beginning is required.
- Format: String
mode [compulsory for iframe only]
Value is ‘iframe’
- Format: String
theme [optional]
Select from two available themes, either ‘lite’ or ‘dark’.
- Format: String
- Default: ‘lite’
defaultDate [optional]
Use this option to specify the date that the widget shows departures for.
Tip: There is an IBIS custom function available that you may wish to use when you set the defaultDate. It’s ibisAddDays(param1, param2). param1 parameter takes JavaScript date object and param2 takes an integer for the number of days you wish to add or subtract. For example ibisAddDays(new Date(), 1) would be tomorrow. ibisAddDays() function is built in to the core IBIS Widget JavaScript library. So no additional include file is required.
- Format: JavaScript Date, String (date-like string, i.e. ‘YYYY-MM-DD’)
- Default: new Date() (i.e. today)
prodCode [optional]
Use this option to specify a product or a product group to show the departures for. The prodCode comes from the IBIS system.
To specify a product group, the value should to be ‘ProdGroup-’ then followed by the actual product group code (eg. ‘ProdGroup-Walks’ when the product group code is ‘Walks’). Case-insensitive.
- Format: String
- Default: ‘*’
showIn24H [optional]
Set this option to true to show the departure times in 24h format (eg. 14:00) instead of 12h format (eg. 2:00 pm)
- Format: Boolean
- Default: false
rollover [optional]
Specify the time after which the widget shows the availability for the following day, instead of the current day. The value should be in 24h format (eg. ‘16:00’). This option will be ignored if defaultDate is set.
- Format: String (in HH:mm format)
- Default: null
showAvail [optional]
Set this option to false to hide the Availability column.
- Format: Boolean
- Default: true
showBookLink [optional]
Set this option to false to hide the booking links.
- Format: Boolean
- Default: true
bookLinkText [optional]
Adjust this option to change the booking link text.
- Format: String
- Default: ‘Book Now’
bookLinkTextMobile [optional]
Adjust this option to change the booking link text for the mobile view. This option is particularly useful when you specify a prodCode so that the Calendar Widget is only showing availabilities for one specific product. You may wish to set this to ‘Book Now’ or similar. Setting the showAvail option to false will hide the availability display here also.
- Format: String
- Default: PRODUCT NAME (Availability) (i.e. ‘Beach Tour (5+)’)
linkOpenNewWindow [optional]
Set this option to true if you want the booking pages to open in a new window.
- Format: Boolean
- Default: false
mobileViewThreshold [optional]
Specify a value for the screen width in pixels (JavaScript window.innerWidth) where the widget display switches between the desktop mode and the mobile mode. Setting a large value (eg. 8000) to this option will make the widget to always display in the mobile mode. This is particularly useful if the area allocated to the widget is smaller than 580px in width regardless of the window size.
- Format: Integer
- Default: 580
then [optional]
A callback function for when the widget is initiated.
- Format: Callback function
jQuery Core v3.0+ (download or CDN / Google Hosted Libraries)
Customers who are on the IBIS E-Commerce versions Fit5-23.0.5.x and above, please use the IBIS Widget version 3
IBIS Widget Stylesheet (resources.ibisnz.com/ibis/ibis-fit-widgets3.min.css)
IBIS Widget JavaScript (resources.ibisnz.com/ibis/ibis-fit-widgets3.min.js)
Customers who are on the IBIS E-Commerce versions Fit5-22.6.0.x and below, please use the IBIS Widget version 2.2
IBIS Widget Stylesheet (resources.ibisnz.com/ibis/ibis-fit-widgets2.2.min.css)
IBIS Widget JavaScript (resources.ibisnz.com/ibis/ibis-fit-widgets2.2.min.js)
IBIS Widget versions 1.x are deprecated. Please use one of the above versions
Please make sure to include the jQuery Core before IBIS Widget JavaScript.