Articles in this section

See more

đź“„BookThatApp Liquid Variables

Avatar
BookThatApp CEO
Follow

This article provides details on the variables that can be used when modifying the various templates in the app.

Note: ⚠️ If you’re not familiar with coding, we recommend contracting a developer to assist with updating templates.

Notification Templates

Available Variables

The following variables are available in 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, collected_dates (for Course type of bookings)
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. 

https://fonts.google.com/

 

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 (array — see note below), 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

Note on booking.customers: This is an array, so {{ booking.customers.first_name }} will render blank. To access customer fields, use {{ booking.customers.first.first_name }} for the first customer, or loop through all customers:

 
{% for customer in booking.customers %}
  {{ customer.first_name }}
  {{ customer.last_name }}
  {{ customer.phone_number }}
  {{ customer.email }}
{% endfor %}
 

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 %}

Note: booking.resource_emails is only populated for staff resources. This is because staff resources are the only resource type that have an email address assigned to them. If your resource is not a staff resource, this variable will be empty.

Comments

0 comments

Article is closed for comments.

Related articles