Question

In the file $MAGENTO_PATHapp/design/frontend/base/default/template/catalog/product/view/options/wrapper.phtml, I see the following line of code:

<?php echo $this->getChildHtml('', true, true);?>

This is responsible for printing the product options on the product page. I want to understand and modify the html content that this line of code produces, but I can’t seem to locate the view or controller relevant to it. For example, let’s say I want to programmatically add the characters   to the innerHTML of each option element in a drop down, which phtml, php or html file do I edit?

I’m hoping an answer to this question will help me understand how to retrieve product options, which in turn will help me solve this more immediate problem:

Magento – Query for Product Options

Answer 1

When passing an empty value to any of the getChild functions all the children are used. In this case getChildHtml(''... returns the result of each of their toHtml outputs.

To find out what it’s children are we need to refer to the catalog.xml layout file:

<block type="catalog/product_view" name="product.info.options.wrapper" as="product_options_wrapper" template="catalog/product/view/options/wrapper.phtml" translate="label">
    <label>Info Column Options Wrapper</label>
    <block type="core/template" name="options_js" template="catalog/product/view/options/js.phtml"/>
        <block type="catalog/product_view_options" name="product.info.options" as="product_options" template="catalog/product/view/options.phtml">
            <action method="addOptionRenderer"><type>text</type><block>catalog/product_view_options_type_text</block><template>catalog/product/view/options/type/text.phtml</template></action>
            <action method="addOptionRenderer"><type>file</type><block>catalog/product_view_options_type_file</block><template>catalog/product/view/options/type/file.phtml</template></action>
            <action method="addOptionRenderer"><type>select</type><block>catalog/product_view_options_type_select</block><template>catalog/product/view/options/type/select.phtml</template></action>
            <action method="addOptionRenderer"><type>date</type><block>catalog/product_view_options_type_date</block><template>catalog/product/view/options/type/date.phtml</template></action>
        </block>
    <block type="core/html_calendar" name="html_calendar" as="html_calendar" template="page/js/calendar.phtml"/>
</block>

You might be able to see from that jumbled mess that your wrapper block has an ‘options’ grandchild which has several renderers for the different types of possible options. For the drop-down you’ll probably need to edit catalog/product/view/options/type/select.phtml.