Hi,
I have been writing a website which runs fine in Preview mode however the calls to my backend files seem to stop once i publish the website. None of my logs are coming up in Publish but work in Preview mode.
My page has a HTML iFrame as well as page code and my backend modules. Can anyone advise if this is something to do with my code or it is a Wix based issue. Thanks.
Page Code:
import {getLocations} from 'backend/markers';
import {getSites} from 'backend/sites';
import {clearSites} from 'backend/sites';
import {addSites} from 'backend/sites';
$w.onReady(async function () {
// Get most recent site data from Glide
var sites = await getSites();
console.log(sites);
// Clear all sites from the data collection and refil with new data
await clearSites();
// Add current site data into the database
await addSites(sites);
//sendLocations();
$w("#html1").onMessage( (event) => {
console.log(event.data);
if(event.data === 'READY') {
sendLocations();
}
else {
console.log("Could not load map");
}
} );
});
async function sendLocations() {
getLocations().then((locations) => {
console.log("locations getLocations then call");
console.log(locations);
let markers = [];
for (let i = 0; i < locations.length; i++) {
let loc = locations[i];
markers.push({title: loc.title, position: {lat: loc.latitude, lng: loc.longitude}, icon: {url: loc.occupancy}});
}
$w('#html1').postMessage({markers});
});
}
Backend Module:
import {fetch} from 'wix-fetch';
import wixData from 'wix-data';
export function getSites() {
var sites = fetch("ENDPOINT", {
"method": "get"}
)
.then((httpResponse) => {
if (httpResponse.ok) {
return httpResponse.json();
}})
.catch(err => console.log(err));
return sites;
}
export function clearSites() {
console.log("Clearing sites...");
wixData.query("Sites")
.limit(1000)
.find()
.then((result) => {
for (var i = 0; i < result.items.length; i++){
if (result.items[i] === null) continue;
wixData.remove("Sites", result.items[i]._id);
}
});
console.log("Cleared sites");
}
export function addSites(data) {
console.log("Adding sites...");
let sites = [];
for (var i = 0; i < data.length; i++) {
let toInsert = {
'title' : data[i].Name,
'latitude' : data[i].Latitude,
'longitude' : data[i].Longitude
}
let urlBase = "URLBASE";
if (data[i].occupency === 0) {
toInsert.occupancy = urlBase + "pingrey.svg";
}
else if (data[i].occupency === 1) {
toInsert.occupancy = urlBase + "pingreen.svg";
}
else if (data[i].occupency === 2) {
toInsert.occupancy = urlBase + "pinorange.svg";
}
else {
toInsert.occupancy = urlBase + "pinred.svg";
}
wixData.insert("Sites", toInsert)
.then( (results) => {
sites.push({title: results.title, position: {lat: results.latitude, lng: results.longitude}, icon: {url: results.occupancy}});
} )
.catch( (err) => {
console.log(err);
} );
}
console.log("Added sites");
console.log("Inserted values into site table");
console.log(sites);
return sites;
HTML:
<html>
<head>
</head>
<body onload="callWix()">
<div id="map" style="height: 100%; width: 100%;" />
<script>
function callWix() {
window.parent.postMessage("READY", "*");
}
</script>
<script type="text/javascript">
function RestoreControl(controlDiv, map) {
controlUI.addEventListener('click', function() {
map.setCenter({
lat: 0,
lng: 0
});
map.setZoom(5);
});
}
let locations = null;
function init() {
window.onmessage = (event) => {
if (event.data) {
locations = event.data.markers;
let infowindow = new google.maps.InfoWindow();
let map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
streetViewControl: false,
center: {
lat: 0,
lng: 0
},
gestureHandling: 'greedy'
});
var markers = locations.map(function(location) {
let marker = new google.maps.Marker({
position: location.position,
icon: location.icon,
map: map
})
google.maps.event.addListener(marker, 'mouseover', (function(marker) {
return function() {
infowindow.setContent(location.title);
infowindow.open(map, marker);
}
})(marker));
google.maps.event.addListener(marker, 'mouseout', (function(marker) {
return function() {
infowindow.close();
}
})(marker));
google.maps.event.addListener(marker, 'click', (function(marker) {
window.parent.postMessage(location.title, "*");
}));
return marker;
});
// Add a marker clusterer to manage the markers.
var markerCluster = new MarkerClusterer(map, markers, {
gridSize: 20,
maxZoom: 3,
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
});
// Create the DIV to hold the control and call the CenterControl()
// constructor passing in this DIV.
var restoreControlDiv = document.createElement('div');
var restoreControl = new RestoreControl(restoreControlDiv, map);
restoreControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(restoreControlDiv);
}
}
}
</script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js">
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=MY KEY&callback=init">
</script>
</body>
</html>
Thanks.