Session storage

Ask the community
, ,
1

I’m having a lot of success with wix code and finding the experience very rewarding! But I have came across another area that has stumped me… I have been using session storage to transfer data from one dynamic page to another, this is successful, the issue is that there are 4 buttons on my page and depending on what button is clicked then this will store the relevant data i.e. the date of the course. This all works fine as I can see on the console log on this page.

The area that I’m trying to work out is how do I get the specific data to read on the new page (details and payment) depending on what button is pressed? I have played around with the code and came up with the following, but have came to a brick wall… Is anyone able to help?

import {session} from 'wix-storage'; 

$w.onReady(function () {

if (session.getItem === 'coursetitle','durationOne','dateOne', 'priceOne'){
let title = session.getItem('coursetitle');
$w('#coursetitle').text = title; 
$w('#coursetitletxt').value = title;
let duration1 = session.getItem('durationOne');
$w('#durationtxt').value = duration1; 
let date1 = session.getItem('dateOne');
$w('#coursestartdatetxt').value = date1;
let price1 = session.getItem('priceOne');
$w('#pricetxt').value = price1;
}
else if (session.getItem === 'coursetitle','durationTwo','dateTwo', 'priceTwo'){
let title = session.getItem('coursetitle');
$w('#coursetitle').text = title; 
$w('#coursetitletxt').value = title;
let duration2 = session.getItem('durationTwo');
$w('#durationtxt').value = duration2; 
let date2 = session.getItem('dateTwo');
$w('#coursestartdatetxt').value = date2;
let price2 = session.getItem('priceTwo');
$w('#pricetxt').value = price2;
} 
else if (session.getItem === 'coursetitle','durationThree','dateThree', 'priceThree'){
let title = session.getItem('coursetitle');
$w('#coursetitle').text = title; 
$w('#coursetitletxt').value = title;
let duration3 = session.getItem('durationThree');
$w('#durationtxt').value = duration3; 
let date3 = session.getItem('dateThree');
$w('#coursestartdatetxt').value = date3;
let price3 = session.getItem('priceThree');
$w('#pricetxt').value = price3;
}
else if (session.getItem === 'coursetitle','durationFour','dateFour', 'priceFour'){
let title = session.getItem('coursetitle');
$w('#coursetitle').text = title; 
$w('#coursetitletxt').value = title;
let duration4 = session.getItem('durationFour');
$w('#durationtxt').value = duration4; 
let date4 = session.getItem('dateFour');
$w('#coursestartdatetxt').value = date4;
let price4 = session.getItem('priceFour');
$w('#pricetxt').value = price4;
}
else session.clear();
});
2

I’m not sure what exactly your fields are, but assuming you want to check what course was chosen, your if statements are incorrect. They need to look something like this:

if(session.getItem('courseTitle') === "courseTitle1") {
    // set fields for course
}
else if(session.getItem('courseTitle') === "courseTitle2") {
}
...

I hope this helps.

Yisrael

3

Hi Yisrael,

thank you for the info, it’s only the dates that are different, and need to change, all other fields are the same. So payment page would look something like

973×696 19.1 KB

with the code I sent over first (obviously not working)

 import {session} from 'wix-storage'; 

$w.onReady(function () {

if (session.getItem === 'coursetitle','durationOne','dateOne', 'priceOne'){
let title = session.getItem('coursetitle');
$w('#coursetitle').text = title; 
$w('#coursetitletxt').value = title;
let duration1 = session.getItem('durationOne');
$w('#durationtxt').value = duration1; 
let date1 = session.getItem('dateOne');
$w('#coursestartdatetxt').value = date1;
let price1 = session.getItem('priceOne');
$w('#pricetxt').value = price1;
}
else if (session.getItem === 'coursetitle','durationTwo','dateTwo', 'priceTwo'){
let title = session.getItem('coursetitle');
$w('#coursetitle').text = title; 
$w('#coursetitletxt').value = title;
let duration2 = session.getItem('durationTwo');
$w('#durationtxt').value = duration2; 
let date2 = session.getItem('dateTwo');
$w('#coursestartdatetxt').value = date2;
let price2 = session.getItem('priceTwo');
$w('#pricetxt').value = price2;
} 
else if (session.getItem === 'coursetitle','durationThree','dateThree', 'priceThree'){
let title = session.getItem('coursetitle');
$w('#coursetitle').text = title; 
$w('#coursetitletxt').value = title;
let duration3 = session.getItem('durationThree');
$w('#durationtxt').value = duration3; 
let date3 = session.getItem('dateThree');
$w('#coursestartdatetxt').value = date3;
let price3 = session.getItem('priceThree');
$w('#pricetxt').value = price3;
}
else if (session.getItem === 'coursetitle','durationFour','dateFour', 'priceFour'){
let title = session.getItem('coursetitle');
$w('#coursetitle').text = title; 
$w('#coursetitletxt').value = title;
let duration4 = session.getItem('durationFour');
$w('#durationtxt').value = duration4; 
let date4 = session.getItem('dateFour');
$w('#coursestartdatetxt').value = date4;
let price4 = session.getItem('priceFour');
$w('#pricetxt').value = price4;
}
else session.clear();
});

and the data would come from this page

1133×434 37.9 KB

with the code

import {session} from 'wix-storage';  

export function bookhere1_mouseIn(event, $w) {
	console.log($w('#coursetitle').text);
	console.log($w('#price1').text);
	console.log($w('#duration1').text);
	console.log($w('#date1').text);
	session.setItem('coursetitle', $w("#coursetitle").text);
	session.setItem('priceOne', $w("#price1").text);
	session.setItem('durationOne', $w("#duration1").text);
	session.setItem('dateOne', $w("#date1").text);
	}


export function bookhere2_mouseIn(event, $w) {
	console.log($w('#coursetitle').text);
	console.log($w('#price2').text);
	console.log($w('#duration2').text);
	console.log($w('#date2').text);
	session.setItem('coursetitle', $w("#coursetitle").text);
	session.setItem('priceTwo', $w("#price2").text);
	session.setItem('durationTwo', $w("#duration2").text);
	session.setItem('dateTwo', $w("#date2").text); 
}

export function bookhere3_mouseIn(event, $w) {
	console.log($w('#coursetitle').text);
	console.log($w('#price3').text);
	console.log($w('#duration3').text);
	console.log($w('#date3').text);
	session.setItem('coursetitle', $w("#coursetitle").text);
	session.setItem('priceThree', $w("#price3").text);
	session.setItem('durationThree', $w("#duration3").text);
	session.setItem('dateThree', $w("#date3").text); 
}


export function bookhere4_mouseIn(event, $w) {
	console.log($w('#coursetitle').text);
	console.log($w('#price4').text);
	console.log($w('#duration4').text);
	console.log($w('#date4').text);
	session.setItem('coursetitle', $w("#coursetitle").text);
	session.setItem('priceFour', $w("#price4").text);
	session.setItem('durationFour', $w("#duration4").text);
	session.setItem('dateFour', $w("#date4").text);
}

I hope this makes more sense and thank you again for getting back to me

4

Hi,

You will first need to fix your if statements so that you will be able to determine the course that was chosen. Then you’ll be able to perform the correct actions based on the selected course.

5

Hi Yisrael,

I can’t seem to get this to work… To add a little clarity to my problem, the above screen shot is for 1 course, the price, duration and title would always be the same regardless what button is used.
It is the date that I’m struggling with, this is the field that changes depending on what button is pressed, the part that is confusing me in the code example that you sent me, ‘coursetitle’ is the key? this is the reference to get from storage? then what is the job of ‘courseTitle1’ is this the value and where do I assign it to? I’ve been trying to work it out all day… but can only get my original code to show some elements.

770×227 9.64 KB

The fields that I’m working with on the session.getItem page are:
‘coursetitle’
‘dateOne’
‘priceOne’
‘durationOne’

OR

‘coursetitle’
‘dateTwo’
‘priceTwo’
‘durationTwo’

and so on

I know, for example, that ‘priceOne’ and ‘priceTwo’ are separate fields but they would always be the same value due to being from the same course.

The code I have at the moment is as follows

if (session.getItem ('dateOne') === ("dateOne", "durationOne")){
    let title = session.getItem('coursetitle');
		$w('#coursetitle').text = title;
		let date1 = session.getItem('dateOne');
		$w('#dateinput').value = date1;
		let duration1 = session.getItem('durationOne');
		$w('#durationinput').value = duration1;
		let price1 = session.getItem('priceOne');
		$w('#priceinput').value = price1;
}
else if (session.getItem ('dateTwo') === ("dateTwo", "durationtwo")) {
		let title = session.getItem('coursetitle');
		$w('#coursetitle').text = title;
		let date2 = session.getItem('dateTwo');
		$w('#dateinput').value = date2;
		let duration2 = session.getItem('durationTwo');
		$w('#durationinput').value = duration2;
		let price2 = session.getItem('priceTwo');
		$w('#priceinput').value = price2;
	}
6

Hi Stephen,

What is this statement supposed to check? This if statement is invalid and just won’t work.

if (session.getItem ('dateOne') === ("dateOne", "durationOne")){

Please understand that if you are going to work with code extensively in the product, you will need to familiarize yourself with basic coding concepts to accomplish what you want. There are a wealth of Javascript coding sites which will help you learn Javascript from basic to advanced - Javascript.info is a good one.

Regarding the data you are trying to store and retrieve…

Values are stored and retrieved as key and value using setItem() and getItem()

To save the course title, you might do something like this:

setItem("courseTitle", "Physics");

And then to retrieve you would do this:

let course = getItem("courseTitle");
// course now has the value "Physics"

Whatever values you want to store, you would use these functions, and store each value with its own key. See the wix-storage API for more information.

Good luck,

Yisrael

7

Thank you Yisrael. I can assure you that I don’t post on here without trying extensively too solve my own problems. I have watched days/weeks worth of videos, online javascript tutorials and ‘test’ scripts.
I obviously need to do more! With regards to the setItem & getItem this all makes sense and is working on my site, I just cant get the if statements to work, as you first mentioned.
It was the end of the each line on the first code that you sent me that confused me. Anyway, thanks again for your help and advice, it has confirmed the area that I need to learn more about and I will keep researching for the answer.

Best wishes

Stephen

8

Hi Stephen,

Wasn’t “picking on you” - it’s obvious that you’ve invested time and effort. The if statements however indicate that you’re still on the learning curve.

To explain my code…

if(session.getItem('courseTitle') === "courseTitle1") {
    // set fields for course
}

In the if statement, getItem(‘courseTitle’) returns the value of the stored data that has the key ‘courseTitle’. The if statement then compares the returned value with the name of a course - in this case, the course named “courseTitle1”. You should use whatever course names you are using, such as “Physics 101”, “Basketweaving 403”, “Javascript 200”, etc. Then for each course you can take the appropriate actions.