Overview
A radio button or option button is a type of graphical user interface element that allows the fan to choose only one of a predefined set of options. Basically, it allows you to present multiple offers (buy buttons spins) through a single front-end purchase button.
Instructions for using radio button selectors with buy buttons
Here's an example site: http://store.paulmccartney.com/bandontherun/
Add offers.js to the file...
Example:
<script type="text/javascript" src="offers.js"></script>
Edit offers.js to reflect all offers:
var RADIO_OFFERS = { 'download' : {aId:1666,cId:10051438,persist:true}, 'download+shirt' : {aId:1666,cId:10051449,persist:true}, 'cd+download' : {aId:1666,cId:10051474,persist:true}, 'cd+download+shirt' : {aId:1666,cId:10051475,persist:true}, 'vinyl+download' : {aId:1666,cId:10051476,persist:true}, 'vinyl+download+shirt' : {aId:1666,cId:10051477,persist:true}, 'photop+download' : {aId:1666,cId:10051575,persist:true}, 'photop+download+shirt' : {aId:1666,cId:10051575,persist:true}, 'vinylp+download' : {aId:1666,cId:10051582,persist:true}, 'vinylp+download+shirt' : {aId:1666,cId:10051582,persist:true}, 'shirt' : {aId:2123,cId:10049509,persist:true} }; function radioValue (radioGroup) { if (radioGroup) { for (var i = 0; i < radioGroup.length; i++) { if (radioGroup[i].checked) { var retVal = radioGroup[i].value; radioGroup = null; return retVal; } } } return null; }; function radioSelect (formRef) { var radios = formRef; var value = radioValue(radios); if (value === null) { alert("Please select a package."); } var initHash = RADIO_OFFERS[value]; if (initHash) { TSPurchase.load(initHash); } }
Edit form for each item to be sold
Examples:
<form id="digitalform" name="digitalform"> <input type="radio" name="digital" id="download" value="download" checked="checked" /> <label for="download">Digital: $8.00</label> <br/> <input type="radio" name="digital" id="download+shirt" value="download+shirt" /> <label for="download+shirt">Digital + T-Shirt: $25.00 +S&H</label><br> </form> <a href="http://www.google.com/finance/converter?a=10.00&from=USD&to=GBP" class="view-details currency">»Convert Currency</a> <a href="javascript:void(0);" onclick="radioSelect(document.forms.digitalform.digital); return false;" class="buy-bttn"></a>
Add a Shirt to any Order
<form id="deluxeform2" name="deluxeform2"> <input type="radio" name="deluxe2" id="photop+download+shirt" value="photop+download+shirt" checked="checked"/> <label for="photop+download+shirt">Photo Book Package: $55.00 +S&H</label> <br/> <input type="radio" name="deluxe2" id="vinylp+download+shirt" value="vinylp+download+shirt" /> <label for="vinylp+download+shirt">Vinyl Package: $40.00 +S&H</label> <br/> <input type="radio" name="deluxe2" id="vinyl+download+shirt" value="vinyl+download+shirt" /> <label for="vinyl+download+shirt">12" Vinyl + T-Shirt: 30.00 +S&H</label> <br/> <input type="radio" name="deluxe2" id="cd+download+shirt" value="cd+download+shirt" /> <label for="cd+download+shirt">CD + T-Shirt: $25.00 +S&H</label><br/> <input type="radio" name="deluxe2" id="download+shirt" value="download+shirt" /> <label for="download+shirt">Digtial + T-Shirt: $25.00 +S&H</label><br/> </form> <a href="javacript:void(0);" onclick="radioSelect(document.forms.deluxeform2.deluxe2); return false;" class="buy-bttn deluxe-pck" style="top:15px;"></a>