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.
Have you simply tried syncing your datasets from sandbox to live as in preview you are working in sandbox, whilst the user on the website will be using the live version.
https://support.wix.com/en/article/syncing-data-between-sandbox-and-live-database-collections
https://support.wix.com/en/article/accessing-your-sandbox-and-live-database-collections
If it's only not working on live, then I would check the usual culprits...proper sandbox settings, timing issues, cross-site security issues. The first thing I would try is changing this:
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}}); } if (i === locations.length - 1) $w('#html1').postMessage(markers); /*no point in making markers an object without a key...this might cause issues - You can post arrays to iframes and they'll work just fine*/ });
It's possible that because you're loading markers at such a high frequency, some security feature is triggered, and this makes it so they're loaded only once.
Also, (this might be correct in your actual code already) you're using occupancy and occupency keys, where they should probably be the same.
have you tried embedding the html in an embedded html feature in wix?