3d Cart’s Reward Redemption HTML Explained

3dcart is one of those services that isn’t really setup for a web developer who knows what they’re doing. While their online documentation provides some basic snippets and general assistance, the support staff have little-to-no technical knowledge. Besides assisting with tasks that can be found through the administrative interface, they seem only qualified enough to hand you off to their design department who will readily prepare a quote.

Attitudes like this are one of the core reasons I support projects like WordPress which enable people of a wide variety of skill sets to participate.

Following the recent roll-out of their points redemption system, I was approached to modify a customer’s existing theme and add the redemption functionality. Just about all 3dcart is prepared to tell you about the code required to make it work is located in their knowledgebase. In our case, certain decisions we made were incompatible with the provided code snippet.

After a week of back and forth asking for some specs with no useful response, I fired up Firebug with a working excerpt and determined the specs for myself. Those details are below.

The Official Template

<!--START: reward_redeem--><br>
 <div style="padding: 2px;">- or -</div>
 <div id="divRewardRedeem">
 <input type="hidden" name="hdnRewardRedeemItem" id="hdnRewardRedeemItem" value="0" />
 <input type="button" onClick="rewardRedeemItem(document.add);" name="redeem" value="[product_redeem-item]" onMouseOver="this.className='btn_over'" onMouseOut="this.className='btn'">
 <script language="javascript">
 function rewardRedeemItem(formx)
 formx.hdnRewardRedeemItem.value = "1";
 <!--END: reward_redeem-->

There are a number of assumptions made by the code above. This plus the lack of technical documentation actually illustrates how little they expect you to customize your own template. You’re pretty much setup to fail unless you make the exact same decisions that they have. Specifically:

  • Their validation scripts are included: check_and_add(), plus any dependencies
  • The form used to add an item to the cart is named “add”
  • Your styles include the same set of classes: btn, btn_over

Their support insists that this change is enough to add the functionality. And when an otherwise working form doesn’t work, what do they suggest? Let’s get a design quote together!

The real specs

The <form> tag must include enctype=”multipart/form-data”, something I’ve rarely used unless uploading a file. This requires using the POST method.

Required fields:

  • item_id – the local store’s item ID, populated by the [catalogid] template tag
  • qty-0 – The quantity to add to the cart*
  • hdnRewardRedeemItem – Set to 1 to redeem this product

* At the time of writing, customers cannot redeem more than one of the same product during a single transaction.

Here’s a highly simplified code fragment that I used to test the minimum requirements:

<form method="post" action="/add_cart.asp" enctype="multipart/form-data">
<input type="text" name="item_id" value="27" />
<input type="text" name="qty-0" value="1" />
<input type="text" name="hdnRewardRedeemItem" value="1" />
<input type="submit" name="Redeem" />