Page Routing

Any view with a URL in Web Integrations can be loaded through the mariana-integrations data attribute. Use the desired URL the value of the aforementioned data attribute:

Examples

Click for Gallery of Screenshots

Non-authenticated

These are views that can be accessed when users are not signed-in

Create Account

<div data-mariana-integrations="/account/create"></div>

This view can play two roles. The first is account creation. If the user doesn’t have an account, they can create one here. The second role is to allow users who already have accounts to log in using the link above the "Create Account" form. Once logged in, the user will be redirected to their Personal Information tab where they can also see tabs to Reservations, Memberships & Credits, and Purchases.

Account

<div data-mariana-integrations="/account"></div>

The account view allows users to see the navigation for the Account Section. This gives them an idea of what will be available to them when they log in: Reservations, Memberships & Credits, Purchases, and Personal Information. A button below the navigation directs them to log in or create an account.

Buy Page

<div data-mariana-integrations="/buy"></div>

From this view, users can select a location and, while logged out, view all available products for the selected location. When the user clicks a product, they see a modal containing product detail, and links to log in or create an account. Once logged in, they are redirected right back where they left off: on the Buy Page with the detail modal for the product they were looking at still open.

Read more about location selector page setup

Daily Schedule

<div data-mariana-integrations="/schedule/daily"></div>

From this view, users can select a location and, while logged out, view all classes in the past or future. Once the user clicks to "Reserve" or "Join Waitlist" for a class, they are brought to another screen where they can see class details and log in or create an account.

Read more about location selector page setup

Buy Page or Daily Schedule for Specific Location

<div data-mariana-integrations="/buy/{location_id}"></div>
<!-- REPLACE WITH YOUR LOCATION ID -->
<div data-mariana-integrations="/schedule/daily/{region_id}?locations={location_id}"></div>
<!-- REPLACE WITH YOUR LOCATION ID and REGION ID -->

Create separate, dedicated pages for each location's schedule and buy page.

Read more about setting up separate location pages

Daily Schedule for Specific Instructor, Class Type, or Room within a region

<div data-mariana-integrations="/schedule/daily/{region_id}?instructors={instructor_id}"></div>
<!-- REPLACE WITH YOUR INSTRUCTOR ID and REGION ID-->
<div data-mariana-integrations="/schedule/daily/{region_id}?classType={class_type_id}"></div>
<!-- REPLACE WITH YOUR CLASS TYPE ID and REGION ID-->
<div data-mariana-integrations="/schedule/daily/{region_id}?classroom={classroom_id}"></div>
<!-- REPLACE WITH YOUR CLASSROOM ID and REGION ID-->

Not Found

<div data-mariana-integrations="/404"></div>

This is a special view that the user will see when the requested route cannot be found. An integrator can use this in order to maintain consistent 404 page designs across a website.

Authenticated

Views that can only be accessed when users are signed-in

Checkout

<div data-mariana-integrations="/checkout/{location_id}"></div>
<!-- REPLACE WITH YOUR LOCATION ID -->

For this view to work, the mariana-integrations data attribute must have a location_id value. This view shows the user their cart for that location. The user can complete the purchase of those items through this view.

Class Reserve

<div data-mariana-integrations="/classes/{class_id}/reserve"></div>
<!-- REPLACE WITH YOUR CLASS ID -->

For this view to work, the mariana-integrations data attribute must have a class_id value. This view shows the user class details, and either a Pick-a-Spot map or a reservation form.

Account

<div data-mariana-integrations="/account"></div>

From this view, users can view to their account and access the following subviews.

Personal Information (Account)

<div data-mariana-integrations="/account/personal-information"></div>

From this view, users can change their personal information, such as birthdate and password. They can also redeem gift cards, manage their credit cards on file, adjust their email preferences, and edit their emergency contact information.

Purchases (Account)

<div data-mariana-integrations="/account/purchases"></div>

From this view, the user can view their complete history of purchases across Mariana Tek’s applications.

Memberships (Account)

<div data-mariana-integrations="/account/memberships-credits"></div>

From this view, the user can see their 5 latest active memberships and 5 latest active credits. Users can also access the full list of their active memberships and active credits, as well as their inactive memberships and inactive credits at the following paths:

  • /account/memberships-credits/active-memberships
  • /account/memberships-credits/active-credits
  • /account/memberships-credits/inactive-memberships
  • /account/memberships-credits/inactive-credits

Reservations (Account)

<div data-mariana-integrations="/account/reservations"></div>

From this view, the user can manage their 5 latest upcoming reservations, as well as view their 5 latest reservations in the past. This view also gives the user access to a dedicated view for all upcoming reservations, as well as their full history of past reservations at the following paths:

  • /account/reservations/upcoming-reservations
  • /account/reservations/past-reservations