Reservation API
|
|
MAID/CLEANING SERVICES contact us directly at info@StrictManager.com so that we could switch you for Cleaning/Maid reservation mode. You can set your own cleaning prices in Reservation Price settings and minimum programing is needed.
Businesses, excluding maid/cleaning services, should set their own pricing on their own website and send prcing info to StrictManager.com through API bellow.
BASIC IDEA:
Let's assume that you own a business called Clarendon Maids. You also have ClarendonMaids.com website. Customers can go to ClarendonMaids.com and get pricing and make reservation for the next cleaning service. To make that work you will need to do (A) some adjustments on StrictManager.com portal AND (B) add some code to your website.
(A) BEFORE YOU ADD RESERVATION CODE TO YOUR WEBSITE:
A.) Email info@StrictManager.com and ask us to enable reservation system.
B.) Once reservation system is enabled, login to StrictManager.com website and go to Reservations tab that should apear next to Settings.
C.) Add zip codes for your service area under Reservation. Once at least one zip code is added, you will be able to use Reservations tab.
D.) Under Reservations tab bellow employee names, you will see Reservations businessID. Copy this code and use on every page under businessID.
(B) ADD SOME CODE TO YOUR BUSINESS WEBSITE
When business activates reservation, business manager can go to StrictManager.com->Reservations and add available appointment spot, lets say arrival between 12:00PM and 2:00PM. Then customer can to ClarendonMaids.com website, select how many bedrooms, bathrooms, sq. footage, pets and customer will receive a quote. After that customer will have a chance to click on a available appointment spot that you marked on StrictManager.com->Reservations and will make reservation. You need to configure your website to send to StrictManager.com/busav/postRsvp.php the folowing values (in a $_POST form):
businessID (required) - you will obtain this value from StrictManager.com->Reservations tab when reservations is activated. Paste this value to your code.
rsvp (required) - rsvp value (or rsvp id) is supplied when customer selects available appointment spot from your website. For customer to be able to select reservation appointment, business need to make reservation time open under StrictManager.com -> Reservations
firstname (required) - maximum charachters in a string 32.
lastname (required) - maximum charachters in a string 32.
address1 (required) - maximum charachters in a string 500.
address2 (optional) - maximum charachters in a string 500.
city (required) - maximum charachters in a string 255.
state (required) - maximum charachters in a string 255.
postCode (required) - maximum charachters in a string 31.
phone (optional) - maximum charachters in a string 32.
email (optional) - maximum charachters in a string 100.
cust_ref (optional) - this fied allows to input customer reference source. Maximum charachters in a string 500.
charge (required) - this is charge amount, should be 0 or larger decimal number. This is total charge amount from the optional quote page. This charge will be assigned to default charge item that is up during Reservation activation on StrictManager.com
time_hr (required) - this is total time that is spent in completing service, should be 0 or larger decimal number.
message (optional) - comments for the reservation. Maximum charachters in a string 5000.
optionalVal1 (optional) - maximum charachters in a string 2000.
optionalVal2 (optional) - maximum charachters in a string 2000.
optionalVal3 (optional) - maximum charachters in a string 2000.
emailText (required if send email selected while setting up Reservation) - this value allows to format email text that you can receive after customer made a reservation. You can put pricing, time, comments. This notification is in addition to scheduled reservation that will apear on StrictManager.com->Reservations when customer makes the reservation.
The following is an example of how to implement the reservation system on a website. You can modify code and design however you would like.
The example bellow includes four pages. We selected sample pages for cleaning company. You can make any modifications and send values listed above to StrictManager.com/busav/postRsvp.php
The flow of the sample code will be the following:
1.) availPostCode.html
2.) getQuote.html (optional if your would like to provide quotes online)
3.) availDates.html
4.) availForm.html
For simple implementation copy and paste code in gray into the newly created pages on your website (availPostCode.html, getQuote.html, availDates.html, availForm.html).
Don't forget to insert businessID in every page. businessID can be found in the Reservations tab after logging into the StrictManager.com account.
|
|
Verify Service Area (optional, for businesses that perform service at customer location)
|
availPostCode.html
Description: This code allows to verify that certain area is serviced by the company. (You should add service area zip codes on StrictManager.com -> Reservations -> Add/Remove service area zip codes.)
After customer submits postal code, two outcomes will be possible:
1.) if area is not serviced show message that company is not servicing that area
2.) if area is serviced take to another reservation step (getQuote.html or availDates.html).
Variable requirements:
var businessID = ""; // enter Reservations businessID ( to get id go to: StrictManager.com -> Reservations -> Under small navigation calendar you will find Reservations businessID).
HTML Code:
Place this code inside html body (location on your webpage where you want customer to enter a post code):
|
<table cellpadding="2" cellspacing="0" border="0" align="center">
<tr>
<td class="text" align="middle" colspan="2" style="color:#F00;"><strong><div id="messageDiv"></div></strong><br></td>
</tr>
<tr>
<td class="text" align="right"><strong>Zip Code Check </strong></td>
<td class="text"><input type="text" id="postCode" name="postCode" size="10" maxlength="5" value="" onkeypress="handleKeyPress(event)"/><br></td>
</tr>
<tr>
<td colspan="2" align="center"><input type='hidden' value='' id='optionalVal' /> <br /> <input type='button' class='monthButton' value='Submit' onclick='checkPostCode()' /></td>
</tr>
<tr>
<td colspan="2" align="center" style="font-size:10px; color:#333"><br /><br />Reservations & Scheduling by <a href="https://www.StrictManager.com" style="font-size:10px; color:#00F">StrictManager.com</a></td>
</tr>
</table>
|
JavaScript Code:
Insert businessID and place this code at the end of the page, after </html>:
<script type="text/javascript">
var businessID = "abc123"; // enter businessID provided by StrictManager.com
document.getElementById('postCode').focus();
function checkPostCode(optionalVal){
var postCode = document.getElementById('postCode').value;
var optionalVal = document.getElementById('optionalVal').value;
postCode = postCode.trim();
if(postCode.length > 0){
var xmlhttp = new XMLHttpRequest();
var url = "https://strictmanager.com/busav/checkPostCodes.php?id="+businessID+"&postCode="+postCode;
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myRes = JSON.parse(xmlhttp.responseText);
if(myRes=='Y'){
window.location.href = "getQuote.html?postCode="+postCode+"&optionalVal="+optionalVal;
//window.location.href = "availDates.html?postCode="+postCode+"&optionalVal="+optionalVal;
}else if(myRes=='N'){
document.getElementById('messageDiv').innerHTML = "Unfortunately we don't service this area!";
}else{
document.getElementById('messageDiv').innerHTML = "Couldn't verify information, try later!";
}
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}else{
document.getElementById('messageDiv').innerHTML = "Please enter post code!";
}
}
function handleKeyPress(e){
var key=e.keyCode || e.which;
if (key==13){
checkPostCode();
}
}
</script>
<style>
.monthButton {
background-color:#0066CC;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #B2D1F0;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:16px;
padding:4px 4px;
text-decoration:none;
text-shadow:0px 0px 0px #2f6627;
min-width:100px;
font-weight:bold;
}
.monthButton:hover {
background-color:#99C2EB;
color:#000000;
}
.monthButton:active {
position:relative;
top:1px;
}
</style>
|
|
|
Provide with a Quote (optional)
|
getQuote.html (optional)
Description: This page is optional and allows to input different values and provide the quote. You can pass quote and input values to availDates.html page with $_GET.
Example bellow is for residential cleaning company, you can modify values and code for other types of businesses.
Variable requirements:
var businessID = ""; // enter businessID provided by StrictManager.com inside quotations
HTML Code:
Place this code inside html body (location on your webpage where you want customer to input different values):
<div id="loader"></div>
<table align="center" border="0" cellpadding="5" cellspacing="5">
<tr><td align="center" class="formtext" colspan="2" style="color:#F00"><strong><div id="error_msg"></div></strong><div id="error_specific"></div></td></tr>
<tr>
<td align="right" class="formtext">Cleaning Type</td>
<td class="formtext" align="left">
<div style="padding-top:14px; padding-bottom:14px;">
<select name="cleantype" onChange="clean_type_changed()">
<option value="0">Select Cleaning Type</option>
<option value="recurring">Recurring Cleanings</option>
<option value="move_in_out">Move In/ Move Out</option>
<option value="one_time">One Time Cleaning</option>
</select>
</div>
</td>
</tr>
<tr>
<td align="right" class="formtext">Residence</td>
<td class="formtext" align="left">
<div style="padding-top:14px; padding-bottom:14px;">
<select name="residence" onChange="value_changed()">
<option value="0">Select Residence</option>
<option value="apartment">One Level Apartment</option>
<option value="house">House/ Townhouse/ Other</option>
</select>
</div>
</td>
</tr>
<tr>
<td align="right" class="formtext">Square Footage</td>
<td class="formtext" align="left">
<div style="padding-top:14px; padding-bottom:14px;">
<select name="sq_footage" onChange="value_changed()">
<option value="0">Select Sq. Footage</option>
<option value="0700">Under 800 (Small & Med Apt)</option>
<option value="1000">800 - 1200 (M/L Apt, S House)</option>
<option value="1400">1200 - 1600 (Lg Apt, S/M Hse)</option>
<option value="1900">1600 - 2200 (Med House)</option>
<option value="2500">2200 - 3000 (Med/Lg House)</option>
<option value="3500">3000 - 4500 (Large House)</option>
<option value="5000">4500 - 6000 (XL House)</option>
<option value="7000">6000 & above (XXL House)</option>
</select>
</div>
</td>
</tr>
<tr>
<td align="right" class="formtext">Number of Bedrooms</td>
<td class="formtext" align="left">
<div style="padding-top:14px; padding-bottom:14px;">
<select name="bedrooms" onChange="value_changed()">
<option value="none">Select Number of Bedrooms</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7+</option>
</select>
</div>
</td>
</tr>
<tr>
<td align="right" valign="middle" class="formtext">Number of Bathrooms</td>
<td class="formtext" align="left">
<div style="padding-top:14px; padding-bottom:14px;">
<select name="bathrooms" onChange="value_changed()">
<option value="0">Select Number of Bathrooms</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7+</option>
</select>
</div>
</td>
</tr>
<tr>
<td align="right" class="formtext">Pets</td>
<td class="formtext" align="left">
<div style="padding-top:14px; padding-bottom:14px;">
<select name="pets" onChange="value_changed()">
<option value="0">Select Pets</option>
<option value="N">No Pets</option>
<option value="1">Cat(s)</option>
<option value="1">Dog(s)</option>
<option value="2">Cat(s) & Dog(s)</option>
</select>
</div>
</td>
</tr>
<tr id="add_selected" hidden="true">
<td align="right" class="formtext"></td>
<td class="formtext" align="left" id="add_selected_list">
</td>
</tr>
<tr id="additional_selections" hidden="true">
<td align="right" class="formtext">Additional</td>
<td class="formtext" align="left" id="add_options">
</td>
</tr>
<tr>
<td colspan="2">
<div align="center"> <input type='button' class='monthButton' value='Get Quote' id='quote_butt' onclick='get_quote()' /></div>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
<tr>
<td colspan="2" align="center">
<div id="quote_results"></div>
<div id="recurring_quote_results"></div>
</td>
</tr>
<tr>
<td colspan="2">
<div align="center"> <input type='button' class='monthButton' value='Start Reservation' id='res_butt' onclick='start_reservation()' style="visibility:hidden;"/></div>
</td>
</tr>
<tr>
<td colspan="2" align="center" style="font-size:10px; color:#333"><br /><br />Reservations & Scheduling by <a href="https://www.StrictManager.com" style="font-size:10px; color:#00F">StrictManager.com</a></td>
</tr>
<tr>
<td colspan="2"><br />
</td>
</tr>
</table>
|
JavaScript Code:
Insert businessID and place this code at the end of the page, after </html>:
This example bellow is for cleaning business that has maid/cleaning businesses mode enabled and pricing set up on StrictManager.com->Reservations->Cleaning Service Reservation Settings->Pricing
<script>
document.getElementById("loader").hidden = true;
//document.getElementById('additional_selections').hidden = true;
// businessID and general calendar settings
var businessID = "abc123"; // enter businessID provided by StrictManager.com
var quote_values,
preformated_text,
cust_input,
cleantype,
q_text;
var price = 0;
var time = 0;
var xmlhttp = new XMLHttpRequest();
//var url = "http://strictmanager.com/busav/avail.php?id="+businessID+"&date="+date;
var url = "https://www.strictmanager.com/busav/getCleanPrice.php?id="+businessID;
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
var myArr = JSON.parse(xmlhttp.responseText);
quote_values = myArr.quote_values;
preformated_text = myArr.preformated_text;
document.getElementById('calendar').className -= ' overlay';
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
document.getElementById('res_butt').style.visibility = "hidden"
var postCode = getUrlVars()['postCode'],
optionalVal = getUrlVars()['optionalVal'];
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var calculated = 0;
function value_changed(){
if(calculated==1){
get_quote()
}
}
function clean_type_changed(){
var add_exist = "N";
var cleantypeCH =document.getElementsByName('cleantype')[0].value;
if(cleantypeCH == "one_time"){
var add_sel_val = "<div style='padding-top:14px; padding-bottom:14px;'><select name='add_sel' id='add_sel' onChange='add_sel_changed()'><option value='N' price='0'>Select Additional</option>";
if(Number(quote_values.o_oven) > 0){
add_sel_val = add_sel_val + "<option value='oven' price="+quote_values.o_oven+">Inside Oven ($"+quote_values.o_oven+")</option>";
add_exist = "Y";
}
if(Number(quote_values.o_fridge) > 0){
add_sel_val = add_sel_val + "<option value='fridge' price='"+quote_values.o_fridge+"'>Inside Refrigerator ($"+quote_values.o_fridge+")</option>";
add_exist = "Y";
}
add_sel_val = add_sel_val +"</select></div>";
}
if(add_exist == "Y"){
document.getElementById('additional_selections').hidden = false;
document.getElementById('add_options').innerHTML = add_sel_val;
}else{
document.getElementById('additional_selections').hidden = true;
}
value_changed();
}
function add_sel_changed(){
var add_sel = document.getElementsByName('add_sel')[0].value;
if(add_sel != "N"){
var priceEle = document.getElementsByName("add_sel")[0];
var add_price = priceEle.options[priceEle.selectedIndex].getAttribute("price");
var prev_sel = document.getElementById('add_selected_list').innerHTML;
var full_name = add_sel;
if(add_sel == 'oven'){
full_name = "Inside Oven";
}else if(add_sel == 'fridge'){
full_name = "Inside Refrigerator";
}
var add_selected = prev_sel + "<div name='"+add_sel+"' price='"+add_price+"'>"+full_name+" ($"+add_price+") <span onclick=remove_add_list('"+add_sel+"') style='text-decoration:underline;cursor:pointer;'>(remove)</span></div>";
document.getElementById('add_selected_list').innerHTML = add_selected;
document.getElementById('add_selected').hidden = false;
document.getElementsByName("add_sel")[0].value = 'N';
}
value_changed();
}
function remove_add_list(val){
var prev_sel = document.getElementById('add_selected_list');
var divs = prev_sel.getElementsByTagName("div");
var removed = "N";//to remove only one if more selected.
for(var i = 0; i < divs.length; i++){
if(removed == "N"){
var to_remove = divs[i].getAttribute("name");
if(val == to_remove){
divs[i].remove();
removed = "Y";
}
}
}
value_changed();
}
function get_quote(){
document.getElementById('quote_results').innerHTML = "";
document.getElementById('recurring_quote_results').innerHTML = "";
document.getElementById("error_msg").innerHTML = "";
document.getElementById("error_specific").innerHTML = "";
document.getElementById('res_butt').style.visibility = "hidden";
document.getElementsByName('cleantype')[0].className -= ' backRed';
document.getElementsByName('residence')[0].className -= ' backRed';
document.getElementsByName('sq_footage')[0].className -= ' backRed';
document.getElementsByName('bathrooms')[0].className -= ' backRed';
document.getElementsByName('bedrooms')[0].className -= ' backRed';
document.getElementsByName('pets')[0].className -= ' backRed';
var cleantype =document.getElementsByName('cleantype')[0].value,
residence=document.getElementsByName('residence')[0].value,
sq_footages=document.getElementsByName('sq_footage')[0].value,
sq_footage = Number(sq_footages);
bathroomss=document.getElementsByName('bathrooms')[0].value,
bathrooms=Number(bathroomss),
bedroomss=document.getElementsByName('bedrooms')[0].value,
bedrooms=Number(bedroomss),
pets=document.getElementsByName('pets')[0].value;
cust_input = "Clean type: "+cleantype+"; Residence: "+residence+"; Sq. Footage: " + sq_footages + "; Bathrooms: " + bathroomss + "; Bedrooms: " + bedroomss + "; Pets: " + pets;
var bVal = 0;
if(cleantype=="0"){
document.getElementsByName('cleantype')[0].className += ' backRed';
bVal = 1;
}
if(residence=="0"){
document.getElementsByName('residence')[0].className += ' backRed';
bVal = 1;
}
if(sq_footage==0){
document.getElementsByName('sq_footage')[0].className += ' backRed';
bVal = 1;
}
if(bathrooms==0){
document.getElementsByName('bathrooms')[0].className += ' backRed';
bVal = 1;
}
if(bedroomss=='none'){
document.getElementsByName('bedrooms')[0].className += ' backRed';
bVal = 1;
}
if(pets=='0'){
document.getElementsByName('pets')[0].className += ' backRed';
bVal = 1;
}
if(residence=='apartment'){
if(bedrooms > 3){
document.getElementsByName("residence")[0].value = 'house';
residence = 'house';
document.getElementById("error_specific").innerHTML = "Too many bedrooms for regular apartment pricing. Residence was automatically converted to house pricing.";
}
if(bathrooms > 3){
document.getElementsByName("residence")[0].value = 'house';
residence = 'house';
document.getElementById("error_specific").innerHTML = "Too many bathrooms for regular apartment pricing. Residence was automatically converted to house pricing.";
}
if(sq_footage > 2500){
document.getElementsByName("residence")[0].value = 'house';
residence = 'house';
document.getElementById("error_specific").innerHTML = "Sq footage is too large for regular apartment pricing. Residence was automatically converted to house pricing.";
}
if(sq_footage == 700 && (bedrooms == 3 || bathrooms == 3)){
document.getElementsByName('sq_footage')[0].className += ' backRed';
document.getElementById("error_specific").innerHTML = "Square footage is too small for 3 bed/bath apartment. Please select higher square footage.";
bVal = 1;
}
if(bedrooms == 0 && sq_footage > 1400){
document.getElementsByName('bedrooms')[0].className += ' backRed';
document.getElementById("error_specific").innerHTML = "Square footage is too large for studio. Please select higher number of bedrooms.";
bVal = 1;
}
}else if(residence=='house'){
if(bedrooms == 0){
document.getElementsByName('bedrooms')[0].className += ' backRed';
document.getElementById("error_specific").innerHTML = "House should have more than 0 bedrooms.";
bVal = 1;
}
if(bedrooms == 1 && sq_footage > 3500){
document.getElementsByName('bedrooms')[0].className += ' backRed';
document.getElementById("error_specific").innerHTML = "Square footage is too large for 1 bedroom. Please select higher number of bedrooms.";
bVal = 1;
}
if(bathrooms == 1 && sq_footage > 3500){
document.getElementsByName('bathrooms')[0].className += ' backRed';
document.getElementById("error_specific").innerHTML = "Square footage is too large for 1 bathroom. Please select higher number of bathrooms.";
bVal = 1;
}
if(bedrooms == 2 && sq_footage > 5000){
document.getElementsByName('bedrooms')[0].className += ' backRed';
document.getElementById("error_specific").innerHTML = "Square footage is too large for 2 bedrooms. Please select higher number of bedrooms.";
bVal = 1;
}
if(bathrooms == 2 && sq_footage > 5000){
document.getElementsByName('bathrooms')[0].className += ' backRed';
document.getElementById("error_specific").innerHTML = "Square footage is too large for 2 bathrooms. Please select higher number of bathrooms.";
bVal = 1;
}
if(sq_footage == 700 && (bedrooms > 2 || bathrooms > 2)){
document.getElementsByName('sq_footage')[0].className += ' backRed';
document.getElementById("error_specific").innerHTML = "Square footage is too small for number of bedrooms or bathrooms. Please select higher square footage.";
bVal = 1;
}
if(sq_footage == 1000 && (bedrooms > 3 || bathrooms > 3)){
document.getElementsByName('sq_footage')[0].className += ' backRed';
document.getElementById("error_specific").innerHTML = "Square footage is too small for number of bedrooms or bathrooms. Please select higher square footage.";
bVal = 1;
}
if(sq_footage == 1400 && (bedrooms > 4 || bathrooms > 4)){
document.getElementsByName('sq_footage')[0].className += ' backRed';
document.getElementById("error_specific").innerHTML = "Square footage is too small for number of bedrooms or bathrooms. Please select higher square footage.";
bVal = 1;
}
if(sq_footage == 1900 && (bedrooms > 5 || bathrooms > 5)){
document.getElementsByName('sq_footage')[0].className += ' backRed';
document.getElementById("error_specific").innerHTML = "Square footage is too small for number of bedrooms or bathrooms. Please select higher square footage.";
bVal = 1;
}
if(sq_footage == 2500 && (bedrooms > 6 || bathrooms > 6)){
document.getElementsByName('sq_footage')[0].className += ' backRed';
document.getElementById("error_specific").innerHTML = "Square footage is too small for number of bedrooms or bathrooms. Please select higher square footage.";
bVal = 1;
}
}
if(bVal==0){
price_text_short = "";
calculated = 1;
document.getElementById('res_butt').style.visibility = "visible";
if(cleantype=="one_time" || cleantype=="recurring"){
var one_price_1, one_price_2;
if(residence=='apartment'){
one_price_1 = "oa_"+bedroomss+"b_"+sq_footages;
one_price_2 = "oa_"+bathroomss+"b_"+sq_footages;
}else{
one_price_1 = "oh_"+bedroomss+"b_"+sq_footages;
one_price_2 = "oh_"+bathroomss+"b_"+sq_footages;
}
var one_price_1_val = Number(quote_values[one_price_1]),
one_price_2_val = Number(quote_values[one_price_2]);
price = (one_price_1_val + one_price_2_val)/2;
if(pets!='N'){
if(residence=='apartment'){
one_pets = "oa_p_"+sq_footages;
}else{
one_pets = "oh_p_"+sq_footages;
}
var pets_add_price = Number(quote_values[one_pets]);
price = price + pets_add_price;
}
var prev_sel = document.getElementById('add_selected_list');
var divs = prev_sel.getElementsByTagName("div");
var additional_items = "";
for(var i = 0; i < divs.length; i++){
var name = divs[i].getAttribute("name");
var add_price = divs[i].getAttribute("price");
if(Number(add_price)>0){
price = price + Number(add_price);
additional_items = additional_items + " "+name+"($"+add_price+")/";
}
}
if(additional_items.length > 1){
additional_items = " Additional Items: "+additional_items;
}
var o_base = Number(quote_values.o_base),
o_hour = Number(quote_values.o_hour);
time = (price - o_base) / o_hour;
price = 5 * Math.round(price/5);
time1 = .5*Math.round(time/.5);
cust_input = cust_input + additional_items + "; Total hours: " + time1.toString();
var text_o, text_s, o_e = 0;
if(cleantype=="recurring"){
text_o = "<strong>First Time Cleaning Price: $"+price+"</strong><br>";
}else{
text_o = "<strong>Price: $"+price+"</strong><br>";
}
text_s = "Price: $"+price+" ";
if(preformated_text.show_1_emp=="Y"){
text_o = text_o + "for up to "+time+" hours for 1 person crew<br>"
o_e = 1;
}
if(preformated_text.show_2_emp=="Y"){
var time2 = time/2;
time2 = .25*Math.round(time2/.25);
var time2text,
time2text_short;
if((time2/.5)% 1 == 0){
time2text = time2.toString() + " hours";
time2text_short = time2.toString() + "hr";
}else{
time2h = Math.floor(time2);
time2m = time2 - time2h;
// here we round up 15 minutes to 30 minutes and 45 minutes to an hour.
if(time2m == .25){var minute_text = " 30 minutes"; time2text = time2h.toString()+ " hours" + minute_text;
time2text_short = time2h.toString()+ "hr 30min";
}
if(time2m == .75){time2h = time2h + 1; time2text = time2h.toString()+ " hours";
time2text_short = time2h.toString()+ "hr";
}
}
text_o = text_o + "for up to "+time2text+" for 2 person crew<br>"
text_s = text_s + "for up to "+time2text+" for 2 person crew; "
o_e = 1;
}
if(preformated_text.show_3_emp=="Y"){
var time3 = time/3;
time3 = .25*Math.round(time3/.25);
var time3text,
time3text_short;
if((time3/.5)% 1 == 0){
time3text = time3.toString() + " hours";
time3text_short = time3.toString()+ "hr";
}else{
var time3h = Math.floor(time3);
time3m = time3 - time3h;
var minute_text,
min_text_short;
// here we round up 15 minutes to 30 minutes and 45 minutes to an hour.
if(time3m == .25){ minute_text = " 15 minutes"; min_text_short = " 15min";}
if(time3m == .75){ minute_text = " 45 minutes"; min_text_short = " 45min";}
time3text = time3h.toString()+ " hours" + minute_text;
time3text_short = time3h.toString()+ "hr" + min_text_short;
}
text_o = text_o + "for up to "+time3text+" for 3 person crew<br>"
text_s = text_s + "for up to "+time3text+" for 3 person crew; "
o_e = 1;
}
if(preformated_text.show_4_emp=="Y"){
var time4 = time/4;
time4 = .25*Math.ceil(time4/.25);
var time4text,
time4text_short;
if((time4/.5)% 1 == 0){
time4text = time4.toString() + " hours";
time4text_short = time4.toString()+ "hr";
}else{
time4h = Math.floor(time4);
time4m = time4 - time4h;
var minute_text,
min_text_short;
// here we round up 15 minutes to 30 minutes and 45 minutes to an hour.
if(time4m == .25){ minute_text = " 15 minutes"; min_text_short = " 15min";}
if(time4m == .75){ minute_text = " 45 minutes"; min_text_short = " 45min";}
time4text = time4h.toString()+ " hours" + minute_text;
time4text_short = time4h.toString()+ "hr" + minute_text_short;
}
text_o = text_o + "for up to "+time4text+" for 4 person crew<br>"
text_s = text_s + "for up to "+time4text+" for 4 person crew; "
o_e = 1;
}
if(o_e==0){
text_o = text_o + "for up to "+time+" hours for 1 person crew<br>"
text_s = text_s + "for up to "+time+" hours for 1 person crew. "
}
q_text = text_s;
text_o = text_o + preformated_text.web_after_one;
document.getElementById('quote_results').innerHTML = text_o;
if(cleantype=="recurring"){
//<div id="recurring_quote_results"></div>
//////////////////////////////////////////////////////////////
/////////////////recurring calculations///////////////////////
//////////////////////////////////////////////////////////////
var rec_price_1, rec_price_2;
if(residence=='apartment'){
rec_price_1 = "ra_"+bedroomss+"b_"+sq_footages;
rec_price_2 = "ra_"+bathroomss+"b_"+sq_footages;
}else{
rec_price_1 = "rh_"+bedroomss+"b_"+sq_footages;
rec_price_2 = "rh_"+bathroomss+"b_"+sq_footages;
}
var rec_price_1_val = Number(quote_values[rec_price_1]),
rec_price_2_val = Number(quote_values[rec_price_2]);
var rec_price = (rec_price_1_val + rec_price_2_val)/2;
if(pets!='N'){
if(residence=='apartment'){
rec_pets = "ra_p_"+sq_footages;
}else{
rec_pets = "rh_p_"+sq_footages;
}
var rec_pets_add_price = Number(quote_values[rec_pets]);
rec_price = rec_price + rec_pets_add_price;
}
var price_bi = rec_price,
price_w = price_bi * Number(quote_values.r_weekly),
price_mo = price_bi * Number(quote_values.r_monthly);
price_w = 5 * Math.round(price_w/5);
price_bi = 5 * Math.round(price_bi/5);
price_mo = 5 * Math.round(price_mo/5);
var text_r;
text_r = "<br>Weekly Price: $" + price_w+"<br>Bi-weekly Price: $" + price_bi+ "<br>Monthly Price: $" + price_mo+"<br>";
text_r = text_r + preformated_text.web_after_rec;
document.getElementById('recurring_quote_results').innerHTML = text_r;
//////////////////////////////////////////////////////////////
/////////////////end recurring calculations///////////////////
//////////////////////////////////////////////////////////////
}// end recurring
}else if(cleantype=="move_in_out"){
var move_price_1, move_price_2;
if(residence=='apartment'){
move_price_1 = "ma_"+bedroomss+"b_"+sq_footages;
move_price_2 = "ma_"+bathroomss+"b_"+sq_footages;
}else{
move_price_1 = "mh_"+bedroomss+"b_"+sq_footages;
move_price_2 = "mh_"+bathroomss+"b_"+sq_footages;
}
var move_price_1_val = Number(quote_values[move_price_1]),
move_price_2_val = Number(quote_values[move_price_2]);
var move_price = (move_price_1_val + move_price_2_val)/2;
var m_base = Number(quote_values.m_base),
m_hour = Number(quote_values.m_hour);
time = (move_price - m_base) / m_hour;
price = 5 * Math.round(move_price/5);
time1 = .5*Math.round(time/.5);
cust_input = cust_input + "; Total hours: " + time1.toString();
var text_m, text_s, o_e = 0;
text_m = "<strong>Price: $"+price+"</strong><br>";
text_s = "Price: $"+price+" ";
if(preformated_text.show_1_emp=="Y"){
text_m = text_m + "for up to "+time+" hours for 1 person crew<br>"
text_s = text_s + "for up to "+time+" hours for 1 person crew; "
o_e = 1;
}
if(preformated_text.show_2_emp=="Y"){
var time2 = time/2;
time2 = .25*Math.round(time2/.25);
var time2text;
if((time2/.5)% 1 == 0){
time2text = time2.toString() + " hours";
}else{
time2h = Math.floor(time2);
time2m = time2 - time2h;
if(time2m == .25){var minute_text = " 30 minutes"; time2text = time2h.toString()+ " hours" + minute_text;}
if(time2m == .75){time2h = time2h + 1; time2text = time2h.toString()+ " hours";}
}
text_m = text_m + "for up to "+time2text+" for 2 person crew<br>"
text_s = text_s + "for up to "+time2text+" for 2 person crew; "
o_e = 1;
}
if(preformated_text.show_3_emp=="Y"){
var time3 = time/3;
time3 = .25*Math.round(time3/.25);
var time3text;
if((time3/.5)% 1 == 0){
time3text = time3.toString() + " hours";
}else{
var time3h = Math.floor(time3);
time3m = time3 - time3h;
var minute_text,
min_text_short;
// here we round up 15 minutes to 30 minutes and 45 minutes to an hour.
if(time3m == .25){ minute_text = " 15 minutes"; min_text_short = " 15min";}
if(time3m == .75){ minute_text = " 45 minutes"; min_text_short = " 45min";}
time3text = time3h.toString()+ " hours" + minute_text;
}
text_m = text_m + "for up to "+time3text+" for 3 person crew<br>"
text_s = text_s + "for up to "+time3text+" for 3 person crew; "
o_e = 1;
}
if(preformated_text.show_4_emp=="Y"){
var time4 = time/4;
time4 = .25*Math.ceil(time4/.25);
var time4text,
time4text_short;
if((time4/.5)% 1 == 0){
time4text = time4.toString() + " hours";
time4text_short = time4.toString()+ "hr";
}else{
time4h = Math.floor(time4);
time4m = time4 - time4h;
var minute_text,
min_text_short;
// here we round up 15 minutes to 30 minutes and 45 minutes to an hour.
if(time4m == .25){ minute_text = " 15 minutes"; min_text_short = " 15min";}
if(time4m == .75){ minute_text = " 45 minutes"; min_text_short = " 45min";}
time4text = time4h.toString()+ " hours" + minute_text;
}
text_m = text_m + "for up to "+time4text+" for 4 person crew<br>"
text_s = text_s + "for up to "+time4text+" for 4 person crew; "
o_e = 1;
}
if(o_e==0){
text_m = text_m + "for up to "+time+" hours for 1 person crew<br>"
text_s = text_s + "for up to "+time+" hours for 1 person crew. "
}
q_text = text_s;
text_m = text_m + preformated_text.web_after_move;
document.getElementById('quote_results').innerHTML = text_m;
}// end move_in_out
}else{
document.getElementById("error_msg").innerHTML = "Fields marked in red are incorrect!";
}
}// end get_quote() function
function start_reservation(){
cust_input = cust_input + "; Price: " + price;
window.location.href = "/availDates.html?postCode="+postCode+"&charge="+price+"&time_hr="+time1+"&optionalVal="+encodeURIComponent(cust_input)+"&optionalVal1="+encodeURIComponent(cleantype)+"&optionalVal2="+encodeURIComponent(q_text);
}
</script>
|
CSS Code:
This is css styling code:
<style>
.monthButton {
background-color:#0066CC;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #B2D1F0;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:16px;
padding:4px 4px;
text-decoration:none;
text-shadow:0px 0px 0px #2f6627;
min-width:100px;
font-weight:bold;
}
.monthButton:hover {
background-color:#99C2EB;
color:#000000;
}
.monthButton:active {
position:relative;
top:1px;
}
.backRed{
background-color:#FF8282
}
#loader {
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #ef9d00; /* Orange */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}
</style>
|
|
|
Calendar (required)
|
availDates.html
Description: This code shows calendar with available reservation dates and times.
Variable requirements:
var businessID = ""; // enter businessID provided by StrictManager.com inside quotations
var block_today = 'Y'; // 'Y' for disallowing reservation for current day.
var number_of_months_in_future = 'A'; // value shoud be 'A' for all months or positive number (1+) for specific number of months that will show on the calendar.
HTML Code:
Place this code inside html body (location on your webpage where you want customer to enter a post code):
<div id="calendar_div"></div>
<br />
<div align="center" style="font-size:10px; color:#333"><br />Reservations & Scheduling by <a href="https://www.StrictManager.com" style="font-size:10px; color:#00F">StrictManager.com</a></div>
|
JavaScrip Code:
Insert businessID (provided by StrictManager.com) in quatation marks and place this code at the bottom of source file (after </html>):
<script>
// businessID and general calendar settings
var businessID = "abc123"; // eneter busnessID provided by StrictManager.com
var block_today = 'Y'; // 'Y' for not disallowing reservation for current day.
var number_of_months_in_future = 'A'; // value shoud be 'A' for all months or positive number (1+).
var postCode = getUrlVars()['postCode'];
var charge = getUrlVars()['charge'];
var time_hr = getUrlVars()['time_hr'];
var optionalVal = decodeURIComponent(getUrlVars()['optionalVal']);
var optionalVal1 = decodeURIComponent(getUrlVars()['optionalVal1']);
var optionalVal2 = decodeURIComponent(getUrlVars()['optionalVal2']);
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
if(!postCode){
postCode="__";
}
var mdays = ['January','February','March','April','May','June','July','August','September','October','November','December'];
var mdays_3 = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var todayd = new Date();
var dd = todayd.getDate();
var mm = todayd.getMonth()+1; //January is 0!
var yyyy = todayd.getFullYear();
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
today = yyyy+'-'+mm+'-'+dd;
var built_calendar = build_cal(businessID, today, block_today);
document.getElementById("calendar_div").innerHTML = built_calendar;
getData(today);
//////////////////////////////////////////////
////////////BUILD CALENDAR////////////////////
//////////////////////////////////////////////
function build_cal(stm_bus_id, date, currentMonth){
var cal = "";
var year = date.substring(0,4),
month = Number(date.substring(5,7)),
day = Number(date.substring(8,10)),
date = new Date(year,month-1,day),
days_in_month = new Date(year,month,0).getDate(),
title = mdays[month-1],
blank = new Date(year,month-1,1).getDay();
title_3 = mdays_3[month-1];
var ddf = day;
var mmf = month;
if(ddf<10) {
ddf='0'+ddf
}
if(mmf<10) {
mmf='0'+mmf
}
var form_day = year+'-'+mmf+'-'+ddf;
if(month==12){
var next_mo_title = mdays[0];
}else{
var next_mo_title = mdays[month];
}
cal = cal+"<table width='100%' align='middle' bgcolor='#EBEBEB' style='table-layout:fixed;' class='n-bordered'>";
cal = cal+"<tr><td colspan=2 style='text-align:left;border-left:0px;border-right:0px;border-top:0px;border-bottom:0px;'><div id='prev_mo_"+stm_bus_id+"'></div></td><td colspan=3 style='font-family:Arial;text-align:center;border-left:0px;border-right:0px;border-top:0px;border-bottom:0px;'><font size='5'>"+title+" "+year+"</font></td><td colspan=2 style='text-align:right;border-left:0px;border-right:0px;border-top:0px;border-bottom:0px;'><div id='next_mo_"+stm_bus_id+"'><input type='button' class='monthButton' value='"+next_mo_title+" >>' id='next_mo_b' onclick=next_mo('"+form_day+"') /></div></td></tr>";
cal = cal+"<tr><td width='14%' align='center' class='week_month_top' style='border-left:0px;border-right:0px;border-top:0px;'>Sun</td><td width='14%' align='center' class='week_month_top' style='border-left:0px;border-right:0px;border-top:0px;'>Mon</td><td width='14%' align='center' class='week_month_top' style='border-left:0px;border-right:0px;border-top:0px;'>Tue</td><td width='14%' align='center' class='week_month_top' style='border-left:0px;border-right:0px;border-top:0px;'>Wed</td><td width='14%' align='center' class='week_month_top' style='border-left:0px;border-right:0px;border-top:0px;'>Thu</td><td width='14%' align='center' class='week_month_top' style='border-left:0px;border-right:0px;border-top:0px;'>Fri</td><td width='14%' align='center' class='week_month_top' style='border-left:0px;border-right:0px;border-top:0px;'>Sat</td></tr><tr>";
var day_count = 1;
while (blank > 0){
cal = cal+"<td style='border:none;'></td>";
blank = blank-1;
day_count++;
}
for(day_num=1;day_num<=days_in_month;day_num++){
if (day>day_num){
cal = cal + "<td width='14%' align='center' align='center' valign='top' bgcolor='#D0D0D0' min-height='100'>";
cal = cal + "<div style='min-height:100px'>";
cal = cal + "<font class='week_month'>";
cal = cal + title_3;
cal = cal + "</font>"
cal = cal + " ";
cal = cal + "<font class='week_day'>";
cal = cal + day_num;
cal = cal + "</font></div>";
cal = cal + "</td>";
}else if (day==day_num&¤tMonth=='Y'){
cal = cal + "<td width='14%' align='center' align='center' valign='top' bgcolor='#D0D0D0' min-height='100px'>";
cal = cal + "<div style='min-height:100px'>";
cal = cal + "<font class='week_month'>";
cal = cal + title_3;
cal = cal + "</font>"
cal = cal + " ";
cal = cal + "<font class='week_day'>";
cal = cal + day_num;
cal = cal + "</font></div>";
cal = cal + "</td>";
}else{
cal = cal + "<td id='"+stm_bus_id+"_" + month + "_" + day_num + "' style='background-color:#FF9999;height:100%;width:13%;min-height:100px;text-align:center;vertical-align:top;padding:1px;overflow:hidden;text-overflow:hidden;'>";
cal = cal + "<font class='week_month'>";
cal = cal + title_3;
cal = cal + "</font>"
cal = cal + " ";
cal = cal + "<font class='week_day'>";
cal = cal + day_num;
cal = cal + "</font>";
cal = cal + "<div id='"+stm_bus_id+"_" + month + "_" + day_num + "AM' style='padding:2px 2px;min-height:30px;'></div>"
cal = cal + "<div id='"+stm_bus_id+"_" + month + "_" + day_num + "PM' style='padding:2px 2px;min-height:30px;'></div>"
cal = cal + "</td>";
}
day_count++;
if(day_count > 7){
cal = cal + "</tr><tr>";
day_count = 1;
}
}
return cal;
}
function next_mo(date){
var year = date.substring(0,4),
month = Number(date.substring(5,7)),
day = Number(date.substring(8,10)),
date = new Date(year,month,01);
if(number_of_months_in_future=='A'){
future_month(date, month);
}else{
var cch_date = new Date();
number_of_months = Number(number_of_months_in_future),
cch_date.setMonth(cch_date.getMonth() + number_of_months);
if(cch_date){
if(cch_date<date){
if(month==0){
var prev_mo_title = mdays[11];
}else{
var prev_mo_title = mdays[month-1];
}
if(month==12){
var title = mdays[0];
}else{
var title = mdays[month];
}
dd = date.getDate(),
mm = date.getMonth()+1, //January is 0!
yyyy = date.getFullYear();
if(dd<10){dd='0'+dd}
if(mm<10){mm='0'+mm}
new_date = yyyy+'-'+mm+'-'+dd;
var cal = "<table border=0 width='100%' align='middle' bgcolor='#EBEBEB'>";
cal = cal+"<tr><th colspan=2 style='text-align:left;'><div id='prev_mo'><input type='button' class='monthButton' value='<< "+prev_mo_title+"' id='next_mo_b' onclick=prev_mo('"+new_date+"') /></div></th><th colspan=3 style='font-family:Arial;'><font size='5'>"+title+" "+year+"</font></th><th colspan=2 style='text-align:right;min-width:100;'> </div></th></tr><tr height=600><td colspan=7 style='text-align:center;font-family:Arial;font-size:16px;font-weight:bold;'>Availability not posted for the month of "+title+".</td></tr></table>";
document.getElementById('calendar_div').innerHTML = cal;
}else{
future_month(date, month);
}
}else{
future_month(date, month);
}
}
}
function future_month(date, month){
dd = date.getDate(),
mm = date.getMonth()+1, //January is 0!
yyyy = date.getFullYear();
if(dd<10){dd='0'+dd}
if(mm<10){mm='0'+mm}
new_date = yyyy+'-'+mm+'-'+dd;
var built_calendar = build_cal(businessID, new_date, "N");
document.getElementById("calendar_div").innerHTML = built_calendar;
getData(new_date);
prev_mo_title = mdays[month-1],
val = "<input type='button' class='monthButton' value='<< "+prev_mo_title+"' id='next_mo_b' onclick=prev_mo('"+new_date+"') />";
document.getElementById('prev_mo_'+businessID).innerHTML = val;
}
function prev_mo(date){
var year = date.substring(0,4),
month = Number(date.substring(5,7)),
day = Number(date.substring(8,10)),
date = new Date(year,month-2,01);
var curr_date = new Date();
if(curr_date>date){
date = curr_date;
dd = date.getDate(),
mm = date.getMonth()+1, //January is 0!
yyyy = date.getFullYear();
if(mm==1){
var prev_mo_title = mdays[11];
}else{
var prev_mo_title = mdays[mm-2];
}
if(dd<10){dd='0'+dd}
if(mm<10){mm='0'+mm}
new_date = yyyy+'-'+mm+'-'+dd;
var built_calendar = build_cal(businessID, new_date, block_today);
document.getElementById("calendar_div").innerHTML = built_calendar;
getData(new_date);
document.getElementById('prev_mo_'+businessID).innerHTML = "";
}else{
dd = date.getDate(),
mm = date.getMonth()+1, //January is 0!
yyyy = date.getFullYear();
if(mm==1){
var prev_mo_title = mdays[11];
}else{
var prev_mo_title = mdays[mm-2];
}
if(dd<10){dd='0'+dd}
if(mm<10){mm='0'+mm}
new_date = yyyy+'-'+mm+'-'+dd;
var built_calendar = build_cal(businessID, new_date);
document.getElementById("calendar_div").innerHTML = built_calendar;
getData(new_date);
var val = "<input type='button' class='monthButton' value='<< "+prev_mo_title+"' id='next_mo_b' onclick=prev_mo('"+new_date+"') />";
document.getElementById('prev_mo_'+businessID).innerHTML = val;
}
}
//////////////////////////////////////////////
////////////END BUILD CALENDAR////////////////
//////////////////////////////////////////////
function getData(date){
document.getElementById('calendar_div').className += ' overlay';
var xmlhttp = new XMLHttpRequest();
var url = "https://www.strictmanager.com/busav/getAvail.php?id="+businessID+"&date="+date+"&postCode="+postCode;
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var myArr = JSON.parse(xmlhttp.responseText);
myFunction(myArr);
document.getElementById('calendar_div').className -= ' overlay';
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
function myFunction(arr) {
var out = "";
var i;
for(i = 0; i < arr.length; i++) {
var av_st = arr[i].av_st,
z_date = arr[i].z_date,
hours = arr[i].hours,
month = Number(z_date.substring(5,7)),
day = Number(z_date.substring(8,10)),
houre = arr[i].houre,
availResvId = arr[i].availResvId,
AMPM = hours.slice(-2),
divID = businessID + "_" + month + "_" + day + AMPM;
var insert = document.getElementById(divID);
if(insert){
if(hours.charAt(0)=="0"){
hours = hours.slice(1);
}
if(houre.charAt(0)=="0"){
houre = houre.slice(1);
}
var butt = "<input type='button' act='Y' class='dayButton' value='"+hours+"-"+houre+"' month='"+month+"' day='"+day+"' id='"+availResvId+"' onclick=click_res('"+availResvId+"') />";
insert.innerHTML = insert.innerHTML + butt;
var blockID = businessID + "_" + month + "_" + day;
document.getElementById(blockID).style.backgroundColor = "#CCFFCC";
}
}
}
function click_res(availResvId){
var dayTime = document.getElementById(availResvId).value;
var month = document.getElementById(availResvId).getAttribute("month");
var day = document.getElementById(availResvId).getAttribute("day");
window.location.href = "availForm.html?rsvp="+availResvId+"&dayTime="+dayTime+"&month="+month+"&businessID="+businessID+"&day="+day+"&charge="+charge+"&time_hr="+time_hr+"&optionalVal="+encodeURIComponent(optionalVal)+"&optionalVal1="+encodeURIComponent(optionalVal1)+"&optionalVal2="+encodeURIComponent(optionalVal2);
}
</script>
|
CSS Code:
This is css styling code for calendar:
<style>
.monthButton{
background-color:#0066CC;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #B2D1F0;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:16px;
padding:4px 4px;
text-decoration:none;
text-shadow:0px 0px 0px #2f6627;
min-width:100px;
font-weight:bold;
}
.monthButton:active {
position:relative;
top:1px;
}
.week_day {
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
white-space: nowrap;
/*overflow: hidden;*/
text-overflow: ellipsis;
}
.week_month_top{
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
max-width: 50px;/*doesn't ellipsis without this*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.week_month{
font-size:13px;
font-family:Arial, Helvetica, sans-serif;
max-width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dayButton {
background-color:#007A00;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border:1px solid #18ab29;
white-space: normal;
word-wrap: break-word;
/*display:inline-block;*/
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:12px;
padding:4px 2px;
text-decoration:none;
text-shadow:0px 0px 0px #2f6627;
}
.dayButton:active {
position:relative;
top:1px;
}
.n-bordered{
border: 1px solid #A9A9A9;
border-collapse: collapse;
}
.n-bordered{
border: none;
}
.bordered td, .n-bordered td{
border: 1px solid #A9A9A9;
}
.n-bordered tr:first-child td{
border-top: none;
}
.n-bordered tr td:first-child{
border-left: none;
}
.n-bordered tr td:last-child{
border-right: none;
}
.overlay{
-webkit-filter:brightness(50%);
-moz-filter:brightness(50%);
filter: url(#brightness); /* required for FF */
filter:brightness(50%);
}
</style>
|
|
|
Customer Name & Address (required)
|
availForm.html
Description: This code allows to collect info about customer and automatically save into database together with reservation time.
Variable requirements:
var businessID = ""; // enter businessID provided by StrictManager.com inside quotations
HTML Code:
Place this code inside html body (location on your webpage where you want customer to enter a post code):
<p align="center">
<span class="move_larger">Reservation For <span class="move_larger_red" id="dayText"></span>
</p>
<div id="main_body_div" align="center">
<table align="center" border="0" cellpadding="2" cellspacing="10">
<tbody>
<tr><td align="center" class="formtext" colspan="2" style="color:#F00"><strong><div id="error_msg"></div></strong></td></tr>
<tr>
<td class="formtextN" align="right">First Name </td>
<td class="formtext"><input name="firstname" size="20" type="text" maxlength="32" /></td>
</tr>
<tr>
<td class="formtextN" align="right">Last Name </td>
<td class="formtext"><input name="lastname" size="20" type="text" maxlength="32"/></td>
</tr>
<tr>
<td class="formtextN" align="right">Address </td>
<td class="formtext"><input name="address1" size="20" type="text" maxlength="100"/></td>
</tr>
<tr>
<td class="formtextN" align="right">Address (line 2) </td>
<td class="formtext"><input name="address2" size="20" type="text" maxlength="100"/></td>
</tr>
<tr>
<td class="formtextN" align="right">City </td>
<td class="formtext"><input name="city" size="20" type="text" maxlength="100"/></td>
</tr>
<tr>
<td class="formtextN" align="right">State </td>
<td class="formtext"><input name="state" size="9" type="text" maxlength="32"/></td>
</tr>
<tr>
<td class="formtextN" align="right">Zip Code </td>
<td class="formtext"><input name="postCode" size="9" type="text" maxlength="31"/></td>
</tr>
<tr>
<td class="formtextN" align="right">Phone </td>
<td class="formtext" align="left">(
<input name="phone_area" size="4" maxlength="3" type="text" /> )
<input name="phone_prefix" size="4" maxlength="3" type="text" /> -
<input name="phone_suffix" size="5" maxlength="4" type="text" /></td>
</tr>
<tr>
<td class="formtextN" align="right">Email </td>
<td class="formtext"><input name="email" size="25" type="text" maxlength="32"/></td>
</tr>
<tr>
<td class="formtextN" align="right">How did you hear about us? </td>
<td class="formtext">
<select name="how_did_you_hear">
<option value="empty"></option>
<option value="google">Google</option>
<option value="yahoo">Yahoo</option>
<option value="bing">Bing</option>
<option value="yelp">Yelp</option>
<option value="concierge">Concierge</option>
<option value="brochure">Brochure</option>
<option value="friend">Friend Reference</option>
<option value="other">Other</option>
</select>
</td>
</tr>
<tr>
<td class="formtextN" align="right"> Promotion Code</td>
<td class="formtext"><input name="promo" size="25" type="text" /></td>
</tr>
<tr>
<td class="formtextN" align="right">Additional Comments</td>
<td class="formtext"><textarea name="message" rows="5" cols="30"> </textarea></td>
</tr>
<tr>
<td colspan="2">
<div align="center"> <input type='button' class='monthButton' value='Reserve' id='res_butt' onclick='reserve()' /></div>
</td>
</tr>
<tr>
<td colspan="2" align="center" style="font-size:10px; color:#333"><br /><br />Reservations & Scheduling by <a href="https://www.StrictManager.com" style="font-size:10px; color:#00F">StrictManager.com</a></td>
</tr>
</tbody>
</table>
</div> <!-- close "main_body_div" -->
|
JavaScrip Code:
Insert businessID (provided by StrictManager.com) in quatation marks and place this code at the bottom of source file (after </html>):
<script type="text/javascript">
var businessID = "abc123"; // eneter busnessID provided by StrictManager.com
var rsvp = getUrlVars()['rsvp'],
dayTime = getUrlVars()['dayTime'],
monthNo = Number(getUrlVars()['month'])-1,
mdays = ['January','February','March','April','May','June','July','August','September','October','November','December'],
month = mdays[monthNo],
day = getUrlVars()['day'],
charge = getUrlVars()['charge'],
time_hr = getUrlVars()['time_hr'],
optionalVal = decodeURIComponent(getUrlVars()['optionalVal']);
optionalVal1 = decodeURIComponent(getUrlVars()['optionalVal1']);
optionalVal2 = decodeURIComponent(getUrlVars()['optionalVal2']);
function getUrlVars() {
var vars = {};
var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
vars[key] = value;
});
return vars;
}
var dayText = month+" "+day+", arrival "+dayTime;
//document.getElementById("dayTextTop").innerHTML = dayText;
document.getElementById("dayText").innerHTML = dayText;
var firstname=document.getElementsByName('firstname')[0].value,
lastname=document.getElementsByName('lastname')[0].value,
address1=document.getElementsByName('address1')[0].value,
address2=document.getElementsByName('address2')[0].value,
city=document.getElementsByName('city')[0].value,
state=document.getElementsByName('state')[0].value,
phone_area=document.getElementsByName('phone_area')[0].value,
phone_prefix=document.getElementsByName('phone_prefix')[0].value,
phone_suffix=document.getElementsByName('phone_suffix')[0].value,
email=document.getElementsByName('email')[0].value,
how_did_you_hear=document.getElementsByName('how_did_you_hear')[0].value,
promo=document.getElementsByName('promo')[0].value,
message=document.getElementsByName('message')[0].value;
function reserve(){
document.getElementById("error_msg").innerHTML = "";
document.getElementsByName('firstname')[0].className -= ' backRed';
document.getElementsByName('lastname')[0].className -= ' backRed';
document.getElementsByName('address1')[0].className -= ' backRed';
document.getElementsByName('city')[0].className -= ' backRed';
document.getElementsByName('state')[0].className -= ' backRed';
document.getElementsByName('postCode')[0].className -= ' backRed';
document.getElementsByName('phone_area')[0].className -= ' backRed';
document.getElementsByName('phone_prefix')[0].className -= ' backRed';
document.getElementsByName('phone_suffix')[0].className -= ' backRed';
document.getElementsByName('email')[0].className -= ' backRed';
var firstname=document.getElementsByName('firstname')[0].value,
firstname=firstname.trim(),
lastname=document.getElementsByName('lastname')[0].value,
lastname=lastname.trim(),
address1=document.getElementsByName('address1')[0].value,
address1=address1.trim(),
address2=document.getElementsByName('address2')[0].value,
address2=address2.trim(),
city=document.getElementsByName('city')[0].value,
city=city.trim(),
state=document.getElementsByName('state')[0].value,
state=state.trim(),
postCode=document.getElementsByName('postCode')[0].value,
postCode=postCode.trim(),
phone_area=document.getElementsByName('phone_area')[0].value,
phone_area=phone_area.trim(),
phone_prefix=document.getElementsByName('phone_prefix')[0].value,
phone_prefix=phone_prefix.trim(),
phone_suffix=document.getElementsByName('phone_suffix')[0].value,
phone_suffix=phone_suffix.trim(),
phone = phone_area + phone_prefix + phone_suffix,
email=document.getElementsByName('email')[0].value,
email=email.trim(),
how_did_you_hear=document.getElementsByName('how_did_you_hear')[0].value,
promo=document.getElementsByName('promo')[0].value,
message=document.getElementsByName('message')[0].value;
var bVal = 0;
if(firstname.length<1){
document.getElementsByName('firstname')[0].className += ' backRed';
bVal = 1;
}
if(lastname.length<1){
document.getElementsByName('lastname')[0].className += ' backRed';
bVal = 1;
}
if(address1.length<3){
document.getElementsByName('address1')[0].className += ' backRed';
bVal = 1;
}
if(city.length<3){
document.getElementsByName('city')[0].className += ' backRed';
bVal = 1;
}
if(state.length<2){
document.getElementsByName('state')[0].className += ' backRed';
bVal = 1;
}
if(postCode.length<1){
document.getElementsByName('postCode')[0].className += ' backRed';
bVal = 1;
}
if(phone_area.length<1){
document.getElementsByName('phone_area')[0].className += ' backRed';
bVal = 1;
}
if(phone_prefix.length<1){
document.getElementsByName('phone_prefix')[0].className += ' backRed';
bVal = 1;
}
if(phone_suffix.length<1){
document.getElementsByName('phone_suffix')[0].className += ' backRed';
bVal = 1;
}
if(email.length<5){
document.getElementsByName('email')[0].className += ' backRed';
bVal = 1;
}
var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
if(!(re.test(email))){document.getElementsByName('email')[0].className += ' backRed';bVal = 1;}
if(bVal==0){
var xmlhttp = new XMLHttpRequest();
//var url = "https://strictmanager.com/busav/avail.php?id="+businessID+"&date="+date;
var url = "https://strictmanager.com/busav/postRsvp.php";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
// alert(xmlhttp.responseText);
var myArr = JSON.parse(xmlhttp.responseText);
//alert(myArr);
if(myArr=='expired'){
var resv_comp = "<br><strong>Unfortunatly this opening is not available anymore!</strong><br><a href='availPostCode.html'>Start from the beginning</a> and select a new reservation time."
document.getElementById("main_body_div").innerHTML = resv_comp;
}else if(Number(myArr) > 0){
var resv_comp = "<br><strong>Thank you for requesting a service.<br>The service has not been scheduled yet.<br> Our representative will contact you within 24 hours by email or phone to confirm the reservation.</strong>"
document.getElementById("main_body_div").innerHTML = resv_comp;
}else{
var resv_comp = "<br><strong>Unfortunatly there was a problem requesting reservation.</strong><br>Call/Email the company or try to make the reservation again."
document.getElementById("main_body_div").innerHTML = resv_comp;
}
}
}
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var cust_ref = "How did your hear: "+ how_did_you_hear;
var message_send = "CUSTOMER SELECTIONS: "+ optionalVal;
if(promo){
message_send = message_send + "\r\nPromo: "+ promo;
}
if(message){
message_send = message_send +" \r\nComments: "+message;
}
xmlhttp.send("businessID="+encodeURIComponent(businessID)+"&rsvp="+encodeURIComponent(rsvp)+"&firstname="+encodeURIComponent(firstname)+"&lastname="+encodeURIComponent(lastname)+"&address1="+encodeURIComponent(address1)+"&address2="+encodeURIComponent(address2)+"&city="+encodeURIComponent(city)+"&state="+encodeURIComponent(state)+"&postCode="+encodeURIComponent(postCode)+"&phone="+encodeURIComponent(phone)+"&email="+encodeURIComponent(email)+"&cust_ref="+encodeURIComponent(cust_ref)+"&message="+encodeURIComponent(message_send)+"&charge="+encodeURIComponent(charge)+"&time_hr="+encodeURIComponent(time_hr)+"&optionalVal1="+encodeURIComponent(optionalVal1)+"&optionalVal2="+encodeURIComponent(optionalVal2)+"&optionalVal3="+encodeURIComponent(dayTime)+"&dayText="+encodeURIComponent(dayText));
}else{
document.getElementById("error_msg").innerHTML = "Fields marked in red are incorrect!";
}
}
</script>
|
CSS Code:
This is css styling code for customer info form:
<style>
.monthButton {
background-color:#0066CC;
-moz-border-radius:7px;
-webkit-border-radius:7px;
border-radius:7px;
border:1px solid #B2D1F0;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:16px;
padding:4px 4px;
text-decoration:none;
text-shadow:0px 0px 0px #2f6627;
min-width:100px;
font-weight:bold;
}
.monthButton:hover {
background-color:#99C2EB;
color:#000000;
}
.monthButton:active {
position:relative;
top:1px;
}
.backRed{
background-color:#FF8282
}
.move_larger {
color: #006600;
font-size: 18px;
font-weight: bolder;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
word-spacing: normal;
letter-spacing: 0.6px;
}
.move_larger_red {
color: #FF0000;
font-size: 18px;
font-weight: bolder;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
word-spacing: normal;
letter-spacing: 0.6px;
}
.formtext {
color: #000000;
font-size: 16px;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
word-spacing: normal;
letter-spacing: 0.8px;
}
.formtextN {
color: #000000;
font-size: 14px;
font-style: normal;
font-family: Arial, Helvetica, sans-serif;
word-spacing: normal;
letter-spacing: 0.8px;
}
</style>
|
|
