Vorbly <Code>
CODING MADE EASY WITH VORBLY
WIX CODE PASSING DATA BETWEEN PAGES
Need to pass data between Wix pages? This tutorial will show you how to pass data between your Wix pages using Wix Code. You can now create multi page forms. We will provide you with the webpage elements and sample codes required to implement this feature.
THE DEMO
Design your product page, include product information (e.g. course name, description, price) and a call-to-action button (e.g. Sign Up). Your product page can a dynamic page, repeater or a static webpage. Add Wix Code to send data from Page 1 to Page 2.
Create a second page for your order form. Include placeholder for product name, details and pricing. Then add user inputs such as name, email, dropdown and a submit button. Finally add Wix Code to receive the data from Page 1.
When visitors navigate between pages, data will be passed between Page 1 and Page 2 and modify the text elements.
Design your product page, include product information (e.g. course name, description, price) and a call-to-action button (e.g. Sign Up). Your product page can a dynamic page, repeater or a static webpage. Add Wix Code to send data from Page 1 to Page 2.
THE ELEMENTS
Page 1
Text Elements
-
Course Title ID: #title
-
Course Price ID: #price
-
No. of Classes ID: #class
-
Availability ID: #days
Button Elements
-
Sign Up Button: #Submit
Page 2
Text Elements
-
Course Title ID: #title2
-
Course Price ID: #price2
-
No. of Classes ID: #class2
-
Availability ID: #days2
User Inputs
-
Name Field: #name
-
Email Field: #email
-
No. of Sessions Field: #sessions
-
Comments Field: #comments
Button Elements
-
Sign Up Button: #Submit
THE CODE
Page Code 1
import wixLocation from "wix-location";
import {session} from 'wix-storage';
export function Submit_click(event, $w) {
session.setItem('title', $w('#title').text);
session.setItem('price', $w('#price').text);
session.setItem('class', $w('#class').text);
session.setItem('days', $w('#days').text);
wixLocation.to("/page2");
}
Page Code 2
import {session} from 'wix-storage';
$w.onReady(function () {
const title2 = session.getItem('title');
const price2 = session.getItem('price');
const class2 = session.getItem('class');
const days2 = session.getItem('days');
$w('#title2').text = title2;
$w('#price2').text = price2;
$w('#class2').text = class2;
$w('#days2').text = days2;
});
COMMENTS
I'm a paragraph. Click here to add your own text and edit me. It's easy.
Please complete all required fields.
No comments. Be the first to leave a comment.
How do I parse the data into a "text input field" on a Wix Form placed at page 2 rather than just into a Textbox?..eg. so my customers can send the parsed data further with the Wix form?
Thanks in advance...
Ulf
Mar 16, 2020
0
Wouldn't passing those be more efficient using url query?
Dean Ayalon
May 02, 2020
0
What if the 2nd page is a dynamic page ?
Akash
May 12, 2020
0
if i hit refresh in the 2nd page the data is lost. How to keep the data for entire session?
akash
May 14, 2020
0