marketpress empty cart ajax hangs

Hi I am using a child theme of a custom theme and I am attempting to theme marketpress and in my sidebar code I have called mp_show_cart("widget"); but the problem I get is that the cart does not update after clicking the empty cart link (the cart is actually emptied) just the html elemets are not updated. I found this thread in the forums here:
https://premium.wpmudev.org/forums/topic/empty-cart-button-not-working-in-shopping-cart-widget-view
- the last post of which would indicate I need to add the widget wrapper to the element, but I am unsure how to do that, a straight copy-paste of the generated wrapper for the default sidebar widget does not work.

There are no errors in the javascript console, so I have nothing to go on here... I guess I need to start digging through the marketpress js files to see why this fails...

Has anyone else encountered and solved this issue?

If it is a missing wrapper, then I suggest a parameter and code to generate it be added to the mp_show_cart function, as the empty cart link should work regardless of where the function is called in a theme.

  • Lisa

    Aha... the js calls:
    $("div.mp_cart_widget_content").html(data);
    but the mp_show_cart("widget") generates a table of this class, not a div...
    <table class="mp_cart_contents_widget">

    I am betting this is the issue... I wonder if I just wrap it like so:

    echo '<div class="mp_cart_widget_content">';
        mp_show_cart('widget');
        echo '</div>';

    As that is how it is called in marketpress.php(7043)...

  • Ash

    Hello @Lisa

    Welcome to WPMU community!

    I hope you are well today and thanks for asking the question.

    Awesome! You have done a lots of edit. For fade effect, please go to /marketpress/marketpress-includes/js/ajax-cart.js line no 40 replace
    $(&quot;div.mp_cart_widget_content&quot;).html(result[1]);
    with

    $(&quot;div.mp_cart_widget_content&quot;)
    						.fadeOut(100, function() {
    							$(&quot;div.mp_cart_widget_content&quot;).html(result[1]).fadeIn();
    						});

    Please let me know if you find this is helpful, or if you have any further questions.

    Cheers
    Ash

  • Lisa

    Thanks for the suggestion Ashok, I went with the following at line 14:

    $("div.mp_cart_widget_content").slideUp(function() {
    	$("div.mp_cart_widget_content").html(data);
    	$("div.mp_cart_widget_content").fadeIn();
    });

    and:

    $("div.mp_cart_widget_content").slideUp(function() {
    	$("div.mp_cart_widget_content").html(result[1]);
    	$("div.mp_cart_widget_content").fadeIn();
    });

    at line 36 (in the unmodified marketpress 2.8.9 ajax-cart.js as shipped), just cuz I like the look of the slide up and fade in a bit better.

    See file attached (as .txt to meet attachment restrictions).

  • Lisa

    Actually, better to reverse the slideUp and fadeOut at line 36 and make it a fadeOut/slideDown, as that is when something is added to the cart... or perhaps just a slideDown, as when adding additional items there is no need to fadeout the existing ones.

    However, all that said, I have found a larger issue, when one adds to an empty cart and then tries to empty it on the same page it does not work, and the link just takes you to the cart page, as the event listener has not been re-added to the destroyed and recreated element. I see efforts to address this but it does not appear to work. Currently the empty cart link will only work on a fresh page load.

    There are also browser back button navigation issues with the cart, as when click back from the cart page to another store page with the cart on it, it has not updated properly.

  • Ash

    Awesome, you have changed a lot :slight_smile:

    I have found a larger issue

    Would you please share me a link so that I can check myself?

    There are also browser back button navigation issues with the cart, as when click back from the cart page to another store page with the cart on it, it has not updated properly

    Are you using any cache plugin? Does it happen in all browsers?

    Please let me know.

    Cheers
    Ash

  • Lisa

    I do not see a way to make a private message here so that I can provide you a login for the site so you can take a look.

    I am using Hyper Cache and have not tested this issue in browsers other than Chromium yet. I will check both variables and let you know if they affect this.

    In the meantime I am very busy trying to style the product listings. Want to get that done as it is priority, then come back to these cart js issues.

  • Ash

    Hi Lisa

    Okay sure. When you are done with styling, let me know. I will be happy to help with js issue.

    To send details, please use our contact form: https://premium.wpmudev.org/contact/

    Select: I have a different question
    Subject: Attn-Ash
    Details: Send all required details (admin info and/or ftp details) with a link of this thread, so that I can track.
    Also post a note here once you send the info.

    I will be happy to take a look :slight_smile:

    Cheers
    Ash

  • Lisa

    Tested with Hyper Cache disabled and the empty cart link leading to the cart page issue persists in Chromium. In chromium, navigating away from the page that an item was added to the cart and then using the browser back button results in the cart being empty (or in its previous state) when it should not be.

    In Firefox the empty cart link only leads to the cart page if you navigate away from the page the item was added on. The cart contents are accurate when the back button is used in firefox and the empty cart link works as expected when you do not navigate away from the page.

    Complicated. It does not appear to be due to hypercache, though I will leave it disabled until consistent and expected behaviour is achieved. I now also note that my modifications to the animation are firing multiple times when a second or third item is added to the cart, presumably due to the recursion in the js mp_cart_listeners function. So I will modify/revert the animation changes made within that function.

    It is seeming to me that mp_cart_listeners needs to fire on navigation to any page the cart appears on, which might solve these issues, or the function needs to be redesigned altogether.

    Though I note that

    mp_empty_cart();
    mp_cart_listeners();

    are called within the jQuery(document).ready function after they are defined and should fire on page load - or rather on document ready, perhaps the browser back button is missing the .ready in Chromium?

    Those are my observations for now. I am going to move on to styling more of the marketpress pages, but I need these cart behaviours solved for a working product. (I noted in another thread that one user simply removed the empty cart link from the cart as a workaround which does solve it in a way, but it would be nice to have it working - and this does not solve the browser back button behaviour in chromium)

  • Lisa

    Aha, I am just noticing this in the page source that var MP_Ajax.ajaxUrl is set to /wp-admin/admin-ajax.php so it is entirely possible that the problems lie in the wordpress core code. Also, how wordpress responds depends on whether the user is logged in or not, further complicating debugging.

    Myself, I would be tempted to leave wordpress out of it, and write full jquery ajax calls to my own code.

  • Lisa

    I appear to have solved the same-page empty cart issue by adding a call to mp_empty_cart() prior to every recursive call to mp_cart_listeners() in mp_cart_listeners(). Kind of hacky but it works (odd as mp_empty_cart() is called near the end of that function which should do it, but recursion can be funky...)

    Now to solve the browser back button issue in Chromium and fine-tune the animations to avoid repeated animations during recursion of mp_cart_listeners().

    Current testing version of ajax-cart.js attached.

  • Lisa

    OK, I have fixed all the problems I found with ajax-cart.js. It is now behaving properly and consistently (though not ideally) across several browsers (Chromium, Firefox, IE and Opera) with and without Hyper Cache enabled on the site (it was not related). I gave up on animating additions to the cart as their repetition due to the function recursion was undesirable (there is probably a way to avoid that but I could not be bothered, it was the lack of animation of emptying the cart that was jarring, and I have left that animation in as it does not get repeated and makes a nice effect of emptying the cart).

    It appears the main issue was the placement of calls to mp_empty_cart (see attached final[?] version of ajax-cart.js). With calls to mp_empty_cart rearranged as I have done it all works, though only firefox does not reload the page on a back button (though with correct cart contents), the webkit browsers now reload the page when the back button was used, not ideal, but it works as it should now.

    So it was all in ajax-cart.js. Complicated issues, glad I solved it. That'll be $60, thanks! (j/k)

    Ashok, since this is resolved, I have now deleted your admin login and ftp account on the site. Thanks for the offer of help though.

  • Lisa

    Is it this?:

    <input id="reloadValue" type="hidden" name="reloadValue" value="" />
        <script type="text/javascript">
           jQuery(document).ready(function()
            {
                    var d = new Date();
                    d = d.getTime();
                    if (jQuery('#reloadValue').val().length == 0)
                    {
                            jQuery('#reloadValue').val(d);
                            jQuery('body').show();
                    }
                    else
                    {
                            jQuery('#reloadValue').val('');
                            location.reload();
                    }
            });
       </script>

    If so, where (what file) did you add it?

    And thanks for the help!

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.