Adding to Cart glitch

Highlighted
New Member
4 0 0

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');
          })
        }
        );
      }
   

 

0 Likes
Shopify Partner
1278 10 161

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.

https://sections.design tips, tricks & Shopify sections
0 Likes