I have code for desktop verison of website and its works. Want to make it work for mobile version but it doesnt work

Ask the community
,
1

import wixLocation from ‘wix-location’;
export function button4_click(event) {
//Add your code for this event here:
$w(“#box1”).hide();
$w(“#horizontalMenu1”).show();
$w(“#socialBar1”).show();
$w.onReady( function () {
setTimeout(() => {
wixLocation.to(“/about”);
}, 2000); // set in milliseconds //
});
}

2

I know that i need to add the following line under the other import
import wixWindow from ‘wix-window’;

which I have. I also know that I need to add this line somewhere

if(wixWindow.formFactor === “Mobile” || wixWindow.formFactor === “Tablet”)

3

See this page here.
https://support.wix.com/en/article/corvid-tutorial-redirecting-mobile-visitors

Also, these pages for mobile only code.
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only

4

I need the code to work on both desktop and mobile. Yet i can only export function button4_click(event) once

5

Use this:

if(wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet") {
    $w("#button4").onClick(event => {

    }
}

You cannot use export functions inside of “if”.

6

If you looked in the link for mobile only it would have given you the example needed for you to use and change to suit your needs.
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices

…Since the mouseIn and mouseOut events are never fired on mobile devices, we need a different way to show and hide the text on those devices. That’s what we use the onClick event handler for.

In the onClick event handler, we toggle whether the text element is hidden or shown. Since we only want this to happen on mobile devices, we wrap the toggle code inside a conditional that checks the device type. Since hovering doesn’t apply to phones as well as tablets, we use an or.

In the onClick event handler, we toggle whether the text element is hidden or shown. Since we only want this to happen on mobile devices, we wrap the toggle code inside a conditional that checks the device type. Because hovering doesn’t apply to phones as well as tablets, we use an or (||) to test for both cases.

import wixWindow from 'wix-window';

export function image_click(event) {
if(wixWindow.formFactor === "Mobile" || wixWindow.formFactor === "Tablet"){
if($w('#hiddenText').hidden){
$w('#hiddenText').show("fade");
}  else{
$w('#hiddenText').hide("fade");
}
}
}

As for your original code you would need to change it to like this.

import wixLocation from 'wix-location';
import wixWindow from 'wix-window';

export function button4_click(event) {
if(wixWindow.formFactor === "Desktop" || wixWindow.formFactor === "Mobile"){
$w("#box1").hide();
$w("#horizontalMenu1").show();
$w("#socialBar1").show();

$w.onReady(function () {
setTimeout(() => {
wixLocation.to("/about");
}, 2000); // set in milliseconds //
});
}
}

You can see it working on desktop and mobile example site here.
https://givemeawhisky.wixsite.com/test

Also, note that unless you declare it in your code as like above, whatever code you have written in the page or site code tab should work and apply to all three devices of desktop, mobile and tablet.

The reason it might not work is that the elements might not be shown on some devices and might be hidden - like on mobile devices where elements are hidden as shown here.

Make sure that your horizontal menu is actually being shown in both your desktop and mobile editor, as if it is only showing in your desktop editor and hidden automatically in your mobile editor, then the code might be broken already.

The same with the Wix Social Bar, make sure that it is setup for desktop.

As well as being setup for mobile as well so that it is still shown on your mobile editor and not hidden when Wix make it mobile friendly for you.
https://support.wix.com/en/article/changing-the-layout-of-your-mobile-social-bar

Finally, check on your mobile editor that you are still using the Wix Social Bar and not the Quick Action Bar instead.

7

@givemeawhisky Thank you

8

Thank you all for your help. Its working the way I want on both mobile and desktop. Here is the final code in case anyone else has the same problem.

import wixLocation from ‘wix-location’;
import wixWindow from ‘wix-window’;
export function button4_click(event) {
//Code for desktop
if (wixWindow.formFactor === “Desktop”){
$w(“#box1”).hide();
$w(“#horizontalMenu1”).show();
$w(“#socialBar1”).show();
}
//Code for non-desktop
if (wixWindow.formFactor === “Mobile” || wixWindow.formFactor === “Tablet”){
$w(“#box1”).hide();
$w(“#cart1”).show();
$w(“#menuToggle1”).show();
}
//Code for timer function and move onto next page
$w.onReady( function () {
setTimeout(() => {
wixLocation.to(“/about”);
}, 1700); // set in milliseconds //
});
}