Sep 2012
9 / 9
Sep 2012
Sep 2012
jace1319
Sep '12

Hi everyone



I've installed a plugin called xtypo for Joomla 2.5.



This plugin allows me to create a string e.g {xtypo_button1}Add to Cart{/xtypo_button1}

which is an anchor tag



this is my form from e-junkie



<form action="https://www.e-junkie.com/ecom/gb.php?c=cart&i=1148720&cl=226017&ejc=2" method="POST" accept-charset="UTF-8" target="ejejc">Choose Product:<br /><select name="o1">

<option value="Self Edit Template">Self Edit Template</option>

<option value="Self Edit w/printing Qt.500">Self Edit w/printing Qt.500</option>

<option value="Self Edit w/printing Qt.1000">Self Edit w/printing Qt.1000</option>

<option value="Self Edit w/printing Qt.2500">Self Edit w/printing Qt.2500</option>

<option value="Self Edit w/printing Qt.5000">Self Edit w/printing Qt.5000</option>

<option value="Self Edit w/printing Qt.free">Self Edit w/printing Qt.free</option>

</select><br />

<input class="ec_ejc_thkbx" onclick="javascript:return EJEJC_lc(this.parentNode);" type="image" src="http://www.e-junkie.com/ej/ejadd_to_cart.gif" alt="Add to Cart" /></form>







now what I'm trying to accomplish is place the anchor tag into the form replacing the default add to cart button.



any help would be greatly appreciated

  • created

    Sep '12

  • last reply

    Sep '12
  • 8

    replies

  • 1.6k

    views

  • 2

    users

  • 9

    links

E-junkie_GuruWebmaster & Support Guru
Sep '12

I presume you're using xtypo to replace our standard button image with a styled-text link? The trick here is that the Add to Cart button code for items using Variants/Variations does not use a simple anchor <a> tag; instead, it uses an <input type="image"> tag as the submit button for the form.



HTML does not inherently provide a way to have a text link submit a form, so doing that requires the use of javascript; fortunately, the javascript you'd need for this is already built into our cart script and provided in the standard Add to Cart form code -- namely the onclick="javascript:return EJEJC_lc(this.parentNode);" attribute, which you'd use in an anchor tag like so:



<a href="#" onClick="javascript:return EJEJC_lc(this.parentNode);" alt="Add to Cart" class="ec_ejc_thkbx">Add to Cart</a>



That code would replace the <input class="ec_ejc_thkbx" onclick="javascript:return EJEJC_lc(this.parentNode);" type="image" src="http://www.e-junkie.com/ej/ejadd_to_cart.gif" alt="Add to Cart" /> tag in your standard Add to Cart form code for this item.

jace1319
Sep '12

Thanks for the reply.



I tried what you stated and yes it replaced the button thanks but im having another problem..



Im not sure if i have to replace the "#" with a link?

i mean the button has been replaced but when i click on it the information is not being submitted and im not sure why its not going through



heres how i have it



<form action="https://www.e-junkie.com/ecom/gb.php?c=cart&i=1148720&cl=226017&ejc=2" method="POST" accept-charset="UTF-8" target="ejejc">Choose Product:<br /><select name="o1">

<option value="Self Edit Template">Self Edit Template</option>

<option value="Self Edit w/printing Qt.500">Self Edit w/printing Qt.500</option>

<option value="Self Edit w/printing Qt.1000">Self Edit w/printing Qt.1000</option>

<option value="Self Edit w/printing Qt.2500">Self Edit w/printing Qt.2500</option>

<option value="Self Edit w/printing Qt.5000">Self Edit w/printing Qt.5000</option>

<option value="Self Edit w/printing Qt.free">Self Edit w/printing Qt.free</option>

</select><br />{xtypo_button1}<a class="ec_ejc_thkbx" href="#" onclick="javascript:return EJEJC_lc(this.parentNode);">Add to Cart</a>{/xtypo_button1}</form>

E-junkie_GuruWebmaster & Support Guru
Sep '12

Hm, that code works fine for me as-is, but I don't know what Joomla/xtypo may be doing with those {xtypo_button1} tags exactly -- you might try moving those inside the anchor tags, like so:



<a onclick="javascript:return EJEJC_lc(this.parentNode);" class="ec_ejc_thkbx" href="#">{xtypo_button1}Add to Cart{/xtypo_button1}</a>



The href="#" makes the anchor tag act like a link (e.g., so your CSS will style it like your other links, and the hand cursor will appear when hovering over it) without having it actually function as a link to another page (the # would normally be followed by an anchor name appearing elsewhere in the same page, to make a link that jumps to that point in the page), but you can try removing the href="#" to see if that helps your situation.

jace1319
Sep '12

Exactly in order for the xytpo tags to become activate the text in between the tags needs to become an actual link.



You can look at my link



http://psdflyers.net/index.php/sells/36-hazard#



scroll to the bottom and youll see it.



I tried removing the href="#" except it does nothing when i click on, the information isnt being submitted.

E-junkie_GuruWebmaster & Support Guru
Sep '12

That page is missing your View Cart code, which loads our box.js javascript into your page; this is necessary to display our cart overlay "inside" your page, and that onClick= attribute in your Add to Cart form-submit link is calling a function of that box.js script.

jace1319
Sep '12

ok i tried that still no luck. How ever it does work for the "View Cart" button not for the "Add to cart". I'm doing some research trying to find out how to make it function so far this is what i have



<form action="https://www.e-junkie.com/ecom/gb.php?c=cart&i=1148720&cl=226017&ejc=2" method="POST" accept-charset="UTF-8" target="ejejc">Choose Product:<br /> <select name="o1"> <option value="Self Edit Template">Self Edit Template</option> <option value="Self Edit w/printing Qt.500">Self Edit w/printing Qt.500</option> <option value="Self Edit w/printing Qt.2500">Self Edit w/printing Qt.2500</option> <option value="Self Edit w/printing Qt.5000">Self Edit w/printing Qt.5000</option> <option value="Self Edit w/printing Qt.1000">Self Edit w/printing Qt.1000</option> <option value="Self Edit w/printing Qt.free">Self Edit w/printing Qt.free</option> </select> <br />



{xtypo_button1}<a class="ec_ejc_thkbx" href="#" onclick="javascript:return EJEJC_lc(this.parentNode);">Add to Cart{/xtypo_button1}</a></form>



<p>{xtypo_button1}<a class="ec_ejc_thkbx" href="https://www.e-junkie.com/ecom/gb.php?c=cart&cl=226017&ejc=2" target="ejejc" onclick="javascript:return EJEJC_lc(this);">send away{/xtypo_button1}</a></p>

E-junkie_GuruWebmaster & Support Guru
Sep '12

First, your page is still missing the second half of your View Cart code, which loads our box.js script into your page to manage the overlay-style cart display as part of that page:



<script language="javascript" type="text/javascript">

<!--

function EJEJC_lc(th) { return false; }

// -->

</script>

<script src="http://www.e-junkie.com/ecom/box.js" type="text/javascript"></script>



Another problem may be that your {xtypo_button1} and <a> tags are improperly nested:

http://webtips.dan.info/nesting.html



I.e., you'd need to have either this:



<a onclick="javascript:return EJEJC_lc(this.parentNode);" class="ec_ejc_thkbx" href="#">{xtypo_button1}Add to Cart{/xtypo_button1}</a>



...or this:



{xtypo_button1}<a onclick="javascript:return EJEJC_lc(this.parentNode);" class="ec_ejc_thkbx" href="#">Add to Cart</a>{/xtypo_button1}

jace1319
Sep '12

=[ no luck yet ... im doing extensive research on this and the reason half of the script is missing is because my javascript is disabled so i cant place any codes that are js into my articles



I'll be doing some more research