This article introduces FTW-hourly and what's different compared to FTW-daily.
Table of Contents
FTW-hourly is a Flex Template for Web with support for time-based bookings and it's built with service marketplaces in mind. This template introduces Yogatime - a fictional marketplace for booking yoga classes from various yoga teachers.
By default, FTW-hourly uses a transaction process
which is a unit-based process and has value
create-pending-booking booking action.
EditListingAvailabilityFormcomponents have been removed from the template as they are heavily related to the day-based process. If you have started with FTW-daily and you are planning to move to FTW-hourly, you should check if you have done any customization to these components.
With time-based bookings, time zones play a larger role than with night- and day-based ones. This is the case especially if your marketplace operates on multiple time zones and some listings could be booked from a different time zone as the one in which the listing is located.
FTW-hourly introduces a new library
moment-timezone for handling the
time zones when operating with dates. You need to use the
moment-timezone whenever you create new date objects. E.g. on
ListingPage the start and end of the month should have time zone so that
the moment-timezone library can handle e.g daylight savings.
The time zone of the listing will be saved to the listing's
For that, we have a new component
FieldTimeZoneSelect where the
provider can choose the time zone of the listing. By default, the
component will select browser's time zone.
In FTW-hourly, the default minimum duration of the booking is 1 hour and
the available booking times are starting on sharp hours (e.g. 9:00,
10:00, etc). Since the minimum duration of a timeslot is 5 minutes and
starting times can be customized to support different use-cases, you
might want to change the duration or timing of your timeslot-units.
Start this process from
file. You should edit at least the
All the dates are displayed in the time zone of the listing. New
FieldDateAndTimeInput handle querying
the available timeslots and picking the booking start and end times.
Also, all the dates in the email templates are in the listing's time
zone. Listing's availability plan and the time zone are available in
transaction email context
In the EditListingWizard you can save and edit the listing's default schedule. Each day can have several entries which mark bookable periods of time. So, you can add holes to your business hours with entries like 09 - 12 and 14 - 18. You can also have days when the listing is not available. If you want to enable bookings over the night you can set the end time to 24.00 and start availability of the next day from 00:00.
Saving the default schedule is handled with the new
There is also a new component
FieldTimeZoneSelect for saving the time
zone of the listing to availability plan.
Because FTW-hourly has been built with a focus on service marketplaces, each user can only have one listing by default. In Yogatime's context, the listing is set up as a teacher profile. There are some changes you need to make to the template if you want to enable multiple listings:
- Add a link to
ManageListingsPageto routing, and add a link to that page e.g. in
OwnListingLinkto direct to user profile. Note that in the
Avatarcomponent you can enable the profile link by removing the
You can see all the changes we did when changing Saunatime to Yogatime in this pull request.