How can I get it so when a button is clicked, it switches to a page for a tab?

Ask the community
, , ,
9

Ok my friend! I took a lot of time to investigate your issue.

Your code should work just fine and you didn’t really made a mistake.
The TROUBLEMAKER is the → WIX-HORIZONTAL-MENU <—

Since this is a Wix-Element (it has it’s own life-cycle). The menu do not care about your integrated —> REDIRECTION …

THIS NEVER FIRES!!!! --> INSTEAD --> the MENU --> DIRECTLY --> NAVIGATES
wixLocationFrontend.to("/main-street-approach#section22");

CONCLUSION: —> Your code never runs at all. That means you never are able to store the data into the STORAGE → because you haven been already navigated to the next site.

This is what i am calling → Wix-Elements <— have their own → LIFE-CYCLE <—

What you can do now and how to solve the issue???

Well now you have to be —> TRICKY <—

Since you are intelligent enough —> You start creating a workaround.
How we can push the data into storage, before we get AUTOMATICALY REDIRECTED by the MENU ???

What about —>

$w('#horizontalMenu1').onItemMouseIn(async(event) => {console.log(event);
	wixStorage.local.setItem("tab", 'xxxxxx');
});

//IN YOUR CASE SOMETHING LIKE --->

$w('#horizontalMenu1').onItemMouseIn(async(event) => {console.log(event);
		const label = event.item.label; console.log('Label: ', label);
		const URL = event.item.link; 	console.log('URL: ', URL);
		const tabValue = await getTabValueFromLabel(label); console.log('Tab-Value: ', tabValue);
		wixStorage.local.setItem("tab", tabValue);		
	});

    const getTabValueFromLabel=(label)=> {
        const words = label.split('-'); console.log('Words: ', words);        
		return words[1];  
    };

This way → YOU CAN STORE THE DATA INTO THE STORAGE → BEFORE ← Wix’s own LIFE-CYCLE STARTS (at which point you can’t do anything anymore by code, once it has been started).

A running DEMO you will find here →
https://russian-dima.wixstudio.io/test-site-repeater

Check the LOGS!!!

Onto all your other pages, where you want to recieve the STORAGE-DATA, you paste the following code…

import wixStorage from ‘wix-storage’;

$w.onReady(()=> { console.log('Recieved-Tab-Data: ', wixStorage.local.getItem("tab")); });

This post solved your issue??? → Mark it as → SOLUTION!

SIDE-NOTE:

If you use the HORIZONTAL-MENU in the shown example → you will get different recieved TAB-RESULTS.

If you will use the buttons → You will recieve each time the same TAB-RESULT.