The Foxy forums are on the move!

We're in the process of moving our forums over to a new system, and so these forums are now read-only.
If you have a question about your store in the meantime, please don't hesitate to reach out to us via email.

Capturing when items are removed from cart

babblebibbabblebib Member
in Help edited August 2012
Hi,

I am implementing a mini cart using JSON. It will be a fly-out cart that shows totals and pictures of the products in the cart.

I have had success working with the 'add to cart' event using this guide: http://docs.foxycart.com/v/1.0/javascript?s[]=fc&s[]=client&s[]=event.

However i want to make sure then when users edit quantities or remove products from their main cart (the main colourbox one) that i update my own mini cart.

How do i capture cart removal/update events in JSON?

This is my code so far:
        <script type="text/javascript">
            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://babblebib.foxycart.com/cart?' + jQuery(e).serialize();
                    }
                    if (href.match("cart=(checkout|updateinfo)") || href.match("redirect=")) {
                        return true;
                    } else if (href.match("cart=view")) {
                        jQuery.colorbox({
                            href: href,
                            iframe: true,
                            width: colorbox_width,
                            height: colorbox_height,
                            close: colorbox_close,
                            onClosed: function () { fcc.events.cart.postprocess.execute(e); }
                        });
                        return false;
                    } 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();
                            
// updates the text property of span elements in my html
                            if (data.product_count > 0) {
                                $("#MCTotalItemsPrice").text(data.total_item_price);
                                $("#MCDiscountsPrice").text(data.total_discount);
                            }
                        });
                        return false;
                    }
                });
            });
        </script>
Comments
  • fc_adamfc_adam FoxyCart Team
    @babblebib,

    What you're looking for is the postprocess event, adding in a function to postprocess to call your updating functionality will get you covered - as the postprocess events are run after the colorbox is closed.
  • Hi @fc_adam,

    Thanks for the tip - it makes sense.

    Do you have a sample of what this might look like?
  • fc_adamfc_adam FoxyCart Team
    @babblebib,

    You'll see an example of it at the bottom of that page you linked to on the wiki, just adding an event to the postprocess events array.
  • Thanks, got this working now. Here is my code for anyone following the thread. In my case, i found that i needed to put this before the fcc.events.cart.process.add function.
                    fcc.events.cart.postprocess.add(function (e) {
                        //set the cart URL
                        var href = '';
                        if (e.tagName == 'A') {
                            href = e.href;
                        } else if (e.tagName == 'FORM') {
                            href = 'https://your domain.foxycart.com/cart?' + jQuery(e).serialize();
                        }
    
                        jQuery.getJSON(href + '&output=json&callback=?', function (data) {
                            fcc.cart_update();
                            //do stuff with the data object here. Such as Data.product_count etc
                        });
                    });
    
  • brettbrett FoxyCart Team
    @babblebib Glad you got it sorted out. Did the docs and such make sense?
  • Does the postprocess event only get fired when the colorbox modal is closed? Or are they called when the process function complete?
  • fc_adamfc_adam FoxyCart Team
    @mende,

    That's right - postprocess will run when the colorbox is closed.
  • but by calling
    fcc.events.cart.postprocess.execute(e);
    
    i could force it
  • fc_adamfc_adam FoxyCart Team
    @mende,

    That's right, you can force it - but without the 'e' argument.
  • awesome. Thanks :)
Sign In or Register to comment.