Articles in this section

See more

Installing BookThatApp Using Booking Forms

Avatar
Zetya Support
Follow

Due to the wide variety of Shopify themes and booking scenarios, there are a series of steps required to get BookThatApp up and running. This article outlines the main steps to get up and running, and full documentation is located in the app by selecting Installation -> Booking forms.

Note: Widgets are our newest type of booking form and are easier to implement because they do not require you to make coding changes to your theme. If you have not tried out a widget yet please see the following:

https://support.zetya.com/hc/en-us/articles/360000984495-Widgets

 

If you decide to proceed with installing a classic booking form please contact us through support@boothatapp.com to enable this feature for your store (available only for Business or above app subscriptions).

 

1. Enable the Booking Forms

  • In the app select Installation-> Booking forms tab
  • Select the Enable booking form support button

mceclip0.png

 

2. Choose a Booking Form

  • Read our help desk article to determine which booking form is most applicable for your store. 
  • Once you have chosen a booking form, in the app admin, select Installation -> Booking forms.
  • Select the booking form that you want to use.  (ie. Form 2: Date Range)
  • Click on the button next to the applicable booking form that states Install.  This will create a Snippet in your currently published theme. You can find this snippet using the Shopify Theme Editor, under snippets/booking-form.liquid.

3. Add the booking form to the 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.
  • Follow the instructions for Step 2 of the install process. Be sure to check the theme-specific instructions for help in order to find where to paste the code.

4. Updating the cart page

  • Make the coding modification as seen in step 3 in order to disable the quantity selector in the cart. 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 installed 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.

 

Installation

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