Articles in this section

See more

Installing BookThatApp Using Booking Forms

Avatar
BookThatApp CEO
Follow

In this tutorial, we will take you through how to add BookThatApp Booking Forms to your store. Before you start, we recommend you take a backup of your current theme.

⚠️ Note: If your theme has recently been updated, some steps may require adjustment. We recommend taking a backup of your theme before making changes 💾.

Please note that the booking form are available on the Business plans and above. Please write in to our support team to assist with the implementation.

⚡ Note on Widgets

Widgets are our newest type of booking form. We highly recommend using a widget over a classic booking form.

Our booking forms are available in the app for Business or higher subscriptions. Besides requiring no coding changes and having a more modern look that flows better with the theme, widgets also have more settings and better app performance compared to classic forms.

Since widgets require no coding changes, you can easily have many different types of widgets in your store to handle all types of booking scenarios.

If you have not tried out a widget yet, please see the following:
Widgets Article 🔗

Step 1 – Choose Your Booking Form 🔍

  • Login to BookThatApp
  • Read our help desk article to determine which booking form is most applicable for your store. 
  • Write in to our support team for assistance.
  • Once you have chosen a booking form, in the app admin, select Developer Guide ->Product Page. Please refer to our article how to choose the booking form if you need help with this step.  

Step 2 – Add Booking Form to the Shopify Product Page 🛒

  • We will be adding the booking form (date and/or time pickers) just above the Add to Cart button, and below where the variants are shown.
  • Be sure to check the theme-specific instructions for help in order to find where to paste the code.

Step 3 – Update the Cart Page 🛍️

  • Continue with the instructions in the BTA Admin Install page. There is no need to add line item properties for this theme, however we recommend disabling the quantity in the cart page. To do this, please follow the instructions here: Disabling Quantity on the Cart Page.This is a mandatory step if you are using either of the following booking forms: form 1, form 2, or form 6.
  • The booking details shown in the cart are known as Line Item Properties. Depending on your theme you may need to update it to show these properties. Please see the following article for assistance with this.
    https://avada.io/shopify/devdocs/display-line-item-properties-in-the-cart.html 

 

That's it, BTA is now implemented in your store. You can now go to the BTA product page and add the products that will be booked.

If you are not seeing the booking form or dates, please see the FAQS section below.

If you get stuck or have questions on any of the steps above, please create a Support Ticket and we'll try and help you out.   

Additional Resources:

Theme Installation Directory

Booking Form Selection & Setup

FAQS

Below are some of the most common issues that come up from our customers during the installation process.

 

Implementation

I can’t figure out the installation instructions or they are not working on my theme

 

Product Page

The date picker is not showing up on my product page

  • If you are using booking forms (not widgets), check
    •  
      1. that booking form support is enabled by clicking on Installation > Booking forms. Click the 'Enable booking form support' button if required:
        mceclip0.png
      2. that you have added the {% render 'booking-form' %} statement to the product.liquid Templates file. If you cannot see the code that you are looking for in product.liquid, check for the code in the product-template.liquid Sections file, the main-product.liquid Sections file, or in the product-form.liquid Snippets file. 

The date picker appears briefly and then disappears

  • Check that you have NOT checked the "Hide" box on the BTA product page.  This hides the booking form when selected.

My date picker is not showing any available dates

  • Check that you are using the correct version of jQuery (1.7 or higher)
  • Check that you don’t have any Javascript errors on the page
  • Check that you have configured opening hours for the available dates and that the “Restrict datepickers and timepickers to opening hours” button is checked
  • Verify that you are not using any incompatible apps 

The date picker shows a spinning circle

  • This happens when the booking form is not inside the <form> element. Check that the {% render 'booking-form' %} statement is just above the submit button.

Capacity is not working

  • Ensure that the inventory setting in Shopify is set to “Do Not Track Inventory”
  • Ensure you have set a capacity in the BTA admin for that product

Quick View is not working

  • Quick view is not supported.  Please turn this off in your Theme Settings.
     

Quantity is not being updated or not setting min/max properly

  • Is there a quantity field on the page?
  • Check if there is any special javascript that is replacing standard HTML select or input fields

Customers can add products without selecting a date

  • Turn off 'Ajax Add To Cart' functionality in theme settings

The datepicker doesn't look right (squished up or funny borders)

  • This is normally because the theme, or another 3rd party widget or App, is using a customized version of the jquery-ui CSS file, but it does not have the datepicker styles included. The easiest way to fix this is to include the full CSS from the Google CDN after the existing CSS files.

    Steps:
    1. Find out the version of jQuery being used. Typically this is in theme.liquid. It will look like this:

      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.4/jquery.min.js"></script>.

      In this case version 1.11.4 is being used.
       
    2. Find where the existing stylesheets are included (also normally in theme.liquid). For example it will look like this:

      {{ 'styles.scss.css' | asset_url | stylesheet_tag }}
       

    3. Insert an additional line for the hosted jQuery UI CSS file matching the jQuery version after the existing stylesheet lines. The list of hosted versions available is documented here. Continuing the example from step 2, it should now look like this:

      {{ 'styles.scss.css' | asset_url | stylesheet_tag }}

{{ '//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css' | stylesheet_tag }}

 

Cart Page

Dates/times chosen on the product page not appearing

  • Ensure that the line item properties are enabled in your theme
  • Turn off 'Ajax Add To Cart' functionality in theme settings

Comments

0 comments

Article is closed for comments.

Related articles