SHOPIFY JS

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

ADD SWATCH CARD CODE AFTER THEME INT

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

// Ajax search https://gist.github.com/awojtczyk/53d74c8af5f893841f33979b0cdcd6fe

// Swath variant in card item
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
  }
})()