Schedule Integration

Customers will need a way to browse classes and make reservations. The schedule snippet handles all the heavy lifting around class schedules and reservations.

Example Snippet

<div id="mariana-schedule-week-routable-binding"
  data-mariana-buy-page-url="/location-buy-page/"
  data-mariana-location-id="12345" <!-- REPLACE WITH YOUR LOCATION ID -->
  data-mariana-login-redirect-url="/login/"
  data-mariana-region-id="12345" <!-- REPLACE WITH YOUR REGION ID -->
  data-mariana-pas-sizes='[
    {
      "screenWidth": 500,
      "spotDistance": 30,
      "spotHeight": 20,
      "spotWidth":20
    },
    {
      "screenWidth": 2000,
      "spotDistance": 70,
      "spotHeight": 60,
      "spotWidth": 60
    }
  ]'
></div>

There are a lot of things happening in this particular code snippet, so let's break it down into smaller pieces.

Buy Page

data-mariana-buy-page-url: handles the redirect to a Buy page if the customer doesn't have enough credits to register the class immediately. You will need to put an appropriate URL in this attribute for the studio you are setting up (you would recall that Schedule, Buy page and Checkout have to be matched per location).

Location ID

data-mariana-location-id: this attribute is the location ID of the current location.

If you want to use the testing data for your initial setup, you can use our live example data to check out how it works and looks. Test location ID in the live example can change from time to time, so your best bet would be heading over to the example site (link below), inspecting the schedule there and using that location ID. Location ID will look something like this:

Once you are ready to switch to the real data, make sure to change the location ID from the test data to live ID.

Login Redirect

data-mariana-login-redirect-url: this attribute is pretty self-explanatory, to make a reservation the user needs to be logged in, so if necessary, they will be redirected towards a Login page we have set up earlier. Match the value of the attribute to the Login page URL.

Region ID

data-mariana-region-id: this is Mariana Region ID for the schedule we’re rendering (if doing a multi-location schedule). You can also find a test value if you need it on the example site under the corresponding attribute.

Just like with Location ID, if you are using test data from our example site, make sure to change it to a live ID when you are preparing to launch.

Pick-a-Spot Map

data-mariana-pas-sizes: "pas" in this attribute stands for Pick-a-Spot model of class reservation. If the class is in Pick-a-Spot style when you select a class you will be seamlessly redirected to a map where the customer is able to choose their preferred spot.

This attribute can be configured with additional parameters, determining the width of the map based on the screen width, space between the spots and how large the spots are.

You can also add more objects (in the same format) to the array to accommodate other screen sizes.

To learn more about the Pick-a-Spot map styling, you can check out this page

Live Example

If you would like to check out a live example, head over to https://mariana-integrations-demo.herokuapp.com/default/schedule/9624/9594/#/week

Parameters

• data-mariana-buy-page-url: Location of this locations buy page to redirect customers to if they do not have valid credits of memberships for the attempted reservation.
• data-mariana-location-id: The Mariana Studio ID.
• data-mariana-login-redirect-url: The location of the Login snippet (ie /login) (Customers must be logged in to make a reservation).
• data-mariana-region-id: The Mariana Region ID.
• data-mariana-pas-sizes: For “Pick a Spot” style studios, responsive breaks to resize the class map.
• screenWidth: media query.
• spotDistance: how far apart the spots are.
• spotHeight: how tall the spots are.
• spotWidth: how wide the spots are.

How Do I Show My Users How Many Spots Are in Each Class?

Each class has a hidden element that, when visible, shows the available spots and total spots per class, respectively. To show this information, add the following style to your css:

.MT_schedule__available-spots {
  display: block;
}