Simple Theme

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

 

Note: 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 the Business or higher app subscriptions. Besides requiring no coding changes and having a more modern look that flows better with the theme, the widgets have more settings and greater app performance in comparison to the classic forms. Since the 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:

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

 

Step 1 - Choose Your Booking Form

• Login to BookThatApp
• In BTA Admin, select the Install link from the left hand navigation menu
• Click on the Install button next to the form that you want installed. Clicking the Install button creates a booking-form snippet in your current theme. Please refer to our article how to choose the booking form if you need help with this step. 

Step 2 - Add the booking form to the Shopify product page 

• In Shopify Admin, open your current theme.
• Open the product-template.liquid file under the Sections area of your Theme Editor.
• Paste {% include 'booking-form' %}  below the </select> element on line 101 as shown below.

• Click Save 

Step 3 - Updating the Cart Page 

• Continue with the instructions in the BTA Admin Install page. There is no need to add line item properties for the standard full page cart, however we recommend disabling the quantity in the cart page. The quantity code is at line 89 of the cart.liquid file in the Templates area of the Theme Editor.

Step 4 - Updating the Email Templates

• Continue with the instructions in the BTA Admin Install page.

Step 5 - Additional Code Changes

1. CSS Changes

We recommend adding CSS to the theme.scss.liquid file found in the Assets section. Below you will find an example on modifying it:

.booking-form {margin-bottom:20px}
.booking-form label {width:80px; margin-right: 5px;}
.booking-form input.bta.datepicker, .booking-form select.bta-time, .booking-form select.bta-load-enable {min-width:185px; margin-bottom:10px}

2. Ajax Add to Cart

Ajax Add to Cart is not a supported feature and we recommend that you disable it in your theme settings. If you require us to troubleshoot this feature it will not fall under our no-charge support.

• Access the theme.js file in the Assets area of the Theme Editor. Copy the below section of code:

var btaForm = $('form[action="/cart/add"]').data('bta.bookingForm');
 if (btaForm && !btaForm.isRequiredValid()) return;

• Paste it on line 563 as shown below:

560.	$(".quickAdd").submit(function(e) {
 561.	    e.preventDefault();
 562.	
 563.	    var btaForm = $('form[action="/cart/add"]').data('bta.bookingForm');
 564.	    if (btaForm && !btaForm.isRequiredValid()) return;

• Paste the same 2 lines of code on line 762 as shown below:

758.	// Add to cart animation
 759.	$(".add-to-cart").click(function(e){
 760.	    var elem = $(this);
 761.	
 762.	    var btaForm = $('form[action="/cart/add"]').data('bta.bookingForm');
 763.	    if (btaForm && !btaForm.isRequiredValid()) return;

3. Slide Down Cart

Please note that we recommend using the full page cart. 

• To display the dates in the slide down cart after a product is added to the cart access the theme.js file. Copy the code shown below:

var lips = '';
 for (p in cartItem.properties) {
     lips += [p, cartItem.properties[p]].join(': ') + '<br>';
 }

• Paste it on line 688 as shown below:

688.var lips = '';
 689.for (p in cartItem.properties) {
 690.    lips += [p, cartItem.properties[p]].join(': ') + '<br>';
 691.}
 692.	
 693.drawer += '<div class="row '+first+'"><div class="nine columns description"><img src="'+cartItem.image+'" alt="'+cartItem.title+'"/><div class="info"><h3><a href="'+cartItem.url+'">'+cartItem.title+'</a></h3><h4>'+cartItem.vendor+'</h4><p>'+description+'</p><p>'+lips+'</p><p class="mobile">'+cartItem.quantity+' x '+formatMoney(cartItem.price)+'</p></div></div><div class="two columns price desktop">'+formatMoney(cartItem.price)+'</div><div class="two columns quantity desktop"><input type="text" name="updates[]" id="updates_'+cartItem.id+'" value="'+cartItem.quantity+'"/></div><div class="two columns total desktop">'+formatMoney(cartItem.line_price)+'</div><div class="one column remove desktop"><a href="/cart/change?line='+index+'&quantity=0" class="removeLine" rel="'+cartItem.variant_id+'">' + {{ 'cart.general.remove' | t | json }} + '</a></div></div>';

• To display the dates for existing products in the slide down cart copy the code shown below: 

<p>
  {% for p in item.properties %}
  {% unless p.last == blank %}
  {{ p.first }}:
  {% if p.last contains '/uploads/' %}
  <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
  {% else %}
  {{ p.last }}
  {% endif %}<br>
  {% endunless %}
  {% endfor %}
</p>

•  Paste it on line 102 as shown below:

101.	<p>{{ item.product.description | strip_html | truncatewords: 20 }}</p>
102.	<p>
103.	  {% for p in item.properties %}
104.	  {% unless p.last == blank %}
105.	  {{ p.first }}:
106.	  {% if p.last contains '/uploads/' %}
107.	  <a class="lightbox" href="{{ p.last }}">{{ p.last | split: '/' | last }}</a>
108.	  {% else %}
109.	  {{ p.last }}
110.	  {% endif %}<br>
111.	  {% endunless %}
112.	  {% endfor %}
113.	</p>

The app should now be successfully installed in the Simple theme. If you have any questions or the booking form is not appearing, please create a ticket and we'll be happy to help.