This feature will likely require help from a software developer.
- Go to Settings->Online Quoting and turn on ‘Allow customers to view rental availability (Quote Request)’
- Make sure you have the new quote pages activated
- Use the following sample code for each of your product pages. You’ll need to adjust the parameters
- &include_price=1 can be added to get pricing
Example link:
Sample implementation:
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
function checkAvail(item){
startdate = $('[name="'+item+'"]').val();
url = "https://www.inflatableoffice.com/quotes/check_availability.php?callback=1"
+ "&name=Demo+Rentals+LLC"
+ "&startdate="+startdate
+ "&starttime=08:00"
+ "&duration=16"
+ "&usecushion=1"
+ "&showlocations=0"
+ "&rental_names="+item;
$.getJSON( url, function( data ) {
var items = [];
$.each( data, function( rental_name, qty ) {
//items.push( rental_name + ": " + qty + " Available" );
items.push( qty + " Available" );
});
output = items.join( "" );
$('#avail').html(output);
});
}
function checkAvailLocations(item){
startdate = $('[name="'+item+'"]').val();
url = "https://www.inflatableoffice.com/quotes/check_availability.php"
+ "?name=Demo+Rentals+LLC"
+ "&startdate="+startdate
+ "&starttime=08:00"
+ "&duration=16"
+ "&usecushion=1"
+ "&showlocations=1"
+ "&rental_names="+item;
$.getJSON( url, function( data ) {
var items = [];
$.each( data, function( loc, rentals ) {
$.each( rentals, function( rental_name, qty ) {
items.push( loc + ": " + qty + " Available" );
});
});
output = items.join( "<br>" );
$('#avail').html(output);
});
}
</script>
</head>
<body>
<div id="avail"></div>
<p>Date: <input type="text" class="datepicker" name="Popcorn Machine"></p>
<input type="button" onclick="checkAvail('Popcorn Machine')" value="Check Availability" />
</body>
<script>
$(function() {
$( ".datepicker" ).datepicker();
});
</script>
</html>