Documentation | Disposition Widget for single day/multiple items version: 1.1

Installation

---

<div id="rentware-widget--dispo-widget" style="min-height: 400px;"></div>

<script>
    var loadRentwareWidgetScriptAsync = function(uri){
        return new Promise((resolve, reject) => {
        var tag = document.createElement('script');
        tag.src = uri;
        tag.async = true;
        tag.onload = () => {
            resolve();
        };
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    });
    }
    var rentwareWidgetScriptLoaded = loadRentwareWidgetScriptAsync('https://rentware-cwidgets-cdn.b-cdn.net/collections/multipleItemsDispoWidgetDynamic.js');
</script>

<script>
    rentwareWidgetScriptLoaded.then(function(){
        MultipleItemsDispoWidgetDynamic.init({
            elementId: 'rentware-widget--dispo-widget',
            bookingUrl: "https://spreeboote.rentware.io",
            lang: "de", // de-ch, en-gb, en-us, nl, nb
            step: "15",
            minDuration: "60",
            durationStep: "30",
            openingHour: "08", // 'HH'
            closingHour: "23", // 'HH'
            date: {
                dateOffset: '1', // add x days to default selected date when current date is in season
            },
            season: {
                start: "04-10", //'MM-DD' first day of the season in the current year
                end: "12-31", //'MM-DD' last day of the season in the current year
                endOfSeasonNotice:
                    "Unsere Season ist zu Ende. Wir freuen uns aufs nächste Jahr",
            },
            defaults: {
                showAllSlotsText: "freie Slots anzeigen",
                hideAllSlotsText: "freie Slots ausblenden",
                itemDetailLinkTitle: "zur Detailseite",
                currency: 'CHF',
                bookingBtn: 'Buchen',
                notAvailable: 'Nicht verfügbar', 
                nothingAvailable: 'Für diesen Zeitraum nichts verfügbar',
            },
            items: [
                {
                    id: "ELQIR9",
                    name: "Pina",
                    image:
                        "https://rentware.ams3.digitaloceanspaces.com/bb4fba0d-e190-4061-71fc-4ec78f7b9032/8db0dc8d-aa56-4a72-4ecd-4a44a8490d34_c_1554275510.jpg",
                    detailPageUrl: "https://www.spreeboote.de/boote/pina/",
                    features: ["11 Pers", "30 PS", "SBF", "WC"],
                },
                {
                    id: "T417LX",
                    name: "Coco",
                    image:
                        "https://rentware.ams3.digitaloceanspaces.com/bb4fba0d-e190-4061-71fc-4ec78f7b9032/23c7abbd-26bd-4497-713b-4ad5e2a1e705_c_1557234844.jpg",
                    detailPageUrl: "https://www.spreeboote.de/boote/coco/",
                    features: ["9 Pers", "15 PS"],
                },
                {
                    id: "S3D6O2",
                    name: "Aurora",
                    image:
                        "https://rentware.ams3.digitaloceanspaces.com/bb4fba0d-e190-4061-71fc-4ec78f7b9032/795597a4-2278-42a3-7e82-738726cf1fa8_c_1554275599.jpg",
                    detailPageUrl: "https://www.spreeboote.de/boote/aurora/",
                    features: ["12 Pers", "15 PS", "WC"],
                },
            ],
        });
    });
</script>

Changes with version 1.1

---

1. You can now display the quantity of the item

   Therefor you can use the options
   'showQuantityInformation', 'showQuantityTotal' and 'showQuantitySelector'

   Since the widget shows always the biggest possible slot the quantity can be a bit misleading. Imagine a kayak rental with a single kayak and quantity of 5. Now 4 of them are booked in the moring but all 5 of them are available in the afternoon. The widget would show a slot over the whole day with quantity 1 of 4 avaialable. To tackle that issue we introduced the option to show slots grouped by qauntity:

   groupSlotsBy: 'quantity'

2. We added the option to show all slots an widget load if desired.
3. We added the option to hide the price if desired.
4. We changed the layout a bit: you now have a 'From' and 'To' field infront off the time input

---

<script>
rentwareWidgetScriptLoaded.then(function(){
    MultipleItemsDispoWidgetDynamic.init({
        ...
        shopNextStep: true,
        showPrice: false,
        showAllSlotsInitially: true,
        showQuantityInformation: true, // shows how many items are available eg.: >>3 of 6 available<<
        showQuantityTotal: true, // shows how many items are available in total eg.: 3 of >>6<< available
        showQuantitySelector: true, // user can adjuste the item quantity
        groupSlotsBy: 'quantity', //show multiple slots if there are different quantities throughout the day
        ...
        ...
        ...
        strings: {
            afterPrice: 'now',
            inputLabelFrom: 'From',
            inputLabelTo: 'To',
            choose: 'HH:MM',
            beforeAvailableQuantity: '',
            beforeTotalQuantity: ' of ',
            afterTotalQuantity: ' available',
        }
    });
});
</script>