Skip to content

Instantly share code, notes, and snippets.

@cshold

cshold/shop.js

Last active February 10, 2025 17:40
Download ZIP

Revisions

  1. cshold revised this gist Jan 5, 2015. 1 changed file with 1 addition and 8 deletions.
    9 changes: 1 addition & 8 deletions shop.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,17 +2,10 @@ window.timber = window.timber || {};

    timber.cacheSelectors = function () {
    timber.cache = {
    // General
    $html: $('html'),
    $body: $('body'),
    breakpointLarge: 769,
    windowWidth: window.innerWidth,

    // Product Page
    $productImageWrap: $('#productPhoto'),
    $productImage: $('#productPhotoImg'),
    $thumbImages: $('#productThumbs').find('a.product-photo-thumb'),
    $shareButtons: $('.social-sharing')
    $thumbImages: $('#productThumbs').find('a.product-photo-thumb')
    }
    };

  2. cshold created this gist Jan 5, 2015.
    139 changes: 139 additions & 0 deletions shop.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,139 @@
    window.timber = window.timber || {};

    timber.cacheSelectors = function () {
    timber.cache = {
    // General
    $html: $('html'),
    $body: $('body'),
    breakpointLarge: 769,
    windowWidth: window.innerWidth,

    // Product Page
    $productImageWrap: $('#productPhoto'),
    $productImage: $('#productPhotoImg'),
    $thumbImages: $('#productThumbs').find('a.product-photo-thumb'),
    $shareButtons: $('.social-sharing')
    }
    };

    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)