Skip to content

Instantly share code, notes, and snippets.

View gterrill's full-sized avatar

Gavin Terrill gterrill

View GitHub Profile
@gterrill
gterrill / booking-form.liquid
Last active December 16, 2015 04:09
Capturing a start date and number of days
{% comment %}
BookThatApp auto installed snippet. Changes made to this file will be lost if installed again.
{% endcomment %}
{% if product.metafields.bookthatapp.product_id %}
<div class="selector-wrapper">
{% capture attribute %}booking-start{% endcapture %}
<label for="{{ attribute }}">Rental Start Date:</label>
<input id="{{ attribute }}" type="text" name="properties[{{ attribute }}]" class="datepicker bta required bta-load-enable styled-input" autocomplete="off" size="12" data-handle="{{ product.handle }}" data-variant="{{ product.variants.first.id}}" data-mindate="{{ product.metafields.bookthatapp.lead_time }}" disabled="disabled" />
<label id="booked-out"></label>
@gterrill
gterrill / booking-helper.js
Last active July 18, 2016 05:46
Matches the date range selected to a variant
/*
This code is now deprecated. Please contact the helpdesk if you need help with choosing a variant based on the date range chosen
*/
jQuery.fn.reverse = [].reverse;
function selectVariant() {
var start = $('#booking-start').datepicker('getDate'),
finish = $('#booking-finish').datepicker('getDate');
if (start && finish) {
@gterrill
gterrill / bta-ajax.js
Last active December 16, 2015 21:20
Ajax add to cart capturing booking line item properties
function addToCart(e){
if (typeof e !== 'undefined') e.preventDefault();
if (!$('form[action="/cart/add"]').valid()) {
return;
}
var form = $(this).parents('form'),
data = [];
@gterrill
gterrill / bta-custom-range.js
Created May 1, 2013 23:04
Restrict number of days that can be chosen for the date range
function customRange(input) {
jQuery(input).addClass('openDatepicker');
var min = new Date(), // Minimum date is today
dateMin = min,
dateMax = null,
dayRange = 7; // Set this to the range of days you want to restrict to
if (input.id === "booking-start") {
if ($("#booking-finish").datepicker("getDate") != null) {
@gterrill
gterrill / booking-form.liquid.html
Last active December 17, 2015 11:29
Setting quantity max based on selected variant and date range
<script type="text/javascript">
var bta = {
product_id: {{ product.id }},
callbacks: {
dateSelected: function(input, date) {
checkAvailable();
},
available: function(data) { // invoked after availability data from BookThatApp is loaded via Ajax.
checkAvailable();
}
@gterrill
gterrill / delivery.liquid.html
Created May 20, 2013 20:16
Add a variant to the cart dynamically depending on what is in the cart.
{{ 'api.jquery.js' | shopify_asset_url | script_tag }}
<script type="text/javascript">
var variant = 231075270, // delivery item
count = 0, existing = 0, cart = {{ cart | json }};
var returnToCart = function(line_item) {
window.location.href = '/cart';
};
@gterrill
gterrill / gist:5692966
Last active December 17, 2015 23:59
Display end dates based on default duration
<!-- inside cart.items for loop -->
{% for p in item.properties %}
{% unless p.last == blank %}
<span class="date" data-date="{{ p.last | date:'%c' }}" data-duration="{{ item.variant.metafields.bookthatapp.duration }}">{{ p.first | replace: 'booking-start', 'Date' | replace: 'booking-time', 'Time' }}:&nbsp{% if p.last contains '/uploads/' %}{{ p.last | split: '/' | last }}{% else %}{{ p.last }}{% endif %}</span><br />
{% endunless %}
{% endfor %}
<script type="text/javascript">// at the bottom of cart.liquid
pad = function(n) {
@gterrill
gterrill / calendar.template.html
Last active October 19, 2020 15:43
Calendar template that displays upcoming classes in a table (/apps/bookthatapp/calendar)
<div>
<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>
@gterrill
gterrill / eventRender.js
Created June 10, 2013 21:16
Rendering the product image in the calendar page
eventRender: function(event, element) {
if (event.bookingCount >= event.capacity) {
element.addClass('booked-out');
}
var image = event.image.split('?')[0],
index = image.lastIndexOf('.'),
ext = image.substr(index),
path = image.substr(0, index),
div = $('<div>', {'class': 'thumb'}),
@gterrill
gterrill / cart-booking-form.liquid.html
Created June 18, 2013 02:19
Capture a date range on the cart page and update quantities
{{ 'jquery.validate.min.js' | asset_url | script_tag }}
<div class="selector-wrapper">
{% capture attribute %}booking-start{% endcapture %}
<label for="{{ attribute }}">From:</label>
<input id="{{ attribute }}" type="text" name="attributes[{{ attribute }}]" size="12" class="datepicker bta required bta-load-enable" value="{{ cart.attributes.booking-start }}" />
</div>
<div class="selector-wrapper">
{% capture attribute %}booking-finish{% endcapture %}
<label for="{{ attribute }}">To:</label>
<input id="{{ attribute }}" type="text" name="properties[{{ attribute }}]" size="12" class="datepicker bta required bta-load-enable" value="{{ cart.attributes.booking-finish }}" />