E-junkie Help >

E-Junkie: Alternatives for Variants Tutorial This tutorial is for Merchants who have products with Variants but want a different way of offer

View CartE-Junkie: Alternatives for Variants Tutorial

This tutorial is for Merchants who have products with Variants but want a different way of offering product choices to their potential buyers, instead of using the dropdown menus that come with our standard button codes. Perhaps you want to display all of the possible options and combinations right there on your page where your buyer can see everything at once, or perhaps you just want an easy "one click" Add to Cart button for each and every variant of your product. Perhaps you want to sell Variants on Craigslist or other sites where you cannot post FORM and related tags that make the dropdown menus appear and function? This tutorial will show you how to do all that.

Simple Variants

In the E-junkie cart service, Variants are products that have one or more options from which a buyer must choose when ordering that product, such as a size or color. We will assume you are already familiar with how our Variants configuration works and how that button code appears on your page, without going into much description of the basic concept or its standard implementation here. Suffice to say, the standard Add to Cart button code for a product with Variants enabled and only one buyer-selectable option would display like this:
Color:

To display the typical menu and button above, this was the standard HTML button code we had provided: <form action="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111347&cl=20545&ejc=2" target="ej_ejc" method="POST" accept-charset="UTF-8"> Color:<br/> <select name="o1"> <option value="Celadon">Celadon</option> <option value="Heliotrope">Heliotrope</option> <option value="Puce">Puce</option> <option value="Zinnwaldite">Zinnwaldite</option> </select> <br/> <input type="image" src="https://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);"/> </form> Perhaps instead of that menu and button, you want to offer the same choices in a different manner, like this:
Add to Cart Celadon
Add to Cart Heliotrope
Add to Cart Puce
Add to Cart Zinnwaldite
How did we do that? Take a look at the modified HTML source we used to produce the alternate product presentation displayed above (we'll explain this more to follow): <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111347&cl=20545&ejc=2&o1=Celadon" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> Celadon<br> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111347&cl=20545&ejc=2&o1=Heliotrope" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> Heliotrope<br> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111347&cl=20545&ejc=2&o1=Puce" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> Puce<br> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111347&cl=20545&ejc=2&o1=Zinnwaldite" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> Zinnwaldite What exactly did we do there? Start with the standard Add to Cart button code we originally provided (as shown first, above) and separate out the dropdown-menu parts of the code - namely, the SELECT tags and everything in between: <select name="o1"> <option value="Celadon">Celadon</option> <option value="Heliotrope">Heliotrope</option> <option value="Puce">Puce</option> <option value="Zinnwaldite">Zinnwaldite</option> </select> Notice the SELECT tag shows you an option name - o1 (that's an "oh one") - and the OPTION tags show you the possible values for that name. Just combine the name and each of its values, showing all the values that o1 could possibly equal: o1=Celadon o1=Heliotrope o1=Puce o1=Zinnwaldite Now go back to the original button code and find the URL of the FORM action: https://www.e-junkie.com/ecom/gb.php?c=cart&i=111347&cl=20545&ejc=2 We're now going to add those option name-value pairs onto the end of the URL, joining them with an & symbol, like so: https://www.e-junkie.com/ecom/gb.php?c=cart&i=111347&cl=20545&ejc=2&o1=Celadon https://www.e-junkie.com/ecom/gb.php?c=cart&i=111347&cl=20545&ejc=2&o1=Heliotrope https://www.e-junkie.com/ecom/gb.php?c=cart&i=111347&cl=20545&ejc=2&o1=Puce https://www.e-junkie.com/ecom/gb.php?c=cart&i=111347&cl=20545&ejc=2&o1=Zinnwaldite From that point, it's as simple as making links to those URLs. If you want them to work with our cart interface, you'll need to base your HTML link code on our standard Add to Cart button code for non-Variant products, which looks like this: <a href="YOUR-URL-GOES-HERE" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> Just make several copies of that code (one for each button you'll need), but replace the YOUR-URL-GOES-HERE with each of the URLs you built above, and add a text label to identify the button to your buyers; here's one with the first URL to show you the general pattern: <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111347&cl=20545&ejc=2&o1=Celadon" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> Celadon<br> Follow that example for the other URLs you built, and you've got the complete, modified code like we showed you earlier!

Complex Variants

What if you have Variants with more than one category of options? For instance, the standard Add to Cart button code for a product with Variants enabled and two buyer-selectable options would display like this:
Color:

Size:

To display the typical double-option menus and cart button above, this was the standard HTML button code we had provided: <form action="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2" target="ej_ejc" method="POST" accept-charset="UTF-8"> Color:<br/> <select name="o1"> <option value="Fuligin">Fuligin</option> <option value="Hooloovoo">Hooloovoo</option> <option value="Octarine">Octarine</option> <option value="Squant">Squant</option> </select> <br/> Size:<br/> <select name="o2"> <option value="S">S</option> <option value="M">M</option> <option value="L">L</option> <option value="XL">XL</option> </select> <br/> <input type="image" src="https://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);"/> </form> Perhaps instead of the menus, you want to offer the same combinations of choices in a table layout, like this:
Small Medium Large X-Large
Fuligin Add to Cart Add to Cart Add to Cart Add to Cart
Hooloovoo Add to Cart Add to Cart Add to Cart Add to Cart
Octarine Add to Cart Add to Cart Add to Cart Add to Cart
Squant Add to Cart Add to Cart Add to Cart Add to Cart
Here's the modified HTML source we used to produce the table-matrix presentation displayed above (more explanation to follow): <table> <tr> <td></td> <th>Small</th> <th>Medium</th> <th>Large</th> <th>X-Large</th> </tr><tr> <th>Fuligin</th> <td> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Fuligin&o2=S" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> </td> <td> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Fuligin&o2=M" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> </td> <td> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Fuligin&o2=L" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> </td> <td> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Fuligin&o2=XL" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> </td> </tr> <tr> <th>Hooloovoo</th> <td> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Hooloovoo&o2=S" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> </td> <td> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Hooloovoo&o2=M" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> </td> <td> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Hooloovoo&o2=L" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> </td> <td> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Hooloovoo&o2=XL" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> </td> </tr> <tr> <th>Octarine</th> <td> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Octarine&o2=S" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> </td> <td> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Octarine&o2=M" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> </td> <td> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Octarine&o2=L" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> </td> <td> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Octarine&o2=XL" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> </td> </tr> <tr> <th>Squant</th> <td> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Squant&o2=S" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> </td> <td> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Squant&o2=M" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> </td> <td> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Squant&o2=L" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> </td> <td> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Squant&o2=XL" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> </td> </tr> </table> What did we do this time? There's some table-layout code in there that we'll just leave unexplained, presuming you already know how to create HTML tables if that's what you want. That leaves the question of what you put into your HTML table cells (or any other layout approach), to get the buttons working in there. As in our earlier example for simple variants with only one option, you would start with the standard Add to Cart button code we originally provided (as shown first in this section) and separate out the dropdown-menu parts of the code -- again, the SELECT tags and everything in between: <select name="o1"> <option value="Fuligin">Fuligin</option> <option value="Hooloovoo">Hooloovoo</option> <option value="Octarine">Octarine</option> <option value="Squant">Squant</option> </select> <select name="o2"> <option value="S">S</option> <option value="M">M</option> <option value="L">L</option> <option value="XL">XL</option> </select> Similar to what we did earlier for simple Variants, you would take the names from the SELECT tags and their possible values from the OPTION tags below them, and build a list of name-value pairs, showing all the values each name could possibly equal: o1=Fuligin o1=Hooloovoo o1=Octarine o1=Squant o2=S o2=M o2=L o2=XL Now, the tricky bit this time is combining those option values into pairs of every possible combination, taking one each from the groups named "o1" and "o2". One way to approach this is to first copy the full "o2" set of values and paste those in-between the "o1" values, like this: o1=Fuligin o2=S o2=M o2=L o2=XL o1=Hooloovoo o2=S o2=M o2=L o2=XL o1=Octarine o2=S o2=M o2=L o2=XL o1=Squant o2=S o2=M o2=L o2=XL Then copy and paste-paste-paste each value for "o1" before each of its respective values for "o2", like so: o1=Fuligin o2=S o1=Fuligin o2=M o1=Fuligin o2=L o1=Fuligin o2=XL o1=Hooloovoo o2=S o1=Hooloovoo o2=M o1=Hooloovoo o2=L o1=Hooloovoo o2=XL (...etc...) Now that you have a pair of parameters to represent every possible combination of values for o1 and o2, you can use &s to append them both to the end of your FORM action URL (just as we showed you earlier for single-option Variants), like so: https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Fuligin&o2=S https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Fuligin&o2=M https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Fuligin&o2=L https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Fuligin&o2=XL https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Hooloovoo&o2=S https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Hooloovoo&o2=M https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Hooloovoo&o2=L https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Hooloovoo&o2=XL (...etc...) As in our first exercise, take our standard Add to Cart button code for non-Variant products and plug those URLs into the appropriate place; here's the first two, to show you the pattern: <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Fuligin&o2=S" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> <a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Fuligin&o2=M" target="ej_ejc" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this);"> <img src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0" alt="Add to Cart"/></a> (...etc...) Once you've got one of those built for each combination of o1 and o2 values, you can just cut'n'paste them into your page layout however you wish, such as the table layout we showed you above.

That's all there is to it!

View Basket
Was this article helpful?
Yes, thanks!
Not really

Can't find what you're looking for?

Contact Us