Item Price Widget
Here is a preview of the widget. Be aware that there are a couple of optional settings eg. the three buttons at the bottom are optional. For those buttons you also have the option to hide them when the item is available.
Installation
<div id="rentware-widget--item-price" style="min-height: 100px;"></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/itemWidgetDynamic.js');
</script><script>
rentwareWidgetScriptLoaded.then(function(){
ItemWidget.init({
elementId: 'rentware-widget--item-price', // the script will look for the id you gave the container in the first step
bookingUrl: 'https://shop.demo.rentware.io', // without the trailing slash - so it must end with '.io' and not '.io/'
lang: 'de', // change language to 'de' 'en' or 'nb'
itemId: 'Q2TYP4',
withTimeRange: true,
withDateRange: true,
shopNextStep: true, // automatically jump to the next step in the rentware shop
openInNewTab: true,
date: {
dateOffset: 1,
},
time: {
default: {
start: '11:00',
end: '14:00'
},
},
strings: {
buy: 'Mieten für',
notAvailable: 'Nicht verfügbar',
pickUp: 'Ablegen',
dropOff: 'Anlegen',
currency: 'EUR',
notAvailableHelp: 'Das Produkt ist zu diesem Zeitpunkt nicht verfügbar. Bitte wählen Sie ein anderes Datum aus.', // leave empty or delete this line if you don't want to show a message when the item is not available
},
buttons: {
enableLinkToGeneralShop: true, // turn calendar link on or off (true/false)
hideLinkToGeneralShop: true, // hides the calendar link when item is available
linkToGeneralShop: '🎲 Anderes Produkt finden',
linkToGeneralShopTitle: 'Sie werden zum Shop weitergeleitet', // text on mouse hover
enableLinkToItemCalendar: true, // turn calendar link on or off (true/false)
hideLinkToItemCalendar: false, // hides the calendar link when item is available
linkToItemCalendar: '📆 Verfügbarkeitskalender',
linkToItemCalendarTitle: 'Sie werden zum Shop weitergeleitet', // text on mouse hover
enableCustomLink: true, // turn custom link on or off (true/false)
hideCustomLink: true, // hides the custom link when item is available
customLinkUrl: 'https://rentware.io', // url or anchor
customLink: 'Enquire now',
customLinkTitle: 'jump to the enquiry form', // text on mouse hover
openCustomLinkInNewTab: true,
}
});
});
</script>Custom Style
You can override the style via CSS. Here is an example for one of our clients:
#rentware-widget--item-price--custom-styled > div {
width: 100% !important;
}
#rentware-widget--item-price--custom-styled > div > div {
border-radius: 0 !important;
background: white !important;
box-shadow: 0px 2px 25px 0px rgba(0,0,0,0.1) !important;
padding: 20px 0 0 0 !important;
transition: background .3s,border .3s,border-radius .3s,box-shadow .3s,-webkit-border-radius .3s,-webkit-box-shadow .3s !important;
}
#rentware-widget--item-price--custom-styled > div > div > div > label {
font-size: 16px !important;
line-height: 25px !important;
font-weight: normal !important;
color: #002128 !important;
text-transform: uppercase !important;
font-family: "Montserrat UltraLight" !important;
}
#rentware-widget--item-price--custom-styled .dEaUux.dEaUux.dEaUux {
box-shadow: none !important;
border-radius: 0 !important;
position: relative !important;
}
#rentware-widget--item-price--custom-styled > div > div > div > div > input:first-child {
font-size: 24px !important;
font-weight: 200 !important;
line-height: 1.2 !important;
border-radius: 0 !important;
padding-left: 32px !important;
color: black !important;
position: relative !important;
}
#rentware-widget--item-price--custom-styled > div > div > div > div > input:nth-child(2) {
font-size: 20px !important;
font-weight: 200 !important;
line-height: 1.2 !important;
padding-left: 0 !important;
color: black !important;
text-align: right !important;
padding-right: 4px !important;
}
#rentware-widget--item-price--custom-styled > div > div > div > div > span {
width: 24px !important;
height: 24px !important;
left: 0 !important;
top: 12px !important;
background-size: contain !important;
}
#rentware-widget--item-price--custom-styled > div > div > button, #rentware-widget--item-price--custom-styled > div > div > button {
font-size: 24px !important;
padding: 35px 4px !important;
line-height: 40px !important;
height: auto !important;
border-radius: 0 !important;
margin: 0 !important;
}
#rentware-widget--item-price--custom-styled > div > div > button.diMvFS {
background: #2B3F4D !important;
}
#rentware-widget--item-price--custom-styled > div > div > button {
background: gray !important;
}
#rentware-widget--item-price--custom-styled .jDmbUw.jDmbUw.jDmbUw {
display: none !important;
}
#rentware-widget--item-price--custom-styled .iUhOHo.iUhOHo.iUhOHo {
display: none !important;
}
#rentware-widget--item-price--custom-styled .AnPRG.AnPRG.AnPRG > span {
text-transform: uppercase !important;
}
#rentware-widget--item-price--custom-styled .jOUqxW.jOUqxW.jOUqxW {
padding: 0 20px !important;
width: auto !important;
}
@media screen and (min-width: 767px) {
#rentware-widget--item-price--custom-styled > div > div {
display: flex !important;
flex: 1 1 200px !important;
padding: 0 !important;
}
#rentware-widget--item-price--custom-styled > div > div > div:nth-child(2n) {
border-left: 1px solid #E7ECED !important;
}
#rentware-widget--item-price--custom-styled .jOUqxW.jOUqxW.jOUqxW {
margin-top: 20px !important;
}
#rentware-widget--item-price--custom-styled input.sc-EHOje.sc-bZQynM.jQWifX {
width: 100% !important;
}
#rentware-widget--item-price--custom-styled input.sc-EHOje.sc-gzVnrw.lpeQdM {
width: 100% !important;
text-align: left !important;
}
}Changes with version 1.1
1. You can now display 2 links to the shop:
- a link to the availability calendar of the item in rentware
- a link to the shop with the selected settings
You can turn it on and off and you can decide whether its always visible or hidden when the item can be booked.
2. We added an option to show a help text when a selected date is not available beneth the button
Leave this option empty to not use it.
Here is an example of the buttons, the help text and the use of single date and no time range
<script>
rentwareWidgetScriptLoaded.then(function(){
ItemWidget.init({
...
withTimeRange: false,
withDateRange: false,
shopNextStep: true,
...
...
...
...
strings: {
buy: 'Rent for',
notAvailable: 'Not available',
pickUp: 'Start',
dropOff: 'End',
currency: ' €',
notAvailableHelp: 'Das Produkt ist zu diesem Zeitpunkt nicht verfügbar. Bitte wählen Sie ein anderes Datum aus.', // leave empty or delete this line if you don't want to show a message when the item is not available
},
buttons: {
enableLinkToGeneralShop: true, // turn calendar link on or off (true/false)
hideLinkToGeneralShop: true, // hides the calendar link when item is available
linkToGeneralShop: '🎲 Find a different Product',
linkToGeneralShopTitle: 'you will be redirected to the shop', // text on mouse hover
enableLinkToItemCalendar: true, // turn calendar link on or off (true/false)
hideLinkToItemCalendar: false, // hides the calendar link when item is available
linkToItemCalendar: '📆 Availability calendar',
linkToItemCalendarTitle: 'you will be redirected to the shop', // text on mouse hover
}
});
});
</script>
Changes with version 1.2
We added an option to show a custom link just like in version 1.1
<script>
rentwareWidgetScriptLoaded.then(function(){
ItemWidget.init({
...
...
buttons: {
...
...
enableCustomLink: true, // turn custom link on or off (true/false)
hideCustomLink: true, // hides the custom link when item is available
customLinkUrl: 'https://rentware.io', // url or anchor
customLink: 'Enquire now',
customLinkTitle: 'jump to the enquiry form', // text on mouse hover
openCustomLinkInNewTab: true,
}
});
});
</script>
Changes with version 1.3
You can now display the quantity of the item
<script>
rentwareWidgetScriptLoaded.then(function(){
ItemWidget.init({
...
shopNextStep: true,
showPrice: 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
...
...
...
strings: {
buy: 'Rent for',
notAvailable: 'Not available',
...
afterPrice: 'now',
beforeAvailableQuantity: '',
beforeTotalQuantity: ' of ',
afterTotalQuantity: ' available',
}
});
});
</script>