Magento Custom Options - add a CSS className to the custom option field

Question

I want to specify a CSS class to apply to my custom options fields. This will allow me to use more robust JavaScript selectors on the product view page.

So in Product>Custom options in the Admin I want to have something like this:

Where I've added the CSS Class attribute to the field.

This can be added simply enough in the adminhtml template file:

app\design\adminhtml\default\default\template\catalog\product\edit\options\option.phtml

But I don't know which files I need to override/extend in order to get it saving that extra attribute when I click Save. Can anyone point me in the right direction?

Answer 1

Assuming you do this for the option type "text". You need to provide a way to enter, edit, store, and output this new property.

To Enter: As you have already found out, you must edit the backend template files. app\design\adminhtml\default\default\template\catalog\product\edit\options\type\text.phtml:

after line 36 enter

'<th class="type-last last"><?php echo Mage::helper('catalog')->__('Custom CSS') ?> </th>'+

and after line 47:

'<td class="type-last last"><input type="text" class="input-text" name="product[options][{{option_id}}][custom_css]" value="{{custom_css}}"></td>'+

this will add a field to enter the custom css class to.

To Edit: You need to rewrite a block that outputs option HTML, so that the new field can get a value from the model. Create a block in your module that is declared as follows:

class YourPackage_YourModule_Block_Adminhtml_Option extends Mage_Adminhtml_Block_Catalog_Product_Edit_Tab_Options_Option 
{

Copy/paste the function getOptionValues() from class Mage_Adminhtml_Block_Catalog_Product_Edit_Tab_Options_Option and add the code

##.......code omitted for brevity.......##
$value['sku'] = $this->htmlEscape($option->getSku());
$value['max_characters'] = $option->getMaxCharacters();

// your new field output to the adminhtml form
$value['custom_css'] = $option->getCustomCss();

$value['file_extension'] = $option->getFileExtension();
##.......code omitted  for brevity.......##

To Store. This is a bit tricky. You need to extend the table catalog_product_option; with one column to store your new property in. Create an install/update script with the following content:

$installer = $this;
$installer->startSetup();
$installer->run("
    ALTER TABLE `catalog_product_option` ADD
    `custom_css` text");
$installer->endSetup();

After the script is run, make sure the table has a new column custom_css

To Output: Finally, update the template file frontend/yourpackage/yourtheme/template/catalog/product/view/options/type/text.phtml by adding a code to output your new custom CSS class property, something like

$_option->getCustomCss();