Question

I am almost finished my recent project apart from one issue.

I have a shopping cart which is minimized as standard and position fixed to the top right. When clicked the form is shown which displays the products in the basket. When clicked again it is minimized. Pretty standard stuff. Here is the code for the toggle effect:

  $('.widget #close').toggle(function() {
        $(".widget form").slideDown(400); 
        $('.widget').animate({width: 300}, 400);
        $(this).addClass("mini") 
  }, function() {
        $(this).removeClass("mini") 
        $('.widget').animate({width: 110}, 400);
        $(".widget form").hide(400); 
  });

This works perfectly fine. My problem is: The content which is held within the form which is toggled is dynamically created. By that I mean, when you click to add a product to the basket the name and quantity is added to the form by JavaScript (wordpress plugin). If the form is minimized when you add the product everything works as normal but if you open the cart so it is showing the content, then you add a product so as to update the content shown the whole form disappears (I assume it loses its created width and height). You then have to minimize and maximize again to see the content.

You can see an example of this on the live demo – http://intelligentstudios.co.uk/superior/#products If you add a product, open up the cart top right, everything works. Leave the cart open then add another product and you will see the problem.

Help is greatly appreciated.

One of my thoughts was to add an event to the purchase button which minimizes the cart. This breaks the toggle effect though as you would have to click twice to get the cart to maximize.

Answer 1

I don’t see the code in your JavaScript file that updates the shopping-cart-box but you can trigger clicks on the #close element to close and open the shopping-cart-box which will update the view properly:

Change:

$("#products form input[type=submit]").click(function(){
    $(".updated").show().animate({opacity: 1.0}, 1000).fadeOut(500);
});

To:

$("#products form input[type=submit]").click(function(){
    $(".updated").show().animate({opacity: 1.0}, 1000).fadeOut(500);
    $('#close').trigger('click');
    setTimeout(function () {
        $('#close').trigger('click');
    }, 500);
});

To test this you can just add my code to the page via Firebug’s console.

UPDATE

So if you look at the shopping-cart-box in FireBug you can see that the form that gets added via AJAX is hidden, so if you add code to show it you should get the expected behavior:

function load_cart(values){
    $("#wpchkt_widget").load(wpchkt_c_url, values,function(){
        $(".preload_img").hide();
        $("#wpchkt_widget .update_cart").hide();
        buttons_events();                
    });
}