説明例
In this example, we present an index page of university courses. The courses are displayed in a paginated repeater, which can be filtered by department name. Each course contains a link to its dynamic page.
When a site visitor navigates to a dynamic page, the repeater’s page number and the selected filter are stored in session storage. When the visitor returns to the index page by clicking the back button, these values are restored so the site visitor sees the same page and filter as when they last visited the page.
どのように構築したか
コレクション
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:
We set an onChange event handler for the pagination bar to scroll the window to the top of the page on each page change.
We set an onChange event handler for the dropdown filter to update the repeater items according to the filtering value.
We set an onItemReady event handler that runs for each of the repeater items.
The onItemReady handler does the following:
Set the course’s title, department and thumbnail.
Set the matching dynamic page URL for each Learn More button.
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:
We get the courses data from our backend function and update the 2 courses arrays.
We call the paginateData function that displays the repeater according to the filtered items in the filteredCourses array.
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.
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.
関連例
これは役に立ったか？
|
ご意見ありがとう！
Infinite Scroll
Add items to a repeater when a site visitor scrolls down the page
中級
Repeater Context
Change a specific item in a repeater when a site visitor interacts with it
初心者
国のオートコンプリート
入力中に自動的に国名を補完します。キーボードを使用して、必要な国を選択します。
中級