Delivery options for the cart page

booking-form.liquid

{% 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>
            <td>
              <label for="delivery-time">Time Slot:</label>
            </td>
            <td>
              <label for="booking-start">Delivery Date:</label>
            </td>
          </tr>
          <tr>
            <td>
              <select id="delivery-time" name="attributes[delivery-time]" class="bta-time bta-loaded valid" data-datepicker="booking-start">
                <option value="8:00" data-variant="375248289">8 AM - 11 AM</option>
                <option value="11:00" data-variant="382169282">11 AM - 2 PM</option>
                <option value="14:00" data-variant="382169316">2 PM - 5 PM</option>
                <option value="17:00" data-variant="382169346">5 PM - 8 PM</option>
                <option value="20:00" data-variant="382169424">8 PM - 11 PM</option></select>
            </td>
            <td>
              <input id="booking-start" type="text" name="attributes[booking-start]" size="12" class="datepicker bta required bta-load-enable" data-handle="delivery" data-variant="375248289" data-time="8:00" disabled="disabled" />
            </td>
          </tr>
        </tbody>
      </table>
    </div>  
  </div>
</div>

{{ 'api.jquery.js' | shopify_asset_url | script_tag }}

<script type="text/javascript">
  var cart = {{ cart | json }};
  
  // remove any existing delivery items
  for (var i = 0; i < cart.items.length; i++) {
    if (cart.items[i].handle === "delivery") {
      Shopify.changeItem(cart.items[i].id, 0, function() {
        document.location.href = "/cart";
      });
    }
  }
  
  $('form[action="/cart"]').on('click', 'input[type=submit]', function() {
      $('form[action="/cart"] input[type=submit]').removeAttr('clicked');
      $(this).attr("clicked", "true");
  });  
  
  $('form[action="/cart"]').validate({
    submitHandler : function(form) {
      if ($("input[type=submit][clicked=true]").attr('name') === "update") {
        form.submit();
      } else {
        var vid = parseInt($('#booking-start').attr('data-variant'), 10);
        Shopify.updateCartFromForm('cartform', function() {
          Shopify.addItem(vid, 1, function(line_item) { 
            document.location.href = "/checkout";
          });
        })        
      }
    }
  });
  
  $('#delivery-time').change(function() {
    var option = $(this).find('option:selected');
    $('#booking-start').attr('data-variant', option.attr('data-variant'));
    $('#booking-start').attr('data-time', option.val());
  });
  
  function disableBefore2() {
    $('#delivery-time option[value="8:00"]').attr('disabled', 'disabled');
    $('#delivery-time option[value="11:00"]').attr('disabled', 'disabled');
  }
  
  function disableAfter11() {
    $('#delivery-time option[value="14:00"]').attr('disabled', 'disabled');
    $('#delivery-time option[value="17:00"]').attr('disabled', 'disabled');
    $('#delivery-time option[value="20:00"]').attr('disabled', 'disabled');
  }
  
  function selectFirstTimeSlot() {
    $('#delivery-time option:not(:disabled):first').attr('selected', 'selected');
    $('#booking-start').attr('data-variant', $('#delivery-time option:selected').attr('data-variant'));
  }    
  
  function selectDate(date) {
    var month = date.getMonth(), day = date.getDate();
    
    // reset disabled (if any)
    if ($('#delivery-time option:disabled').length > 0) {
      $('#delivery-time option:disabled').removeAttr('disabled');
    }
    
    bta.updateAvailableTimeSlots();
    
    /*
        Monday November 25: Start a 2pm 
        Friday November 29: Open at 2pm 
        Wednesday November 27: Close at Noon 
        Monday December 23: Close at 2pm
        */
    
    if (month == 10 && (day == 25 || day == 29)) {
      disableBefore2();
    } else if (month == 10 && day == 27) {
      disableAfter11();
    } else if (month == 11 && day == 23) {
      disableAfter11();
    }
      
      if ($('#delivery-time option:selected').is(':disabled')) {
		selectFirstTimeSlot();
	}
      
  }
 
  var bta = {
    product_id: 163599911,
    callbacks: {
      dateSelected: function(field, date) {
        selectDate(date);
      }
    }
  }
</script>