- Auto complete cities form
- Delete old properties
- Add new properties
- Mobile optimise pages
- Book now contact form?
- About us info
- Flight info
- Connect to domain then update share this code
- Preloader etc
- Resorts add properties form
- Resorts page
- Book now
- Listings - resorts
Scrollto to enter autocomplete mobile
<div class="spinner" id="preloader">
<div class="bounce1"></div>
<div class="bounce2"></div>
<div class="bounce3"></div>
</div>
<script type="text/javascript">
(function(){
var preload = document.getElementById("preloader");
var loading = 0;
var id = setInterval(frame, 64);
function frame(){
if(loading == 100){
clearInterval(id);
} else {
loading = loading + 1;
if(loading == 90){
preload.style.opacity = "0";
}
}
}
})();
</script>
<style>
.spinner {
position: absolute;
height: 2em;
width: 2em;
overflow: show;
margin: auto;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 70px;
text-align: center;
}
.spinner > div {
width: 18px;
height: 18px;
background-color: #36B5CD;
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
}
</style>
ALL in dropdown
For the first, just add another value to the list - with label ALL and some value placeholder, for instance '-'
Then in the onChange event do an if, like -
export function dropdown1_onChange(event) {
let value = $w('#dropdown1').value;
if (value === '-') // run query without filter
else // run query with filter
}
import wixWindow from 'wix-window';
import {session} from 'wix-storage';
import {autocomplete} from 'backend/gapi';
import {details} from 'backend/gapi';
import {reverse} from 'backend/gapi';
import {
sendEmail, sendEmailWithRecipient
}
from 'backend/email';
$w.onReady(function () {
$w("#dataset1").onAfterSave(sendFormData);
$w("#repeater1").onItemReady( ($w, itemData) => {
const text1 = $w("#text64");
text1.text = itemData.text1;
const text2 = $w("#text65");
text2.text = itemData.text2;
});
$w("#repeater3").onItemReady( ($w, itemData) => {
const text5 = $w("#text70");
text5.text = itemData.text5;
const text6 = $w("#text69");
text6.text = itemData.text6;
});
$w("#repeater1").collapse(); // hidden on page load
$w("#repeater3").collapse(); // hidden on page load
// handle each location detail line
$w("#repeater2").onItemReady( ($w, itemData) => {
const text3 = $w("#text66");
text3.text = itemData.text3;
const text4 = $w("#text67");
text4.text = itemData.text4;
});
$w("#repeater2").hide(); // hidden on page load
// retrieve saved location (if exists) from local storage
//let id = session.getItem("place_id");
//if(id === undefined || id === null || id.length === 0) {
// if no location saved, find the IP-based geographic location
//geoloc();
//}
//else {
// if a location was saved in local storage, get the details
//set_details(id);
//}
});
export function Destination_keyPress(event, $w) {
// clear the details display of the old location
wixWindow.scrollTo(10, 502);
$w("#repeater2").data = [];
$w("#repeater2").hide();
if ($w('#Destination').value === "")
$w('#repeater1').collapse();
// get the user's latest input
let val = $w("#Destination").value;
let key = event.key;
if(key.length === 1) {
val += key;
}
if(val.length === 0)
return;
// use the current value to get a list of location suggestions
// we call the autocomplete() web module from the backend
autocomplete(val).then(function(resp) {
// create an array of suggestions for the repeater
let predictions = resp.predictions;
let suggestions = [];
predictions.forEach(function(prediction) {
let item = {"_id" : prediction.id, "text1" : prediction.description, "text2" : prediction.place_id};
suggestions.push(item);
});
$w("#repeater1").data = suggestions; // add the suggestions to the repeater
$w("#repeater1").expand(); // we have data so we can expand the repeater
});
}
export function Origin_keyPress(event, $w) {
// clear the details display of the old location
wixWindow.scrollTo(10, 385);
$w("#repeater2").data = [];
$w("#repeater2").hide();
if ($w('#Origin').value === "")
$w('#repeater3').collapse();
// get the user's latest input
let val = $w("#Origin").value;
let key = event.key;
if(key.length === 1) {
val += key;
}
if(val.length === 0)
return;
// use the current value to get a list of location suggestions
// we call the autocomplete() web module from the backend
autocomplete(val).then(function(resp) {
// create an array of suggestions for the repeater
let predictions = resp.predictions;
let suggestions = [];
predictions.forEach(function(prediction) {
let item = {"_id" : prediction.id, "text5" : prediction.description, "text6" : prediction.place_id};
suggestions.push(item);
});
$w("#repeater3").data = suggestions; // add the suggestions to the repeater
$w("#repeater3").expand(); // we have data so we can expand the repeater
});
}
// this function is triggered when clicking on a suggestion list repeater item
export function container1_click(event,$w) {
let place_id = $w("#text65").text;
set_details(place_id);
$w("#repeater1").collapse();
}
export function container3_click(event, $w) {
let place_id1 = $w("#text69").text;
set_details1(place_id1);
$w("#repeater3").collapse();
}
function set_details(val) {
details(val).then(function(resp) {
// find the city (locality) and country of the location
let place = resp.result;
var filtered_array = place.address_components.filter(function(address_component){
return address_component.types.includes("country");
});
var country = filtered_array.length ? filtered_array[0].long_name: "";
filtered_array = place.address_components.filter(function(address_component){
return address_component.types.includes("locality");
});
var locality = filtered_array.length ? filtered_array[0].long_name: "";
console.log("details: " + locality);
let name = place.formatted_address;
let id = place.place_id;
let utc = place.utc_offset;
let lat = place.geometry.location.lat;
let lng = place.geometry.location.lng;
// save the details of the location with wix-storage
session.setItem("place_city", name);
session.setItem("place_lat", lat);
session.setItem("place_lng", lng);
session.setItem("place_utc", utc);
session.setItem("place_id", id);
$w("#Destination").value = name; // set input field to location
// array of location detail items for the repeater
let detailsList =
[
{
"_id": "1",
"text3": "place name",
"text4": name
},
{
"_id": "2",
"text3": "latitude",
"text4": "" + lat
},
{
"_id": "3",
"text3": "longitude",
"text4": "" + lng
},
{
"_id": "4",
"text3": "utc",
"text4": "" + utc
},
{
"_id": "5",
"text3": "place id",
"text4": id
}
];
// set the details repeater data and show it
//$w("#repeater2").data = detailsList; // add data to our repeater
//$w("#repeater2").hide();
});
}
function set_details1(val) {
details(val).then(function(resp) {
// find the city (locality) and country of the location
let place = resp.result;
var filtered_array = place.address_components.filter(function(address_component){
return address_component.types.includes("country");
});
var country = filtered_array.length ? filtered_array[0].long_name: "";
filtered_array = place.address_components.filter(function(address_component){
return address_component.types.includes("locality");
});
var locality = filtered_array.length ? filtered_array[0].long_name: "";
console.log("details: " + locality);
let name = place.formatted_address;
let id = place.place_id1;
let utc = place.utc_offset;
let lat = place.geometry.location.lat;
let lng = place.geometry.location.lng;
// save the details of the location with wix-storage
session.setItem("place_city", name);
session.setItem("place_lat", lat);
session.setItem("place_lng", lng);
session.setItem("place_utc", utc);
session.setItem("place_id1", id);
$w("#Origin").value = name; // set input field to location
// array of location detail items for the repeater
let detailsList =
[
{
"_id": "1",
"text3": "place name",
"text4": name
},
{
"_id": "2",
"text3": "latitude",
"text4": "" + lat
},
{
"_id": "3",
"text3": "longitude",
"text4": "" + lng
},
{
"_id": "4",
"text3": "utc",
"text4": "" + utc
},
{
"_id": "5",
"text3": "place id1",
"text4": id
}
];
// set the details repeater data and show it
//$w("#repeater2").data = detailsList; // add data to our repeater
//$w("#repeater2").hide();
});
}
export function geoloc() {
wixWindow.getCurrentGeolocation()
.then( (obj) => {
let lat = obj.coords.latitude;
let lng = obj.coords.longitude;
reverse(lat, lng).then(function(resp) {
let status = resp.status;
if(status === "ZERO_RESULTS") {
let name = "Pittsburgh, PA, USA";
session.setItem("place_city", name);
session.setItem("place_lat", "40.44062479999999");
session.setItem("place_lng", "-79.9958864");
session.setItem("place_utc", "-300");
session.setItem("place_id", "ChIJA4UGSG_xNIgRNBuiWqEV-Y0");
$w("#Destination").value = name;
return;
}
let results = resp.results;
var country = null, city = null, place_id = null;
var c, lc, component;
for (var r = 0, rl = results.length; r < rl; r += 1) {
let result = results[r];
// look for city (locality) and country
if (!city && result.types[0] === 'locality') {
for (c = 0, lc = result.address_components.length; c < lc; c += 1) {
component = result.address_components[c];
if (component.types[0] === 'locality') {
city = component.long_name;
continue;
}
if (component.types[0] === 'country') {
country = component.long_name;
if(city && country)
break;
}
}
}
else {
continue;
}
if (city && country) {
place_id = result.place_id;
set_details(place_id);
break;
}
}
});
} )
.catch( (error) => {
let errorMsg = error;
console.log(errorMsg);
});
}
export function radioGroup1_change(event) {
if ($w('#radioGroup1').value === "Return")
$w('#ReturnDate').enable();
else
$w('#ReturnDate').disable();
}
export function button5_click(event, $w) {
$w('#box9').expand();
$w('#button5').hide();
$w('#button6').show();
}
export function Accommodation_change(event, $w) {
if ($w('#Accommodation').checked){
$w('#box10').expand();}
else
{$w('#box10').collapse();}
if ($w('#Accommodation').checked)
{$w('#text62').html = "yes";}
else
{$w('#text62').html = "no";}
}
function sendFormData() {
const subjectAdmin = `New flight booking enquiry from ${$w("#Name").value}}`;
const subjectRecipient = `${$w("#Name").value} Thanks for your flight booking enquiry!`;
const bodyRecipient = `<img src=" width = "500" height = "135"><br>
<span style="font-size:14px" "font-family: Avenir">Hello <span style="font-weight:800">${$w("#Name").value},</span><br><br>
\rThank you for your enquiry for the best value business and first class flights online.<br>
\rWe will get a quote to you as quick as possible - usually well within 24 hours.<br><br>
\rThanks again for your request!<br><br>
\rKind regards,<br><br>
\r<span style="font-weight:800">Book The Best</span><br><br>
\r--------------------<br>
\r<span style="font-weight:800">e: </span><br>
\r<span style="font-weight:800">w:</span> </span>
`;
const bodyAdmin = `<span style="font-size:14px" "font-family: Avenir">Hello Book the Best,<br><br>
\rYou have just received a new booking enquiry. Below are the details:<br><br>
\r<span style="font-weight:800">Name:<span style="font-weight:normal"> ${$w("#Name").value}</span></br>
\r<span style="font-weight:800">Email: </span><span style="font-weight:normal">${$w("#Email").value}</span></br>
\r<span style="font-weight:800">Phone: </span><span style="font-weight:normal">${$w("#Phone").value}</span></br>
\r<span style="font-weight:800">Adults: </span><span style="font-weight:normal">${$w("#Adults").value}</span></br>
\r<span style="font-weight:800">Children: </span><span style="font-weight:normal">${$w("#Children").value}</span></br>
\r<span style="font-weight:800">Infants: </span><span style="font-weight:normal">${$w("#Infants").value}</span></br>
\r<span style="font-weight:800">Origin: </span><span style="font-weight:normal">${$w("#Origin").value}</span></br>
\r<span style="font-weight:800">Destination: </span><span style="font-weight:normal">${$w("#Destination").value}</span></br>
\r<span style="font-weight:800">Departure Date: </span><span style="font-weight:normal">${$w("#DepartureDate").value}</span></br>
\r<span style="font-weight:800">Return Date: </span><span style="font-weight:normal">${$w("#ReturnDate").value}</span></br>
\r<span style="font-weight:800">Flexible Dates?: </span><span style="font-weight:normal">${$w("#text71").text}</span></br>
\r<span style="font-weight:800">Accommodation required?: </span><span style="font-weight:normal">${$w("#text62").text}</span></br>
\r<span style="font-weight:800">Check In: </span><span style="font-weight:normal">${$w("#CheckIn").value}</span></br>
\r<span style="font-weight:800">Check Out: </span><span style="font-weight:normal">${$w("#CheckOut").value}</span></br><br>
<span style="font-weight:normal">
\r----------------------------------------------------------------<br>
\rTo Access All Your Contact Information:<br>
\rStep 1) Sign into your Wix account and select book the best.<br>
\rStep 2) Click the "Wix Database" app.<br>
\rStep 3) Under Collections, Click "Flight Bookings".<br>
\rStep 4) Your Contact information will be collected here.<br>
\r----------------------------------------------------------------<br><br>
\rIf you have any questions about our lead generation forms please email .</span>`;
const recipient = $w("#Email").value;
sendEmailWithRecipient(subjectRecipient, bodyRecipient, recipient)
.then(() => sendEmail(subjectAdmin, bodyAdmin));
}
let date = new Date();
let day = date.getDate();
let month = date.getMonth()+1;
let year = date.getFullYear();
let dateStr = day + "/" + month + "/" + year;
console.log(dateStr); // show result in the developers console
export function FlexibleDate_change(event, $w) {
if ($w('#FlexibleDate').checked)
$w('#text71').html = "yes";
else
$w('#text71').html = "no";
}
export function button16_click(event, $w) {
$w("#Origin").value = null;
$w("#repeater3").collapse();
}
export function button17_click(event, $w) {
$w("#Destination").value = null;
$w("#repeater1").collapse();
}
Truly amazing water properties, sunsets and experiences.
