Magento, modify admin HTML for the product’s custom options, where is the parser ?

For one of my Magento development I need to edit the HTML of product's custom options tab. For each custom option you got a div with class option-box.

I need to add the sku of the option in this class in order to identify it.

I found app/design/adminhtml/default/default/template/catalog/product/edit/options/option.phtml. This file seems to use javascript to load my stored options with a template system.

I need to find where is the parser and how it works. My main problem is : I added a {{sku}} in my template but for a custom options with dropdown type, I can't get the sku in my html, don't know why.

I tried some things : - When a option is loaded I added the SKU in every case in getOptionValues function, but the tab doesn't open and I got no error ... - When a option is loaded I added a class attribute with the SKU in it in getOptionValues function and I replaced {{sku}} by {{class}}, but the tab doesn't open and I got no error too.

I need to find where is the parser in order to find out if I can edit it to accept class attribute.

Thank you for your help.

PS : getOptionValues function is in Mage_Adminhtml_Block_Catalog_Product_Edit_Tab_Options_Option

Solution

You do not need to change the parser. It works exactly as you would expect it to.

The problem that you are experiencing is that product options do not have their own sku. Sku is set on an option value and in case of custom options with a single value it is saved in sku column in catalog_product_option and you can set it in getOptionValues function with

$value['class'] = $this->htmlEscape($_value->getSku());

but in case of a dropdown or a multi-select sku is not set in that table (is set to NULL) but is instead set in catalog_product_option_type_value (one sku for each option value).

If you would like to have all the sku-s in div with class option-box you will have to do something like this:

In getOptionValues function:

//...
$value = array();
$value[ 'skus' ] = $this->htmlEscape($option->getSku());
//...
//code for select and multi-select
if ($option->getGroupByType() == Mage_Catalog_Model_Product_Option::OPTION_GROUP_SELECT) {
    foreach ($option->getValues() as $_value) {
       $value[ 'skus' ] .= ' ' . $this->htmlEscape($_value->getSku());
    //...

In option.phtml:

var firstStepTemplate = '<div class="option-box {{skus}}" id="option_{{id}}">'+

Edit: That being said I wouldn't advise you to use sku in such a way. First of all sku can be changed (or not even exist) for option values. The second reason would be that options and option values are uniquely identified by their IDs. And the third reason would be that putting skus into class attribute (like in the example) wouldn't be the way to go (maybe adding your own data-my_attribute="{{skus}}" would be a bit better but there would still be a problem with having too many option values for a single option).

I'd suggest that you don't change anything in option.php/.phtml (and if possible not even using your own derived class) or at least only add your class value in phtml template that you would then use in an external javascript file from where you would be able to change html structure on the fly.

Regarding the blank page I'd say that you have made a mistake with changes to your php or javascript code and not with providing wrongly named values to template. I haven't noticed any problems no matter how I name the variables as long as they have the correct javascript variable sintax.