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

In this article we will explain tutorial about Display Dynamic Input Field With Custom Fields Into Product Edit Section In Magento eCommerce web development.

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"?>  
 <config>  
   <modules>  
     <Mynamespace_Mymodule>  
       <active>true</active>  
       <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"?>  
 <config>  
   <modules>  
     <Mynamespace_Mymodule>  
       <version>0.1.0</version>  
     </Mynamespace_Mymodule>  
   </modules>  
   <frontend>  
     <routers>  
       <Mymodule>  
         <use>standard</use>  
         <args>  
           <module>Mynamespace_Mymodule</module>  
           <frontName>Mymodule</frontName>  
         </args>  
       </Mymodule>  
     </routers>  
     <layout>  
       <updates>  
         <Mymodule>  
           <file>Mymodule.xml</file>  
         </Mymodule>  
       </updates>  
     </layout>  
   </frontend>  
   <admin>  
     <routers>  
                <Mymodule>  
                     <use>admin</use>  
                     <args>  
                          <module>Mynamespace_Mymodule</module>  
                          <frontName>Mymodule</frontName>  
                     </args>  
                </Mymodule>  
     </routers>  
   </admin>  
   <adminhtml>  
           <menu>  
                <Mymodule module="Mymodule">  
                     <title>My Module</title>  
                     <sort_order>71</sort_order>          
                     <children>  
                          <items module="Mymodule">  
                               <title>Manage Options</title>  
                               <sort_order>0</sort_order>  
                               <action>Mymodule/adminhtml_Mymodule</action>  
                          </items>  
                     </children>  
                </Mymodule>  
           </menu>  
           <acl>  
                <resources>  
                     <all>  
                          <title>Allow Everything</title>  
                     </all>  
                     <admin>  
                          <children>  
                               <Mynamespace_Mymodule>  
                                    <title>Mymodule Module</title>  
                                    <sort_order>10</sort_order>  
                               </Mynamespace_Mymodule>  
                          </children>  
                     </admin>  
                </resources>  
           </acl>  
           <layout>  
                <updates>  
                     <Mymodule>  
                          <file>Mymodule.xml</file>  
                     </Mymodule>  
                </updates>  
           </layout>  
 <rewrite>  
 <catalog_product_edit_tabs>Mynamespace_Mymodule_Block_Adminhtml_Tabs</catalog_product_edit_tabs>  
  </rewrite>  
   </adminhtml>    
   <global>  
     <models>  
       <Mymodule>  
         <class>Mynamespace_Mymodule_Model</class>  
         <resourceModel>Mymodule_mysql4</resourceModel>  
       </Mymodule>  
       <Mymodule_mysql4>  
         <class>Mynamespace_Mymodule_Model_Mysql4</class>  
         <entities>  
           <Mymodule>  
             <table>Mymodule</table>  
           </Mymodule>  
         </entities>  
       </Mymodule_mysql4>  
     </models>  
     <resources>  
       <Mymodule_setup>  
         <setup>  
           <module>Mynamespace_Mymodule</module>  
         </setup>  
         <connection>  
           <use>core_setup</use>  
         </connection>  
       </Mymodule_setup>  
       <Mymodule_write>  
         <connection>  
           <use>core_write</use>  
         </connection>  
       </Mymodule_write>  
       <Mymodule_read>  
         <connection>  
           <use>core_read</use>  
         </connection>  
       </Mymodule_read>  
     </resources>  
     <blocks>  
       <Mymodule>  
         <class>Mynamespace_Mymodule_Block</class>  
       </Mymodule>  
     </blocks>  
     <helpers>  
       <Mymodule>  
         <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');  
 ?>  
 <div class="entity-edit" id="manage-options-panel">  
   <div class="entry-edit-head">  
     <h4 class="icon-head head-edit-form fieldset-legend"><?php echo $_helper->__('Options') ?></h4>  
   </div>  
   <div class="box">  
     <div class="hor-scroll">  
       <table class="dynamic-grid tbl_option_options" cellspacing="0" cellpadding="0" width="100%">  
         <tr id="grid_head">  
           <th class="w-200"><?php echo $_helper->__('Status') ?></th>  
                          <th style="w-200"><?php echo $_helper->__('Options') ?></th>  
           <th class="w-150">  
             <button id="add_new_option_button" class="scalable add" style="" onclick="" type="button">  
               <span><?php echo Mage::helper('mymodule')->__('Add Option') ?></span>  
             </button>  
           </th>  
         </tr>  
         <tr id="attribute-options-table">  
         </tr>  
         <tr class="no-display template" id="row-template">  
                     <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>  
                     <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>Delete</span></button>  
                     </td>  
         </tr>  
       </table>  
     </div>  
     <input type="hidden" id="option-count-check" value=""/>  
   </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();  
                clearextraoption();  
                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.

Read More:

Tutorial : Display Dynamic Input Field With Custom Fields Into Product Edit Section In Magento Tutorial : Display Dynamic Input Field With Custom Fields Into Product Edit Section In Magento Reviewed by James Warner on 02:02 Rating: 5

No comments:

Powered by Blogger.