Внедрить новый простой javascript в бэкэнд magento (как модуль) - PullRequest
Новая
       1

Внедрить новый простой javascript в бэкэнд magento (как модуль)

3 голосов
/ 18 октября 2011

Я хочу добавить простую функциональность счетчика символов в некоторые поля описания и мета в бэкэнде администрирования продукта magento. Как на скриншоте ниже.

You can see that simple char counter on the right side of meta title and meta description text box

Я сделал это, добавив простой прототип сценария в один из файлов JS, который загружается в HTML-код администратора magento. Я выбираю browser.js (/js/mage/adminhtml/browser.js) для этого, потому что это последний скрипт, который загружается в серверную часть моей установки magento. Это мой фрагмент кода прототипа: 

/* ADMIN CHAR COUNTER SCRIPT */
Event.observe(window, 'load', function() {

    Element.insert( $('meta_title').up().next().down('span'), { 
        'after': "<div id='meta_title_counter'>Char count: <span id='meta_title_counter_num'>"+(69-$('meta_title').getValue().length)+"</span></div>"
    });
    Element.insert( $('meta_description').up().next().down('span'), { 
        'after': "<div id='meta_description_counter'>Char count: <span id='meta_description_counter_num'>"+(156-$('meta_description').getValue().length)+"</span></div>"
    });
    Element.insert( $('short_description').up().next().down('span'), { 
        'after': "<div id='short_description_counter'>Char count: <span id='short_description_counter_num'>"+$('short_description').getValue().length+"</span></div>"
    });
    Element.insert( $('description').up().next().down('span'), { 
        'after': "<div id='description_counter'>Char count: <span id='description_counter_num'>"+$('description').getValue().length+"</span></div>"
    });

    Event.observe('meta_title', 'keyup', function(event) {  
        $counter = 69-$('meta_title').getValue().length;
        $("meta_title_counter_num").update($counter);
        if($counter < 0){ $("meta_title_counter").setStyle({ color: 'red' }); }
        else{ $("meta_title_counter").setStyle({ color: '#6F8992' }); }
    });
    Event.observe('meta_description', 'keyup', function(event) {
        $counter = 156-this.getValue().length;
        $("meta_description_counter_num").update($counter);
        if($counter < 0){ $("meta_description_counter").setStyle({ color: 'red' }); }
        else{ $("meta_description_counter").setStyle({ color: '#6F8992' }); }
    });
    Event.observe('short_description', 'keyup', function(event) {   $("short_description_counter_num").update(this.getValue().length);  });
    Event.observe('description', 'keyup', function(event) { $("description_counter_num").update(this.getValue().length);    });
});
/* END OF CHAR COUNTER MODULE */

Я понимаю, что то, что я сделал, было таким быстрым и грязным трюком. Я практически редактирую основной файл. Это означает, что этот скрипт будет удален после обновления magento. Мой босс попросил меня поместить эту функциональность в модуль. Но у меня нет опыта по созданию модуля magento. Я попытался найти базовый учебник о том, как создать простой модуль magento. Но ни один из этих уроков не дает мне способа внедрить новый скрипт. Это может быть ближайший гид:

http://www.magentocommerce.com/wiki/5_-_modules_and_development/admin/how_to_customize_backend_template_f.e._sales_order_information

но я до сих пор понятия не имею, с чего начать, чтобы начать создание этого простого модуля. Извините, если этот вопрос кажется слишком новым, но мне здесь действительно нужна помощь, и в отличие от обычного, в этот раз Google не может мне помочь (или, по крайней мере, я не могу найти подходящее ключевое слово, чтобы начать поиск в Google). Так что здесь я надеюсь, что кто-то там будет рад помочь мне:)

1 Ответ

5 голосов
/ 18 октября 2011

Попробуйте в вашем модуле файл с обновлениями макета администратора добавить 

<adminhtml_catalog_product_edit>
    <reference name="head">
        <action method="addJs"><script>your_js_file.js</script></action>
    </reference>
</adminhtml_catalog_product_edit>

или даже 

<default>
    <reference name="head">
        <action method="addJs"><script>your_js_file.js</script></action>
    </reference>
</default>

чтобы добавить загрузку файла js на все страницы администратора.

...