SWATCH THEME JS



-------------------------------------------------------------------------------------------------------------------
SLATE RTE CODE
slate.rte = {↔};
-------------------------------------------------------------------------------------------------------------------
slate.rte = {
  wrapTable: function() {
    $('.rte table').wrap('<div class="rte__table-wrapper"></div>');
  },
 
  iframeReset: function() {
    var $iframeVideo = $(
      '.rte iframe[src*="youtube.com/embed"], .rte iframe[src*="player.vimeo"]'
    );
    var $iframeReset = $iframeVideo.add('.rte iframe#admin_bar_iframe');
 
    $iframeVideo.each(function() {
      // Add wrapper to make video responsive
      $(this).wrap('<div class="video-wrapper"></div>');
    });
 
    $iframeReset.each(function() {
      // Re-set the src attribute on each iframe after page load
      // for Chrome's "incorrect iFrame content on 'back'" bug.
      // https://code.google.com/p/chromium/issues/detail?id=395791
      // Need to specifically target video and admin bar
      this.src = this.src;
    });
  }
};
-------------------------------------------------------------------------------------------------------------------
SLATE VARIANT SELECTION CODE CHANGE
slate.Variants = (function() {↔})();
-------------------------------------------------------------------------------------------------------------------
slate.Variants = (function() {
/**
* Variant constructor
*
* @param {object} options - Settings from `product.js`
*/
function Variants(options) {
this.$container = options.$container;
this.product = options.product;
this.singleOptionSelector = options.singleOptionSelector;
this.originalSelectorId = options.originalSelectorId;
this.enableHistoryState = options.enableHistoryState;
this.currentVariant = this._getVariantFromOptions();
 
$(this.singleOptionSelector, this.$container).on(
'change',
this._onSelectChange.bind(this)
);
}
 
Variants.prototype = _.assignIn({}, Variants.prototype, {
/**
* Get the currently selected options from add-to-cart form. Works with all
* form input elements.
*
* @return {array} options - Values of currently selected variants
*/
_getCurrentOptions: function() {
var currentOptions = _.map(
$(this.singleOptionSelector, this.$container),
function(element) {
var $element = $(element);
var type = $element.attr('type');
var currentOption = {};
 
if (type === 'radio' || type === 'checkbox') {
if ($element[0].checked) {
currentOption.value = $element.val();
currentOption.index = $element.data('index');
 
return currentOption;
} else {
return false;
}
} else {
currentOption.value = $element.val();
currentOption.index = $element.data('index');
 
return currentOption;
}
}
);
 
// remove any unchecked input values if using radio buttons or checkboxes
currentOptions = _.compact(currentOptions);
 
return currentOptions;
},
 
/**
* Find variant based on selected values.
*
* @param  {array} selectedValues - Values of variant inputs
* @return {object || undefined} found - Variant object from product.variants
*/
_getVariantFromOptions: function() {
var selectedValues = this._getCurrentOptions();
var variants = this.product.variants;
 
var found = _.find(variants, function(variant) {
return selectedValues.every(function(values) {
return _.isEqual(variant[values.index], values.value);
});
});
 
return found;
},
 
/**
* Event handler for when a variant input changes.
*/
_onSelectChange: function() {
var variant = this._getVariantFromOptions();
 
this.$container.trigger({
type: 'variantChange',
variant: variant
});
 
if (!variant) {
return;
}
 
this._updateMasterSelect(variant);
this._updateImages(variant);
this._updatePrice(variant);
this._updateSKU(variant);
this.currentVariant = variant;
 
if (this.enableHistoryState) {
this._updateHistoryState(variant);
}
},
 
/**
* Trigger event when variant image changes
*
* @param  {object} variant - Currently selected variant
* @return {event}  variantImageChange
*/
_updateImages: function(variant) {
var variantImage = variant.featured_image || {};
var currentVariantImage = this.currentVariant.featured_image || {};
 
if (
!variant.featured_image ||
variantImage.src === currentVariantImage.src
) {
return;
}
 
this.$container.trigger({
type: 'variantImageChange',
variant: variant
});
},
 
/**
* Trigger event when variant price changes.
*
* @param  {object} variant - Currently selected variant
* @return {event} variantPriceChange
*/
_updatePrice: function(variant) {
if (
variant.price === this.currentVariant.price &&
variant.compare_at_price === this.currentVariant.compare_at_price
) {
return;
}
 
this.$container.trigger({
type: 'variantPriceChange',
variant: variant
});
},
 
/**
* Trigger event when variant sku changes.
*
* @param  {object} variant - Currently selected variant
* @return {event} variantSKUChange
*/
_updateSKU: function(variant) {
if (variant.sku === this.currentVariant.sku) {
return;
}
 
this.$container.trigger({
type: 'variantSKUChange',
variant: variant
});
},
 
/**
* Update history state for product deeplinking
*
* @param  {variant} variant - Currently selected variant
* @return {k}         [description]
*/
_updateHistoryState: function(variant) {
if (!history.replaceState || !variant) {
return;
}
 
var newurl =
window.location.protocol +
'//' +
window.location.host +
window.location.pathname +
'?variant=' +
variant.id;
window.history.replaceState({ path: newurl }, '', newurl);
},
 
/**
* Update hidden master select of variant change
*
* @param  {variant} variant - Currently selected variant
*/
_updateMasterSelect: function(variant) {
$(this.originalSelectorId, this.$container).val(variant.id);
}
});
 
return Variants;
})();

-------------------------------------------------------------------------------------------------------------------
SECTION PRODUCT THEME CODE CHANGE

theme.Product = (function() {↔})();
-------------------------------------------------------------------------------------------------------------------
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;
})();
-------------------------------------------------------------------------------------------------------------------


_______________________________________________________________________________________

ADD  SWATCH CARD CODE AFTER THEME INT

_______________________________________________________________________________________

theme.init = function() {↔};

theme.swatchCard = (function(){
  $(document).on('click','.js-swatch-card-item',function(){//click or mouseover
    var newImage = $(this).data('image');
    var id = $(this).data('id');
    var gridItem = $(this).closest('.js-product-card');
    gridItem.find('.product-card__image').find('img').attr('srcset',newImage);
    gridItem.find('.js-grid-cart').data('id',id).attr('data-id',id);
  });
})()
 
theme.swatchCard2 = (function(){
  function initVariant(id){
    var productJson = JSON.parse($('.customJson-' + id).html());
    var $selectorForm = $('.customform-' + id);
    var $button = $('.js-customform-addtocart-' + id);
    var $buttontext = $button.find('span');
    var $wrapObject = $selectorForm.closest('.js-product-card');
    var options = {
      $container: $selectorForm,
      enableHistoryState: false,
      product: productJson,
      singleOptionSelector: '.single-option-selector-' + id,
      originalSelectorId: '#ProductSelect-' + id
    };
    var variants = new slate.Variants(options);
    var AjaxCart = new window.AjaxCart($selectorForm);
    var _updateButton = function (evt){
      var variant = evt.variant;
      if (variant === undefined){
        $button.prop('disabled', true).removeClass('btn--sold-out');
        $buttontext.html(theme.strings.unavailable);
      }else{
        if (variant.available){
          $button.removeClass('btn--sold-out').prop('disabled', false);
          $buttontext.html(theme.strings.addToCart);
        }else{
          $button.prop('disabled', true).addClass('btn--sold-out');
          $buttontext.html(theme.strings.soldOut);
        }
      }
    }
    var _updateImage = function (evt){
      var variant = evt.variant;
      var $mainImage = $wrapObject.find('.product-card__image').find('img');
      if (variant !== undefined && variant.featured_image !== null){
        var variantImage = variant.featured_image;
        $mainImage.attr('srcset',variantImage.src);
      }
    }
    var _updatePrice = function (evt){
      var $price = $wrapObject.find('.product-card__price');
      var variant = evt.variant;
      if (variant !== undefined){
        var htmlComparePrice = variant.compare_at_price !== null ? '<s class="product-card__regular-price"><span class="money">'+variant.compare_at_price+'</span></s>' : '';
        var htmlPrice = htmlComparePrice + '<span class="money">'+variant.price+'</span>';
        $price.html(htmlPrice);
        theme.updateCurrencies();
      }
    }
    variants.$container.on(
      'variantChange' , _updateButton
    );
    variants.$container.on(
      'variantChange' , _updateImage
    );
    variants.$container.on(
      'variantChange' , _updatePrice
    );
  }
  function initForm(){
    $('.js-customform').each(function(){
      var id = $(this).data('id');
      initVariant(id);
    })
  }
 
  initForm();
  return{
    load:initForm
  }
})()
 
// Anchor scroll
 
// Notice when soldout
theme.noticeSoldout = (function(){
  var $soldoutWrapFormClass = $('.js-contact-soldout'),
      $textClass = $('.js-notify-text'),
      $soldoutValueId = $('#ContactProduct');
  function noticeSoldout(variant){
    $soldoutWrapFormClass.find('.form-success').remove()
    if (variant.available){
      $textClass.find('span').text('');
      $soldoutWrapFormClass.addClass('hide');
    }else{
      $textClass.find('span').text(': ' + variant.name);
      $soldoutWrapFormClass.removeClass('hide');
      $soldoutValueId.val(variant.name).attr('value',variant.name);
    }
  }
  return {
    init : noticeSoldout
  }
})()

 _______________________________________________________________________________________


Comments

Post a Comment

Popular posts from this blog

jj

By AYESHA KHAN -
  https://www.ofoct.com/image-editor/bear-image-editor-online.html?fileurl=%2F%2Fct3.ofoct.com%2Fget-file.php%3Ftype%3Dget%26genfpath%3D%252Ftmp%252FtmpD8Tlzf.jpg%26downloadsavename%3Dmerge_from_ofoct.jpg%26converter%3D%26informat%3D%26outformat%3Dpdf%26insize%3D%26outsize%3D1315737 https://cts.ofoct.com/get-file.php?type=get&genfpath=%2Ftmp%2FtmpD8Tlzf.jpg&downloadsavename=merge_from_ofoct.jpg&converter=&informat=&outformat=pdf&insize=&outsize=1315737 https://ibb.co/y8n5tK4 https://ibb.co/WFjPMrs https://ibb.co/0yZRsKZ https://ibb.co/2PkYKQW https://ibb.co/4jyGZKX https://ibb.co/jVSsPLj https://ibb.co/3YDPjxr https://ibb.co/VVTbVVL https://ibb.co/nbQgH9Y https://ibb.co/M6ZWg6p
Read more

bootstrap.min.css

By AYESHA KHAN -
/* ! * Bootstrap v4. 1.3 (https://getbootstrap.com/) * Copyright 2011 - 2018 The Bootstrap Authors * Copyright 2011 - 2018 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) */:root{--blue: #007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;--orange:#fd7e14;--yellow:#ffc107;--green:#28a745;--teal:#20c997;--cyan:#17a2b8;--white:#fff;--gray:#6c757d;--gray-dark:#343a40;--primary:#007bff;--secondary:#6c757d;--success:#28a745;--info:#17a2b8;--warning:#ffc107;--danger:#dc3545;--light:#f8f9fa;--dark:#343a40;--breakpoint-xs:0;--breakpoint-sm:576px;--breakpoint-md:768px;--breakpoint-lg:992px;--breakpoint-xl:1200px;--font-family-sans-serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-family-monospace:SFMono-Regular,Menlo,Monaco,Consolas,"Libera...
Read more