show() won't trigger on click

[arnasziedavicius]

Hi,

I've added a custom viewcart button calling paypal.minicart.view.toggle(); in docready on click but it won't work. It does show up when I add an item to the cart though.

After some testing, it seems to break on this line in show function: css.add(document.body, constants.SHOWING_CLASS);

Any ideas why wouldn't it show up? I'm using version 3.0.4.

Thank you!

[roycoder]

Yes I faced the same problem with the view() on a custom viewcart button. How did you arrive at the line of CSS where the error occurs though? I wanted to get this fixed pretty bad

[arnasziedavicius]

I've eventually figured it's a timing issue, so wrapping the toggle trigger in a setTimeout function solved it for me. Hope it helps you as well.

[roycoder]

arnasziedas, can you share with me what you meant? Possibly your code that solves the problem.

Thanks in advance. I actually switched back to 2.6.1 temporarily because of this

[arnasziedavicius]

Yes, sure. Here's the snippet from docready:

$('.viewcart').click( function(e) { e.preventDefault(); setTimeout( function() { paypal.minicart.view.toggle(); }, 10); });

[jeffharrell]

View cart buttons which are marked up in the PayPal way, e.g cmd=cart, should already trigger a show. This is how it's working on minicartjs.com so you might want to compare the source of that button with yours.

It's possible if you already have it marked up that way and you attached a toggle() event to it that you created a race condition, i.e. implicit show() and then an explicit toggle() which hide the button.

[roycoder]

Jeff, first and foremost, thank you for this awesome library. It is one of it's kind on the internet and I've been using it for years. Apart from the few bugs, I think it is super awesome.

Anyway I think you misunderstood arnasziedas and I. We are not using the paypal form elements but have our own custom buttons to trigger the SHOW, which is not working in the current version. The cart.add() API function isn't working either.

Here is a sample code so you can understand what's going on. Clicking on 'Show Cart' or 'Add to cart' does nothing, which is unexpected.

<span id="addcart">Add to cart</span> | <span id="viewcart">show cart</span>

        $('#viewcart').click( function(e) {
        paypal.minicart.view.show();
        });

        $('#addcart').click( function(e) {
        var data = '{ "business": "user@example.com", "item_name": "Product", "amount": 5.00, "currency_code": "USD" }';
        paypal.minicart.cart.add(data);
        });

[jeffharrell]

I finally got a chance to look at this again. Thanks for the example code -- it helped a lot.

Basically, the fix is to stop the propagation of the click inside of your jQuery callbacks. See https://github.com/jeffharrell/minicart/blob/master/examples/customclick.html#L17 for a working example (that line is the change you'll need to make). That should solve your problem, but let me know if it doesn't. I'll keep this open for the moment.

---

Longer explanation

The minicart sets a single click event on the document itself instead of setting dozens for each clickable area. The final fallback in this code is to determine if the user clicked outside of the cart, which is determined by a DOM element that is not a child of the cart and is not a form element (https://github.com/jeffharrell/minicart/blob/master/src/viewevents.js#L29). In your case, since you're using <spans> this logic kicked in and caused the cart to hide (it actually was showing/adding and then instantly hiding).

Using e.stopPropagation() prevents your event from going past the jQuery click handler and it never reaches the top level click event I have on the document.

[roycoder]

It works now! Jeff, you're a hero! :-)

[arnasziedavicius]

Thanks Jeff, much neater than my workaround

[jeffharrell]

Happy to help :smile: