Front end view for Custom Options

Question

I have used the the link for create a extension to add Custom Options in the admin. Now it works in admin part, But when i create the custom view part for product, it did not work for me. First thing i cant understand where i add the bellow code in my config.xml file.

<catalog_product_view>
    <reference name="product.info.options">
        <action method="addOptionRenderer">
            <type>instagramimage</type>
            <block>webtoprint/catalog_product_view_options_type_instagramimage</block>
            <template>webtoprint/catalog/product/view/options/type/instagramimage.phtml</template>
        </action>
    </reference>
</catalog_product_view>

What is the Customized method in it

class Ikantam_Webtoprint_Block_Options_Type_Customview_Instagramimage
    extends Mage_Core_Block_Template
{
    protected $_template = 'webtoprint/options/customview/instagramimage.phtml';
}

Where it works ? I cant understand how the instagramimage.phtml display on the frontend.

<?php /** @var $this Ikantam_Webtoprint_Block_Options_Type_Customview_Instagramimage */ ?>
<?php $data = $this->getInfo(); ?>
<h1><?php echo $data['value'] ; ?></h1>

Al last what what is the template here and how i can use it ?

<?php /** @var $this Ikantam_Webtoprint_Block_Catalog_Product_View_Options_Type_Instagramimage */ ?>
<?php $_option = $this->getOption(); ?>
<dt><label<?php if ($_option->getIsRequire()) echo ' class="required"' ?>><?php if ($_option->getIsRequire()) echo '<em>*</em>' ?><?php echo  $this->htmlEscape($_option->getTitle()) ?></label>
    <?php echo $this->getFormatedPrice() ?></dt>
<dd<?php if ($_option->decoratedIsLast){?> class="last"<?php }?>>
    <div class="input-box">
        <input type="text"
               id="options_<?php echo $_option->getId() ?>_instagramimage"
               class="<?php echo $_option->getIsRequire() ? ' required-entry' : '' ?>"
               name="options[<?php echo $_option->getId() ?>]"
               value="<?php echo $this->escapeHtml($this->getDefaultValue()) ?>" />
    </div>
</dd>

Now i can get the custom option in my admin section, But When i add some value like

Title * Input Type *          Is Required   Sort Order
Test        text(Instagramimage)   yes                  0

Price   Price Type  SKU
450.00      fixed           34

I found the input box with title given, but could not find the price value. As frontend it could not save the price value in backend also.In data base SKU value has saved but not the price value.

Answer 1

I have got this issue too.

After digging the code, i found the key point is this function: _saveValuePrices() in class Mage_Catalog_Model_Resource_Product_Option.

        if ($object->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_FIELD
        || $object->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_AREA
        || $object->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_FILE
        || $object->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_DATE
        || $object->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_DATE_TIME
        || $object->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_TIME
    ) {}

You need add your type in here.

Hope this can help.

Answer 2

You haven't provided the link ;).

To answer you first part of the question:

<catalog_product_view>
    <reference name="product.info.options">
        <action method="addOptionRenderer">
            <type>instagramimage</type>
            <block>webtoprint/catalog_product_view_options_type_instagramimage</block>
            <template>webtoprint/catalog/product/view/options/type/instagramimage.phtml</template>
        </action>
    </reference>
</catalog_product_view>

should be added to your xyz.xml (layout file) which should be in your theme's layout directory

• app/design/frontend/default/{your_theme}/layout/xyz.xml (most themes are done in this way) or
• app/design/frontend/{your_theme}/default/layout/xyz.xml (this is the right way) or

• app/design/frontend/default/default/layout/xyz.xml (without a custom theme)

  'xyz' refers to any name which will be declared in your config.xml inside

   <layout>
      <updates>
          <webtoprint>
                <file>xyz.xml</file>
  

tags.

This file is responsible for rendering your template in the intended place (block).

To answer the second part:

that's the Block file and will serve the values for your template file (instagramimage.phtml).

`getInfo()` is the method defined in your `Ikantam_Webtoprint_Block_Options_Type_Customview_Instagramimage` class, which will be used in the template.

To answer the next part:

put that template file instagramimage.phtml in the specified path

i.e.

app/design/frontend/your_theme/default/template/webtoprint/catalog/product/view/options/type/instagramimage.phtml

this template is displayed in the right place because of your xyz.xml in layout directory, which says <catalog_product_view> and that means the product view page.