SHOPIFY JS

 ------------------------------------------------------------------------------------------------------------------

THEME PRODUCT CHANGE 

------------------------------------------------------------------------------------------------------------------

/*================ THEME PRODUCTCODE CHANGE IN SECTIONS ================*/
theme.Product = (function() {
var defaults = {
smallBreakpoint: 750,
productThumbIndex: 0,
productThumbMax: 0,
ajaxCart: false,
stockSetting: false
};
function Product(container) {
var $container = (this.$container = $(container));
var sectionId = $container.attr('data-section-id');
this.selectors = {
originalSelectorId: '#ProductSelect-' + sectionId,
modal: 'ProductModal',
productZoomImage: '#ProductZoomImg',
addToCart: '#AddToCart-' + sectionId,
productPrice: '#ProductPrice-' + sectionId,
comparePrice: '#ComparePrice-' + sectionId,
addToCartText: '#AddToCartText-' + sectionId,
SKU: '.js-variant-sku',
productImageContainers: '.product__photo-container-' + sectionId,
productImageWrappers: '.product__photo-wrapper-' + sectionId,
productThumbContainers: '.product-single__thumbnail-item-' + sectionId,
productThumbsWrapper: '.product-single__thumbnails-' + sectionId,
productThumbs: '.product-single__thumbnail-' + sectionId,
saleTag: '#ProductSaleTag-' + sectionId,
productStock: '#ProductStock-' + sectionId,
singleOptionSelector: '.single-option-selector-' + sectionId,
shopifyPaymentButton: '.shopify-payment-button',
availability: '.product-single__availability',
hurrify : '.js-hurrify'
};
this.settings = $.extend({}, defaults, {
sectionId: sectionId,
ajaxCart: $container.data('ajax'),
stockSetting: $container.data('stock'),
enableHistoryState: $container.data('enable-history-state') || false,
namespace: '.product-' + sectionId
});
// Stop parsing if we don't have the product json script tag
if (!$('#ProductJson-' + sectionId).html()) {
return;
}
this.productSingleObject = JSON.parse(
$('#ProductJson-' + sectionId).html()
);
this.addVariantInfo();
this.init();
}
Product.prototype = _.assignIn({}, Product.prototype, {
init: function() {
this._stringOverrides();
this._initVariants();
this._productZoomImage();
this._productThumbSwitch();
this._productThumbnailSlider();
this._initQtySelector();
if (this.settings.ajaxCart) {
theme.AjaxCart = new window.AjaxCart(
$('#AddToCartForm-' + this.settings.sectionId)
);
}
},
_stringOverrides: function() {
window.productStrings = window.productStrings || {};
$.extend(theme.strings, window.productStrings);
},
addVariantInfo: function() {
if (!this.productSingleObject || !this.settings.stockSetting) {
return;
}
var variantInfo = JSON.parse(
$('#VariantJson-' + this.settings.sectionId).html()
);
for (var i = 0; i < variantInfo.length; i++) {
$.extend(this.productSingleObject.variants[i], variantInfo[i]);
}
},
_initVariants: function() {
var options = {
$container: this.$container,
enableHistoryState: this.settings.enableHistoryState,
product: this.productSingleObject,
singleOptionSelector: this.selectors.singleOptionSelector,
originalSelectorId: this.selectors.originalSelectorId
};
// eslint-disable-next-line no-new
this.variants = new slate.Variants(options);
this.$container.on(
'variantChange' + this.settings.namespace,
this._updateAddToCartBtn.bind(this)
);
this.$container.on(
'variantPriceChange' + this.settings.namespace,
this._updatePrice.bind(this)
);
this.$container.on(
'variantSKUChange' + this.settings.namespace,
this._updateSKU.bind(this)
);
this.$container.on(
'variantImageChange' + this.settings.namespace,
this._updateImages.bind(this)
);
},
_updateStock: function(variant) {
if (!this.settings.stockSetting) return;
var $stock = $(this.selectors.productStock),
$hurrify = $(this.selectors.hurrify);
// If we don't track variant inventory, hide stock
if (!variant || !variant.inventory_management) {
$stock.addClass('hide');
$hurrify.addClass('hide');
return;
}
if (variant.inventory_quantity < 10 && variant.inventory_quantity > 0) {
$stock
.html(
theme.strings.stockAvailable.replace(
'1',
variant.inventory_quantity
)
)
.removeClass('hide');
$hurrify.removeClass('hide').find('.progress-bar').css('width',variant.inventory_quantity*10+'%');
return;
}
if (variant.inventory_quantity <= 0 && variant.incoming) {
$stock
.html(
theme.strings.willNotShipUntil.replace(
'[date]',
variant.next_incoming_date
)
)
.removeClass('hide');
$hurrify.addClass('hide');
return;
}
// If there's more than 10 available, hide stock
$stock.addClass('hide');
$hurrify.addClass('hide');
},
_updateIncomingInfo: function(variant) {
if (!this.settings.stockSetting) return;
var $stock = $(this.selectors.productStock);
if (variant.incoming) {
$stock
.html(
theme.strings.willBeInStockAfter.replace(
'[date]',
variant.next_incoming_date
)
)
.removeClass('hide');
return;
}
// If there is no stock incoming, hide stock
$stock.addClass('hide');
},
_updateAddToCartBtn: function(evt) {
var variant = evt.variant;
var cache = {
$addToCart: $(this.selectors.addToCart),
$addToCartText: $(this.selectors.addToCartText)
};
if (variant) {
// Select a valid variant if available
theme.noticeSoldout.init(variant);
if (variant.available) {
// We have a valid product variant, so enable the submit button
cache.$addToCart.removeClass('btn--sold-out').prop('disabled', false);
cache.$addToCartText.html(theme.strings.addToCart);
$(this.selectors.shopifyPaymentButton, this.$container).show();
// Show how many items are left, if below 10
this._updateStock(variant);
//update availability - available
$(this.selectors.availability).find('span').text(theme.strings.available);
} else {
// Variant is sold out, disable the submit button
cache.$addToCart.prop('disabled', true).addClass('btn--sold-out');
cache.$addToCartText.html(theme.strings.soldOut);
$(this.selectors.shopifyPaymentButton, this.$container).hide();
// Update when stock will be available
this._updateIncomingInfo(variant);
//update availability - soldout
$(this.selectors.availability).find('span').text(theme.strings.soldOut);
}
} else {
cache.$addToCart.prop('disabled', true).removeClass('btn--sold-out');
cache.$addToCartText.html(theme.strings.unavailable);
//update availability - unavailable
$(this.selectors.availability).find('span').text(theme.strings.unavailable);
$(this.selectors.shopifyPaymentButton, this.$container).hide();
// Hide stock display
this._updateStock();
}
},
_updatePrice: function(evt) {
var variant = evt.variant;
if (variant) {
$(this.selectors.productPrice).html(
theme.Currency.formatMoney(variant.price, theme.moneyFormat)
);
// Update and show the product's compare price if necessary
if (variant.compare_at_price > variant.price) {
$(this.selectors.comparePrice)
.html(
theme.Currency.formatMoney(
variant.compare_at_price,
theme.moneyFormat
)
)
.removeClass('hide');
$(this.selectors.saleTag).removeClass('hide');
} else {
$(this.selectors.comparePrice).addClass('hide');
$(this.selectors.saleTag).addClass('hide');
}
theme.updateCurrencies();
} else {
$(this.selectors.comparePrice).addClass('hide');
}
},
_updateSKU: function(evt) {
var variant = evt.variant;
if (variant) {
$(this.selectors.SKU).html(variant.sku);
}
},
_updateImages: function(evt) {
var variant = evt.variant;
if (variant && variant.featured_image) {
var imageId = variant.featured_image.id;
this.switchProductImage(imageId);
this.setActiveThumbnail(imageId);
}
},
switchProductImage: function(imageId) {
var $imageToShow = $(
this.selectors.productImageContainers +
"[data-image-id='" +
imageId +
"']",
this.$container
);
var $imagesToHide = $(
this.selectors.productImageContainers +
":not([data-image-id='" +
imageId +
"'])",
this.$container
);
$imagesToHide.addClass('hide');
$imageToShow.removeClass('hide');
},
setActiveThumbnail: function(imageId) {
var $thumbnailToShow = $(
this.selectors.productThumbContainers +
"[data-image-id='" +
imageId +
"']",
this.$container
);
var $thumbnailsToHide = $(
this.selectors.productThumbContainers +
":not([data-image-id='" +
imageId +
"'])",
this.$container
);
$thumbnailsToHide.removeClass('is-active');
$thumbnailToShow.addClass('is-active');
var $thumbnails = $(this.selectors.productThumbsWrapper, this.$container);
// If there is a slick carousel, get the slide index, and position it into view with animation.
if ($thumbnails.hasClass('slick-initialized')) {
// eslint-disable-next-line shopify/jquery-dollar-sign-reference
var currentActiveSlideIndex = $thumbnails.slick('slickCurrentSlide');
var newActiveSlideIndex = parseInt(
$thumbnailToShow.attr('data-slick-index')
);
if (currentActiveSlideIndex !== newActiveSlideIndex) {
$thumbnails.slick('slickGoTo', newActiveSlideIndex, false);
}
}
},
_productThumbSwitch: function() {
if (!$(this.selectors.productThumbs).length) {
return;
}
var self = this;
$(this.selectors.productThumbs).on(
'click' + this.settings.namespace,
function(evt) {
evt.preventDefault();
var imageId = $(this)
.parent()
.data('image-id');
self.setActiveThumbnail(imageId);
self.switchProductImage(imageId);
}
);
//trigger hover thumb
//       $(this.selectors.productThumbs).on('mouseover',function(){
//         $(this).trigger('click');
//       });
},
/*
Thumbnail slider
*/
_initQtySelector: function() {
this.$container.find('.product-form__quantity').each(function(i, el) {
// eslint-disable-next-line no-new
new QtySelector($(el));
});
},
onUnload: function() {
$(this.selectors.productImageWrappers).off(this.settings.namespace);
$(this.selectors.productThumbs).off(this.settings.namespace);
$(this.selectors.productThumbs).slick('unslick');
if (this.ProductModal) {
this.ProductModal.$modal.off(this.settings.namespace);
}
}
});
return Product;
})();