Articles in this section

See more

Setup Guide: Events List Widget

Avatar
Zetya Support
Follow

The Events List Widget allows customers to choose an upcoming event from a list:

 

event_list.png

 

The Events List Widget can be used for booking products that have a schedule (tours, activities, classes, and courses). The advantage of this over a datepicker (calendar) is that there is no need to scroll through months where the event is not scheduled.

EXAMPLE: https://bookthatapp-demo.com/collections/courses/products/events-list 

There are 4 parts this guide will cover:

  1. Creating a product 
  2. Configuring the product in BookThatApp
  3. Setting up the events list widget for your store
  4. Adding the events calendar to your store's navigation

There are 2 ways to create your products: via the Shopify admin product page, or through the app installation process. We recommend using the app installation method as it streamlines the process and walks you through each of the steps from product creation to implementing your booking widget. 

If you opt to create your product in Shopify first please select the following link.

https://support.zetya.com/hc/en-us/articles/115003355866-Adding-Removing-Products

 

BookThatApp (BTA) Setup Wizard

The BTA setup wizard walks you through creating a product and configuring the widget that will allow the booking form to display on the product page of your storefront.  

1. In the app admin select Installation to begin the process. 

2. After selecting the option for the type of bookings you will take you will select the Next button to continue the process. For this example, we selected the Activity/Tour/Experiences option.

3. Here are a few brief notes regarding variants.

  • Any option representing pricing should be done through variants.
  • Do not enter the dates or times of the event as variants because you will create a schedule in the app.
  • If you have a minimum party size requirement for your bookings you will want to enable the widget setting for Set Minimum Quantity.

4. If you created your product in Shopify and imported it into the app choose Tour/Activity as the Profile. This is automatically done if you are creating your product through the app's Setup Wizard. 

The remaining configuration steps are the same regardless of the method you used to create your products.

5. Enter the capacity of the event (max number of people permitted per time slot).

6. Choose to base capacity on Product, Variant, or Resource.  In this example we want the event capacity to be based on product since there are no options for the customer to choose from.

7. Enter the Duration.

mceclip0.png

 

8. Modify the Count if needed. Normally this is not necessary. 

9. Setup Seasonal Rates if needed. An example of this would be if you have a high and low season. 

10. Select to hide any variants you do not want the booking calendar to appear on. 

11. Set the Units value equal to the number of attendees for each variant.  As this product has no variants representing party size the Unit value should remain at 1. 

12. Add a Location (if applicable). This will let you schedule by location and include the location's address in reminder emails.

mceclip1.png

 

13. Add a cutoff date or future date (if applicable)

14. If desired, choose a set of colors for the activity. This allows you to differentiate events by color on the Booking Overview Calendar.

15. In the field under Sign Up List enter an email address where you want an enrollment report to be sent.

mceclip2.png

 

16. Create the schedule for your event:

  • One-off Dates: Use this option if your dates are random (ie. Jan 1, Feb 5, Mar 12)
  • Repeat: Use this option if the class recurs on a regular basis.  (ie.  Every Monday at 6pm)

17. Hit Save.

mceclip3.png

 

18. Add a link to your navigation to show the Calendar Page. 

 

Widget Configuration

The Events List widget can be used to allow your customers to choose the event date and time, and there are several settings available to change the way it works. The widget preview updates in real-time so you can see the effect of the changes.

If you are using the Setup Wizard it will automatically walk you through the steps to configure and customize the widget. If you imported your product from Shopify you will need to complete the following steps. 

Installation

  1. Access the widgets section of the app by selecting Widgets.
  2. Click Create widget and select the Events List Widget to enable it.
  3. In the Products tab of the widget you can choose to use this widget configuration for all your scheduled event products, or you can specify specific products.
  4. Widget Settings
    • Name: You can have multiple Event List widgets with different settings so you can use the name field to describe what this widget is for.
    • Redirect: Specifies what will happen when the product is added to the cart: Cart Page, Checkout, and Continue Shopping options. 
    • Mode: Determines how the widget appears in the product page. Inline or Popup option.
    • Price Format: Choose to include the abbreviated currency from the Shopify settings or not. (ie. USD)
    • Time Format: Enter the time format that you would like to use. Some options are:
        • 12-hour clock: h:mm a
        • 24-hour clock: H:mm
    • Date Format: Enter the preferred date format. You can view a complete list of date variables in the following.
      https://momentjs.com/docs/#/displaying/
    • Low Capacity Threshold: This determines when the text shown in the second column will change. The value is set to 4 for our widget. This means the capacity for an event must decrease to 4 in order for the number of remaining spaces to display. 
    • Max Months: This determines the number of months into the future the widget will pull events. The higher the value the more loading speed is impacted. 
    • Page Size: Sets the number of events that will appear on the screen at one time. 
    • Show Booking Fields: Displays the additional fields created in the Booking Fields section of the app.
    • Allow Choosing Location: Displays the location selector.
    • Show Timezone Helper: Includes a timezone selector at the bottom of the widget.
    • Allow Choosing Quantity: Allow the customer to book more than 1 space at a time. 
    • Set Minimum Quantity: After selecting this option you will be able to set a minimum quantity that must be met in order to place a booking. 
    • Show Price: Option to control if the price is shown or omitted within the widget.
    • Use Swatches: Display variants using swatches instead of a drop-down selector. 
    • Allow Waitlist: Enables/disables the waitlist feature. 

 

Storefront

If you've completed the steps above you should now be able to visit the product page in your storefront and see the widget appear.

Note that scheduled products appear in your store calendar so we recommend adding a link to your storefront navigation to show the Calendar Page.

 

Comments

0 comments

Please sign in to leave a comment.

Related articles