eCommerce – Shopping-cart-dropdown bug – Rebinding after “Add to cart” fails

[Anonymous]

Hi!
I have a wp-ecommerce page where the Shopping-cart is in a dropdown-menu.
When adding an item to the shopping cart, the DOM is manipulated and the dropdown-function needs to be rebound (jQuery).
As of now the function is so that 400ms after adding any item to the cart, the Js that makes the dropdown functioning is ran again.
However, if the user hovers the dropdown cart inbetween the pressing of “add to cart” and those 400ms the page needs to be refreshed tfor the dropdown-menu to function.

Take a look here: http://onedeal.se

Help is greatly appreciated, since this is a requirement from the client that I cannot fix without your help…

[CarraraWebsiteSolutions]

I would not use a plug in for a eCommerce system for word press.

A good free system is called Open Cart

[Anonymous]

Yeah, I will do that Next time, Open Cart or Shopify seems good aswell! :)
However, wp ecommerce itself isnt any bad, it’s just my Ajax/jQuery skills that fails me…

Thanks anyway!

[Anonymous]

Im not looking for alternatives, I’m looking for a jQuery solution to solve this one problem where the cart bugs out! :)

[Mottie]

Hi LimeX!

I tried out the shopping cart, but I never saw the dropdown that you mentioned.

But, from reading your description, it’s not the best idea to rely on a timer function like that. If you have a dropdown with dynamically added/removed content it would be best to the [`on()` function to delegate the items](http://api.jquery.com/on/#direct-and-delegated-events). For example:

$(‘ul#list’).on(‘click’, ‘li’, function(){
$(this).addClass(‘selected’);
});

the above function would not need to be re-run as it is looking for clicks on the `ul` element. The `this` inside the function will be the `li` element.

If that doesn’t help, then please provide a demo or show the specific code where you are having an issue :)

[Anonymous]

Thanks Mottie!
The dropdown cart is in the top right of the page!
Then, when the “Köp!” (Buy in Swedish) button gets pressed, the content gets refreshed by AJAX, and that’s when the problem comes up.

So do you mean that if I would listen to clicks only, would it not have to get rebound after ajax?

I am a bit ashamed, but this is what the js looks like now… Sloppy, but I can’t say I can do much better.
http://codepen.io/anon/pen/eFGLv (I cannot paste the whole thing since i dont know how to simulate the ajax thingy=

The function dropdownfix() works as-is, until the ajax comes in.
As a “quickfix” i then have another set of code that listens to after the form is submitted.

I even tried setting “onSubmit=”dropdownFix();” on the form, but that didn’t work.

(I want to support both Hover and click, if possible :) )

[Anonymous]

I solved it myself by going into the Source JS code that executed the buy-function and adding dropDown(); there!

Thanks for the help anyways! :)

[Author]

Posts