Creating a Dynamic List Index Page
5 min read
Visit the Velo Documentation Center to onboard and continue learning.
Note:
This article is a continuation of Tutorial: Using a Dynamic Item Page to Display Content. You should read that tutorial before learning how to build a list page.
In the previous tutorial, you used a dynamic item page to display the items in your collection, and a gallery to link to all your item pages. But what if you want to display and link to only some of the items in your collection? That's where you can use dynamic list pages.
In this tutorial, we’ll show you how to create a dynamic list page that displays only a group of content from your collection, based on criteria you define. Then you can design your page and add links to it, as described in the other tutorials.
In this tutorial, we’ll show you how to create a dynamic list page that displays only a group of content from your collection, based on criteria you define. Then you can design your page and add links to it, as described in the other tutorials.
1. Enable Velo
Velo adds advanced functionality to the Wix Editor, which lets you make your site more interactive and dynamic.
To enable Velo:
On the Editor Top Bar, click Velo, and then click Enable Velo.
On the Editor Top Bar, click Velo, and then click Enable Velo.
Once you’ve done this, you’ll notice a few changes in the Editor:
- The Properties panel appears. If you close it, you can open it again from the Tools menu.
- The code panel is added to the bottom of the Editor.
- The Site Structure sidebar is added to the left of the Editor.
- More elements are available in the Add menu, including Database and User Input.
2. Add a Field to Categorize Your Collection
Now, we’ll create a list page that displays different recipes based on which meal they’re considered. To do this, we’ll add a meal field to our Recipes collection, where we’ll indicate if the recipe is for breakfast, lunch, or dinner.
To add a field:
To add a field:
- Click the + icon in the header row of the data to add a new field to your Recipes collection.
- Name the new field Meal and select Text as its field type.
- Populate the field with meal information for each recipe.
3. Create a List Page
Now let’s create our list page, so we can display all the recipes that belong to each meal category.
To create a dynamic list page:
- In the Site Structure sidebar, click the Settings icon next to your collection, and then click Add a Dynamic Page.
- In the Choose a Dynamic Page Type screen, select Category. The Set Up Your Dynamic List Page screen appears.
Previously, we defined a page to display only one item and set the URL using the Title field to do it. Now we want the page to display multiple items, so we’ll use the new meal field, which identifies more than one item in your collection. We also need this URL to be unique, so we’ll manually add a section to it. Otherwise, it will have the same URL as the dynamic item page we created in the previous tutorial.
To manually add a section to the URL and add a field so the page displays multiple items:
To manually add a section to the URL and add a field so the page displays multiple items:
- Click in the URL field to manually edit it.
- Type /meal after Recipes. This makes the URL unique.
- Click Add Field and select meal.
You'll see that this field name has been added to the end of the URL. - Click Create Page.
A new dynamic list page is added to the Site Structure sidebar in the same section as the item page you created in the previous tutorial.
4. Design Your List Page
Now we'll design the page to display its associated content. To do this, we will use a gallery, which lets us display multiple items in one element. You could also use a table or a repeater to get the same effect.
We’ll set up the list page the same way we set up the index page in the previous tutorial:
We’ll set up the list page the same way we set up the index page in the previous tutorial:
- Add a Gallery element to the page. Different galleries work differently with Velo so to keep things simple in this tutorial, scroll down and select the Grid (portrait) gallery.
- Select the element and click the
Connect to Data icon. - In the Connect panel, configure your gallery to display the items from your collection. Make sure to set Links connect to to your dynamic item page.
Note:
If you choose to add a repeater instead of a table or gallery, this article explains how to set it up.
5. Create Links to Your List Pages
When we created a dynamic item page in the previous tutorial, we added an index page with a gallery. This gallery provided links to each dynamic item page for the items in the collection.
Now we need to give the user a way to reach the dynamic page for each category. We'll set this up on a regular page with regular links.
You could also do this with a repeater.
To create links to your list pages:
Now we need to give the user a way to reach the dynamic page for each category. We'll set this up on a regular page with regular links.
You could also do this with a repeater.
To create links to your list pages:
- Add a regular page to your site.
- Add a button to your page and change its text to match one of the meals in the field: breakfast, lunch, or dinner.
- Click the Link icon for the button and select Page.
- Under Which page?, select your list page. You'll notice that the page has (Dynamic) as part of its name.
- Now you'll see the Which item? section. Select the list page that matches your button. For example, if you're making a button for Breakfast, select "Breakfast."
- Repeat these steps for each meal type in your collection.
Tip:
This article explains other options for linking to dynamic pages, including from page menus and using multiple-item elements (galleries, tables, repeaters).
6. Preview Your Site
Now that your list page is set up, and you've created an index page with links to each list page, you can preview your site to see how they work together. This is also a good time to check the links to your item pages at the same time.
To preview your site:
To preview your site:
- Click Preview, and then go to the page where you added the links. Click one of the links.
- Check that your list page displays only those items that match the meal criteria you defined.
- Check the links in your table or gallery to see that they take you to the item page for that specific item in your collection.
- Repeat these steps for each of your categories.
7. Sync Your Collections to Copy the Category Content
Now that everything is working the way you want, you’ll need to add the content of your new meal field to your Live database. In order to do this, you'll first need to publish your site, so that the new field is added to the schema, and then you'll need to sync your collection, so that the values are copied to your Live database. That way, your published site will work the same way as it did in Preview mode.
To sync the change you made to your Sandbox collection:
To sync the change you made to your Sandbox collection:
- Publish your site. This makes the new field you just added available in your Live collection.
- Go to your collection in the Editor.
- In the toolbar, click Sync, and then choose Copy all items to Live.This copies the values you added in the new field to your Live collection.
- Test out your pages on your Live site to make sure everything is working as expected.
Did this help?
|