Magento Adding extra field ‘CSS Class’ in Product Custom Options

Adding a extra field in product’s custom options may important to apply js or css on a custom option in front-end.

Add html for the extra field: Open file
app\design\adminhtml\default\default\template\catalog\product\edit\options\option.phtml
Add this line

''+

right after this line

'
getRequireSelectHtml() ?>'+

Also add

'
__('CSS') ?>'+

right after the line

'
jsQuoteEscape(Mage::helper('catalog')->__('Is Required')) ?>'+

This will add a html input text right after required drop-down.

Add functionality to save the data from our newly created field in back-end, open file
app\code\core\Mage\Adminhtml\Block\Catalog\Product\Edit\Tab\Options\Option.php

in method getOptionValues()
add

$value['css_class'] = $option->getCssClass();

Also add

'css_class' => $option->getCssClass()

right after line

'sort_order' => $_value->getSortOrder(),

Now add a database column ‘css_class’ in database
table ‘catalog_product_option’
where this data going to be stored.

Add output to front-end in your theme file
app\design\frontend\default\default\template\catalog\product\view\options\type\select.phtml

That’s it.

clear cache and reindex if needed.

	






	
	

	

	
	

		
		

			
			

				
				

					Posted				
				

				
August 13, 2014

				
				

					in				
				

				
Magento
			
			

			
			

				
				

					by				
				

				
Ashraful
			
			
		
		

		
		

			
			

				
				

					Tags: