Display Dynamic Input Field with Custom Fields Into Product Edit Section in Magento

Display Dynamic Input Field With Custom Fields Into Product Edit Section In Magento

To make it more dynamic let’s create one custom module for same so it will be used as separate module

Mynamespace_Mymodule

Step -1

To make one section under product section you want to override tabs.php core file

app\code\core\Mage\Adminhtml\Block\Catalog\Product\Edit\tabs.php copy to app\code\local\Mage\Adminhtml\Block\Catalog\Product\Edit\tabs.php and following code on same

$this->addTab('tabid',array(

'label'=>mage::helper('catalog')->__('Custom options'),

'content'=>$this->getLayout()->createBlock('modulename/adminhtml_catalog_product_tab_tabid')->toHtml(),

));

Step- 2

Make configuration file Mynamespace_Mymodule.xml as below

<?xml version="1.0"?>

<Mynamespace_Mymodule>

<codePool>local</codePool>

</Mynamespace_Mymodule >

</modules>

</config>

Step -3

Make 2 files under the block of custom module

app\code\local\Mynamespace\Mymodule\Block\Adminhtml\Catalog\Product\Tab.php

class Mynamespace_Mymodule_Block_Adminhtml_Catalog_Product_Tab

{

private $parent;

protected function _prepareLayout(){

$this->addTab('tabid',array(

'label'=>mage::helper('catalog')->__('Custom Options'),

'content'=>$this->getLayout()->createBlock('mymodule/adminhtml_catalog_product_tab_tabid')->toHtml(),

));

return $this->parent;

}

app\code\local\Mynamespace\Mymodule \Block\Adminhtml\Catalog\Product\Tab\Tabid.php

class Mynamespace_Mymodule_Block_Adminhtml_Catalog_Product_Tab_Tabid extends Mage_Adminhtml_Block_Widget

{

public function __construct(){

parent::__construct();

$this->setTemplate('Mymodule/catalog/product/tab.phtml');

}

public function getOptionValues()

{

$optionsArr = Mage::helper('mymodule')->getOption();// this custom function which you can customized as per you requirement

$values = array();

foreach ($optionsArr as $option) {

$value = array();

$value['id'] = $option->getOptionId();

$value['optionititle'] = $option->getOptionTitle();

$value['update'] = 1;

$values[] = new Varien_Object($value);

}

return $values;

}

Step – 4

Mention block helper and controller and routers information into Config.xml which is indeed to each custom module

app/code/local/Mynamespace/Mymodule/etc/config.xml

<?xml version="1.0"?>

<modules

<Mynamespace_Mymodule>

</Mynamespace_Mymodule>

</modules>

<use>standard</use>

<args>

<module>Mynamespace_Mymodule</module>

<frontName>Mymodule</frontName>

</args>

</Mymodule>

</routers>

<file>Mymodule.xml</file>

</Mymodule>

</updates>

</layout>

</frontend>

<admin>

<use>admin</use>

<args>

<module>Mynamespace_Mymodule</module>

<frontName>Mymodule</frontName>

</args>

</Mymodule>

</routers>

</admin>

<menu>

<title>My Module</title>

<sort_order>71</sort_order>

<title>Manage Options</title>

<sort_order>0</sort_order>

<action>Mymodule/adminhtml_Mymodule</action>

</items>

</children>

</Mymodule>

</menu>

<acl>

<all>

<title>Allow Everything</title>

</all>

admin>

<Mynamespace_Mymodule>

<title>Mymodule Module</title>

<sort_order>10</sort_order>

</Mynamespace_Mymodule>

</children>

</admin>

</resources>

</acl>

file>Mymodule.xml</file>

</Mymodule>

</updates>

</layout>

<catalog_product_edit_tabs>Mynamespace_Mymodule_Block_Adminhtml_Tabs</catalog_product_edit_tabs>

</rewrite>

</adminhtml>

<class>Mynamespace_Mymodule_Model</class>

<resourceModel>Mymodule_mysql4</resourceModel>

</Mymodule>

<Mymodule_mysql4>

<class>Mynamespace_Mymodule_Model_Mysql4</class>

<table>Mymodule</table>

</Mymodule>

</entities>

</Mymodule_mysql4>

</models>

<Mymodule_setup

<setup>

<module>Mynamespace_Mymodule</module>

</setup>

<use>core_setup</use>

</connection>

</Mymodule_setup>

<Mymodule_write>

<use>core_write</use>

</connection>

</Mymodule_write>

<Mymodule_read>

</connection>

</Mymodule_read>

</resources>

<class>Mynamespace_Mymodule_Block</class>

</Mymodule>

</blocks>

<class>Mynamespace_Mymodule_Helper</class>

</Mymodule>

</helpers>

</global>

</config>

Step -5

Define Helper file Data.php under

app\code\local\Mynamespace\Mymodule\Helper

class Mynamespace_Mymodule_Helper_Data extends Mage_Core_Helper_Abstract

{

}

Step – 6

Make one phtml file under adminhtml section so it will display that html into product edit section

You can put your custom html also here I have shown how to add dynamic input filed under product edit section

Here is file content with path

app\design\adminhtml\default\default\template\mymodule\catalog\product\tab.phtml

<?php

$yesno = array('1' => 'Yes', '0' => 'No');

$options = array('1'=>'option-1','2'=>'option-2','3'=>'option-3','4'=>'option-4','5'=>'option-5')' // you can add your dynamic custom option from other module too

$_helper = Mage::helper('mymodule');

<h4 class="icon-head head-edit-form fieldset-legend"<?php echo $_helper->__('Options') ?</h4>

</div>

<th class="w-200"<?php echo $_helper->__('Status') ?</th>

<th style="w-200"<?php echo $_helper->__('Options') ?</th>

<span<?php echo Mage::helper('mymodule')->__('Add Option') ?</span>

</button>

</th>

</tr>

</tr>

<td<input name="option[{{id}}][status]" value="{{status}}" class="required-option full" type="select" disabled="disabled"/</td>

<td<input name="option[{{id}}][optiontitle]" value="{{optiontitle}}" class="input-text required-option full" type="text" disabled="disabled"/</td>

<button class="scalable delete delete-option" type="button"<span>Delete</span</button>

</td>

</tr

</table>

</div>

</div>

var optionDefaultInputType = 'text';

var templateText =

'<tr class="option-row">' +

'<td>'+'<select class="input-text required-entry" name="option[{{id}}][status]" id="row_{{id}}_option">'

<?php foreach ($yesno as $key => $_info) : ?>

+ '<option value="<?php echo $key; ?>"<?php echo $_info; ?</option>'

<?php endforeach; ?>

+ '</select</td>'+

'<td>'+'<select class="input-text required-entry cls optiontitle" name="option[{{id}}][optiontitle]" id="row_optiontitle_{{id}}">'

<?php foreach ($options as $keyid => $_value) : ?>

+ '<option value="<?php echo $keyid; ?>"<?php echo $_value; ?</option>'

<?php endforeach; ?>

+ '</select</td>'+

'<td class="a-left">' +

'<input type="hidden" class="delete-flag" name="option[{{id}}][delete]" value="" />' +

'<input type="hidden" class="update-flag" name="option[{{id}}][update]" value="{{update}}"/>' +

'<button class="scalable delete delete-option" type="button"<span<?=$this->__("Delete")?</span</button>' +

'<\/td>' +

'<\/tr>';

var attributeOption = {

table : $('attribute-options-table'),

templateSyntax : /(^|.|\r|\n)({{(\w+)}})/,

templateText : templateText,

itemCount : 0,

totalItems : 0,

//add dynamic row function

add : function(data) {

this.template = new Template(this.templateText, this.templateSyntax);

//if (!data.id) {

// data = {};

data.id = 'option_' + this.itemCount;

//}

if (!data.intype)

data.intype = optionDefaultInputType;

Element.insert(this.table, {before: this.template.evaluate(data)});

if(data.optiontitle) {

$('row_optiontitle_' + data.id).value = data.optiontitle;

var optiontitleElement = $('row_optiontitle_' + data.id);

var optiontitleCaption = optiontitleElement.options[optiontitleElement.selectedIndex].value;

optiontitleElement.setValue(optiontitleCaption);

}

if(data.status){

$('row_' + data.id + '_option').value = data.status;

var optionstatusElement = $('row_optiontitle_' + data.id);

var optionstatusCaption = optionstatusElement.options[optionstatusElement.selectedIndex].value;

optionstatusElement.setValue(optionstatusCaption);

}

this.bindRemoveButtons();

this.itemCount++;

this.totalItems++;

this.updateItemsCountField();

clearextraoption();

//remove dynamic row function

remove : function(event) {

if (confirm('<?php echo $this->__("Do you really delete this option?");?>')) {

var element = $(Event.findElement(event, 'tr'));

element.ancestors().each(function(parentItem) {

if (parentItem.hasClassName('option-row')) {

element = parentItem;

throw $break;

} else if (parentItem.hasClassName('box')) {

throw $break;

}

});

if (element) {

var elementFlags = element.getElementsByClassName('delete-flag');

if (elementFlags[0]) {

elementFlags[0].value = 1;

}

element.addClassName('no-display');

element.addClassName('template');

element.hide();

this.totalItems--;

this.updateItemsCountField();

}

updateItemsCountField: function() {

if (this.totalItems > 0) {

$('option-count-check').value = '1';

} else {

$('option-count-check').value = '';

}

bindRemoveButtons : function() {

var buttons = $$('.delete-option');

for (var i = 0; i < buttons.length; i++) {

if (!$(buttons[i]).binded) {

$(buttons[i]).binded = true;

Event.observe(buttons[i], 'click', this.remove.bind(this));

}

if ($('row-template')) {

$('row-template').remove();

}

attributeOption.bindRemoveButtons();

if ($('add_new_option_button')) {

Event.observe('add_new_option_button', 'click', attributeOption.add.bind(attributeOption));

}

Validation.addAllThese([

['required-option', '<?php echo Mage::helper('mymodule')->__('Options is required') ?>', function(v) {

return !Validation.get('IsEmpty').test(v);

}]

]);

<?php

$period = Mage::app()->getRequest()->getParam('id');

if ($options = Mage::helper('mymodule')->getOptionValues($period)) {

foreach ($options as $_value): ?>

attributeOption.add(<?php echo $_value->toJson() ?>);

<?php endforeach; } ?>

//]]>

</script>

That’s it in above 6 step it will display custom option under product edit section

You can display your custom module option too under product edit section

***********************************Good Luck********************************************

About Author : James Warner - Highly skilled and experienced Magento developer at NexSoftSys – offers hire magento developers from India. He has bright technology knowledge to develop IT business system which includes user friendly access and advanced features.