How to add "date" type custom option for products and make it work?

Last modified by sptman on Thu, June 24, 2010 16:51
Source|Old Revisions  

This is an old revision of the document!

This is a common topic.

Many Magento users, like my company, have similar requirements to let customers choose date through pop-up calendar in the product view page. But Magento merely offer 2 groups of input type, “Text” and “Select”, in Catelog→Manage Products→Custom Options page by default. Is there any possibility for us to add the support for “Date” or “Date Time” input types?

The answer is absolutely “Yes, we can”. Actually, Magento do have all the necessary components such as js libraries, phtml templates and predefined classes to achieve this goal. So what you have to do is just amending limited files to enable the built-in function.

Let’s do it step by step.

Step 1:

Create model entry for “Date” input type.

Edit “app/code/core/Mage/Catalog/etc/config.xml” and look for the tag <groups>. Once you find the tag, insert the following code below it.

  1.                             <date translate="label" module="adminhtml">
  2.                                 <label>Date</label>
  3.                                 <render>adminhtml/catalog_product_edit_tab_options_type_date</render>
  4.                                 <types>
  5.                                     <date translate="label" module="adminhtml">
  6.                                         <label>Date</label>
  7.                                     </date>
  8.                                 </types>
  9.                             </date>

Then refresh the Custom Options page, now you can find “Date” option in the dropdown list of input type.

Step 2:

Get rid of the must input restriction.

Usually we won’t add price markup for “Date” type custom options, but defaultly you have to input in the price and SKU field. If you want to eliminate the constraints.

Edit “app/design/adminhtml/default/default/template/catalog/product/edit/options/type/date.phtml”. Find and delete “required-entry” in line 36 and 38. You can also delete the * mark as you wish.

Now nearly half of works done. So easy. You can choose a product and add a “Date” type option to it, then open that product page at frontend. Bingo!!! You can find the option along with a small calendar icon.

However, if you clicked the calendar icon you would get a javacript error. Besides, the default input field seems too long. Let’s deal with it.

Step 3:

Create content block for frontend calendar associated javascript.

You may tell me that you have no idea about javascript. Doesn’t matter. Magento has created the template file for backend use. Just manipulate it.

Edit “app/design/frontend/default/default/layout/page.xml”. Find the block named “head” and insert one row to define calendar as child block for it as follow (the 27th line).

  1.             <block type="page/html_head" name="head" as="head">
  2.                 <action method="addJs"><script>prototype/prototype.js</script></action>
  3.                 <action method="addJs" ifconfig="dev/js/deprecation"><script>prototype/deprecation.js</script></action>
  4.                 <action method="addJs"><script>prototype/validation.js</script></action>
  5.                 <action method="addJs"><script>scriptaculous/builder.js</script></action>
  6.                 <action method="addJs"><script>scriptaculous/effects.js</script></action>
  7.                 <action method="addJs"><script>scriptaculous/dragdrop.js</script></action>
  8.                 <action method="addJs"><script>scriptaculous/controls.js</script></action>
  9.                 <action method="addJs"><script>scriptaculous/slider.js</script></action>
  10.                 <action method="addJs"><script>varien/js.js</script></action>
  11.                 <action method="addJs"><script>varien/form.js</script></action>
  12.                 <action method="addJs"><script>varien/menu.js</script></action>
  13.                 <action method="addJs"><script>mage/translate.js</script></action>
  14.                 <action method="addJs"><script>mage/cookies.js</script></action>
  15.                 <action method="addCss"><stylesheet>css/reset.css</stylesheet></action>
  16.                 <action method="addCss"><stylesheet>css/boxes.css</stylesheet></action>
  17.                 <action method="addCss"><stylesheet>css/menu.css</stylesheet></action>
  18.                 <action method="addCss"><stylesheet>css/clears.css</stylesheet></action>
  20.                 <action method="addItem"><type>skin_css</type><name>css/iestyles.css</name><params/><if>IE</if></action>
  21.                 <action method="addItem"><type>skin_css</type><name>css/ie7minus.css</name><params/><if>lt IE 7</if></action>
  23.                 <action method="addItem"><type>js</type><name>lib/ds-sleight.js</name><params/><if>lt IE 7</if></action>
  24.                 <action method="addItem"><type>js</type><name>varien/iehover-fix.js</name><params/><if>lt IE 7</if></action>
  26.                 <action method="addCss"><stylesheet>css/print.css</stylesheet><params>media="print"</params></action>
  27.                 <block type="core/html_calendar" name="head.calendar" as="calendar" template="page/html/js/calendar.phtml"></block>
  28.             </block>