This article provides details on the variables that can be used when modifying the various templates in the app. If you are not familiar with coding we recommend contracting a developer for assistance with updating the templates.
Notification Templates
Variables
The following variables are available in the liquid templates:
| variable | attributes |
|---|---|
| shop | name, subdomain, bookthatapp, settings, cancellation_policy |
| settings (shop.settings) |
date_format, time_format, datetime_format |
| cancellation_policy (shop.cancellation_policy) |
allow_cancellations, policy_page_link, order_action |
| booking | id, hashed_id, date, name, contact_phone, contact_email, order_id, order_name, items, notes, start, finish, barcode, customers, fields, shipping_method, shipping_address, location, location_email, resource_emails, cancelable, cancel_booking_url, changeable, tags, virtual_meeting_url |
| shipping_address (booking.shipping_address) |
address1, address2, company, zip, city, province, country |
| item (booking.items) |
start, finish, product, variant, quantity, price, sku, summary, location, resources |
| customer (booking.customers) |
first_name, last_name, phone_number, email |
Examples
Show the shop name:
{{ shop.name }}
Booking field:
{{ booking.fields['color_preference') }}
Repeating booking field:
{% for name in booking.fields['names_attending'] %}
{{ item }}
{% endfor %}
Filters
Use the base64_img filter to include images from your store:
<img src="{{'//cdn.shopify.com/s/files/1/0031/0882/products/powerboat_large.jpg' | base64_img }}" >
Use the img_url filter to include images from your product:
<img src="{{ item.image | img_url: 'small' }} " >
Use the bta_maps_img filter to include a map image. This filter accepts parameters for the zoom level and size (width x height).
<img src="{{ booking.location | bta_maps_img: 'zoom:16,size:225x150' }}" >
Custom Fonts
In order to apply a custom font you will need to add stylesheet links to the template.
For example, to use font-family 'Open Sans' you need to add the following code to the template:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap" rel="stylesheet">A full listing of styles can be found below.
Events Calendar Template
Variables
The following variables are available in the liquid templates:
| variable | attributes |
|---|---|
| shop | name, subdomain, bookthatapp, settings, cancellation_policy |
| settings (via shop.settings) | date_format, time_format, datetime_format |
| cancellation_policy (via shop.cancellation_policy) | allow_cancellations, policy_page_link, order_action |
| product (via products) | id, title, handle, type, price, price_min, price_max, url, location, locations, resources, images, featured_image, shopify_image |
| variants | handle of product (returns a list of variants names of product) |
| resource (via product.resource) | id, name, inventory, description, type, tags |
| location (self or via locations or via product.location) | id, name, email, address |
| address (via location.address) | address1, address2, city, company, country, country_code, first_name, last_name, name, phone, province, province_code, street, zip, latitude, longitude, map_image, map_address_url, address_formatted |
For example, to show the shop name use {{ shop.name }}
Customizing the Calendar
BookThatApp uses the open-source FullCalendar Javascript Calendar. There is comprehensive documentation available: https://fullcalendar.io/docs/
Time Format Strings (Determines the time-text that will be displayed on each event.)
For example:
for 12 hour clock (like 5:00): h:mm
for 12 hour clock (like 7p): h(:mm)t
for 24 hour clock: H:mm
Possible View Strings
FullCalendar has a number of different "views", or ways of displaying days and events. You can define header buttons to allow the user to switch between them:
month, basicWeek, basicDay, listDay, listWeek, listMonth, listYear
Specifying a Different Locale
To display the calendar using one of the locales supported by FullCalendar, include the locale file after where fullcalendar is included.
For example, to use the French locale:
The following code:
<script src="{{ shop.bookthatapp }}/fullcalendar2/fullcalendar.min.js" type="text/javascript" defer></script>
Changes to:
<script src="{{ shop.bookthatapp }}/fullcalendar2/fullcalendar.min.js" type="text/javascript" defer></script>
<script src="{{ shop.bookthatapp }}/fullcalendar2/locale/fr.js" type="text/javascript" defer></script>
iCal Template
Variables
The following variables are available in the liquid templates:
| variable | attributes |
|---|---|
| shop | name, subdomain, bookthatapp, settings, cancellation_policy |
| settings (via shop.settings) | date_format, time_format, datetime_format |
| cancellation_policy (via shop.cancellation_policy) | allow_cancellations, policy_page_link, order_action |
| booking | id, date, name, contact_phone, contact_email, order_id, order_name, items, notes, start, finish, ticket_url, barcode, customers, fields, shipping_method, shipping_address, location, location_email, resource_emails |
| shipping_address (via booking.shipping_address) | address1, address2, company, zip, city, province, country |
| item | start, finish, product, variant, quantity, price, sku, summary, location, resources |
| customer (via booking.customers) | first_name, last_name, phone_number, email |
For example, to show the shop name use {{ shop.name }}
You can use additional booking details as well.
For example, if it is a repeated field use it like this:
{% for item in booking.details['booking field name'] %}
{{item}}
{% endfor %}
Comments
0 comments
Article is closed for comments.