1

I have a case which trying to add 'radio_date' option (under Select option group) for input type in adminhtml product custom options. Once it get selected, it displays a text field and calendar button instead of just a text field.

Then, I went to trace the code and found productOptionType.loadStepTwo() in app\design\adminhtml\default\default\template\catalog\product\edit\options\option.phtml, which seems related to this enhancement.

But what is the best way/technique to modify that method of object literal without touching the original file and not have problems with magento core updates? Appreciate.

var productOptionType = {
templateSyntax : /(^|.|\r|\n)({{(\w+)}})/,
loadStepTwo : function(event){
    var element = $(Event.findElement(event, 'select'));

    var group = '';
    var previousGroupElm = $(element.readAttribute('id').sub('_type', '_previous_group'));

    switch(element.getValue()){
        case 'field':
        case 'area':
            template = OptionTemplateText;
            group = 'text';
            break;
        case 'file':
            template = OptionTemplateFile;
            group = 'file';
            break;
        case 'drop_down':
        case 'radio':
        case 'checkbox':
        case 'multiple':
            template = OptionTemplateSelect;
            group = 'select';
            break;
        case 'date':
        case 'date_time':
        case 'time':
            template = OptionTemplateDate;
            group = 'date';
            break;
        default:
            template = '';
            group = 'unknown';
            break;
    }

    if (previousGroupElm.getValue() != group) {
        if ($(element.readAttribute('id')+'_'+previousGroupElm.getValue())) {
            formElm = $(element.readAttribute('id')+'_'+previousGroupElm.getValue()).descendants();
            formElm.each(function(elm){
                if (elm.tagName == 'input' || elm.tagName == 'select') {
                    elm.name = '__delete__'+elm.readAttribute('name');
                }
            });

            $(element.readAttribute('id')+'_'+previousGroupElm.getValue()).addClassName('no-display');
            $(element.readAttribute('id')+'_'+previousGroupElm.getValue()).addClassName('ignore-validate');
            $(element.readAttribute('id')+'_'+previousGroupElm.getValue()).hide();
        }

        previousGroupElm.value = group;

        if ($(element.readAttribute('id')+'_'+group)) {
            formElm = $(element.readAttribute('id')+'_'+group).descendants();
            formElm.each(function(elm){
                if (elm.match('input') || elm.match('select')) {
                    elm.name = elm.readAttribute('name').sub('__delete__', '');
                }
            });
            $(element.readAttribute('id')+'_'+group).removeClassName('no-display');
            $(element.readAttribute('id')+'_'+group).removeClassName('ignore-validate');
            $(element.readAttribute('id')+'_'+group).show();

        } else {
            template = '<div id="'+element.readAttribute('id')+'_'+group+'" class="grid tier form-list">'+template+'</div><div id="'+element.readAttribute('id')+'_'+group+'_advice"></div';
            this.secondTemplate = new Template(template, this.templateSyntax);

            data = {};
            if (!data.option_id) {
                data = {};
                data.option_id = $(element.readAttribute('id').sub('_type', '_id')).getValue();
            }

            Element.insert(element.readAttribute('id').sub('_type', ''), {'after':this.secondTemplate.evaluate(data)});

            switch(element.getValue()){
                case 'drop_down':
                case 'radio':
                case 'checkbox':
                case 'multiple':
                    selectOptionType.bindAddButton();
                    break;
            }
        }
    }
},
addDataToValues : function(data){

    switch(data.type){
        case 'field':
        case 'area':
            template = OptionTemplateText;
            group = 'text';
            break;
        case 'file':
            template = OptionTemplateFile;
            group = 'file';
            break;
        case 'drop_down':
        case 'radio':
        case 'checkbox':
        case 'multiple':
            template = OptionTemplateSelect;
            group = 'select';
            break;
        case 'date':
        case 'date_time':
        case 'time':
            template = OptionTemplateDate;
            group = 'date';
            break;
    }

    $('<?php echo $this->getFieldId() ?>_'+data.id+'_previous_group').value = group;

    template = '<div id="<?php echo $this->getFieldId() ?>_{{id}}_type_'+group+'" class="grid tier form-list">'+template+'</div><div id="<?php echo $this->getFieldId() ?>_{{id}}_type_'+group+'_advice"></div>';

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

    Element.insert($('<?php echo $this->getFieldId() ?>_'+data.option_id), {'after':this.secondTemplate.evaluate(data)});

    if (data.checkboxScopePrice) {
        //set disabled
        if ($('<?php echo $this->getFieldId() ?>_'+data.option_id+'_price') && data.scopePriceDisabled) {
            $('<?php echo $this->getFieldId() ?>_'+data.option_id+'_price').disable();
            $('<?php echo $this->getFieldId() ?>_'+data.option_id+'_price_type').disable();
        }
    }

    switch(data.type){
        case 'drop_down':
        case 'radio':
        case 'checkbox':
        case 'multiple':
            data.optionValues.each(function(value) {
                selectOptionType.add(value);
            });
            selectOptionType.bindAddButton();
            break;
    }

    if (data.price_type) {
        $A($('<?php echo $this->getFieldId() ?>_'+data.option_id+'_price_type').options).each(function(option){
            if (option.value==data.price_type) option.selected = true;
        });
    }

},
bindSelectInputType : function(){
    var types = $$('.select-product-option-type');
    for(var i=0;i<types.length;i++){
        if(!$(types[i]).binded){
            $(types[i]).binded = true;
            Event.observe(types[i], 'change', function(event){
                productOptionType.loadStepTwo(event);
            });
        }
    }
}}
1

The best way I could think of is to replace the existing method. So, in case there is a core updates for that particular method, only new option 'radio_button' would missed out the updates.

Hereby attached the following code, and please feel free to share your view.

if(typeof productOptionType !== 'undefined')
{
    // replace existing method productOptionType.loadStepTwo
    productOptionType.loadStepTwo = (function() {
        var cached_function = productOptionType.loadStepTwo;

        return function() {
            var element = $(Event.findElement(event, 'select'));

            var group = '';
            var previousGroupElm = $(element.readAttribute('id').sub('_type', '_previous_group'));

            switch(element.getValue()){
                case 'radio_date':
                    template = OptionTemplateSelect;
                    group = 'select';
                    break;
                default:
                    // use magento core logic
                    return cached_function.apply(this, arguments); 
            }

            // same logic as magento core v1.9.1.1
            if (previousGroupElm.getValue() != group) {
                if ($(element.readAttribute('id')+'_'+previousGroupElm.getValue())) {
                    formElm = $(element.readAttribute('id')+'_'+previousGroupElm.getValue()).descendants();
                    formElm.each(function(elm){
                        if (elm.tagName == 'input' || elm.tagName == 'select') {
                            elm.name = '__delete__'+elm.readAttribute('name');
                        }
                    });

                    $(element.readAttribute('id')+'_'+previousGroupElm.getValue()).addClassName('no-display');
                    $(element.readAttribute('id')+'_'+previousGroupElm.getValue()).addClassName('ignore-validate');
                    $(element.readAttribute('id')+'_'+previousGroupElm.getValue()).hide();
                }

                previousGroupElm.value = group;

                if ($(element.readAttribute('id')+'_'+group)) {
                    formElm = $(element.readAttribute('id')+'_'+group).descendants();
                    formElm.each(function(elm){
                        if (elm.match('input') || elm.match('select')) {
                            elm.name = elm.readAttribute('name').sub('__delete__', '');
                        }
                    });
                    $(element.readAttribute('id')+'_'+group).removeClassName('no-display');
                    $(element.readAttribute('id')+'_'+group).removeClassName('ignore-validate');
                    $(element.readAttribute('id')+'_'+group).show();

                } else {
                    template = '<div id="'+element.readAttribute('id')+'_'+group+'" class="grid tier form-list">'+template+'</div><div id="'+element.readAttribute('id')+'_'+group+'_advice"></div';
                    this.secondTemplate = new Template(template, this.templateSyntax);

                    data = {};
                    if (!data.option_id) {
                        data = {};
                        data.option_id = $(element.readAttribute('id').sub('_type', '_id')).getValue();
                    }

                    Element.insert(element.readAttribute('id').sub('_type', ''), {'after':this.secondTemplate.evaluate(data)});

                    switch(element.getValue()){
                        case 'radio_date': 
                            selectOptionType.bindAddButton();
                            break;
                    }
                }
            }
        };
    }());
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.