IBIS Calendar Widget – Multiple Widgets on Page – IBIS E-commerce Iframe & Widget Demo

Below is the IBIS Calendar Widget implementation example. Full article can be found here.
ibishelp.freshdesk.com

IBIS Calendar Widget – Multiple Widgets on One Page

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-calendar"></div>
<h4>Widget #2</h4>
<div class="ibis-widget-calendar2"></div>
<h4>Widget #3</h4>
<div class="ibis-widget-calendar3"></div>

// Set variables and different default dates for the calendar #2 and #3 //
const $appURL = 'https://book.yourwebsite.com',
      $cartDir = '/cart',
      $mode = 'iframe',
      today = new Date(),
      $dateForWidget2 = ibisAddDays(today, 1),
      $dateForWidget3 = ibisAddDays(today, 7)
// First calendar widget call for .ibis-widget-calendar div //
ibisCalendarWidget({
  appURL: $appURL,
  cartDir: $cartDir,
  mode: $mode,
  rollover: '15:00',
  then: function(){
    // Second calendar widget call for .ibis-widget-calendar2 div with defaultDate = tomorrow and prodCode = 'walk' //
    ibisCalendarWidget({
      container: '.ibis-widget-calendar2',
      appURL: $appURL,
      cartDir: $cartDir,
      mode: $mode,
      defaultDate: $dateForWidget2,
      prodCode: 'Walk',
      then: function(){
    // Third calendar widget call for .ibis-widget-calendar3 div with defaultDate = in 7 days and prodCode = 'ProdGroup-Transport' //
        ibisCalendarWidget({
          container: '.ibis-widget-calendar3',
          appURL: $appURL,
          cartDir: $cartDir,
          mode: $mode,
          defaultDate: $dateForWidget3,
          prodCode: 'ProdGroup-Transport'
        })
      }
    })
  }
});

// Set variables and different default dates for the calendar #2 and #3 //
const $appURL = 'https://book.yourwebsite.com',
      $cartDir = '/cart',
      $mode = 'iframe',
      today = new Date(),
      $dateForWidget2 = ibisAddDays(today, 1),
      $dateForWidget3 = ibisAddDays(today, 7)
// First calendar widget call for .ibis-widget-calendar div //
ibisCalendarWidget({
  appURL: $appURL,
  cartDir: $cartDir,
  mode: 'iframe',
  theme: 'dark',
  rollover: '15:00',
  then: function(){
    // Second calendar widget call for .ibis-widget-calendar2 div with defaultDate = tomorrow and prodCode = 'walk' //
    ibisCalendarWidget({
      container: '.ibis-widget-calendar2',
      appURL: $appURL,
      cartDir: $cartDir,
      mode: $mode,
      theme: 'dark',
      defaultDate: $dateForWidget2,
      prodCode: 'walk',
      then:function(){
    // Third calendar widget call for .ibis-widget-calendar3 div with defaultDate = in 7 days and prodCode = 'ProdGroup-Transport' //
        ibisCalendarWidget({
          container: '.ibis-widget-calendar3',
          appURL: $appURL,
          cartDir: $cartDir,
          mode: $mode,
          theme: 'dark',
          defaultDate: $dateForWidget3,
          prodCode: 'ProdGroup-Transport'
        })
      }
    })
  }
});

The “then” option is a callback function for when the parent ibisCalendarWidget() is completed.

In the example above, the first ibisCalendarWidget() function generates the calendar widget for the .ibis-widget-calendar div. ibis-widget-calendar is the default class name for IBIS Calendar Widget.

The second ibisCalendarWidget() call, which is nested in the first “then” option, generates the second Calendar Widget in the .ibis-widget-calendar2 div. This class name is what is specified in the second ibisCalendarWidget() function call in the “container” option. The same process is repeated once more, for the .ibis-widget-calendar3 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 calendar 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.

Tip2: There is an IBIS custom function available that you may wish to use when you set the defaultDate. The above example uses this function in it also. 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. No additional include file is required.

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: http://www.google.com
- Bad: www.google.com (does not have a 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-calendar’

cartDir [compulsory for iframe only]
This is where you specify the shopping cart directory on your website. 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+)’)

loadOnInit [optional]
Set this option to false to NOT show the available departures for the current date on the widget load.

Format: Boolean
Default: true

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

IBIS Calendar Widget – Multiple Widgets on Page

IBIS Calendar Widget – Multiple Widgets on One Page

Widget #1 (with no product specified = showing all products)

Widget #2 (showing availability on tomorrow for one specific product ‘Walk’)

Widget #3 (showing availability on today next week for a product group ‘ProdGroup-Transport’)