Code to Change Slide on Page on Menu Item Click

[DJ_Lord1]

Question/Issue:
Something here isn’t working (I am new to code, so please let me know what I am doing wrong). I am trying to make it so if one of the labels (labels are in a submenu) are clicked and the label is XYZ, it creates data (I tried with local and session data) and is meant to move to the other page and show the correct slide.

Product:
Wix Editor & Code

masterPage.js Code

import wixLocation from ‘wix-location’;
import { session } from ‘wix-storage’;
$w(‘#horizontalMenu1’).onItemClick((event)=> {
let label = event.item.label;
if (label === ‘What is xyz?’) {
let slideValue = 0;
session.setItem(“slide”, slideValue);
wixLocation.to(“/home#fullWidthSlides1”);
} else if (label === ‘abc’) {
let slideValue = 1;
session.setItem(“slide”, slideValue);
wixLocation.to(“/home#fullWidthSlides1”);
} else if (label === ‘def’) {
let slideValue = 2;
session.setItem(“slide”, slideValue);
wixLocation.to(“/home#fullWidthSlides1”);
} else if (label === ‘ghi’) {
let slideValue = 3;
session.setItem(“slide”, slideValue);
wixLocation.to(“/home#fullWidthSlides1”);
}
});

Home Page Code

import {session} from ‘wix-storage’;
$w.onReady(function () {
if (session.getItem(“slide”)) {
let slideNum = Number(session.getItem(“slide”)); console.log('Number: ', slideNum);
$w(“#fullWidthSlides1”).changeSlide(slideNum);
session.removeItem(“slide”);
}
});

(idk why it doesn’t have spaces when I copy and paste to forum post, if anyone knows how to fix, let me know)

[CODE-NINJA]

Why not mentioning the whole story?

How can I read the value of a menu item within a sub menu and make an action as the item is clicked?

Correct. you click a menu-item you get the menu-data you create an if-else-condition you start a function → regarding the result of → IF-ELSE-CONDITION if(label === 'xyz') {console.log('do something')} else {console.log('do something else');}

[CODE-NINJA]

import wixLocation from 'wix-location';
import { local } from 'wix-storage';

let slideData = {};

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

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

		if(label === 'Home') {console.log('Redirection to HOME-PAGE...activating slide-0.');
			slideData.label = 'Home';
			slideData.slideValue = 0;
			local.setItem('slideData', JSON.stringify(slideData));
			wixLocation.to('/home#fullWidthSlides1');
		}
		else if(label === 'ABOUT') {console.log('Redirection to ABOUT-PAGE...activating slide-1.');
			slideData.label = 'ABOUT';
			slideData.slideValue = 1;
			local.setItem('slideData', JSON.stringify(slideData));
			wixLocation.to('/about#fullWidthSlides1');
		}
		else if(label === 'SUPPORT') {console.log('Redirection to SUPPORT-PAGE...activating slide-2.');
			slideData.label = 'SUPPORT';
			slideData.slideValue = 2;
			local.setItem('slideData', JSON.stringify(slideData));
			wixLocation.to('/support#fullWidthSlides1');
		}
		else if(label === 'CONTACT') {console.log('Redirection to HOME-PAGE...activating slide-3.');
			slideData.label = 'CONTACT';
			slideData.slideValue = 3;
			local.setItem('slideData', JSON.stringify(slideData));
			wixLocation.to('/home#fullWidthSlides1');
		}
	});
});

[CODE-NINJA]

import {local} from 'wix-storage';

$w.onReady(function () {
	
	let slideData = local.getItem('slideData'); console.log('My-SlideData: ', slideData);
	let parsedSlideData = JSON.parse(slideData); console.log('Parsed-Slide-Data: ', parsedSlideData);
	
	if (parsedSlideData) {
		let label = parsedSlideData.label; console.log('Label: ', label);
		let slideValue = parsedSlideData.slideValue; console.log('Value: ', slideValue);

		//....continue here.....your code....
		//....continue here.....your code....
		//....continue here.....your code....
	}
	else {console.log('No data found!')}
});

[DJ_Lord1]

My apologies, I was having issues with my account and ended up having to transfer some things over.

[DJ_Lord1]

*masterPage.js

import wixLocation from 'wix-location';
import { local } from 'wix-storage';

let slideData = {};

$w.onReady(() => {
    let menuItems = $w('#horizontalMenu1').menuItems;
    
    $w('#horizontalMenu1').onItemClick((event)=> {
        let label = event.item.label;
        let link = event.item.link;

        if (label === 'What?') {
            slideData.label = 'What?';
            slideData.slideValue = 0;
            local.setItem('slideData', JSON.stringify(slideData));
            wixLocation.to('/home#fullWidthSlides1');
        }
        else if (label === 'Where?') {
            slideData.label = 'Where?';
            slideData.slideValue = 1;
            local.setItem('slideData', JSON.stringify(slideData));
            wixLocation.to('/home#fullWidthSlides1');
        }
        else if (label === 'How?') {
            slideData.label = 'How?';
            slideData.slideValue = 2;
            local.setItem('slideData', JSON.stringify(slideData));
            wixLocation.to('/home#fullWidthSlides1');
        }
        else if (label === 'Service') {
            slideData.label = 'Service';
            slideData.slideValue = 3;
            local.setItem('slideData', JSON.stringify(slideData));
            wixLocation.to('/home#fullWidthSlides1');
        }
    });
});

Is there a purpose for defining ‘menuItems’ and ‘link’ on yours? I do not include console logging in mine, though.

Home Page

import { local } from 'wix-storage';

$w.onReady(function () {
	let slideData = local.getItem('slideData');
	let parsedSlideData = JSON.parse(slideData);

	if (parsedSlideData) {
		let label = parsedSlideData.label;
		let slideValue = parsedSlideData.slideValue;
		let slideNum = Number(slideValue);
        $w("#fullWidthSlides1").changeSlide(slideNum);
	}
});

I tried both without and with “slideNum” and it is still not working. It is taking me to the wrong slide on the slideshow AND does not work once I am on the home page (if they scroll to navigation and click on it again, it will not change their slide, idk why ppl would do this but I am trying to make it work just in case they do).

[CODE-NINJA]

I just showed you a SKELETON-EXAMPLE, of how to use the HORIZONTAL-MENU and transfer DATA from PAGE-A to PAGE-B.

You will have to modify it more to get everything working like you need.

Not using CONSOLE-LOGS (which will teach you how to work in JS) is a bad idea.
Read the logs → understand the logs —> the CONSOLE is your → BEST-FRIEND!

-Expand and modify the code.
-replace the redirection-links with the ones of your own site.

Which are your steps?

1. Clicking one of the menu or sub-menu-items.
2. transfering a specific data to another page.
3. Getting the needed data on the recieving page.
4. Using the recieved data to control some elements on the reciever-page.

The logic is normaly very simple, all you have to do is doing it → STEP BY STEP.

You can include everything inside an OBJECT and send the OBJECT-DATA whereever you want, this is why i expanded your example to show you new possibilities.

You should start to code → object-oriented. Object-oriented-programming is the KEY !

Also the shown CODE is to much HARD-CODED → in your future you should generate more DYNAMIC-CODES, maybe even some with artificial intelligence.

To get what you want without any further step → try to train your skills on very simple examples.

1. Navigate from PAGE-A to PAGE-B ← are you able to do that?
2. Transfer data from PAge-A to Page-B <— are you able to get a result?
3. …and so on…

When you have completed all the little training-tasks → start to connect/combine them to a more complex coding.

This is how coding works.

Without having the basics → it will be a very hard way for you.