Item Details and Cart Gadgets

MVC Enhancement

The Item Details Gadget is only one aspect of operator pages. If you require information on pulling data from Bookit's API please refer to the Operator Pages guide for further information.

As both the Item Details and Cart Gadgets are required to be together, and work together, the two will be covered in the one document. Without the Cart Gadget the Item Details Gadget will not work, and as such both must be implemented on the same page on your site.

As with other gadgets, both of these require the vcID to function correctly. See this page's initialisation below:  

<script src="//gadgets.impartmedia.com/gadgets.jsz" type="text/javascript"></script>
<script type="text/javascript">
    $w(function() {
        BE.gadget.details('#item-example',{
            vcID:85
        });
        BE.gadget.cart('#cart-example',{
            vcID:85,
            bookingURL:'https://be-gadgets.bookeasy.com.au/doc/04-booking-gadget.html'
        });
    });
</script>

As mentioned in other documentation, the second most important option to get right is the link to the next gadget in the chain which, in this case, is the Booking Gadget. This is defined in the Cart gadget via the bookingURL parameter.

Note: whilst we've only started the cart gadget on the operator page, you're free, and we would recommend, to add the cart gadget on its own sitewide, allowing your users to view it from anywehere within the site.

The Cart gadget has two display modes which can be specified using the autoCollapse parameter. 

The default value for this parmater is false. If the parameter is omitted from the gadget or set to false, the full contents of the cart will be displayed, as shown below.

gadget-cart-collapsed-false

When this parameter has a value of true, the cart will appear as a small icon as shown in the following screenshot.

gadget-cart-collapsed-true

 

 

Item Details Gadget Defaults

If not supplied, these are the default values for the Item Details Gadget:

campaignID:                             null
collapseToursMode:                      true
descriptionHover:                       true
embedSearch:                            true
noAdults                                45 
noChildren                              45
noInfants                               45
noConcessions                           45
noStudents                              45
noObservers                             45
noFamily                                10
productID                               null
showSimilarProperties:                  null
thumbsInGrid:                           true
type                                    null
vcID:                                   null
specificTours:                          null
showEmptyCartButton                     true
showQuantity:                           true
showPeriods:                            true
showAllAccom:                           false
showAllTours:                           false
showAllEvents:                          false
showHoverInline:                        false
showHoverInlineToggleButtonContent:     .

All possible parameters are described below. Click the title to see more information.


Note: in addition to its own options, the Item Details Gadget (if embedSearch is true) can be passed options from the Search Gadget to initialise state.


agKey

e.g. `agKey: "12345678-9abc-0def-g98h-7i6kl5m43210"`

When you supply a Bookeasy Agent’s unique Agent Key, the gadgets will authenticate the end user and tag the booking as a booking received by the Bookeasy Agent pertaining to the Agent Key specified. Bookeasy recommends that when used, this parameter should be applied to the Search, Region and Item Details gadgets in order to ensure that agent authentication is always applied, regardless of the web page the end user lands on.

You can obtain a Bookeasy Agent's unique Agent Key via the Bookeasy Staff Console when viewing the Agent, or the homescreen of the agent’s Bookeasy Agent Console.

bookingStatus

OPTIONAL. This value is to set to "Booked" by default when a property is unavailable. But the user can still go head and change the text to any customised message, as required, using this option.

campaignID

This will put the gadget into campaign mode, and will only show operators that are part of the supplied campaign ID. In campaign mode, the sort order tool is hidden, as the sort order is defined at the campaign level. Should the campaign have used the levels functionality, then the gadget will add classes you can use to style the various levels.

The syntax for converting your level names to classes is: set to lowercase, replace spaces with hyphens and remove any numbers at the start of the name. So for example, 'First Class' would become 'first-class'.

Note: your style declarations will need to use !important if you don't set rules any more specific than the ones already in use by the gadget.

collapseToursMode

container

descriptionHover

Set to false to not show descriptions of each item when the user hovers their mouse pointer over the item name.

embedSearch

If set to false, you will need to manually start your own Search Gadget on the page.

enableRegionSearch

Set to true to get the gadget to break down the location refine tools select list into state/region/location. Must have the showRefineTools option set to true.

externalSearch

filterOrder

forceRegionLoc

When enableRegionSearch is set to true this will set the location select list to the value supplied.

forceRegionRegion

When enableRegionSearch is set to true this will set the region select list to the value supplied.

forceRegionState

When enableRegionSearch is set to true this will set the state select list to the value supplied.

itemDetailPageURL

maxNumberOfGuests

maxProperties

noAdults

Maximum number of adults that can be selected from the adult drop down.

noChildren

Maximum number of children that can be selected from the children drop down.

noInfants

Maximum number of infants that can be selected from the infants drop down.

noConcessions

Maximum number of concessions that can be selected from the concessions drop down.

noStudents

Maximum number of students that can be selected from the students drop down.

noObservers

Maximum number of observers that can be selected from the observers drop down.

noFamily

Maximum number of family members that can be selected from the family drop down.

onlyGold

When set to 'true' the gadget will only show Gold Medal (instantly bookable) operators.

packageDetail

productID

Normally, this is not required as the previous gadget will use the URL hash to pass the required information. This is the same for the type option below. If you need to hard-set the gadget to a productID, use this.

productIDs

random

restrictedButtonText

showAllAccom

If set to true, this will show all operators, even if they are unavailable for the time period searched.

showAllEvents

If set to true, this will show all events, even if they are unavailable for the time period searched.

showAllTours

If set to true, this will show all tour operators, even if they are unavailable for the time period searched.

showFutureEvents

showFutureEventsPeriod

showCurrencySelector

showHoverInline

This option will alter the description hover to show inline instead of as a tooltip.

showHoverInlineToggleButtonContent

This option will alter the toggle buttons content for inline.

showPeriod

Set to false if you don't want to show periods dropdown in the embedSearch option.

showQuantity

Set to false if you don't want to show quantity dropdown for each item in the grid.

showSimilarProperties

If passed an object that matches:

{
    container: 'css-selector',
    onlyGold: false,
    random: true,
    maxProperties:3,
    maxNumberOfGuests:true,
    itemDetailPageURL:'/product/detail.html',
    filterOrder: ['type','rating','location'],
enableRegionSearch: true,
forceRegionState: "QLD",
forceRegionRegion: "Brisbane and South East Qld Country",
forceRegionLoc: "Brisbane"
} 

The gadget will attempt to show similar properties to the current one. 'container' refers to the DOM element you want the similar properties list inserted into.

'onlyGold' is a boolean to show only gold medal operators.

'random' is a boolean that will attempt to show different properties every page load.

'maxProperties' will let you set the gadget to show up to seven similar properties if you prefer/ have space.

'maxNumberOfGuests' will only display similar properties whereby the number of guests is equal to or greater than the number of PAX requested by the end user.

'itemDetailPageURL' is the syntax used to find your item details pages. See the option of the same name in the Region Gadget for more information.

'filterOrder' is an array, where you can rearrange the order shown above if you wish to prioritise location over rating (for example) when the gadget chooses which properties to show.

'enableRegionSearch' is a boolean which will enable you to specify a specific area to search.

'forceRegionState' only applies when enableRegionSearch is set to true. Specifying this value will limit the results to the state provided.

'forceRegionRegion' only applies when forceRegionRegion is set to true. Specifying this value will limit the results to the region provided.

'forceRegionLoc' only applies when forceRegionLoc is set to true. Specifying this value will limit the results to the location provided.

specificRooms

If you would only like to show specific rooms in the gadget use this parameter to pull through specified room IDs, which can be found against room types. eg. specificRooms: [54455,54456,54457]

specificTours

If you would only like to show specific tours in the gadget use this parameter to pull through specified tour IDs, which can be found against tour occurrences. eg. specificTours: [63207,63208,63225]

stageId

thumbsInGrid

Set to false if you don't want to show thumbnails for each item in the grid.

type

As above with productID, this is not normally used. If you need to hard-set a product type, set this to a string, either: 'accom', 'tours', 'events', 'carhire', or 'packages'.

useImageSlideShow

This is how the images are rendered. Include the required libs then pass jquery object to the gadget.

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/./jquery.aw-showcase.js"></script>
<script>jqNoConflict = $.noConflict();</script>
...
useImageSlideShow: {
    jQueryObject: jqNoConflict
},

vcID

You must set this to the Visitor Centre ID.

showEmptyCartButton

If set to true, an "Empty Cart" button will appear when cart items are displayed. Selecting this will allow a user to empty ALL product items in their shopping cart.

Cart Gadget Defaults

If not supplied, these are the default values for the Cart Gadget:

autoCollapse:        false
bookingURL:          '/product/book.html'
campaignID:          null
overlaySettings:     {
    useBlockout:     true,
    overlayColour:   '#777',
    overlayOpacity:  0.5,
    innerBackground: '#FFF',
    zIndexLowest:    1000000,
    width:           false,
    height:          false
},
showPromoCode:       false,
vcID:                null

Each option is described below. Click the title to see more information.


autoCollapse

If set to true, the gadget will go into a collapsed mode which only shows an icon and a number signifying the number of items in the cart.

bookingURL

Set this to the URL of your booking page. Make sure that it is a full URL, pointing to a secure (SSL) page on your website.

campaignID

This will put the gadget into campaign mode, and will only show operators that are part of the supplied campaign ID. In campaign mode, the sort order tool is hidden, as the sort order is defined at the campaign level. Should the campaign have used the levels functionality, then the gadget will add classes you can use to style the various levels.

The syntax for converting your level names to classes is: set to lowercase, replace spaces with hyphens and remove any numbers at the start of the name. So for example, 'First Class' would become 'first-class'.

Note: your style declarations will need to use !important if you don't set rules any more specific than the ones already in use by the gadget.

expiration

externalSearch

isBooking

length

overlaySettings

If supplied with an object, this allows you to override some of the basic parts of the overlay that appears when a user clicks a product to book.

'useBlockout' set to false will stop the overlay from having a panel behind it blocking the page.

'overlayColour' allows you to change the colour of the blockout panel.

'overlayOpacity' sets the transparency of the blockout panel, from 0->1.

'innerBackground' sets the background colour of the actual overlay panel itself.

'zIndexLowest' sets the z-index of the panel, should you need a higher number.

'width' sets the width of the overlay panel, and 'height' sets its height.

reuseBookingQuestions

showBookingTimer

showPromoCode

When set to true, displays a promotional code input field on the cart gadget. This field must be configured correctly in Bookeasy to work with the cart gadget. You must also add this parameter to the Booking gadget in order to show the promotional code input field on the embedded cart gadget.

specificTours

You can only use this option if you are a Tour Manager client. It is an array of integers with each value in the array representing a tour ID. When specified the tour will be displayed in the final results if it has availability.

tripPlannerMode

vcID

You must set this to the Visitor Centre ID.

vcModules

warning