Need help setting up 'minicart' on checkout

chubbard216chubbard216 Member
in Help edited September 2013
I am currently bypassing the colorbox and am utilizing an alert-style pop-up to notify customers when they have added an item to the cart.

I need a way for the customers to be able to 'update' (increase/decrease quantities, or remove) their cart items once they have landed on the checkout page.

I have added the JavaScript snippet for including the 'minicart' on checkout, but I do not see anyway for the customer to update their carts in this manner.

How would I go about setting up this functionality on the checkout page?

URL: http://campbellssweets.com

URL for adding products to cart: http://campbellssweets.com/shop/popcorn/Bacon-and-Cheddar-Popcorn
Tagged:
Comments
  • fc_adamfc_adam FoxyCart Team
    @chubbard216,

    So it is possible to allow customers to change quantities on the checkout - but let me start by saying there is a bit of work involved. Specifically you need to make sure that all of the different values are updated as required to make sure that all of the checkout values match up. The current checkout isn't really built with quantities updating on it - it's possible and some people have done it, but you'll need to do some pretty intense testing to ensure it all works as you want.

    For what it's worth - we are currently rebuilding our templates to be nicely responsive - and as part of that we're looking to allow the cart to be editable on the checkout as well. That doesn't help you right now.

    The simplest way to do it would be to include a view cart link on the checkout like you have - to load the normal cart template and allow customers to change quantities there. You could also have a view cart link on your own site - so while the add to cart actions still add to cart without the cart appearing, they could then view the cart to change quantities without having to be redirected over to the checkout.

    To allow product quantity editing actually on the checkout page, you'd need to use JSONP to update quantities and remove products as customers action it - and then update any variables on the checkout that need it - like the JSON object.

    Does that help give you some direction?
  • chubbard216chubbard216 Member
    edited September 2013
    @fc_adam,

    So what you're saying is that I should keep my current construct of adding products the cart 'silently', but instead of the 'view cart' link on the pop-up directing the user to ?cart=checkout, I should instead have it direct to ?cart=view and have the customer confirm their items there?

    I think I can make that work.

    Also, I am a PHP-man by trade and the JavaScript/jQuery skills aren't as good as they should be.

    How do I prevent the alerts from appearing (albeit briefly) on page load.

    Second, how can I reset the alert object after the user has closed it? (i.e. if you navigate to the link in my original post and add a tin to the cart, you will see the green alert pop up. However, If the alert is closed it cannot be re-opened while the user is on the same page)

    Thanks,




  • fc_adamfc_adam FoxyCart Team
    So what you're saying is that I should keep my current construct of adding products the cart 'silently', but instead of the 'view cart' link on the pop-up directing the user to ?cart=checkout, I should instead have it direct to ?cart=view and have the customer confirm their items there?

    That's right. Some details on how to achieve that here: http://wiki.foxycart.com/snippets/add_to_cart_form/add_products_without_colorbox

    How do I prevent the alerts from appearing (albeit briefly) on page load.

    You could hide them with CSS - that way it's hidden by default on page load.

    Second, how can I reset the alert object after the user has closed it? (i.e. if you navigate to the link in my original post and add a tin to the cart, you will see the green alert pop up. However, If the alert is closed it cannot be re-opened while the user is on the same page)

    Looking at the DOM after hiding that element, the actual HTML is commented out. I couldn't see where you're hiding and showing that element - could you point me to where you're doing it? Really, you should just do a .show() and a .hide() on the parent element as you need it.
  • chubbard216chubbard216 Member
    edited September 2013
    I am using show/hide, but for some reason I am unable to recall the alert once it has been manually closed by the user (until they leave the page or refresh their current page that is)

    My code for displaying the alert:

    <!-- Add to Cart Notification -->
    <script type="text/javascript">
    $("div.alert-box").hide();
    $("input.button.small.radius.submit").click(function(){
    $("div.alert-box").show("normal");
    $("#remove").click(function(){
    content.remove();
    });
    });
    </script>

    Foundations code for the alert functionality:

    ;(function ($, window, undefined) {
    'use strict';

    $.fn.foundationAlerts = function (options) {
    var settings = $.extend({
    callback: $.noop
    }, options);

    $(document).on("click", ".alert-box a.close", function (e) {
    e.preventDefault();
    $(this).closest(".alert-box").fadeOut(function () {
    $(this).remove().reset();
    // Do something else after the alert closes
    settings.callback();
    });
    });

    };

    })(jQuery, this);
  • fc_adamfc_adam FoxyCart Team
    Ok - so foundations default close event is actually removing that whole element, so it doesn't exist when you go to show it again. It has literally been removed from the page.

    So a couple options.

    Firstly, you could add that alert box to the javascript so you're adding a new one each time a product is added to cart.

    Secondly, you could remove the close button, and automatically hide them using a javascript timer. Then show again in the future as required.

    The other note, I'd suggest not setting up your alert box like that. Instead, include it in the actual add to cart logic.

    For example this is the add to cart logic:
    jQuery(document).ready(function() {
      // Restart the process event collection object
      fcc.events.cart.process = new FC.client.event();
     
      // Define the new process event
      fcc.events.cart.process.add(function(e){
        var href = '';
        if (e.tagName == 'A') {
          href = e.href;
        } else if (e.tagName == 'FORM') {
          href = 'https://'+storedomain+'/cart?'+jQuery(e).serialize();
        }
        if (href.match("cart=(checkout|updateinfo|view)") || href.match("redirect=")) {
          return true;
        } else {
          // Add notification that product is being added here.
     
          jQuery.getJSON(href + '&output=json&callback=?', function(data){
            // Automatically update JSON and minicart helper objects
            fcc.cart_update();
     
            // Add notification that the product has successfully been added here.
     
          });
          return false;
        }
      });
    });
    

    You would add in the alert show towards the bottom there "Add notificiation that the product has been successfully been added here". That's where you add in the HTML to the page, or re-show the alert.
  • @fc_adam

    I am going to tackle the implementation you outlined above later this afternoon. I will report back and let you know how it went.

    In the interim, I modified my existing alert to navigate the user to the ?cart=view page so that they could update their items.

    One thing that I've noticed is that only some of the images are rendering in the cart. Take the page that I linked to in the original post (Bacon and Cheddar) if you click on the 'View Cart' link after adding the product to the cart, you'll notice that the image is not rendering.

    I am using the same exact script to populate the image on the actual page as I am to populate the image on the add-to-cart link so I cannot figure why it is not displaying.

    Some of the images do, but some don't Very strange.
  • fc_adamfc_adam FoxyCart Team
    @chubbard216,

    It looks like it was a cache issue - I just cleared the image cache for your store and it's working now. You can clear the image cache from your stores FoxyCart administration - under 'Templates'.
Sign In or Register to comment.