Wrong Variant keeps adding to cart instead of selected variant

Highlighted
Excursionist
17 0 2

I have inspected the console on a view product pages. Desktop is working just fine, but mobile view is having issues. If you add one variant to your cart, it adds the wrong variant. No matter which variant you add, it adds a random variant instead of the selected variant. Secondly, when you initally visit a product page, it is set to default to select first variant, but when you select another variant, you cannot select the first variant again. See example link: https://experiencecbd.com/products/assorted-gummy-candy-cbd?variant=23153358241892 I'm getting these error messages when inspecting console. Please help! These vendor.min.js and the jquery.min.js have been revised recently, so I am not sure if they may be a typo or what. Thanks in advance for just taking the time to look over,

 

Uncaught TypeError: Cannot read property 'split' of undefined 
at setDefaultSlider (assorted-gummy-candy-cbd?variant=23153358241892:3013) 
at productPageVariant (assorted-gummy-candy-cbd?variant=23153358241892:2968) 
at SwatchesConstructor.callExternalVariantHandler (vendor.min.js?v=10173948237380524627:36) 
at SwatchesConstructor.createSwatches (vendor.min.js?v=10173948237380524627:36) 
at SwatchesConstructor.initSwatches (vendor.min.js?v=10173948237380524627:36) 
at new SwatchesConstructor (vendor.min.js?v=10173948237380524627:36) 
at productPageJsonLoaded (assorted-gummy-candy-cbd?variant=23153358241892:2925) 
at Object.success (vendor.min.js?v=10173948237380524627:30) 
at j (jquery.min.js?v=14665384404713200735:2) 
at Object.fireWith [as resolveWith] (jquery.min.js?v=14665384404713200735:2) 
setDefaultSlider @ assorted-gummy-candy-cbd?variant=23153358241892:3013 
productPageVariant @ assorted-gummy-candy-cbd?variant=23153358241892:2968 
SwatchesConstructor.callExternalVariantHandler @ vendor.min.js?v=10173948237380524627:36 
SwatchesConstructor.createSwatches @ vendor.min.js?v=10173948237380524627:36 
SwatchesConstructor.initSwatches @ vendor.min.js?v=10173948237380524627:36 
SwatchesConstructor @ vendor.min.js?v=10173948237380524627:36 
productPageJsonLoaded @ assorted-gummy-candy-cbd?variant=23153358241892:2925 
(anonymous) @ vendor.min.js?v=10173948237380524627:30 
j @ jquery.min.js?v=14665384404713200735:2 
fireWith @ jquery.min.js?v=14665384404713200735:2 
x @ jquery.min.js?v=14665384404713200735:4 
(anonymous) @ jquery.min.js?v=14665384404713200735:4 
load (async) send @ jquery.min.js?v=14665384404713200735:4 
ajax @ jquery.min.js?v=14665384404713200735:4 
n.<computed> @ jquery.min.js?v=14665384404713200735:4 
getJSON @ jquery.min.js?v=14665384404713200735:4 
Shopify.getProduct @ vendor.min.js?v=10173948237380524627:30 
(anonymous) @ assorted-gummy-candy-cbd?variant=23153358241892:3073 


Uncaught TypeError: Cannot read property 'split' of undefined 
at setDefaultSlider (assorted-gummy-candy-cbd?variant=23153358241892:3013) 
at productPageVariant (assorted-gummy-candy-cbd?variant=23153358241892:2968) 
at SwatchesConstructor.callExternalVariantHandler (vendor.min.js?v=10173948237380524627:36) 
at SwatchesConstructor.createSwatches (vendor.min.js?v=10173948237380524627:36) 
at SwatchesConstructor.endOfTheClickHandler (vendor.min.js?v=10173948237380524627:36) 
at o (vendor.min.js?v=10173948237380524627:36) 
at HTMLAnchorElement.<anonymous> (vendor.min.js?v=10173948237380524627:36) 
at HTMLAnchorElement.dispatch (jquery.min.js?v=14665384404713200735:3) 
at HTMLAnchorElement.r.handle (jquery.min.js?v=14665384404713200735:3) 
setDefaultSlider @ assorted-gummy-candy-cbd?variant=23153358241892:3013 
productPageVariant @ assorted-gummy-candy-cbd?variant=23153358241892:2968 
SwatchesConstructor.callExternalVariantHandler @ vendor.min.js?v=10173948237380524627:36 
SwatchesConstructor.createSwatches @ vendor.min.js?v=10173948237380524627:36 
SwatchesConstructor.endOfTheClickHandler @ vendor.min.js?v=10173948237380524627:36 
o @ vendor.min.js?v=10173948237380524627:36 
(anonymous) @ vendor.min.js?v=10173948237380524627:36 
dispatch @ jquery.min.js?v=14665384404713200735:3 
r.handle @ jquery.min.js?v=14665384404713200735:3

 

0 Likes
Highlighted
Excursionist
17 0 2

here are issues that need to be address. The swatches functions are implemented internally. See code below.

/* swatches.js */
function SwatchesConstructor(t,e){var n=this;n.show_unavailable_options=e.show_unavailable_options||!1,n.productIsValid=n.show_unavailable_options||t.available,n.product_json=t,n.options_name="",n.options="",n.viewDesign=window.viewButtons,n.designOption1=e.designOption1||"getButtonHtml",n.designOption2=e.designOption2||"getButtonHtml",n.designOption3=e.designOption3||"getButtonHtml",n.contentParent=e.contentParent,n.enableHistoryState=Boolean(e.enableHistoryState)||!1,n.callback=e.callback||!1,n.texture_obj=e.externalImagesObject||{},n.colors_obj=e.externalColors||{},n.color_with_border=e.colorWithBorder||{},n.product_handle=e.productHandle||{},n.selectedByDefault=void 0===e.selectedByDefault||e.selectedByDefault,n.productIsValid&&"Title"!=t.options&&$(n.contentParent).length?n.initSwatches():n.callExternalVariantHandler(n.callback,t.variants[0],n.getJsonObject())}function getAllOptions(t,e){for(var n=!0,a={},i=0;i<t.length;i++){n=!!e||Boolean(t[i].available);var o=t[i].option1,l=t[i].option2,r=t[i].option3;null!=o&&n&&(null!=l?(a[o]=a[o]||{},null!=r?(a[o][l]=a[o][l]||{},a[o][l][r]=!e||Boolean(t[i].available)):a[o][l]=!e||Boolean(t[i].available)):a[o]=!e||Boolean(t[i].available))}var c=!1;return $.each(a,function(t,e){if(o=t,"object"==typeof a[t]&&"Default Title"!=t){var n=a[t];$.each(n,function(t,e){l=t,c=!1,"object"==typeof n[t]&&($.each(n[t],function(t,e){c||(c=c||e)}),a[o][l+"_|av"]=c)}),c=!1,$.each(n,function(t,e){var a=e;(hasOwnProperty.call(n,t+"_|av")||t.indexOf("_|av")>-1)&&(a=t.indexOf("_|av")>-1&&n[t]),c||(c=c||a)}),a[o+"_|av"]=c}}),a}function getCurrentOptionsArray(t){var e=t.option1+"%%"+t.option2+"%%"+t.option3;return e.replace(/\%\%null/g,"").split("%%")}function getCurrentVariantById(t,e,n){for(var a=0;a<t.length;a++){var i=!!n||t[a].available;if(e){if(t[a].id==e)return t[a]}else if(i)return t[a]}return t[0]}function getCurrentVariantByTitle(t,e,n){if(!e)return t[0];for(var a=!0,i=0;i<t.length;i++){var o="%%"+t[i].title,l=!!n||t[i].available;if(o.indexOf("%%"+e)>-1&&l&&!a)return t[i];if(t[i].title===e&&l&&a)return t[i];i==t.length-1&&e.indexOf("/")>-1&&((e=e.split("/")).pop(),e=e.length>1?e.join("/"):e,i=0,a=!1)}return t[0]}function getVariantIdUrl(){var t=location.search;return t.indexOf("variant=")>-1&&(t=t.match(/variant=\d+/g),t=parseInt(t[0].match(/\d+/g))),t}function isEmpty(t){return 0===Object.keys(t).length}function viewButtons(t,e){var n=".tt-wrapper",a=(e=e||{}).selectedByDefault,i=void 0===e.avaibility||e.avaibility;switch(t){case"getFunctionClickHandler":return"buttonHandler";case"getGroupElementName":return n;case"getGroupHtml":return'<div class="'+n.replace(/([\.#])/g,"")+'"><div class="tt-title-options">'+e.title+': <span class="current_option_name"></span></div><ul class="tt-options-swatch options-large">'+e.html+"</ul></div>";case"getButtonHtml":var o=e.value.trim(),l=o.toLowerCase(),r=e.c_border.indexOf(o)>-1?" border":"",c=e.producthandle;l=","+l+":",l=e.colors.indexOf(l)>-1&&e.colors.split(l).pop().split(",").shift().trim();var s=o in e.texture?' data-optionimage="true" style="background-image:url('+e.texture[o]+')"':"";c+" "+o in e.texture&&(s=' data-optionimage="true" style="background-image:url('+e.texture[c+" "+o]+')"'),""==s&&l&&(s=' style="background:'+l+';"');var u=s.indexOf("data-optionimage")>-1?' class="options-color-image"':"",d=i?"":"<span"+u+"></span>",p=o.indexOf('"')>-1?"'"+o+"'":'"'+o+'"';i=i?"":' data-availability="false"';var f=""!=s?"<li"+i+">"+d+'<a href="#" class="options-color'+r+'" data-value="'+o+'" data-tooltip="'+o+'" '+s+"></a></li>":"<li"+i+'><a href="#" data-value='+p+">"+o+"</a></li>";return e.value==e.selected&&a?f.replace(/<li/,'<li class="active"'):f;case"getSelectGroupHtml":return'<div class="'+n.replace(/([\.#])/g,"")+'"><div class="tt-title-options">'+e.title+': <span class="current_option_name"></span></div><div class="form-default"><div class="form-group"><select class="form-control">'+e.html+"</select></div></div></div>";case"getSelectButtonHtml":return f="<option>"+e.value.trim()+"</option>",e.value==e.selected&&a?f.replace(/<option/,"<option selected"):f;case"showSelectedParametres":return 0!=$(n).find(".active").length&&($(n).find(".active").each(function(){var t=$(this).find("[data-value]").data("value");$(this).closest(n).find(".current_option_name").text(t)}),!1)}}SwatchesConstructor.prototype.destroy=function(){var t=$(this.contentParent);t.find("a").unbind(),t.find("select").unbind(),t.empty()},SwatchesConstructor.prototype.initSwatches=function(t){var e,n=this,a=[];t=t,e=n.getJsonObject().options;for(var i=0;i<e.length;i++)a[i]=Object(e[i]).name;n.options_name=a,n.options=getAllOptions(n.getJsonObject().variants,n.show_unavailable_options),t||(t=n.enableHistoryState&&getVariantIdUrl()),n.createSwatches(t)},SwatchesConstructor.prototype.createSwatches=function(t){var e=this,n=e.viewDesign;if(isEmpty(e.options))return!1;var a=getCurrentVariantById(e.getJsonObject().variants,t,e.show_unavailable_options),i=getCurrentOptionsArray(a);e.createOptionsView(e.contentParent,e.options,e.options_name,i),e[n("getFunctionClickHandler")](),e.callExternalVariantHandler(e.callback,a,e.getJsonObject()),e.selectedByDefault=!0},SwatchesConstructor.prototype.buttonHandler=function(){var t=this,e=t.viewDesign,n=$(t.contentParent),a=e("getGroupElementName"),i=n.find(a);function o(e){if("a"===e[0].localName){if(e.hasClass("active"))return!1;0==n.find(".active").length&&i.each(function(){$(this).find("ul").find("li").first().addClass("active")}),i.find("a").unbind(),e.closest(a).find(".active").removeClass("active"),e.parent().addClass("active")}else e.unbind("focusin");var o="";i.each(function(){$(this).find(".active").length?o+=$(this).find(".active").find("[data-value]").data("value")+" / ":o+=$(this).find("select option:selected").text()+" / "}),t.endOfTheClickHandler(o)}i.find("a").on('touchstart click',function(t){t.preventDefault(),o($(this))}),i.find("select").change(function(){o($(this))}),t.selectedByDefault||i.find("select").focusin(function(t){o($(this))})},SwatchesConstructor.prototype.endOfTheClickHandler=function(t){var e=this;t=t.substring(0,t.length-3);var n=getCurrentVariantByTitle(e.getJsonObject().variants,t,e.show_unavailable_options);e.enableHistoryState&&history.pushState(null,null,location.pathname+"?variant="+n.id),e.createSwatches(n.id),$(e.contentParent).closest(".tt-product-single-info").find(".input_variant").val(n.id)},SwatchesConstructor.prototype.createOptionsView=function(t,e,n,a){var i=this,o=i.viewDesign,l=$(t).empty(),r=i.texture_obj,c=i.colors_obj,s=i.color_with_border,u="",d="",p="",f=[i.designOption1,i.designOption2,i.designOption3],v=i.product_handle,h=i.selectedByDefault,g=!1;$.each(e,function(t,i){if(t==a[0]&&"object"==typeof e[t]&&"Default Title"!=t&&-1==t.indexOf("_|av")){var l=e[t];$.each(l,function(t,e){t==a[1]&&"object"==typeof l[t]&&-1==t.indexOf("_|av")&&$.each(l[t],function(t,e){p+=o(f[2],{avaibility:e,value:t,selected:a[2],title:n[2],texture:r,colors:c,c_border:s,producthandle:v,selectedByDefault:h})}),-1==t.indexOf("_|av")&&(g="object"==typeof l[t]?l[t+"_|av"]:e,d+=o(f[1],{avaibility:g,value:t,selected:a[1],title:n[1],texture:r,colors:c,c_border:s,producthandle:v,selectedByDefault:h}))})}"Default Title"!=t&&-1==t.indexOf("_|av")&&(g="object"==typeof e[t]?e[t+"_|av"]:i,u+=o(f[0],{avaibility:g,value:t,selected:a[0],title:n[0],texture:r,colors:c,c_border:s,producthandle:v,selectedByDefault:h}))});for(var b=[n[0],n[1],n[2]],y=[u,d,p],_=0;_<y.length;_++)""!=y[_]&&l.append(o(f[_].indexOf("getSelect")>-1?"getSelectGroupHtml":"getGroupHtml",{title:b[_],html:y[_]}));o("showSelectedParametres")},SwatchesConstructor.prototype.getJsonObject=function(){return this.product_json},SwatchesConstructor.prototype.callExternalVariantHandler=function(t,e,n){t&&"function"==typeof t&&t(e,n)};

/* swatches_and_quickview */
var textforbutton = '';
var global_quantity;
var global_quantity_qw = false;
var _custom_loader = $('.custom-loader');
var modal_qv_parent = $('#ModalquickView');
var modal_qv_open = false;
var modal_qv_content = modal_qv_parent.find('.modal-content');
if(modal_qv_parent.length) {
  modal_qv_parent.on('show.bs.modal', function(e) {
    /* modal */
    modal_qv_open = true;
    _custom_loader.show();
    modal_qv_content.hide();//hide content
    var relatedTarget = $(e.relatedTarget).filter(':first');

    global_quantity_qw = global_quantity;
    global_quantity = {};
    var qa = relatedTarget.attr('data-quantity').split(';');
    if(qa.length > 0){
      for(var i = 0; i < qa.length; i++){
        if(qa[i] === '') break;
        var _qa = qa[i].split('-');
        global_quantity[_qa[0]] = _qa[1];
      }
    }

    var attr = relatedTarget.attr('data-value');
    var optionimages = relatedTarget.attr('data-optionimages');
    
    var small_description = relatedTarget.closest('.product-parent').find('.description').html();
    var fn = window['configureQuickView'];
    typeof(fn) === "function" && fn(attr, small_description, optionimages);
  }).on('hidden.bs.modal', function () {
    global_quantity = global_quantity_qw;
    modal_qv_open = false;
    var fn = window['destroyQuickView'];
    typeof(fn) === "function" && fn();
  });
}

var quick_view_loader = {
  btn: false,
  wait: function(_btn){
    if(!modal_qv_open) return false;
    this.btn = _btn;
    _btn.html(wait_text);
  },
  error: function(){
  	if(!modal_qv_open) return false;
    this.btn.addClass('quickview-error').html(errorhtml_text);
    this.default_text('quickview-error');
  },
  added: function(){
    if(!modal_qv_open) return false;
    this.btn.addClass('quickview-added').html(addedhtml_text);
    this.default_text('quickview-added');
  },
  default_text: function(value){
    setTimeout(function(){quick_view_loader.btn.removeClass(value).html(textforbutton)}, 1000);
  }
}

var quickview_swatches = false;
function configureQuickView(product_url, small_description, optionimages){
  var handle = product_url.split('/').pop();
  Shopify.getProduct(handle, qvLoadSuccess);
0 Likes