X-Cart forums - ajax add to cart button

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - ajax add to cart button (https://forum.x-cart.com/showthread.php?t=64837)

xcartukguy

09-13-2012 01:18 AM

ajax add to cart button

Hi,

I'm trying to redevelop a skin for a shop and I wanted to change the add to cart buttons.

My issue is regarding the ajax add to cart which now doesn't work even though I'm using the original code.

Does anyone know how to initiate the javascript via an onclick even on an input/a ?

Thanks

totaltec

09-13-2012 05:09 AM

Re: ajax add to cart button

In my experience, the button has to be inside <div class="details">
If you remove the button from this div it will cease to function

Its due to this line of ajax.add2cart.js:
// Get box
this.box = this.form.parents().filter('.details,.product-cell');

xcartukguy

09-13-2012 05:13 AM

Re: ajax add to cart button

is there a way to activate this via an onclick event instead?

totaltec

09-13-2012 05:48 AM

Re: ajax add to cart button

Your welcome. :-)

Assuming your form is named orderform try this:
<a href="javascript:void(0);" onclick="!ajax.widgets.add2cart(orderform)">Add To Cart</a>

xcartukguy

09-14-2012 01:09 AM

Re: ajax add to cart button

Quote:

Originally Posted by totaltec

Your welcome. :-)

Assuming your form is named orderform try this:
<a href="javascript:void(0);" onclick="!ajax.widgets.add2cart(orderform)">Add To Cart</a>

That didn't work. my form is called orderform too.

totaltec

09-14-2012 06:42 AM

Re: ajax add to cart button

Well, here is a link to it working, perhaps you can inspect the source and see what is different. http://trainingpen.com/manufacturers_carousel/product.php?productid=17551 (Look right below the description)

If you provide a link to your page...

xcartukguy

09-14-2012 06:53 AM

Re: ajax add to cart button

Your site is still using that horrible <button><span><span> mess...
I'm trying to use an input or anchor for this.

All that should be required is the javascript that passes the information to the ajax cart and open up the popup box; surely that's a function somewhere?

totaltec

09-14-2012 07:35 AM

Re: ajax add to cart button

**Edited**
Yes, it is a function somewhere. In /common_files/js/ajax.add2cart.js on line 51:

PHP Code:


		
			
// Widget
ajax.widgets.add2cart = function(form) {
  if (!form || typeof(form.tagName) == 'undefined' || !form.tagName || form.tagName.toUpperCase() != 'FORM')
    return false;

  if (!form.add2cartWidget) {
    new ajax.widgets.add2cart.obj(form);
  }

  return form.add2cartWidget.add2cart();
}

You can tell this by looking at the onclick in the example I gave you.

Now, in order to further demonstrate, I have updated (temporarily!) my test site to display exactly what you want in full working order. There is a simple link with onclick to add to cart. Works with Qty and options just fine. http://trainingpen.com/manufacturers_carousel/product.php?productid=17551

**Edited**

xcartukguy

09-17-2012 02:38 AM

Re: ajax add to cart button

Quote:

Originally Posted by totaltec

Now, in order to further demonstrate, I have updated (temporarily!) my test site to display exactly what you want in full working order. There is a simple link with onclick to add to cart. Works with Qty and options just fine.

Thanks very much.
I have finally succeeded! I was missing a class which the javascript was looking for!

**Edited**

My next question is, how do I make the javascript reset...
the standard buttons go "Add to Cart" -> "Added" -> "Add More to Cart" I understand the button text is via smarty and javascript but I cannot reclick the link after I've clicked it once.

Brett Forsyth

09-25-2012 10:44 PM

Re: ajax add to cart button

I am having a similar issue. What class where you missing?

xcartukguy

09-26-2012 12:12 AM

Re: ajax add to cart button

Quote:

Originally Posted by Brett Forsyth

I am having a similar issue. What class where you missing?

Code:

<div class="details">

<form name="formname">

<input type="submit" onclick="!ajax.widgets.add2cart(formname)" value="Buy" />

OR

<a href="#"  onclick="!ajax.widgets.add2cart(formname)">Buy</a>

</form>

</div>

That worked for me but the button only works once; I need to find out how to reset it.

I suggest the input though so you've got a fallback for non-javascript useability.

Brett Forsyth

09-26-2012 10:13 AM

Re: ajax add to cart button

Was there JS files you were missing though? I have been through everything and can't seem to find anything missing. The code is the same as the default theme but I can't get it to stop reloading the page.

totaltec

09-26-2012 10:17 AM

Re: ajax add to cart button

Quote:

Originally Posted by xcartukguy

I suggest the input though so you've got a fallback for non-javascript useability.

Forget user's without JavaScript. Javascript is required for todays web to function. Just my opinion.

xcartukguy

09-27-2012 12:49 AM

Re: ajax add to cart button

Quote:

Originally Posted by Brett Forsyth

I just used the default template... and removed things.

Quote:

Originally Posted by totaltec

Forget user's without JavaScript. Javascript is required for todays web to function. Just my opinion.

But using an input means you still have functionality without javascript and looks the same.

All times are GMT -8. The time now is 04:21 PM.