Magento User Preferences - Add the CSS class name to the custom parameter field

Question

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

So, in Product> User Parameters in Admin I want to have something like this:

Where I added the CSS class attribute to the field.

This can be added quite simply 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 / renew so that it retains this additional attribute when I click “Save”. Can someone point me in the right direction?

Answer 1

Assuming you are doing this for a text option. You need to provide a way to input, edit, save, and output this new property.

Enter . As you already found out, you have to edit the backend template files. application \ design \ adminhtml \ default \ default \ template \ directory \ 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 custom CSS class input field.

Edit : you need to rewrite the block that displays the HTML parameter so that the new field can get the value from the model. Create a block in your module, which is declared as follows:

 class YourPackage_YourModule_Block_Adminhtml_Option extends Mage_Adminhtml_Block_Catalog_Product_Edit_Tab_Options_Option { 

Copy / paste the getOptionValues() function from the Mage_Adminhtml_Block_Catalog_Product_Edit_Tab_Options_Option class 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.......## 

Save . This is a bit complicated. You need to expand the catalog_product_option table; with one column to store your new property. Create an install / update script with the following contents:

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

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

Withdraw . Finally, update the frontend/yourpackage/yourtheme/template/catalog/product/view/options/type/text.phtml , adding code to display the new custom CSS class property, something like

 $_option->getCustomCss();