Velo on desktop vs mobile

Ask the community
,
1

I have added a bit of Velo code to my website. Some of the code references elements which are on my desktop site, but are hidden on the mobile site. Now I understand that Velo treats elements which are hidden on mobile as if they don’t exist and hence it underlines the element IDs in the code panel as it doesn’t recognise them. When previewing the mobile site, it doesn’t report any errors in the console but, as I’m already aware that these elements don’t exist in mobile view, I’m not expecting this bit of code to do anything. However, it appears that the code stops executing at this point and any good code below it doesn’t execute.
Is there an “accepted” method of dealing with this scenario? Is there a way of telling Velo to ignore the errors or should I put these sections of code inside an “if/then” statement to ignore if in mobile mode, or do I just switch the code round so the good bit executes first? Just want to understand what is good practice in this situation.

2

You can try something like:

$w('#myDesktopElement').show?.()

The ?. means - run only if this method exits otherwise treat it as undefined.]

Alternatively, another way you can try is:

import wixWindow from 'wix-window';
const isMobile = wixWindow.formFactor === 'Mobile';
//..
//...
if(!isMobile){
    $w('#myDesktopElement').show()
}
3

Thanks J.D., I wasn’t aware of the ?. it looks super useful. Is this feature documented anywhere?

4

It’s JavaScript feature (supported by the new browser versions):

5

Thanks, very helpful :sunglasses: