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.

You will need a Google Maps API Key to utilize the Map Component

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.’

While it may look like one of the groups will appear in the wrong spot — when visibility rules are used, the component that disappears will move to fill in the area the formally visible group occupies.

For the grayed out element, the visibility rules look as follows: