I wired up our “shop now” button to a lightbox containing a little pre-shop-redirect message necessary for our customer experience. It seems that this lightbox creation has a bit of a delay (yes animations are disabled on it). That delay is really awkward for our customer experience as they are left hanging for about a half second to a second. I am looking to just give a bit more of instant feedback to our user that the click was registered. Looking on wix’s dashboard site alone I see an example of exactly what I’m looking to do on the login page:
As you can see, as soon as I clicked “log in” I get a bit of visual feedback that I’ve clicked. I’m wondering if anyone can advise me on how I could achieve something similar on a wix button. I’ve done a fair bit of Corvid stuff so far, so feel free to suggest something technical.
Thank you to all who offer advise. Much appreciated.
If you are doing a page change, look up on this Forum “real preloader”. If it is supposed to happen on the same page: put image of a animated gif on page, hide it, onClick, show it, etc.
Okay good advice thank you. But the animated gif would be over the whole page, not just on the button correct? Because it would be preferable if there was some way to change the button text to the animated gif.
You do know you can change the button.label property when clicked, right? So let´s say you have a button with text “Save”. Then, in onClick just change the button label into “Please wait …” or whatever (and disable it, so they can´t clck it twice), wait for whatever you were doing and, once finished, enable button and set label back to original text.
This is a great solution. Not as clean looking as the gif, but functionally ideal. Thank you for your help!
One of my buttons on mobile says “Shop” but is larger than just the size of that word. When I set the label and reset it back to “Shop”, it is resizing the button to only that which is necessary to fit the word “Shop” and it looks bad. Any advice for how to “reset” the button back to the original size as well?
Looked it up, but you cannot set button-styles re: width and height. So if you want to keep the button identical in size, you´re out of luck. But … : I do not know which style of button you implemented, but in modern design, there is no more diff between normal and clicked, just “enabled” and “disabled”. So have you contemplated using “images that look like buttons”? They could work just the same as button, but on the onClick you just change the image with the .src property. You could even do an animated GIF button for the “Please wait …”-part, where the dots go from 1, to 2, to 3, etc and then back to 1 again.
To prevent any delay, preload the images first. This means that above the
$w.onReady(function () {
you assign (=preload) the images, e.g like so:
let imgButtonEnabled = "url-to image";
let imgButtonDisabled = "url-to image";
$w.onReady(function () {
This way, the images are loaded before the whole page has, and they are available without delay.
Good luck.
EDIT: do remember, that if you want to support mobile, you will have to make different image-buttons for mobile (smaller) and in code test for the device to decide which image-buttons to display.
Hello! I am in need of this feature ASAP on my site. I am not a coder at all so if someone can please reach out and help me step by step that would be much appreciated! It is only for one page. Thank you!
The Upload Preloader example illustrates how this is done. However, you need to know how to code in order to properly understand it and use it on your site.
To learn about programming with Velo, read the following articles that will help you start working with Velo:
This Wix Velo Forum will help you to reach your goal with help and assistance with any code issues that you have, along with pointing you in the right direction with regards to using the correct Wix API or an example that you can see how it all works yourself.
What the forum won’t do is to sit down and write code for your site, if you are after something like that then you are much better off checking out the Wix Marketplace and finding somebody suitable there.
Finally, have a read of our guidelines at the top of the forum, so that you know what to expect.