Add to Cart issue

Tourist
5 0 1

Hi there,

I’m having a problem with ajaxify-cart.liquid, I’m using New Standard theme. I follow the instruction from this link: http://docs.shopify.com/support/your-store/products/how-to-ajaxify-your-cart  .But doesn’t work on my site. The issues are the ajaxify doesn’t work and every time I added 1 quantity from ‘add to cart’ from product page, it added 2 quantity instead. 

Is there something wrong with the coding that I need to change?

<script>

/**
 * Module to ajaxify all add to cart forms on the page.
 *
 * Copyright (c) 2014 Caroline Schnapp (11heavens.com)
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 *
 */
Shopify.AjaxifyCart = (function($) {
  var _config = {
    addedToCartBtnLabel: 'Thank you!',
    addingToCartBtnLabel: 'Adding...',
    soldOutBtnLabel: 'Sold Out',
    howLongTillBtnReturnsToNormal: 1000, // in milliseconds.
    cartCountSelector: '.cart, #cart-count a:first, #gocart p a, #cart .checkout em, .item-count',
    cartTotalSelector: '#cart-price',
    feedbackPosition: 'nextButton', // 'aboveForm' for top of add to cart form, 'belowForm' for below the add to cart form, and 'nextButton' for next to add to cart button.
    shopifyAjaxAddURL: '/cart/add.js',
    shopifyAjaxCartURL: '/cart.js'
  };
  var _showFeedback = function(success, html, addToCartForm) {
    $('.ajaxified-cart-feedback').remove();
    var feedback = '<p class="ajaxified-cart-feedback ' + success + '">' + html + '</p>';
    switch (_config.feedbackPosition) {
      case 'aboveForm':
        addToCartForm.before(feedback);
        break;
      case 'belowForm':
        addToCartForm.after(feedback);
        break;
      case 'nextButton':
      default:
        addToCartForm.find('input[type="submit"]').after(feedback);
        break;   
    }
    $('.ajaxified-cart-feedback').slideDown();
  };
  var _init = function() {   
    $(document).ready(function() { 
      $('form[action="/cart/add"]').submit(function(e) {
        e.preventDefault();
        var addToCartForm = $(this);  
        // Disable add to cart button.
        var addToCartBtn = addToCartForm.find('input[type="submit"]');
        addToCartBtn.attr('data-label', addToCartBtn.val());
        addToCartBtn.val(_config.addingToCartBtnLabel).addClass('disabled').attr('disabled', 'disabled');
        // Add to cart.
        $.ajax({
          url: _config.shopifyAjaxAddURL,
          dataType: 'json',
          type: 'post',
          data: addToCartForm.serialize(),
          success: function(itemData) {
            // Re-enable add to cart button.
            addToCartBtn.addClass('inverted').val(_config.addedToCartBtnLabel);
            _showFeedback('success','<i class="fa fa-check"></i> Added to cart! <a href="/cart">View cart</a> or <a href="/collections/all">continue shopping</a>.',addToCartForm);
            window.setTimeout(function(){
              addToCartBtn.removeAttr('disabled').removeClass('disabled').removeClass('inverted').val(addToCartBtn.attr('data-label'));
            }, _config.howLongTillBtnReturnsToNormal);
            // Update cart count and show cart link.
            $.getJSON(_config.shopifyAjaxCartURL, function(cart) {
              if (_config.cartCountSelector && $(_config.cartCountSelector).size()) {
                var value = $(_config.cartCountSelector).html() || '0';
                $(_config.cartCountSelector).html(value.replace(/[0-9]+/,cart.item_count));
              }
              if (_config.cartTotalSelector && $(_config.cartTotalSelector).size()) {
                if (typeof Currency !== 'undefined' && typeof Currency.money_format !== 'undefined') {
                  var newCurrency = '';
                  if ($('[name="currencies"]').size()) {
                    newCurrency = $('[name="currencies"]').val();
                  }
                  else if ($('#currencies span.selected').size()) {
                    newCurrency = $('#currencies span.selected').attr('data-currency');
                  }
                  if (newCurrency) {
                    $(_config.cartTotalSelector).html('<span class=money>' + Shopify.formatMoney(Currency.convert(cart.total_price, "{{ shop.currency }}", newCurrency), Currency.money_format[newCurrency]) + '</span>');
                  } 
                  else {
                    $(_config.cartTotalSelector).html(Shopify.formatMoney(cart.total_price, "{{ shop.money_format | remove: "'" | remove: '"' }}"));
                  }
                }
                else {
                  $(_config.cartTotalSelector).html(Shopify.formatMoney(cart.total_price, "{{ shop.money_format | remove: "'" | remove: '"' }}"));
                }
              };
            });        
          }, 
          error: function(XMLHttpRequest) {
            var response = eval('(' + XMLHttpRequest.responseText + ')');
            response = response.description;
            if (response.slice(0,4) === 'All ') {
              _showFeedback('error', response.replace('All 1 ', 'All '), addToCartForm);
              addToCartBtn.removeAttr('disabled').val(_config.soldOutBtnLabel).attr('disabled','disabled');
            }
            else {
              _showFeedback('error', '<i class="fa fa-warning"></i> ' + response, addToCartForm);
              addToCartBtn.removeAttr('disabled').removeClass('disabled').removeClass('inverted').val(addToCartBtn.attr('data-label'));
            }
          }
        });   
        return false;    
      });
    });
  };
  return {
    init: function(params) {
        // Configuration
        params = params || {};
        // Merging with defaults.
        $.extend(_config, params);
        // Action
        $(function() {
          _init();
        });
    },    
    getConfig: function() {
      return _config;
    }
  }  
})(jQuery);

Shopify.AjaxifyCart.init();

</script>

{{ '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css' | stylesheet_tag }}

<style>
.ajaxified-cart-feedback {
  display: inline;
  padding-left: 10px;
  margin: 20px 0;
  line-height: 36px;
  font-size: 80%;
  vertical-align: middle;
  clear:both;
}
.ajaxified-cart-feedback.success { color: #3D9970; }
.ajaxified-cart-feedback.error { color: #FF4136; } 
</style>

Anyone can help me with this issue, I really appreciated. I’ve spend days to figure it out -_-‘

 

1 Like
Shopify Staff
Shopify Staff
5826 0 275

Hi Tomas!

You also had another script — unnecessary when using Ajax — this one: http://docs.shopify.com/manual/configuration/store-customization/page-specific/product-page/how-to-p... I have removed.

Everything should work now.

Let me know how that goes, okay?

By the way, this is Caroline, I am the author of many of the added scripts you are using, including the color swatches one.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Tourist
5 0 1

Hi Caroline,

Thx for quick reply. Thank you for the awesome scripts that you provided.

I added the script that you ask me to put. But I still could not make the product page stay on the same page when you click 'add to cart' button.

Do I still need ajaxify-cart.liquid?

0 Likes
Shopify Staff
Shopify Staff
5826 0 275

No, I did not ask you to put in any script. I had fixed things up and could stay put on the product page.

On the contrary I pointed you to the script I removed.

Let me see...

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Shopify Staff
Shopify Staff
5826 0 275

Hi Tomas,

I re-applied the previous fixes now.

Let me know how that goes.

Just to be clear, no action is required on your end.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
0 Likes
Tourist
5 0 1

Hi Caroline,

WOW.... You are awesome!!!  :) It works perfectly. Thank you very much, Caroline. You made my day. :)

Sorry I was a noob when it comes to coding. Thank you very much once again.

0 Likes
Shopify Staff
Shopify Staff
5826 0 275

You're very welcome, Tomas! :)

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
1 Like
Shopify Partner
12 0 0

Hi - I am having an issue where the text " Added to cart! View cart or continue shopping." is showing twice.

I have followed the instructions here also: http://docs.shopify.com/support/your-store/products/how-to-ajaxify-your-cart

I am using Minimal theme here (storefront password = fahflo)

Could you please help?

Thanks!

0 Likes
Shopify Partner
7 0 3

Hi Caroline, I love this code - it is doing exactly what i want except… when the item is added to cart and the 'view cart' and 'continue shopping' appears - if you hit continue shopping it goes back to a url "collections/all" page and i need it to just go back to the PAGE it was on previously, whether that was specific collection or a page of collections (depending on how user is accessing my page and adding items to cart) 

0 Likes
Highlighted
Excursionist
34 0 6

Helena this is the same issue I am having have you by any chance found an answer?

0 Likes