/   xn--wqa.com     Jobs   / English  

2019-08-19 09:25:10

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

Step 1 - Choose Your Booking FormLogin to BookThatAppIn BTA Admin, select the Install link from the left hand navigation menuClick 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 pageIn 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 163:

Step 3. Modifying the Booking Form Snippet

In the Shopify theme editor open the Snippets file named booking-form.liquid .

In the booking form snippet, each booking input element (i.e. datepicker or timepicker) should have the CSS class product-form__item added to the surrounding <div> element.


...   <div>{% capture attribute %}booking-start{% endcapture %} ... </div> ...


... <div class= product-form__item >{% capture attribute %}booking-start{% endcapture %} ... </div> ...Step 4 - Updating the Cart Page for the Quantity to be Read OnlyThe quantity code is at line 118 of the cart-template.liquid file in the Sections area of the Theme Editor.

Step 5 - CSS Changes:

A. Booking Form CSS

We recommend adding the following CSS to the end of the theme.scss.liquid file in the Assets section:

/* BookThatApp */ .booking-form { flex: 1 0 100%; display: flex; input.datepicker { width: 100%; background: { image: url('{{ calendar.png | asset_url }}'); repeat: no-repeat; position: right 10px center; } } } #bta-calendar { table { margin-bottom: 0; } } 

B. Calendar

The layout needs to be changed to match the theme. In BTA under the Configuration section you will see the Templates link. Select the Calendar template link to access the code that you will need to replace.

Addclass= page-width  to the first  <div>:




<div class= page-width >

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

theme booking form debut divgt your step zetya current start support

User comments