Testament Theme

In this tutorial, we will take you through how to add BookThatApp Booking Forms to the Testament theme. 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 🛒

• In Shopify Admin, open your current theme.
• Open the product-form.liquid file under the Snippets area of your Theme Editor.
• Paste {% include 'booking-form' %} on line 81.
• Click Save

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. The relevant code can be found on line 66 of the cart.liquid Templates file. 

Step 4 – Update Email Templates ✉️

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

Step 5 – Additional Code Changes ⚙️

1. Apply CSS

We recommend adding the following CSS to the timber.scss.liquid file:

.booking-form .selector-wrapper {display:block}
 .booking-form input.datepicker {width:220px; text-indent: 0;  padding: 2px 6px;}
 .booking-form label {width:50px;}

2. Adjusting the Javascript - Quantity Functionality

• In the theme.js.liquid file located in the Assets area find the code for managing the quantity around line 6. It should look like this:

  // Quantity values
    $('.up').click(function(e){
        e.preventDefault();
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            $('input[name='+fieldName+']').val(currentVal + 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(1);
        }
    });
    $(".down").click(function(e) {
        e.preventDefault();
        fieldName = $(this).attr('field');
        // Get its current value
        var currentVal = parseInt($('input[name='+fieldName+']').val());
        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > 1) {
            // Decrement one
            $('input[name='+fieldName+']').val(currentVal - 1);
        } else {
            // Otherwise put a 0 there
            $('input[name='+fieldName+']').val(1);
        }
    });

•  Replace that block of code with the following:

   // Quantity values
    $('.up').click(function (e) {
        e.preventDefault();

        // Get its current value
        var qtyField = $('input[name=' + $(this).attr('field') + ']'),
            currentVal = parseInt(qtyField.val(), 10),
            max = qtyField.attr('data-max') || 999;

        // If is not undefined
        if (!isNaN(currentVal)) {
            // Increment
            if (currentVal < max) {
                qtyField.val(currentVal + 1);
            }
        } else {
            // Otherwise put a 1 there
            qtyField.val(1);
        }
    });

    $(".down").click(function (e) {
        e.preventDefault();

        // Get its current value
        var qtyField = $('input[name=' + $(this).attr('field') + ']'),
            currentVal = parseInt(qtyField.val(), 10),
            min = qtyField.attr('data-min') || 1;

        // If it isn't undefined or its greater than 0
        if (!isNaN(currentVal) && currentVal > Math.max(1, min)) {
            // Decrement one
            qtyField.val(currentVal - 1);
        } else {
            // Otherwise put a 1 there
            qtyField.val(1);
        }
    });

3. Adjusting the Javascript - 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.

When a product is added to the cart this theme recreates the cart using Javascript in the Assets file named theme.js.liquid.

• Look for the following code on or near line 209:

...
function addToCart(e){
    if (typeof e !== 'undefined') e.preventDefault();
    var form      = $(this).parents('form');
    $.ajax({
        type: 'POST',
        url: '/cart/add.js',
        async: false,
        data: form.serialize(),
        dataType: 'json',
        error: addToCartFail,
        success: addToCartSuccess,
        cache: false
    });
}
...

• Replace the above code with the following: 

...
function addToCart(e){
    if (typeof e !== 'undefined') e.preventDefault();
    var form      = $(this).parents('form'),
        btaForm = form.data('bta.bookingForm');
    if ((typeof(btaForm) != "undefined") && !btaForm.isValid()) {
        e.stopImmediatePropagation(); // prevents BTA's default form submit handler which also checks for validity
        return false;
    }
    $.ajax({
        type: 'POST',
        url: '/cart/add.js',
        async: false,
        data: form.serialize(),
        dataType: 'json',
        error: addToCartFail,
        success: addToCartSuccess,
        cache: false
    });
}
...

4. Quick View

Quick View 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.

Completion ✅

The app should now be successfully installed in the Testament theme. If you encounter any issues or the booking form is not appearing, please create a ticket and our team will be happy to assist 💬