gterrill

.datepicker.bta-load-enable {background: url({{ 'loading.gif' | asset_url }}) no-repeat 50% 50%}

gterrill

{% capture month %}{{ "now" | date: "%m" }}{% endcapture %}
{% capture day %}{{ "now" | date: "%d" }}{% endcapture %}

<div class="booking-form">
  <div class="clearfix">
	<div class="four columns mobile_left alpha">
      <img src="{{ 'Calendar-icon.png' | asset_url }}" style="float:left;"/>
      <table>
        <tbody>
          <tr>

gterrill

/* liquid */
{% for variant in product.variants %}
  <option data-bta-config="{{ variant.metafields.bookthatapp.config }}">...</option>
{% endfor %}

{% assign configs = variant.metafields.bookthatapp.config | split: '&' %}
{% for config in configs %}
  {% assign kvp = config | split: '=' %}
  {% if kvp.first == 'start_time' %}
	  <span class="bta_config_time" data-time="{{ kvp.last }}"></span>

gterrill

#bta-calendar a.fc-event {
  background-color: #69903B;
  border: 0 none;
  border-radius: 0;
  border-right-width: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-left-width: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;  

gterrill

function addToCart(e){
  if (typeof e !== 'undefined') e.preventDefault();
  
  // make sure BTA has loaded
  if ($('#add-to-cart').hasClass('bta-load-enable')) {
    alert('Please wait while we look up class availability');
    return false;
  }
  
  var form = $(this).parents('form'), 

gterrill

span.ui-icon {color: transparent;} /* hide background text */
#ui-datepicker-div { display: none; margin-bottom:20px}
#booking-start {margin-bottom: 10px}

gterrill

; bundles = [];
{% for variant in product.variants %}{% if variant.metafields.sva.bundled %}
bundles['{{ variant.id }}'] = jQuery.parseJSON('{{ variant.metafields.sva.bundled }}');
{% endif %}{% endfor %}

var process= function(target, results) {
  var deferred = $.Deferred();

  Shopify.getProduct(target.handle, function(product) {
	var multiplier = target.multiplier || 1,

gterrill

var selectVariant = function(form) {
  var start = form.getStartDate(),
  	  finish = form.getFinishDate();

  if (start && finish) {
    var quantity = bta.dayDelta(start, finish), minutes = (quantity * 1440);
    $('#quantity').val(quantity);

    var index = -1, low = 0,
        configs = bta.parseVariantConfigs(form.datepicker('start').attr('data-bta-variant-config'));

gterrill

<div class="booking-form">
   <!-- normal booking form properties here -->
   
   <div id="booking-names">
      <div class="selector-wrapper booking-name">
          {% capture attribute %}booking-name{% endcapture %}
          <label for="{{ attribute }}">Name:</label>
          <input id="{{ attribute }}" type="text" name="properties[{{ attribute }}]" class="bta-load-enable required" />
      </div>
   </div>

gterrill

<p style="margin:10px 0">
<label for="bta-product-select">Class</label>
<select id="bta-product-select">
    <option value="">All Classes</option>
    {% for product in products %}
        <option value="{{ product.handle }}">{{ product.title }}</option>
    {% endfor %}
</select>
</p>