Custom Fields

Extra fields can be added to the product edit form and also to the product list and product detail display templates. These fields can be of type textbox, checkbox, radiobutton, dropdownlist, and from version 2.2, also rich text/html.

Create

This example creates one of each field type, just for demonstration purposes.

In Back Office > Utilities > Templates edit "productxmldata.template" and enter the example code.

TextBox : [<tag id="txtTextBox" type="textbox" width="60" cssclass="Normal" maxlength="20" />]<br />
DropDown : [<tag id="dlDropDown" type="dropdownlist" cssclass="Normal" data="list1;list2;list3;list4;list5" datavalue="1;2;3;4;5" />]<br />
Checkbox : [<tag id="chkCheckbox" type="checkbox" cssclass="Normal" text="Checkbox" />]<br />
Radio : [<tag id="radRadio" type="radiobuttonlist" cssclass="Normal" data="list1;list2;list3;list4;list5" datavalue="1;2;3;4;5" RepeatColumns="5" />]<br />
RichText : [<tag id="txtEdit" type="dnntexteditor" height="400" width="600" />]

Notes:
  • When using radio buttons and checkboxes: If the "datavalue" attribute is not specified, then for convenience, the "data" attribute items are automatically used as the data values.
  • The productxmldata.template is a full HTML template and thus you can insert a table to organise your new fields in a more suitable manner.

Add Data

If you now edit an existing product, you will see these new fields on the General and on the Overview tabs. Confirm that you can see them before continuing. Try Back Office > Admin > Restart DNN Application if you cannot, or double check your code.

Display

The next step is to add tokens for the fields into your display templates. First, enter some data for the new fields and save the product.

Now, edit your productdetail.template and add the following to the end. Note that the paths here must be lower case or it will not work. E.g. txttextbox, chkcheckbox, etc. are lowercase, regardless of the fact that their matching ID attributes in the productxmldata.template have them shown in camelcase (Upper and lower).

[TAG:XMLDATA:genxml/textbox/txttextbox]<br />
[TAG:XMLDATA:genxml/checkbox/chkcheckbox]<br />
[TAG:XMLDATA:genxml/dropdownlist/dldropdown]<br />
[TAG:XMLDATA:genxml/radiobuttonlist/radradio]<br />
[TAG:XMLDATA:genxml/edt/txtedit]

View your updated product and you will now see the extra data displayed at the bottom of the details view. Success!

Validation

Custom fields can be cofigured with validation and set as required fields. Here are some examples of the required syntax.

[<tag id="rvPrice" ctrltype="rvalidator" errormessage="Error" text="*" controltovalidate="txtPrice" minimumvalue="0" maximumvalue="9999999" type="Currency"/>]

[<tag id="rvReq" ctrltype="rfvalidator" errormessage="Required Field" text="ERR!" controltovalidate="txtReq" />]

[<tag id="valsum" ctrltype="validationsummery" />]

Further reading

This discussion thread discusses how to create text fields and use them for the purpose of creating a builleted list of specs.

Allow customer to add text when buying a product

(Note that the templates in 2.3.2 now include an example of this feature. It can be enabled via the messagefield.flag setting)

This example adds a multiline text field on the product, allowing the buyer to provide some text when purchasing. This might for example be used for a gift card message.

Add the following code to your productdetails.template:

<div class="CardMessage">
Card Message: [TAG:OPTIONTEXT1:<prop cssclass="NormalTextBox" type="TextBox" TextMode="MultiLine" Columns="20" Rows="4"/>]
</div>
(beware when copying and pasting this code above - You might find that you lose the cssclass attribute along the way)

If you are using the DotNetNuke Minimal Extropy skin, which applies fixed dimensions to NormalTextBox, then you can add the folowing to your stylesheet.css or other stylesheet to fix it:

.CardMessage .NormalTextBox{width:auto;height:auto;}

Now add an option to the product in question and don't specify any option values for it. View the product page and you should see the new text box.

Any text entered by the customer before adding to cart, will be displayed alongside the purchased item in the cart, in the order manager and in the order notifications.

Date Selection

Since version 2.3.2 you can add a jQuery date picker to any text field by simply adding class="date-picker" to the field. This will trigger the date picker popup feature on that field. The jquerydatepicker.code template holds the settings for the date picker.

Note that the jQuery code required for the date picker does not get loaded on the checkout page. If you are adding a custom field to those pages for this purpose, then you can force the required items to load by simply adding a product list module to the checkout page and then configure it to show no products.

Last edited May 12, 2012 at 2:06 AM by robax, version 7

Comments

No comments yet.