d
Topic
Posts:
4
April 24, 2016

Adding to Cart glitch This post is outdated

Hello,

Hoping someone can help me with this. Is there something wrong with the coding below that is cause a glitch in adding products to the cart? The website I am referring to is naturalcode.ca 

When you add some items to a cart, the amount added to the cart does not show up where the cart is at the top right, insted it ends up randomly beside the description, or to the bottom or side. It always changes. Any help would be very helpful.

Thanks in advance!

 

 function addItem(form_id) {
      $.ajax({
        type: 'POST',
        url: '/cart/add.js',
        dataType: 'json',
        data: $('#'+form_id).serialize(),
        success: Shopify.onSuccess,
        error: Shopify.onError
      });
   }

   $(".addtocart").click(function(e){
   
      var elem = $(this)
      $(elem).prop("disabled", true)

      e.preventDefault();
      addItem('add-item-form');
     
   });
  
   Shopify.onSuccess = function() {
     
      var elem = $('.addtocart');
     
      elem.removeAttr("disabled");
     
      var quantity = parseInt(jQuery('[name="quantity"]').val(), 10) || 1;

      $("html, body").animate({ scrollTop: 0 }, 250, 'swing');

      function animate() {

        $("#cart-animation").show();

        var addtocartWidth = elem.outerWidth() / 2
        var addtocartHeight = elem.outerHeight() / 2

        var addtocartLeft = elem.offset().left + addtocartWidth;
        var addtocartTop = $(elem).offset().top + addtocartHeight ;

        var buttonAreaWidth = $("#cart-target").outerWidth();
        var buttonAreaHeight = $("#cart-target").outerHeight();

        var buttonAreaLeft = ($("#cart-target").offset().left + buttonAreaWidth / 2  - $("#cart-animation").outerWidth() / 2) - 4 - 18;
        var buttonAreaTop = ($("#cart-target").offset().top + buttonAreaWidth / 2  - $("#cart-animation").outerHeight() / 2) - 4 - 8;

        var path = {
          start: {
            x: addtocartLeft,
            y: addtocartTop,
            angle: 190.012,
            length: 0.2
          },
          end: {
            x: buttonAreaLeft,
            y: buttonAreaTop,
            angle: 90.012,
            length: 0.50
          }
        };
   
        $('#cart-animation').text(quantity).animate(
        {
          path : new $.path.bezier(path)
        },
        1200,
        function() {
          $("#cart-animation").fadeOut(500, function() {
            $(elem).prop("disabled", false)
            var cartCount =  parseInt($('#cart-count').text()) + quantity;
            $('#cart-count').text(cartCount)
            $('#cart-target').addClass('has-items');
          })
        }
        );
      }
   

 

i
Replies
Posts:
1113
April 25, 2016

You have a JavaScript error: Uncaught TypeError: Cannot read property 'bezier' of undefined

That object is not properly initialized or something broke.

The easiest thing to fix this would be to revert scripts.js to a previous working version. If that is not available you will need to debug the code by hand and see what that Bezier function should return. Most likely will be a 4 numbers string in a 0.0 to 1.0 range.

Got an interesting project or just want to say hi? mircea@typefolly.com