Product Personalization Tutorial - Date Form Field

Product Personalization Tutorial – Date Form Field

Date Form Element

To add the date element to the form you need to create a new node and add it to the node of the configuration file, with the
<frontend_type>text</frontend_type>
And:
<frontend_model>product_personalization/system_config_date</frontend_mode>

To open a node for the new element, decide how you’d like that element to be called… Let’s say that you want the user to enter delivery date in the personalization form field. Logical conclusion would be to name that form element something like delivery_date, like so:

1
2
3
<delivery_date>
*** the rest of the code would go here ***
</delivery_date>

 

After you’ve created a node for delivery_date, you can add its label and form element type. To have the delivery_date form element textarea, you would need to add the <frontend_type>textarea</frontend_type> in the delivery_date node, like so:

1
2
3
4
<delivery_date>
  <frontend_type>textarea</frontend_type>
  <frontend_model>product_personalization/system_config_date</frontend_model>
</delivery_date>

 

Assuming that you’d like to have the label explaining the user what he needs to enter, you’d want to add the label to the delivery_date, like so:

1
2
3
4
5
<delivery_date>
  <label>Delivery Date </label>
  <frontend_type>textarea</frontend_type>
  <frontend_model>product_personalization/system_config_date</frontend_model>
</delivery_date>

 

And optionally, if you’d like this form field to be required, you’d want to add the required option to the delivery_date node like so:

1
2
3
4
5
6
<delivery_date>
  <label>Delivery Date </label>
  <frontend_type>textarea</frontend_type>
  <frontend_model>product_personalization/system_config_date</frontend_model>
  <required>true</required>
</delivery_date>

 

And it would produce this:

07-delivery-date-date-type-field-example

Please note that the value in Magento Admin called “Front end calendar style” determines what style/color will be applied on the pop up calendar, when date field is used on the “Personalization Form”. We recommend that you try out the various themes available for the calendar, and see which one fits your Magento theme best.

Leave a Reply

Your email address will not be published.