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

[DJ_Lord1]

I tried to do this before with slideshows, but I’ve done redesigns and I am using tabs now on a separate page. This is what I have currently:

masterPage.js

// // The code in this file will load on every page of your site
import { local } from 'wix-storage';
import wixLocationFrontend from 'wix-location-frontend';

$w.onReady(function() {
	let menuItems = $w('#horizontalMenu2').menuItems; console.log('Menu: ', menuItems);

	$w('#horizontalMenu2').onItemClick((event)=> {console.log('Clicked-ID: ', event.target.id);
   		let label = event.item.label;  console.log('Label: ', label);

		if(label === 'Organization Committee') {console.log('You clicked Organization Committee');
			let tabValue = "Organization";
			local.setItem("tab", tabValue);
			wixLocationFrontend.to("/main-street-approach#section22");
		}
		else if(label === 'Design Committee') {console.log('You clicked Design Committee');
			let tabValue = "Design";
			local.setItem("tab", tabValue);
			wixLocationFrontend.to("/main-street-approach#section22");
		}
		else if(label === 'Promotions Committee') {console.log('You clicked Promotions Committee');
			let tabValue = "Promotions";
			local.setItem("tab", tabValue);
			wixLocationFrontend.to("/main-street-approach#section22");
		}
		else if(label === 'Economic Vitality Committee') {console.log('You clicked Economic Vitality Committee');
			let tabValue = "Economic Vitality";
			local.setItem("tab", tabValue);
			wixLocationFrontend.to("/main-street-approach#section22");
		}
	});
});

Main Street Approach

import { local} from 'wix-storage';

$w.onReady(function () {
	if (local.getItem('tab')) {
		let myTabs = $w("#tabs1").tabs; console.log('list of tabs: ', myTabs);
		let numberOfTabs = myTabs.length; console.log('mumber of tabs: ', numberOfTabs); // 3
		let myNewTab = local.getItem('tab'); console.log ('my new tab: ', myNewTab);
		$w("#tabs1").changeTab(myNewTab);
	}
});

For some reason, “myNewTab” keeps coming out as “0” regardless of what I approach I take. It’s as if the data isn’t being sent between pages. Is there something I am doing wrong?

I’ve created posts in the past related to this kind of content, but this is updated as I’ve changed my layout and process of things.

[CODE-NINJA]

Well first of all, my eyes do crying when i see all the hard-coded stuff, what do i mean ? ? ?

You are coding every single step of your code in hard-coded code-lines.

Why not coding much more → DYNAMICALLY <— ???

Your code…

$w('#horizontalMenu2').onItemClick((event)=> {console.log('Clicked-ID: ', event.target.id);
   		let label = event.item.label;  console.log('Label: ', label);

		if(label === 'Organization Committee') {console.log('You clicked Organization Committee');
			let tabValue = "Organization";
			local.setItem("tab", tabValue);
			wixLocationFrontend.to("/main-street-approach#section22");
		}
		else if(label === 'Design Committee') {console.log('You clicked Design Committee');
			let tabValue = "Design";
			local.setItem("tab", tabValue);
			wixLocationFrontend.to("/main-street-approach#section22");
		}
		else if(label === 'Promotions Committee') {console.log('You clicked Promotions Committee');
			let tabValue = "Promotions";
			local.setItem("tab", tabValue);
			wixLocationFrontend.to("/main-street-approach#section22");
		}
		else if(label === 'Economic Vitality Committee') {console.log('You clicked Economic Vitality Committee');
			let tabValue = "Economic Vitality";
			local.setItem("tab", tabValue);
			wixLocationFrontend.to("/main-street-approach#section22");
		}
	});

My approach…

const tabMapping = {
  'Organization Committee': 'Organization',
  'Design Committee': 'Design',
  'Promotions Committee': 'Promotions',
  'Economic Vitality Committee': 'Economic Vitality'
};

$w('#horizontalMenu2').onItemClick((event) => {
  const label = event.item.label;
  const tabValue = tabMapping[label];

  if (tabValue) {
    console.log(`You clicked ${label}`);
    local.setItem("tab", tabValue);
    wixLocationFrontend.to("/main-street-approach#section22");
  } else {
    console.log('Unknown label: ', label);
  }
});

Upgraded approach…

const menuItems = $w('#horizontalMenu2').items;
const getTabValueFromLabel = (label) => {
   const words = label.split(' ');
   const committeeIndex = words.indexOf('Committee');
   if (committeeIndex > 0) {
     return words.slice(0, committeeIndex).join(' ');
   } return null;
};

$w('#horizontalMenu2').onItemClick((event) => {
   const label = event.item.label;
   const tabValue = getTabValueFromLabel(label);

   if (tabValue) {console.log(`You clicked ${label}`);
     local.setItem("tab", tabValue);
     wixLocationFrontend.to("/main-street-approach#section22");
   } else { console.log('Unknown label or no special action required: ', label);}
});

About your issue…since your setup is very similar to this topic/post…

How to use referrer on a button in Velo

I expanded the example for you, take a look onto it and check the LOGS in CONSOLE… [2024-05-09 10_50_03-Window] This is the running code on MASTER-PAGE… import wixLocation from 'wix-location'; import {session} from 'wix-storage-frontend'; $w.onReady(()=> {let memoryData = JSON.parse(session.getItem('memoryData')); if(memoryData) { memoryData.prevPageURL = memoryData.curPageURL memoryData.curPageURL = wixLocation.url; session.setItem("memoryData", JSON.stringify(memoryData)); conso…

…maybe you should take a look onto it…

[DJ_Lord1]

I made the necessary adjustments to what you suggested, but I do not seem to understand the external post you linked in regard to changing tabs. It does change pages successfully, but it is still not saving the local data.

[DJ_Lord1]

masterPage.js

import { local } from 'wix-storage';
import wixLocationFrontend from 'wix-location-frontend';

const tabMapping = {
  'Organization Committee': 'Organization',
  'Design Committee': 'Design',
  'Promotions Committee': 'Promotions',
  'Economic Vitality Committee': 'Economic Vitality'
};

$w('#horizontalMenu2').onItemClick((event) => {
  const label = event.item.label;
  const tabValue = tabMapping[label];

  if (tabValue) {
    console.log(`You clicked ${label}`);
    local.setItem("tab", tabValue);
    wixLocationFrontend.to("/main-street-approach#section20");
  } else {
    console.log('Unknown label: ', label);
  }
});

Main Street Approach (not changing slides)

$w.onReady(function () {
	let tabItem = local.getItem("tab");
	if (tabItem) {
		$w("#tabs1").changeTab(tabItem); console.log(tabItem);
	}
});

[CODE-NINJA]

@DJ_Lord1

import { local} from 'wix-storage';

$w.onReady(function () {
	if (local.getItem('tab')) {
		let myTabs = $w("#tabs1").tabs; console.log('list of tabs: ', myTabs);
		let numberOfTabs = myTabs.length; console.log('mumber of tabs: ', numberOfTabs); // 3
		let myNewTab = local.getItem('tab'); console.log ('my new tab: ', myNewTab);
		$w("#tabs1").changeTab(myNewTab);
	}
});

This code was already alsmost good. But it seems, like something is wrong inside of the TABS-API.

At least i could not make this version to work…

$w.onReady(()=> {console.log('Page ready...');
	let tabs = $w("#tabs1").tabs; console.log('list of tabs: ', tabs);
	$w("#tabs1").changeTab('tab3');
});

But this one works perfectly…

$w.onReady(()=> {console.log('Page ready...');
	let tabs = $w("#tabs1").tabs; console.log('list of tabs: ', tabs);
	$w("#tabs1").changeTab(tabs[1]);
});

It did not accept it as a → STRING, but it was accepted as an ARRAY.

I think the rest of your code should be fine. I did some quick testings and the most of your code seems to be plausibel and working.

So maybe the docs have to be updated → i don’t know.

[DJ_Lord1]

$w.onReady(function () {
	let item = local.getItem('tab'); console.log(item);
	let tabs = $w("#tabs1").tabs; console.log('list of tabs: ', tabs);
	if (item === "Organization") { $w("#tabs1").changeTab(tabs[0]); console.log('tabs[0]: ', tabs[0])}
	if (item === "Promotions") { $w("#tabs1").changeTab(tabs[1]); console.log('tabs[1]: ', tabs[1])}
	if (item === "Design") { $w("#tabs1").changeTab(tabs[2]; console.log('tabs[2]: ', tabs[2])}
	if (item === "Economic Vitality") { $w("#tabs1").changeTab(tabs[3]); console.log('tabs[3]: ', tabs[3])}
}});

This should work, shouldn’t it? It is still not registering anything for the “local”… meaning that the whole “if” statements don’t work.

[CODE-NINJA]

Show me the logs …of your code…

Use this one…

import { local} from 'wix-storage';

$w.onReady(function () {

	let item = local.getItem('tab'); console.log('ITEM: ', item);
  
	let tabs = $w("#tabs1").tabs; console.log('TABS: ', tabs);
  
  
  if (item === "Organization") { $w("#tabs1").changeTab(tabs[0]); console.log('tabs[0]: ', tabs[0]);}
  
	else if (item === "Promotions") { $w("#tabs1").changeTab(tabs[1]); console.log('tabs[1]: ', tabs[1]);}
  
	else if (item === "Design") { $w("#tabs1").changeTab(tabs[2]); console.log('tabs[2]: ', tabs[2]);}
  
	else if (item === "Economic Vitality") { $w("#tabs1").changeTab(tabs[3]); console.log('tabs[3]: ', tabs[3]);}
  
  else {console.log('Something went wrong!!!');}
  
});

[DJ_Lord1]

@CODE-NINJA

import { local} from 'wix-storage';

$w.onReady(function () {

	let item = local.getItem('tab'); console.log('ITEM: ', item);
  
	let tabs = $w("#tabs1").tabs; console.log('TABS: ', tabs);
  
  
  if (item === "Organization") { $w("#tabs1").changeTab(tabs[0]); console.log('tabs[0]: ', tabs[0]);}
  
	else if (item === "Promotions") { $w("#tabs1").changeTab(tabs[1]); console.log('tabs[1]: ', tabs[1]);}
  
	else if (item === "Design") { $w("#tabs1").changeTab(tabs[2]); console.log('tabs[2]: ', tabs[2]);}
  
	else if (item === "Economic Vitality") { $w("#tabs1").changeTab(tabs[3]); console.log('tabs[3]: ', tabs[3]);}
  
  else {console.log('Something went wrong!!!');}
  
});

Regardless of what I am clicking, for some reason it is automatically saying Promotions and not changing tabs. I put in the exact code you gave but that is what I am getting regardless of which of the 4 buttons I press.

[CODE-NINJA]

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.

[DJ_Lord1]

Nope, still having it come up as “undefined” when it logs the received-tab-data.

[CODE-NINJA]

Then you do something wrong.

My example shows you → that it works perfectly.

Check the logs.

Pay also attention that you can’t just copy and paste my code.
Since i have modified it to my own exmaple.

Especially paying attention onto…

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

…and the old version…

const tabValue = getTabValueFromLabel(label);
   if (tabValue) {console.log(`You clicked ${label}`);
     local.setItem("tab", tabValue);
     wixLocationFrontend.to("/main-street-approach#section22");
   } else { console.log('Unknown label or no special action required: ', label);}
});

But you can also use your old static code…

$w('#horizontalMenu2').onItemClick((event)=> {console.log('Clicked-ID: ', event.target.id);
   		let label = event.item.label;  console.log('Label: ', label);

		if(label === 'Organization Committee') {console.log('You clicked Organization Committee');
			let tabValue = "Organization";
			local.setItem("tab", tabValue);
			wixLocationFrontend.to("/main-street-approach#section22");
		}
		else if(label === 'Design Committee') {console.log('You clicked Design Committee');
			let tabValue = "Design";
			local.setItem("tab", tabValue);
			wixLocationFrontend.to("/main-street-approach#section22");
		}
		else if(label === 'Promotions Committee') {console.log('You clicked Promotions Committee');
			let tabValue = "Promotions";
			local.setItem("tab", tabValue);
			wixLocationFrontend.to("/main-street-approach#section22");
		}
		else if(label === 'Economic Vitality Committee') {console.log('You clicked Economic Vitality Committee');
			let tabValue = "Economic Vitality";
			local.setItem("tab", tabValue);
			wixLocationFrontend.to("/main-street-approach#section22");
		}
	});

All you will have to do is…

1) Changing fom …
$w('#horizontalMenu2').onItemClick((event)=>

…to…
$w('#horizontalMenu2').onItemMouseIn((event)=>

2) And removing the redirections, which are not neccessary anymore.

[CODE-NINJA]

This post is connected to …

How to use referrer on a button in Velo

Yes, I installed the Wix Blog Apps, but I use no Header or Footer. I use the same code ID to try to sort out the RETURN button for both Web and Mobile: // Velo API Reference: https://www.wix.com/velo/reference/api-overview/introduction import wixLocation from 'wix-location'; import {session} from 'wix-storage-frontend'; $w.onReady(()=>{let memoryData = JSON.parse(session.getItem('memoryData')); $w('#button12').onClick(()=>{wixLocation.to(memoryData.prevPageURL)}); }); But, on some pa…