Update Ajaxify-cart.liquid for Sidebar filter in JS

jeffjablo
New Member
4 0 0

 


Hi folks

I updated the theme (Debut) to include add to cart buttons below products on collection pages and "ajaxified" my cart to automatically update with out redirecting you to the cart page.  Relatively simple stuff if you persistent and do a little googling. The only thing is, I had to modify the form/code to pull the variant via javascript. It was initially written to pull the variant id dynamically using syntax for liquid. The reason being is because my collection pages use a sidebar filter that's written into the theme.js So I had to update the form there.    

The current issue I'm having, however, is that since the form is now for and in the theme.js file, it doesn't seem to work/communicate with the ajaxify-cart.liquid.

the code for the form in the theme.js is

 

  '<form  class="addtocart CartCount"method="post" action="/cart/add"><input type="hidden" name="id" value="'+ val.variants[0].id +'" /><input min="1" type="number" id="quantity" name="quantity" value="1"/><input type="submit" value="Add to cart" class="btn" /></form>'

and here's the code for the ajaxify-cart.liquid   

 <script>
    
    /**
     * Module to ajaxify all add to cart forms on the page.
     *
     * Copyright (c) 2015 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($) {
      
      // Some configuration options.
      // I have separated what you will never need to change from what
      // you might change.
      
      var _config = {
        
        // What you might want to change
        addToCartBtnLabel:             'Add to cart',
        addedToCartBtnLabel:           'Thank you!',
        addingToCartBtnLabel:          'Adding...',
        soldOutBtnLabel:               'Sold Out',
        howLongTillBtnReturnsToNormal: 1000, // in milliseconds.
        cartCountSelector:             '#CartCount, .cart-count, #cart-count a:first, #gocart p a, #cart .checkout em, .item-count',
        cartTotalSelector:             '#cart-price',
        // '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.
        feedbackPosition:              'nextButton',
        
        // What you will never need to change
        addToCartBtnSelector:          '[type="submit"]',
        addToCartFormSelector:         'form[action="/cart/add"]',
        shopifyAjaxAddURL:             '/cart/add.js',
        shopifyAjaxCartURL:            '/cart.js'
      };
      
      // We need some feedback when adding an item to the cart.
      // Here it is.  
      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(_config.addToCartBtnSelector).after(feedback);
            break;   
        }
        // If you use animate.css
        // $('.ajaxified-cart-feedback').addClass('animated bounceInDown');
        $('.ajaxified-cart-feedback').slideDown();
      };
      var _setText = function($button, label) {
        if ($button.children().length) {
          $button.children().each(function() {
            if ($.trim($(this).text()) !== '') {
              $(this).text(label);
            }
          });
        }
        else {
          $button.val(label).text(label);
        }
      };
      var _init = function() {   
        $(document).ready(function() { 
          $(_config.addToCartFormSelector).submit(function(e) {
            e.preventDefault();
            var $addToCartForm = $(this);
            var $addToCartBtn = $addToCartForm.find(_config.addToCartBtnSelector);
            _setText($addToCartBtn, _config.addingToCartBtnLabel);
            $addToCartBtn.addClass('disabled').prop('disabled', true);
            // 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');
                _setText($addToCartBtn, _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.prop('disabled', false).removeClass('disabled').removeClass('inverted');
                  _setText($addToCartBtn,_config.addToCartBtnLabel);
                }, _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)).removeClass('hidden-count');
                  }
                  if (_config.cartTotalSelector && $(_config.cartTotalSelector).size()) {
                    if (typeof Currency !== 'undefined' && typeof Currency.moneyFormats !== '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.prop('disabled', false);
                  _setText($addToCartBtn, _config.soldOutBtnLabel);
                  $addToCartBtn.prop('disabled',true);
                }
                else {
                  _showFeedback('error', '<i class="fa fa-warning"></i> ' + response, $addToCartForm);
                  $addToCartBtn.prop('disabled', false).removeClass('disabled');
                  _setText($addToCartBtn, _config.addToCartBtnLabel);
                }
              }
            });   
            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>
    
    {% comment %}
      If you want to animate your feedback message.
    {% endcomment %}
    
    {% comment %}
    {{ '//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.0/animate.min.css' | stylesheet_tag }}
    {% endcomment %}
    
    {{ '//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css' | stylesheet_tag }}
    
    <style>
    .ajaxified-cart-feedback {
      display: block;
      line-height: 36px;
      font-size: 90%;
      vertical-align: middle;
    }
    .ajaxified-cart-feedback.success { 
      color: #3D9970;
    }
    .ajaxified-cart-feedback.error { 
      color: #FF4136; 
    } 
    .ajaxified-cart-feedback a {
      border-bottom: 1px solid;
    }
    </style>


I'm wondering how I might get these to work together.

I'm not sure it's necessary but I'm also adding a bit of code from the header.liquid that includes some ajaxfy modifications for reference

here's that bit

   

 <a href="/cart" class="site-header__cart">
                {% include 'icon-cart' %}
                <span class="visually-hidden">{{ 'layout.cart.title' | t }}</span>
                <span class="icon__fallback-text">{{ 'layout.cart.title' | t }}</span>
                {% if cart.item_count > -1 %}
                  <div id="CartCount" class="site-header__cart-count">
                    <span>{{ cart.item_count }}</span>
                    <span class="icon__fallback-text medium-up--hide">{{ 'layout.cart.items_count' | t: count: cart.item_count }}</span>
                  </div>
                  {% include 'ajaxify-cart' %}
                {% endif %}
              </a>


If more info is necessary please let me know. I appreciate your time. Thanks.

Jeff J

0 Likes
TheWreckShop
Tourist
8 0 0

 

Theme: Debut

 I updated the theme (Debut) to include add to cart buttons below products on collection pages and "ajaxified" my cart to automatically update without redirecting to the cart page. Everything is working  But then, the NUMBER ON MY CART ICON SIMPLY VANISHED.

Please, ANY SUGGESTION?.ANY LINK?

0 Likes