...
Field | Length |
|---|---|
CustomField1 | 50 characters |
CustomField2 | 50 characters |
CustomField3 | 50 characters |
CustomField4 | 50 characters |
CustomField5 | 75 characters |
CustomField6 | 50 characters |
CustomField7 | 50 characters |
| CustomField8 | Stored as internal order properties. |
| CustomField9 | Stored as internal order properties. |
| CustomField10 | Stored as internal order properties. |
Passing on a Buy Link
You can pass custom fields via a buy link by appending the following snippet:
&CustomField#=VALUE
The Advanced Buy Link builder located at:
...
| Code Block | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<form method="post" action="https://secure.ultracart.com/cgi-bin/UCEditor">
<input type="hidden" name="merchantId" value="DEMO" />
<input type="hidden" name="add" value="Bone" />
<input type="hidden" name="CustomField1" value="New Landing Page" />
<table class="uc-item-table">
<tr class="uc-item-dog-breed-row">
<td class="uc-item-dog-breed-label">What breed of dog(s) do you have?</td>
<td class="uc-item-dog-breed-field">
<input type="text" name="CustomField2" value="" />
</td>
</tr>
<tr class="uc-item-qty-row">
<td class="uc-item-qty-label">Qty</td>
<td class="uc-item-qty-field">
<input type="text" name="quantity" value="1" />
</td>
</tr>
<tr class="uc-item-cost-row">
<td class="uc-item-cost-label">Cost</td>
<td class="uc-item-cost-value"><script type="text/javascript" src="https://secure.ultracart.com/cgi-bin/UCPrice?MERCHANTID=DEMO&ITEM=BONE&output=Javascript"></script></td>
</tr>
<tr class="uc-item-submit-row">
<td></td>
<td>
<input type="submit" name="submit" value="add to cart" />
</td>
</tr>
</table>
</form> |
...
Inserting the Custom Fields into the checkout
...
With the storefronts templates, you'll need to remember to maintain the "responsiveness" of the pages for each device view. So make sure not to insert things like tables. Instead use CSS for the styling of the custom content. Storefront templates typically contain multiple template snippets so you may want to create your custom content to the templates as a snippet. That will make for easier template management when you perform theme updates.
Example HTML
Place the following code into a new snippet file
(Example: "cart_customfields.vm" place into the snippets folder of the activated theme.)
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<style type="text/css">
.UcCustomTable
{
display: table;
}
.UcCustomTableTitle
{
display: table-caption;
text-align: center;
font-weight: bold;
font-size: larger;
}
.UcCustomTableRow
{
display: table-row;
}
.UcCustomTableCell
{
display: table-cell;
border: solid;
border-width: thin;
padding-left: 5px;
padding-right: 5px;
}
</style> |
Preview of the fields appearing in the checkout:
...
| Code Block | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<table><table id='CustomFields'> <tr> <td> <span class="ucColorSubHeader ucCommentsHeader">CustomField1 label text </span> </td> </tr> <tr> <td> <input type='text' class="ucFormField" style="width:315px" name="customField1"/> </td> </tr> <tr> <td> <span class="ucColorSubHeader ucCommentsHeader">CustomField2 label text </span> </td> </tr> <tr> <td> <input type='text' class="ucFormField" style="width:315px" name="customField2"/> </td> </tr><tr> <td> <span class="ucColorSubHeader ucCommentsHeader">CustomField3 label text </span> </td> </tr> <tr> <td> <input type='text' class="ucFormField" style="width:315px" name="customField3"/> </td> </tr><tr> <td> <span class="ucColorSubHeader ucCommentsHeader">CustomField4 label text </span> </td> </tr> <tr> <td> <input type='text' class="ucFormField" style="width:315px" name="customField4"/> </td> </tr><tr> <td> <span class="ucColorSubHeader ucCommentsHeader">CustomField5 label text </span> </td> </tr> <tr> <td> <input type='text' class="ucFormField" style="width:315px" name="customField5"/> </td> </tr><tr> <td> <span class="ucColorSubHeader ucCommentsHeader">CustomField6 label text </span> </td> </tr> <tr> <td> <input type='text' class="ucFormField" style="width:315px" name="customField6"/> </td> </tr><tr> <td> <span class="ucColorSubHeader ucCommentsHeader">CustomField7 label text </span> </td> </tr> <tr> <td> <input type='text' class="ucFormField" style="width:315px" name="customField7"/> </td> </tr> </table> |
...
The above HTML code would render into the single page checkout like this:
Seeing Custom Field Values in Web Interface
Whenever you see an order in the system you can click Edit Customer Information and then click the Other tab. The other tab will display the contents of the seven custom fields as shown below.
Using on the Receipt
The values of the custom fields can also be used in conversion scripts on the receipt. If you navigate to:
...