How to redirect to another inpage tab selected

Ask the community
, ,
1

I managed to create in-page tabs with custom code, with the help of forum references, by using WIX multi-state box. Coding is not my thing and I am more of a Product Designer. I am trying to custom code a feature, where I come to the page called hobbies and with that particular tab selected based on the button, I click on the home page. For example, if I click on Button3 on the home page, it should redirect me to the Hobbies page with the 3rd tab automatically selected. It would be really kind of you if someone could help me achieve this. Screenshot and tabs code attached for reference.

949×75 7.43 KB

$w.onReady(function() {

    const greyColor = "#E7EBFF"; // For selected tab
    const whiteColor = "#FFFFFF"; // For other tabs
    const blueColor = "2873F1";

    $w('#motionDesigning').onClick(() => {
        $w('#HobbiesTab').changeState("motionDesigningState");
    });

    $w('#writing').onClick(() => {
        $w('#HobbiesTab').changeState("writingState");
    });

    $w('#sketching').onClick(() => {
        $w('#HobbiesTab').changeState("sketchingState");
    });

    $w('#cooking').onClick(() => {
        $w('#HobbiesTab').changeState("cookingState");
    });

    $w('#photography').onClick(() => {
        $w('#HobbiesTab').changeState("photographyState");
    });

    $w('#birdWatching').onClick(() => {
        $w('#HobbiesTab').changeState("birdWatchingState");
    });
     $w("#HobbiesTab").onChange((event) => {

        const buttonNames = ["motionDesigning", "writing", "sketching", "cooking", "photography", "birdWatching"];

        buttonNames.forEach(buttonName => {
            let button = $w("#" + buttonName); // e.g. $w("#motionDesigningbutton")
            let state = buttonName + "State"; // e.g. motionDesigningState

            if (event.target.currentState.id === state) {
                button.style.backgroundColor = greyColor;
                button.style.textcolor = blueColor;
            } else {
                button.style.backgroundColor = whiteColor;
            }
        });
    });
});
2

Just to be clear these are on 2 separate pages? You want to have buttons on your home page, that behave like the buttons you created for the tabs. So instead of a 2 step process “click hobbies” → “click tab”. You want it 1 step.

If this is the case the only way I have seen how to save data from transferring from 1 page to another is by using storage
https://www.wix.com/velo/reference/wix-storage

This you could use just session storage and save the name of the tab you want to go to. Then on your hobbies tab you could check to see if there is some data in the session and just move you to that state in the multi-state box much like you are doing now with the button clicks. Except it could store the name of the state directly in the memory so you wouldn’t need conditions.

session . setItem ( “hobbyName” , $w ( “#someButton” ).label)

conditions something like this would set the session variable.