Skip to content

Instantly share code, notes, and snippets.

@cshold
Last active Aug 29, 2015
Embed
What would you like to do?
React's raw zoom JS
window.timber = window.timber || {};
timber.cacheSelectors = function () {
timber.cache = {
// Product Page
$productImageWrap: $('#productPhoto'),
$productImage: $('#productPhotoImg'),
$thumbImages: $('#productThumbs').find('a.product-photo-thumb')
}
};
timber.init = function () {
timber.cacheSelectors();
{% if settings.product_image_zoom %}
timber.productImageZoom();
{% endif %}
};
timber.productPage = function (options) {
var moneyFormat = options.moneyFormat,
variant = options.variant,
selector = options.selector;
// Selectors
var $addToCart = $('#addToCart'),
$productPrice = $('#productPrice'),
$comparePrice = $('#comparePrice'),
$variantQuantity = $('#variantQuantity'),
$quantityElements = $('.quantity-selector, label + .js-qty'),
$addToCartText = $('#addToCartText'),
$featuredImage = $('#productPhotoImg');
if (variant) {
if (variant.featured_image) {
var newImg = variant.featured_image,
el = $featuredImage[0];
Shopify.Image.switchImage(newImg, el, timber.switchImage);
}
// Select a valid variant if available
if (variant.available) {
// We have a valid product variant, so enable the submit button
$addToCart.removeClass('disabled').prop('disabled', false);
$addToCartText.text({{ 'products.product.add_to_cart' | t | json }});
// Show how many items are left, if below 10
if (variant.inventory_management) {
if (variant.inventory_quantity < 10 && variant.inventory_quantity > 0) {
$variantQuantity.html({{ 'products.product.only_left' | t: count: '1' | json }}.replace('1', variant.inventory_quantity)).show();
} else {
$variantQuantity.hide();
}
}
$quantityElements.show();
} else {
// Variant is sold out, disable the submit button
$addToCart.addClass('disabled').prop('disabled', true);
$addToCartText.text({{ 'products.product.sold_out' | t | json }});
$variantQuantity.hide();
$quantityElements.hide();
}
// Regardless of stock, update the product price
$productPrice.html(Shopify.formatMoney(variant.price, moneyFormat));
// Also update and show the product's compare price if necessary
if (variant.compare_at_price > variant.price) {
$comparePrice
.html(Shopify.formatMoney(variant.compare_at_price, moneyFormat))
.show();
} else {
$comparePrice.hide();
}
} else {
// The variant doesn't exist, disable submit button
$addToCart.addClass('disabled').prop('disabled', true);
$addToCartText.text({{ 'products.product.unavailable' | t | json }});
$variantQuantity.hide();
$quantityElements.hide();
}
};
timber.productImageSwitch = function () {
if (timber.cache.$thumbImages.length) {
// Switch the main image with one of the thumbnails
// Note: this does not change the variant selected, just the image
timber.cache.$thumbImages.on('click', function(evt) {
evt.preventDefault();
var newImage = $(this).attr('href');
timber.switchImage(newImage, null, timber.cache.$productImage);
});
}
};
timber.switchImage = function (src, imgObject, el) {
// Make sure element is a jquery object
var $el = $(el);
$el.attr('src', src);
{% if settings.product_image_zoom %}
// Update new image src to grande
var zoomSrc = src.replace('_medium','_grande').replace('_large','_grande');
$el.attr('data-zoom', zoomSrc);
$(function() {
timber.productImageZoom();
});
{% endif %}
};
timber.productImageZoom = function () {
{% if settings.product_image_zoom %}
if (!timber.cache.$productImageWrap.length) {
return;
};
// Destroy zoom (in case it was already set), then set it up again
timber.cache.$productImageWrap.trigger('zoom.destroy');
timber.cache.$productImageWrap.addClass('image-zoom').zoom({
url: timber.cache.$productImage.attr('data-zoom')
})
{% endif %}
};
// Initialize Timber's JS on docready
$(timber.init)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment