E-junkie - We help you sell online
World Class Solution - Damon @ PayPal
Sell & promote your products Join affiliate programs offered by sellers Shop Community
  Google Custom Search

E-junkie Ecommerce Forums » E-junkie Discussions

Tag Cloud for this topic:

Replace Add To Card Image with Text (When Using Options)



drumnjazz
member
Posts: 4


Hello there. I normally replace the "Add To Cart" button on my site with plain text (as formatted by CSS).

However, I just added a t-shirt to my store and have options for different sizes. I am not sure how to alter the code so that I can continue to use plain text formatting instead of the ej_add_to_cart.gif.

Here is my current code which forces me to use the gif and renders the plain text dead:

<form action="https://www.e-junkie.com/ecom/gb.php?c=cart&i=210879&cl=10022&ejc=2" target="ej_ejc" method="POST" accept-charset="UTF-8">
<input type="hidden" name="on0" value="Size"/>
Size:<br/>
<select name="os0">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="Extra Large">Extra Large</option>
</select>
<br/>
<input type="image" src="http://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart" class="ec_ejc_thkbx"/></form>ADD TO CART [T-SHIRT+MP3 $15.99]</a>


Here is my standard code which allows me to use plain text:

<a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=201769&cl=10022&ejc=2" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);">ADD TO CART [CD+MP3 $7.99]</a>


#
POSTED ON: February 18, 2009 @ 04:57 GMT -7




Tyson
E-Junkie Crew
Posts: 1486


Taking the Add to Cart code example you provided above, this should work:

<form action="https://www.e-junkie.com/ecom/gb.php?c=cart&i=210879&cl=10022&ejc=2" target="ej_ejc" method="POST" accept-charset="UTF-8">
<input type="hidden" name="on0" value="Size"/>
Size:<br/>
<select name="os0">
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="Extra Large">Extra Large</option>
</select>
<br/>
<a href=# onClick="javascript:return EJEJC_lc(this.parentNode);">ADD TO CART [T-SHIRT+MP3 $15.99]</a>
</form>

The only drawback to this, and there's really no way around it, is that buyers who have JavaScript disabled in their browser will be unable to Add to Cart this item. HTML provides no "standard" way to submit a form using a text link instead of a button, so the only way of doing it involves JavaScript tricks, which of course won't work if JavaScript has been disabled.


#
POSTED ON: February 18, 2009 @ 13:59 GMT -7




drumnjazz
member
Posts: 4


Tyson, I just want to thank you for the quick response and accurate code. Much appreciated.

Also, thanks for the heads up with the Javascript issue. I suppose the only thing that would work to fix this would be to use the standard button. Is that right?


#
POSTED ON: February 18, 2009 @ 14:16 GMT -7




drumnjazz
member
Posts: 4


Tyson, I just want to thank you for the quick response and accurate code. Much appreciated.

Also, thanks for the heads up with the Javascript issue. I suppose the only thing that would work to fix this would be to use the standard button. Is that right?


#
POSTED ON: February 18, 2009 @ 14:16 GMT -7




Tyson
E-Junkie Crew
Posts: 1486


Yes, you would need to use either the standard button, or a custom image button if you wish, to allow all buyers to Add to Cart this item even if they have disabled JavaScript. This page shows you how to replace our standard button with a custom image:
http://www.e-junkie.com/ej/help.custom.purchase-buttons.htm

You can even replace our fancy Add to Cart button with a regular Submit type of button in the browser's default style -- replace this:
<input type="image" src="http://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this.parentNode);"/>

...with this:
<input type="button" value="Add to Cart" onClick="javascript:return EJEJC_lc(this.parentNode);">


#
POSTED ON: February 18, 2009 @ 14:51 GMT -7




drumnjazz
member
Posts: 4


Gotcha. Again, many thanks.


#
POSTED ON: February 18, 2009 @ 15:05 GMT -7




Tyson
E-Junkie Crew
Posts: 1486


Slight correction -- the browser-default-style button code should actually be this:

<input type="submit" value="Add to Cart" onClick="javascript:return EJEJC_lc(this.parentNode);">

The version I posted previously would not work if the buyer had disabled JavaScript, but this version will work with and without JS.


#
POSTED ON: February 19, 2009 @ 13:55 GMT -7
MODIFIED ON: February 19, 2009 @ 14:34 GMT -7


You must be logged in to make a post. Please click here to login.

PayPal Certified Integration Google Checkout Certified Integrattion 30 Day Money Back Guarantee Slam the Online Scam
 Share this page!