empty cart

drwagner13drwagner13 Member
in Help edited August 2009
I know this has been discussed before, but I can't quite figure it out. I want an "Empty Cart" link or button. I've tried the following:

1.

<a href="https://cssa.foxycart.com/cart?empty=true">Empty cart</a>

This link takes me to a generic cart page, and the cart is empty/emptied. The browser's back button returns me to the original page, and the mini-cart indicates the cart is empty

2. <a href="https://cssa.foxycart.com/cart?view=true&empty=true">Empty cart</a>

This brings up another generic page, but this time with an error message that you must supply an item name to add an item to the cart. Cart is emptied.

3.
<form action="https://cssa.foxycart.com/cartempty=true"; name="seedForm" class="foxycart" method="post">
<input type="submit" class="button" value="Empty Cart" />
</form>

This gives the same result as above (an error message), but this time in the thickbox cart. Cart is not emptied.

4. REDIRECT

Using

<a href="https://cssa.foxycart.com/cart?empty=true&redirect=[~[*id*]~]">Empty cart</a>

OR

<form action="https://cssa.foxycart.com/cart?empty=true&redirect=[~[*id*]~]"; method="post">
<input type="submit" class="button" value="Empty Cart" />
</form>

Where in ModX the link to the current page is inserted with the above code, to return the user to the current page when emptying the cart.

I have had no luck using the redirect feature.

Questions

1. Can you make a link such as in example 2 bring up the thickbox cart?

2. How can I bring up an empty thickbox cart using this method?

3. How can I silently empty the cart and return to the same page?

4. Once I can do step three, it might be a good idea to let the user know that the cart has been emptied using an "alert".
Comments
  • brettbrett FoxyCart Team
    Hi drwagner13.

    If you really want to do a silent cart empty you should use the JSONP, like this:
    $.getJSON('https://EXAMPLE.foxycart.TLD/cart.php?output=json&cart=view&empty=true&callback=?' + fc_AddSession(), function(data){
    	// do something with `data`
    });
    

    You could conceivably change the "empty" link to "Emptying..." on click, then on the callback function change the text to "Emptied!". Or you could just stick a simple javascript alert in there. Same thing, but less "web 2.0-y".

    Does that help? If you still need your questions #1 and #2 answered, please give us a link and we'll take a look.

    More info on the JSON and JSONP:
    http://wiki.foxycart.com/docs:json
    http://wiki.foxycart.com/docs:jsonp
  • drwagner13drwagner13 Member
    edited August 2009
    I wish that made sense to me. I was pretty close with what I had, since I can effectively empty the cart. I guess I'm asking you to explain how to do it my way, since I'm trying really hard to follow instructions on your website, and it's not working. It seems nice of you to give me a new method, but I have no idea how to apply your suggestion.

    You can see my attempts here:

    http://shop.cssainc.org/test-long-list.html
  • I might be able to help with this.

    I made a link, and gave it a custom css class:

    <a class="emptyCart" href="https://mydomainname.foxycart.com/cart?empty=true">Empty Cart</a>

    Then, in the header of my html I put in a javascript to take action on this link being clicked:

    inbetween the '<head> and </head>';



    <script type="text/javascript">


    $(document).ready(function(){




    $('a.emptyCart').click(function() {

    // Then fire the JSONP call
    $.getJSON($(this).attr('href') + '&output=json&callback=?' + fc_AddSession(), function(data){


    fc_UpdateCart(FoxyDomain)
    });

    return false;
    });

    });

    </script>


    As long as you insert the include files for foxy cart... you should now have an empty cart link!
  • My method above also does a reset on the minicart (if you use it).

    Your method of calling the cart up to empty I think is a little time consuming. Really I think your visitor would want confirmation the cart is emptied and they can continue shopping - while bringing up the cart is going to create extra necessary steps.
  • drwagner13drwagner13 Member
    edited August 2009
    Thanks, that worked great once I changed all instances of "$" with "$j". I also included an alert before th return to notify the user that something happened.
    $j(document).ready(function(){
    	
    	$j('a.emptyCart').click(function() {
    		
    		// fire the JSONP call
    
    		$j.getJSON($j(this).attr('href') + '&output=json&callback=?' + fc_AddSession(), function(data){
    
    		fc_UpdateCart(FoxyDomain)
    
    		});
    
    	alert('Your cart has been emptied.');
    	return false;
    
    	});
    
    });
    
  • By the way, I was trying all those other methods jsut to see if I could get the redirect to work. it would be handy to know how to make the redirect work in any case.

    Thanks so much for teh help concretehead!!
  • lukeluke FoxyCart Team
    Hey drwagner, when you say the redirect are you referring to this: http://wiki.foxycart.com/getting_started:adding_links_and_forms#cart_display_output_options

    If there's something you think we should add or improve in the docs, please let us know.

    You mentioned "view=true" and "cartempty=true" but I don't think that's in our docs anywhere unless something isn't right. If you have a link (or form) with class "foxycart" then you'll get the pop-up box, otherwise you'll be sent directly to the cart page.

    Additionally, you mentioned "$j" which means you're probably not on the latest cart version. Upgrading might help as well.

    Thanks for posting back.

    @concretehead: Thank you for your contributions, they are most appreciated.
  • Luke, yes. I could not figure out how to make a link that would empty the cart and redirect to the same page. I got it worked out another way, but I guess I still don't get the redirect thing. Whatever the case, it doesn't matter.

    Yes, I'm still on an older version. We may upgrade shortly.
  • hey drwagner13, try this instead of the alert ... alerting the customer without bringing up something they have to click.

    create a div somewhere on the page, I put mine right below the <body> tag.

    e.g
    <body>
    <div id="cartAlert"><div></div></div>
    

    give it some css like:
    <style type="text/css">
    // this positions the cartAlert wrap down the bottom which the inside div sits inside
    #cartAlert {
    bottom:0;
    position:fixed;
    width:100%;
    }
    
    #cartAlert div {
    color:#EFEFEF;
    display:none;
    font-size:24px;
    font-style:italic;
    margin:auto auto 18px;
    opacity:0.81;
    text-align:center;
    width:640px;
    background-color: #000;
    opacity:0.81;
    filter:alpha(opacity=81);
    padding: 9px;
    }
    </style>
    
    

    Then the javascript function could be something like
    function cartAlert(saySomething){
    
        $j('#cartAlert div').text(saySomething).fadeIn();
    
        setTimeout(function() { 
    			
    				$('#cartAlert').fadeOut('slow'); 
    			
    				
        }, 1800);
    
    }
    
    
    

    Then instead of your alert() you're calling, put in
    cartAlert('Your cart is now empty');
    

    Just returning the favor Luke ;) Cheers
  • Thanks, I have been meaning to implement something like this also for my long-form submission to show a progress indicator. I'd like to style it to look just like the once used by foxycart... thanks so much for the great ideas!
  • brettbrett FoxyCart Team
    Awesome, @concretehead. Thx for sharing.

    @drwagner13, we'd love to see what you work up once you're done. Also, if you still have questions about the code I posted let me know. JSONP is actually really fun and powerful, and while it looks tricky it's actually not that bad once you understand what's going on.
  • lukeluke FoxyCart Team
    Woo Hoo! Thanks for contributing, concretehead, it is greatly appreciated.

    @drwagner: if you're not on 0.4.0+, redirects won't work. If you are on that version you simply define a file name which will be appended to the domain you have set in your store like so:

    If your store's website is: http://www.example.com/

    And you want to redirect the user to a specific page after they add something to the cart, your cart add link would look like this:

    https://yourexample.foxycart.com/cart?name=test&price=10&redirect=testing.html

    When they add that to the cart, they will end up on this page:

    http://www.example.com/testing.html

    Does that help?
Sign In or Register to comment.