Installation Troubleshooting Tips

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

Installation

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

• Create a help ticket and we’ll try and help.

Product Page

The date picker is not showing up on my product page

• Check that you have added the {% include 'booking-form' %} statement to product.liquid. If you cannot see the code that your are looking for in product.liquid, check for the code for a Snippet called product-form.liquid

The date picker appears briefly and the disappears. 

• Check that you have NOT checked the "Ignore" 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

The date picker shows a spinning circle

• This happens when the booking-form is not inside the <form> element. Check that the {% include '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 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 line item properties are enabled in your theme
• Turn off 'Ajax Add To Cart' functionality in theme settings