This gist shows how to create a GIF screencast using only free OS X tools: QuickTime, ffmpeg, and gifsicle.
To capture the video (filesize: 19MB), using the free "QuickTime Player" application:
<script> | |
$('form[action="/cart/add"]').on('bta.datetimeChange', function(event, form) { | |
// restrict number of attendees dropdown to only allow available number of seats | |
var qtySelector = $('.single-option-selector:first'), | |
max = form.getAvailability(), | |
currentQty = parseInt(qtySelector.val(), 10); | |
qtySelector.find('option').removeAttr('disabled'); | |
qtySelector.find('option').filter(function () { | |
return parseInt(this.value, 10) > max; |
// theme.liquid | |
<script> | |
window.addEventListener("load", function(event) { | |
$('.single-option-selector').trigger('change'); // trigger bundle check on initial variant | |
}); | |
</script> | |
// theme.js - line 2438 | |
_updateAddToCart: function(evt) { | |
var variant = evt.variant; |
// When a date/time is chosen, update the variant option that represents the number | |
// of people attending the event. | |
$('form[action="/cart/add"]').on('bta.datetimeChange', function(event, form) { | |
var index = form.getAvailability() - 1, | |
quantitySelector = $('select[data-option="option1"]', $(this)); // assumes the variant option quantity selector is option1 | |
// clear any existing disabled options | |
quantitySelector.find('option').removeAttr('disabled'); | |
// disabled options > available |
{% comment %} | |
BookThatApp auto installed snippet. Changes made to this file will be lost if installed again. | |
{% endcomment %} | |
{% if product.metafields.bookthatapp.config %} | |
<div class="booking-form"> | |
{% capture attribute %}booking-start{% endcapture %} | |
<label for="{{ attribute }}-{{ product.handle }}">Start date</label> | |
<input id="{{ attribute }}-{{ product.handle }}" type="text" name="properties[Date]" size="12" | |
class="datepicker bta required bta-load-enable bta-dp-start" disabled="disabled" |
{% comment %} | |
Adds deposit products to the cart based on how many | |
booking products are in the cart. | |
Instructions: | |
1. Create a snippet called 'booking-deposit' and paste the contents of this gist. Also create a new Deposit product (must be visible in Online channel) | |
2. Include the snippet in cart.liquid (at the bottom): | |
{% include 'booking-deposit' %} |
<div class="row"> | |
<div id="col-main" class="col-sm-12 page-cart"> | |
<h1 class="page-heading">Shopping Cart Summary</h1> | |
<div class="text-center cart-empty-wrapper" rv-show="cart.item_count | lt 1"> | |
<p class="cart empty">{{ 'cart.general.empty' | t }}</p> | |
<a href="/collections/all"><i class="fa fa-long-arrow-right"></i> {{ 'cart.general.continue_shopping' | t }}</a> | |
</div> |
{% if product.metafields.bookthatapp.config %} | |
<div class="booking-form"> | |
<div> | |
{% capture attribute %}booking-start{% endcapture %} | |
<label for="{{ attribute }}-{{ product.handle }}">From:</label> | |
<input id="{{ attribute }}-{{ product.handle }}" type="text" name="properties[From]" size="12" class="datepicker bta required bta-load-enable bta-dp-start" disabled="disabled" | |
data-handle="{{ product.handle }}" data-variant="{{ product.selected_or_first_available_variant.id }}" | |
data-bta-product-config="{{ product.metafields.bookthatapp.config }}" | |
data-bta-variant-config="{% for variant in product.variants %}{{ variant.id }}:{{ variant.metafields.bookthatapp.config }}{% unless forloop.last %},{% endunless %}{% endfor %}" | |
data-bta-range-partner-id="#booking-finish-{{ product.handle }}" |
<script> | |
/* | |
Script to limit quantity for bundled products. | |
Instructions: http://support.shopifyconcierge.com/entries/20754371-Synchronizing-Product-Bundle-Inventory | |
*/ | |
bundles = []; | |
{% for variant in product.variants %}{% if variant.metafields.sva.bundled %} | |
bundles['{{ variant.id }}'] = jQuery.parseJSON('{{ variant.metafields.sva.bundled }}'); | |
{% endif %}{% endfor %} |
<script> | |
{% assign deposit = all_products['deposit'] %} | |
BookingDeposit = function() { | |
var _this = this; | |
_this.cart = {{ cart | json }}; | |
_this.depositProduct = {{ deposit | json }}; | |
_this.depositAmount = 0; | |
_this.depositLine = -1; | |
_this.cartDepositVariantId = -1; |