Class Details Screen
The Class Details Screen in the Browse, Purchase, and Manage Classes feature template displays all the necessary information for a user to make a purchase.
The Class Details Screen displays all the information about a selected class within a category. This page has several components that pull information from the database through Magic Text. Any properties within the Class Collection that do not contain information will not display correctly on this screen.
Several components work in the same way as components discussed on the ‘Category List’ and ‘Classes List’ Screen documents, so we’ll talk about new components below.
The Components
Button Component — Rectangle 38
The rectangle component acts like a button on this screen. It contains visibility rules that control whether or not the rectangle appears. In this case, the button is visible when the Current Class > Available Spots Remaining is greater than 0. In other words, if there are spots available in the class, the button will show.
⚡ Button Actions
The button contains a Link Action to go to the ‘Purchase’ Screen.
Map Component
The Map Component is found in the Component Marketplace or it will appear in the “Installed in Team” section of the Components Left Panel.
This component requires a Google Maps API Key and displays the location of the class. There are several customizations that can be made to your Google Map Component.
The location shown on the map will be based on the Location property in the Classes Collection.
Conditional Visibility Elements
For your user, only one of the elements will show — not both. Which element is displayed is tied to visibility rules on whether or not there are spots available from the property ‘Available Spots Remaining.’
For the grayed out element, the visibility rules look as follows:
Last updated
Was this helpful?