IBIS Cart Widget

If you are using an iframe on your website to contain the IBIS E-Commerce platform, you will likely want to include a shopping cart icon on your own page so that the customer has visibility over how many items they have added to the cart and allow them to view it any time by clicking on the icon.

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

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.

<div class="ibis-widget-cart"></div>

*******************************************************
// IBIS Cart Widget v2
*******************************************************
// Cart Widget v2 is ssential if you are on IBIS Widget v3 and above, or highly recommended on IBIS Widget v2.
ibisWidgetCart({
    appURL: 'https://book.yourwebsite.com',
    cartDir: '/cart',
    mode: 'iframe'
})


*******************************************************
// IBIS Cart Widget v1
*******************************************************
// IMPORTANT: This version is deprecated and no longer maintained. Please use the version 2 above
function ibisCartWidget() {
    ibisRefreshCart({
        appURL: 'https://book.yourwebsite.com',
        cartDir: '/cart',
        mode: 'iframe'
    })
}
// Then call the function on document ready and iframe load //
// document.ready for pages that don’t have the Ibis iframe and iframe.load for those do //
ibisCartWidget();
$('.ibis-iframe').load(function(){
    ibisCartWidget();
});

// Create a function for IBIS Cart Widget with options //
function ibisCartWidget() {
    ibisRefreshCart({
        appURL: 'https://book.yourwebsite.com',
        cartDir: '/cart',
        mode: 'iframe',
        theme: 'dark'
    });
}
// Then call the function on document ready and iframe load //
// document.ready for pages that don’t have the Ibis iframe and iframe.load for those do //
ibisCartWidget();
$('.ibis-iframe').load(function(){
    ibisCartWidget();
});

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.