I’m new to Velo but I almost have this and need help. I’m trying to hide an image on the main page when a change occurs in the iframe embedded in it.
I tried this code below and it works to hide the image on the main page, but only when I refresh the entire page. So I realized that when I click the “change” link in the iframe to change the pickup location on the site’s order page - that the iframe refreshes but the full page does not, and the image needed to be hidden outide of the iframe does not refresh on that iframe refresh.
What code/functions do i need to add to make the if statements trigger on iframe refresh?
//import wixWindow from 'wix-window';
import wixLocation from 'wix-location';
$w.onReady(function () {
// Write your JavaScript here
// To select an element by ID use: $w("#elementID")
// Click "Preview" to run your code
if (wixLocation.url === "https://www.feastbot. com/order/?locationId=9a66de69-bfaf-4087-8ea9-36603500035b") {
$w("#image54").hide();
} else {
// false
}
if (wixLocation.url === "https://www.feastbot. com/order/?locationId=fcd64eb4-67dd-4bf5-b24d-ae0802684876") {
$w("#image53").hide();
} else {
// false
}
});
Thank you. I think I get the concept - seeing the velo example is not 100% clear in applying to my use case.
Is it possible to show me a specific code example where the iframe change event (sends and receives that msg) and then how that nested if/else code that I show embeds within that message response routine to trigger to act on that event?
I think if I see that code set with variables and event labels then I can tweak it to apply to what i’m trying to achieve.
Can I also use the wixLocation.onChange in front of my code to check for the triggered event? Technically, the URL changes when the iframe change occurs - but it seems like its not being detected maybe because the code sits under the on.Ready function? I really just need a front-end triggered refresh of the entire page (once) after the iframe change happens.
Basically if someone can help me understand how I can simply trigger a full page refresh just once each time the page URL is changed (in addition to hiding a logo image) then I think I have a solution. I tried wixLocation.to (wixLocation.url) in my code and this works to refresh, but turns into an endless refresh loop.
The full details, sure and thank you for helping….
Im working in wix restaurants and need some coding help.
My feastbot.com site is setup as multi-location. When a customer visits feastbot.com/order they see the demo location on landing, and can select any of the listed locations by clicking the Change link at the upper part of the order page and choose one of the other pickup locations (stores). Each location has it‘s own unique logo to be set - and I need each specific logo to show in the main page header based on the order module location that is chosen.
Keep in mind that the WiX Restaurants order module embedded in the /order page is an iFrame developed by WiX, it in itself is not Velo code-able (is my understanding). But the main order page itself is codeable.
Now, when a location is chosen and furthermore saved, the URL feastbot.com/order gets a query added to the end of URL, for example, if I choose the ”Jimbo’s” location, the URL becomes: https://feastbot.com/order/… So right there I know that the URL is unique (that location ID ties to the location chosen) and I can then Velo code it outside of the non codeable module to identify when this URL exists/changes and perform any action on it.
So I setup this code below to be able to hide and show multiple logos placed each on top of each other in the main page header, each has unique ID’s and can be coded $w. It works perfectly, with one major drawback. When the pickup location is changed in the iframe module by WiX, the page does not refresh, and the logo will not change and reflect the URL query change until I manually refresh the page (even though the URL has changed already.
If I could just find a way to refresh the page (only once) each time the URL is changed by picking a new location then I’d be all set. But I cant figure out how to. Closest I’ve come is wixLocation.to (wixLocation.url) but that creates anever ending loop of refreshing.
Import wixLocation from 'wix-location';
$w.onReady(function () {
if (wixLocation.url === "https://www.feastbot.com/order/...")
$w("#image54").hide();
if (wixLocation.url === "https://www.feastbot.com/order/...")
$w("#image53").hide();
});
I still not sure I got it (it’s not so easy to understand. epically that I never worked with the Wix restaurant app).
But if I got you right, and you wish to apply different logo to the global header depends on the page url query param, I don’t know why you have to refresh the page (which is not so good from user experience perspective.
Why wouldn’t you just put one image placeholder on the global header, make it hidden on load and change its source like this:
//order page
import wixLocation from 'wix-location';
const locationId = wixLocation.query?.locationId;
$w.onReady(() => {
//get the logoImage url based on locationId; and then:
if(logoImg){
$w('#logoImage').src = logoImg;
$w('#logoImage').show();
}
})