Wrong variant being added to cart

Labrinth
Tourist
5 1 0

Hello,

  Only on the product page, when I select a variant (M), in the cart another variant will be added, it's usually the first one (XS), but it alternates randomly. I haven't made any changes to the theme code or added any new apps. If anyone could help out with this issue, it would be appreciated. 

  You can check the issue here for example: site

I'm using a third party theme (wookie). I already contacted the developer, but I was trying to fix the issue faster here.

Here is the product.liquid file:

{%- comment -%}
  The contents of the product.liquid template can be found in /sections/product-template.liquid
{%- endcomment -%}

{% assign current_variant = product.selected_or_first_available_variant %}
<div {% comment remove microdata structured data %}itemscope{% endcomment %} itemtype="http://schema.org/Product" class="product_page_template product_page_mobile_slider_no_margin_top" data-prpageprhandle="{{ product.handle }}">
  <meta itemprop="name" content="{{ product.title }}">
  <meta itemprop="url" content="{{  shop.url | append: product.url }}">
  {%- if product.featured_image -%}
  {%- assign image_size = product.featured_image.width | append: 'x' -%}
  <link itemprop="image" content="{{ product.featured_image.src | img_url: image_size | prepend: "https:" }}">
  {%- endif -%}
  <meta itemprop="description" content="{{ product.description | strip_html }}">
  {%- if current_variant.sku != blank -%}
  <meta itemprop="sku" content="{{ current_variant.sku }}">
  {%- endif -%}
  <meta itemprop="brand" content="{{ product.vendor }}">
  {%- for variant in product.variants -%}
  <div itemprop="offers" {% comment remove microdata structured data %}itemscope{% endcomment %} itemtype="http://schema.org/Offer">
    {%- if variant.sku != blank -%}
    <meta itemprop="sku" content="{{ variant.sku }}">
    {%- endif -%}
    <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">
    <meta itemprop="price" content="{{ variant.price | divided_by: 100.00 }}">
    <meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
    <link itemprop="url" href="{{ shop.url | append: variant.url }}">
    <meta itemprop="priceValidUntil" content="{{ 'now' | date: '%s' | plus: 31536000 | date: '%Y-%m-%d' | uri_encode | replace:'+','%20' }}">
  </div>
  {%- endfor -%}

  {% section 'product-template' %}
</div>

{% include "modal-video" %}

<script>
  global_quantity = {};
  {% for variant in product.variants %}
  {% if variant.inventory_policy == "continue" %}
  	global_quantity[{{ variant.id }}] = 'continue' + {{ variant.inventory_quantity }};
  {% else %}
  	global_quantity[{{ variant.id }}] = {{ variant.inventory_quantity }};
  {% endif %}
  {% endfor %}
    
  {% if product.available and settings.satc_show %}
    window.addEventListener('DOMContentLoaded', function() {
      $(document).ready(function(){
        $('.btn-addtocart').length && $('.tt-fixed-product-wrapper').length && initStickyAddToCart();
      })
    });

    function initStickyAddToCart(){
      $('.tt-back-to-top').length && $('.tt-back-to-top').remove();

      var b = $('.btn-addtocart').first(),
          p = $('.tt-fixed-product-wrapper'),
          q = $('.tt-product-single-info'),
          c = q.find('.tt-input-counter').first();

      $(window).resize(isatcResize);
      $(window).scroll(isatcScrollHandler);
      isatcResize();
      isatcScrollHandler();

      $('body').on('click', '.tt-fixed-product-wrapper .plus-btn', function(e){
        c.find('.plus-btn').trigger('click');
        p.find('.tt-input-counter').replaceWith(c.clone());
      })
      $('body').on('click', '.tt-fixed-product-wrapper .minus-btn', function(e){
        c.find('.minus-btn').trigger('click');
        p.find('.tt-input-counter').replaceWith(c.clone());
      })
      $('body').on('click', '.tt-fixed-product-wrapper .btn', function(e){
        e.preventDefault();
        b.trigger('click');
      })
      $('body').on('change', '.tt-fixed-product-wrapper .tt-input-counter input', function(e){
        c.find('input').val($(this).val()).trigger('change');
        p.find('.tt-input-counter').replaceWith(c.clone());
      })
      $('body').on('click focusout', '.tt-fixed-product-wrapper select', function(e){
        if(e.type == 'click' && !p.find('form').hasClass('formactive')){
          p.find('form').addClass('formactive');
          return false;
        }
        p.find('form').removeClass('formactive');
      })
      $('body').on('change', '.tt-fixed-product-wrapper select', function(e){
        setTimeout(function(){
          p.find('.btn').replaceWith($('.btn-addtocart').first().clone().removeClass('btn-lg btn-addtocart addtocart-js').addClass('stickyaddtocart'));
          p.find('.tt-price').replaceWith(q.find('.tt-price').first().clone());
        }, 200)
      })
      
      function isatcResize(){
        if($('.select_options').length) return false;
        var h = p.innerHeight() - 4;
        $('footer').css('padding-bottom', h);
      }
      function isatcScrollHandler(){
        if($(window).scrollTop() > b.offset().top){
          if(p.hasClass('atdshowed') || $('.select_options').length) return false;
          var c_ = c.clone();
          p.addClass('atdshowed').find('.tt-input-counter').replaceWith(c_);
          p.find('.tt-price').replaceWith(q.find('.tt-price').first().clone());
          p.find('.btn').replaceWith($('.btn-addtocart').first().clone().removeClass('btn-lg btn-addtocart addtocart-js').addClass('stickyaddtocart'));
          $('.tt-promo-fixed').length && $('.tt-promo-fixed').css('bottom', p.innerHeight()+20);
          p.fadeIn(200);
        }
        else{
          if(!p.hasClass('atdshowed') || $('.select_options').length) return false;
          $('.tt-promo-fixed').length && $('.tt-promo-fixed').css('bottom', '');
          p.removeClass('atdshowed').fadeOut(200);
        }
      }
    }
  {% endif %}
</script>

<script>
  var players = {},
      playersMob = {},
      mobileslider = false,
      youapiinited = false,
      armodels = {};

  window.Shopify.loadFeatures([
    {
      name: 'model-viewer-ui',
      version: '1.0',
      onLoad: setupModelViewerUi
    }
  ]);
  function setupModelViewerUi(){
    $('body').find('model-viewer').each(function(){
      if(!$(this).closest('.notstarted').length){
        var i = $(this).closest('[data-slick-index]').length ? $(this).closest('[data-slick-index]').attr('data-slick-index') : '';
        armodels[i+$(this).attr('data-model-id')] = new Shopify.ModelViewerUI($(this)[0]);
        i == '' && armodels[i+$(this).attr('data-model-id')].play();
      }
    })
  }

  window.addEventListener('DOMContentLoaded', function() {
    $('[data-item-type]').length && initPrGalItemType();
    $('.notstarted').length && $('.notstarted').on('click', function(e){
      $(this).unbind('click');
      $(this).removeClass('notstarted');
    })
  });
  window.addEventListener('resize', function(){
    if($(window).width() < 576){
      mediaresizetomobile($('.mediaholder'));
      mediaresizetomobile($('.product-images-static'));
    }
    else{
      if(mobileslider){
        $('.tt-mobile-product-slider').find('video').each(function(){
          $(this)[0].pause();
        })
        stopYouVideos(playersMob);
      }
      $('[data-item-type]').length && getMediaGalleryItem($('[data-item-type]').first().closest('ul').find('.zoomGalleryActive'));
    }
  });
  window.addEventListener("mobile-slider-initialized", function(e){
    mobileslider = e.detail;
    if(mobileslider.find('.pt-product-media-external').length == 0 || !youapiinited) return false;
    collectPlayersMob(mobileslider);
  });
  function mediaresizetomobile($obj){
    if(!$obj.length) return false;
    $obj.find('video').each(function(){
      $(this)[0].pause();
    })
    stopYouVideos(players);
  }

  var tag = document.createElement('script');
  tag.src="https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  function onYouTubeIframeAPIReady() {
    collectPlayersDesk($('.mediaholder'));
    collectPlayersDesk($('.product-images-static'));
    youapiinited = true;
    mobileslider && collectPlayersMob(mobileslider);
  }
  function collectPlayersDesk($obj){
    if(!$obj.length) return false;
    $obj.find('.pt-product-media-external').each(function(){
      var $this = $(this),
          videoId = $this.attr('data-video-id');
      players[videoId] = new YT.Player($this.find('iframe')[0], {videoId: videoId});
    });
  }
  function collectPlayersMob($obj){
    $obj.find('.pt-product-media-external').each(function(){
      var $this = $(this),
          videoId = $this.attr('data-video-id'),
          i = $this.parent().attr('data-slick-index');
      playersMob[i+videoId] = new YT.Player($this.find('iframe')[0], {videoId: videoId});
    });

    $obj.on('beforeChange', function(event, slick, currentSlide, nextSlide){
      if(currentSlide == nextSlide) return true;
      var p = $(this).find('[data-slick-index="'+currentSlide+'"]'),
          v = false;

      v = p.find('.pt-product-media-external');
      if(v.length){
        var videoId = v.attr('data-video-id');
        playersMob[currentSlide+videoId].pauseVideo();
      }
      v = p.find('.pt-product-media-internal');
      if(v.length){
        v.find('video')[0].pause();
      }
    });
    $obj.on('afterChange', function(event, slick, currentSlide){
      var $this = $(this);

      var p = $this.find('[data-slick-index="'+currentSlide+'"]'),
          v = false;

      v = p.find('.pt-product-media-external');
      if(v.length){
        var videoId = v.attr('data-video-id');
        playersMob[currentSlide+videoId].playVideo();
      }
      v = p.find('.pt-product-media-internal');
      if(v.length){
        v.find('video')[0].play();
      }
      v = p.find('.pt-product-media-model');
      if(v.length && v.find('model-viewer').attr('reveal') != "auto"){
        armodels[currentSlide+v.find('model-viewer').attr('data-model-id')].play();
      }
    });
  }
  function initPrGalItemType(){
    $('[data-item-type]').click(function(e){
      getMediaGalleryItem($(this));
    })
  }

  /**/

  function getMediaGalleryItem($this){
    if(!$this.attr('data-item-type')) return false;
    if($this.attr('data-item-type') == 'image'){
      //$(".zoom-product").attr('src', $this.attr('data-image')).attr('data-zoom-image', $this.attr('data-zoom-image'));
      showMediaHolderOnProductPage(false)
      return true;
    }
    showMediaHolderOnProductPage(true, $this.attr('data-target'));
  }
  function showMediaHolderOnProductPage(val, attr){
    val = val || false;
    var $mh = $('.mediaholder'),
        $mhall = $mh.find('[data-target-id]'),
        $mhcur = $mh.find('[data-target-id='+attr+']');

    $mhall.length && $mhall.hide();
    $mh.find('video').each(function(){
      $(this)[0].pause();
    })

    stopYouVideos(players);

    if(val){
      $('.mediaimageholder').hide();
      $mh.show();
      $mhcur.show();

      $mhcur.find('video').length && $mhcur.find('video')[0].play();

      var y = $mhcur.find('iframe');
      if(y.length){
        var videoId = $mhcur.attr('data-video-id');
        players[videoId].playVideo();
      }
    }
    else{
      $('.mediaimageholder').show();
      $mh.hide();
    }
  }
  function stopYouVideos(players){
    if(Object.keys(players).length === 0) return false;
    Object.keys(players).forEach(function(key) {
      if (typeof players[key].pauseVideo === "function") { 
        players[key].pauseVideo();
      }
    });
  }
  /* arrows for big image in gallery */
  window.addEventListener("desktop-slider-initialized", function(e){
    var $this = e.detail;
    if(!$('#custom-product-item').length) return false;
    var l = $this.find('.slick-slide').length-1;
    $('#custom-product-item').addClass('tt-show');
    $('#custom-product-item').find('.slick-next').on('click',function(e){
      var c = Number($this.find('.zoomGalleryActive').parent().attr('data-slick-index')) + 1;
      c = c > l ? 0 : c;
      $this.find('[data-slick-index="'+c+'"] a').trigger('click');
    });
    $('#custom-product-item').find('.slick-prev').on('click',function(e){
      var c = Number($this.find('.zoomGalleryActive').parent().attr('data-slick-index')) - 1;
      c = c <= -1 ? l : c;
      $this.find('[data-slick-index="'+c+'"] a').trigger('click');
    });
  });
</script>
 

Thank you!

Reply 1 (1)

camilagibli
Shopify Partner
2 0 0

hello! were you able to solve the problem? The same thing happens to me with my store.