« Return to Creating products with options
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.
Variants with one Option
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:
To display the typical menu and button above, this was the standard HTML button code provided in Seller Admin:
<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">
Size:<br/>
<select name="o1">
<option value="Small">Small</option>
<option value="Large">Large</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:
Small:
Large:
How did we do that? Take a look at the modified HTML source we used to produce that alternate product presentation (we'll explain this more to follow):
<p>Small:<br>
<a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111347&cl=20545&ejc=2&o1=Small" target="ej_ejc" class="ec_ejc_thkbx" onclick="javascript:return EJEJC_lc(this);"><img border="0" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" alt="Add to Cart" /></a></p>
<p>Large:<br>
<a href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111347&cl=20545&ejc=2&o1=Large" target="ej_ejc" class="ec_ejc_thkbx" onclick="javascript:return EJEJC_lc(this);"><img border="0" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" alt="Add to Cart" /></a></p>
What exactly did we do there? Start with the standard Add to Cart button code with menu that 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="Small">Small</option>
<option value="Large">Large</option>
</select>
Notice the SELECT tag shows you an option name -- o1 (that's a letter "oh" and numeral "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=Small
o1=Large
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=Small
https://www.e-junkie.com/ecom/gb.php?c=cart&i=111347&cl=20545&ejc=2&o1=Large
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=Small" 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> Small
Follow that example for the other URLs you built, and you've got the complete, modified code like we showed you earlier!
Variants with two Options
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:
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="Red">Red</option>
<option value="Blue">Blue</option>
</select>
<br/>
Size:<br/>
<select name="o2">
<option value="S">S</option>
<option value="L">L</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 Large Red Blue
Here's the modified HTML source we used to produce the table-matrix presentation displayed above (more explanation to follow):
<table>
<tbody>
<tr>
<td> </td>
<th>Small</th>
<th>Large</th>
</tr>
<tr>
<th>Red</th>
<td><a onclick="javascript:return EJEJC_lc(this);" class="ec_ejc_thkbx" target="ej_ejc" href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Red&o2=S"><img border="0" alt="Add to Cart" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" /></a></td>
<td><a onclick="javascript:return EJEJC_lc(this);" class="ec_ejc_thkbx" target="ej_ejc" href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Red&o2=L"><img border="0" alt="Add to Cart" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" /></a></td>
</tr>
<tr>
<th>Blue</th>
<td><a onclick="javascript:return EJEJC_lc(this);" class="ec_ejc_thkbx" target="ej_ejc" href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Blue&o2=S"><img border="0" alt="Add to Cart" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" /></a></td>
<td><a onclick="javascript:return EJEJC_lc(this);" class="ec_ejc_thkbx" target="ej_ejc" href="https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Blue&o2=L"><img border="0" alt="Add to Cart" src="https://www.e-junkie.com/ej/ej_add_to_cart.gif" /></a></td>
</tr>
</tbody>
</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, this would be the SELECT tags and everything in between:
<select name="o1">
<option value="Red">Red</option>
<option value="Blue">Blue</option>
</select>
<select name="o2">
<option value="S">S</option>
<option value="L">L</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=Red
o1=Blue
o2=S
o2=L
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=Red
o2=S
o2=L
o1=Blue
o2=S
o2=L
Then copy and paste-paste-paste each value for "o1" before each of its respective values for "o2", like so:
o1=Red
o2=S
o1=Red
o2=L
o1=Blue
o2=S
o1=Blue
o2=L
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=Red&o2=S
https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Red&o2=L
https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Blue&o2=S
https://www.e-junkie.com/ecom/gb.php?c=cart&i=111348&cl=20545&ejc=2&o1=Blue&o2=L
(...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=Red&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=Red&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>
(...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.
