Wix Dynamic Page Tutorial
Tutorial Hosting
Introduction
Hello, my name is Greg Brickell and I am currently building a Wix site for my coaching practice. I wanted to incorporate dynamic pages to showcase information, but I found the experience to be quite challenging. The documentation available wasn’t as helpful as I had hoped, so I have decided to share what I have learned with you. Currently, my site is in preview mode and is a work in progress. One of the menu items on my site is labeled “Contacts”. When clicked, it shows a list of contacts, which at the moment only includes two entries – myself and my wife. Each contact displays a name, address, and other details which can be viewed by clicking on “Read More”. This basic pattern is what I aim to replicate – showcasing a list of items and then viewing the details for each individual item using dynamic pages.
Creating a Collection in Content Manager
To get started, I will navigate to the editor and access the Content Manager. If you are unsure how to add the Content Manager, I will provide a link to guide you through the process – it’s quite simple. Within the Content Manager, I will create a new collection and name it “Contacts 2”, similar to what is currently displayed on my site. This collection functions as a database or spreadsheet where I can input various fields for each contact. I will begin by adding a “Name” field as a text field, followed by an “Email” field also as a text field. Lastly, I will add a field labeled “Notes” and format it as a rich text field. This allows me to customize the text within the field, adding styles such as bold or italics. I will enter my details, including my name, email address, and a note. Additionally, I will add a record for my wife with a fictional email address and a note. Now, I have a list of contacts that can be expanded as needed.
Building Dynamic Pages
Next, I will proceed to create dynamic pages for these contacts. The easiest method I have found is to enable dev mode, which provides additional options within the editor. By accessing the databases section, I can locate my “Contacts 2” collection. Within this collection, I will add a dynamic item page. This page will display the details of each contact and automatically map the fields. I will then link a text field to the “Notes” field I previously created. This allows for the notes to be displayed when viewing the details of a specific contact. Additionally, I will go back to the databases section and add a dynamic list page. This page generates a dynamic list showing all the contacts from my collection. I will name this page “Contacts” and ensure it reflects the information from the collection. Lastly, I will connect the list to the individual item page, enabling users to view the details of each contact by clicking on them within the list.
Previewing the Site
After setting up the dynamic pages, I will preview the site to see the changes in action. Upon clicking on the “Contacts” menu item, I should see a list of contacts displayed. Clicking on “Read More” will load the details page for that specific contact. The list functions as a repeater, automatically displaying the fields for each contact without the need for additional manual configuration. By linking the button within the list to the individual dynamic page, users can easily access detailed information for each contact. If I wish to add more fields, such as an address, I can do so by adding the field to the individual dynamic page and linking it to the data.
Troubleshooting and Tips
One common issue I encountered when setting up dynamic pages was the failure for the list and item pages to connect properly. To ensure a smooth connection, I recommend checking the settings of the individual item page. By examining the URL and the field being passed, you can verify that the correct data is being linked between the list and the item pages. In my case, the “Name” field served as the primary key for connecting the items. While this approach has its limitations, especially if there are duplicates in the data, it is a straightforward way to establish a basic relationship between the list and individual dynamic pages. In summary, the key steps include adding the Content Manager, creating a collection, entering data, enabling dev mode, selecting the database, creating item and list pages, ensuring they are connected, and passing the correct field in the URL of the item page.
Conclusion
I hope this tutorial has been helpful in guiding you through the process of setting up dynamic pages on your Wix site. By following these steps, you can effectively display a list of items and allow users to view the details of each item seamlessly. While the initial setup may seem daunting, with some practice and experimentation, you can master the art of dynamic pages and enhance the functionality of your site. Thank you for joining me on this journey, and I wish you success in implementing dynamic pages on your Wix site.
