Maintain Page State

Collections

We created a Courses collection with the following fields:

• Title: name of the course.

• Department: name of the department responsible for the course.

• Description: short text which describes the course.

• Thumbnail: an image representing the course.

The collection’s permissions are set to “Site Content,” as the site visitors only need to view the data.

We created a dynamic page along based on the collection in order to display detailed information on each course.

Backend Code

In data.jsw we have a single function that queries and returns all the course data from the Courses collection. In order to ensure that your site is secure, it is recommended to use backend code when accessing a collection.

Index Page Elements

In our main index page we added a repeater for displaying the courses. Each item in the repeater contains:

• 2 text elements: title and department.

• Thumbnail image.

• Learn More button: for linking to the course’s dynamic page.

• Pagination bar: for moving to different pages.

We also added a dropdown element for filtering the courses according to departments.

Index Page Code

First we declare 3 variables:

• maxItemsOnPage: maximum number of items on each page.

• allCourses: an array that holds all the data from the Courses collection.

• filteredCourses: an array that holds data from the allCourses array that matches the current page and filter.

When a site visitor enters the site the following occurs:

1. We set an onChange event handler for the pagination bar to scroll the window to the top of the page on each page change.

2. We set an onChange event handler for the dropdown filter to update the repeater items according to the filtering value.

3. We set an onItemReady event handler that runs for each of the repeater items.

The onItemReady handler does the following:

1. Set the course’s title, department and thumbnail.

2. Set the matching dynamic page URL for each Learn More button.

3. Set an onClick event handler  for each Learn More button to store the current session state.

We get, display, and store the data as follows:

1. We get the courses data from our backend function and update the 2 courses arrays.

2. We call the paginateData function that displays the repeater according to the filtered items in the filteredCourses array.

3. When the site visitor clicks the Learn More button, the onClick event handler calls the storeSession function which extracts the current page and the filter values and stores them in the session storage.

4. The restoreState function fetches the values from the session storage and, in case they exist, updates the pagination bar, repeater, and filter dropdown elements. The storage is not empty only if the site visitor has returned to the index page from a dynamic page.

Dynamic Page

In the course dynamic page we added the following elements:

• 3 text elements: title, department and description.

• Image: for displaying the course's thumbnail.

• Button: for linking back to the index page.

We used the dynamic page’s dataset to set the page elements with the relevant course’s data.

We set an onClick event handler on the button that navigates the site visitor back to the index page, using the wix-location API.