javascript - 向 magento 后端注入(inject)新的简单 javascript(作为模块)

标签 javascript magento prototypejs

我想在 magento 产品管理后端的一些描述和元字段上添加简单的字符计数器功能。就像下面的截图一样。

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

我通过将简单的原型(prototype)脚本添加到加载到 magento 管理 HTML 上的 JS 文件之一来做到这一点。我为此选择 browser.js (/js/mage/adminhtml/browser.js),因为这是加载到我的 magento 安装后端区域的最后一个脚本。这是我的原型(prototype)脚本代码块:

/* 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 模块的基本教程。但是这些教程都没有给我注入(inject)新脚本的方法。这可能是最接近的指南:

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

但我仍然完全不知道从哪里开始创建这个简单的模块。如果这个问题感觉太新手,我很抱歉,但我真的需要帮助,而且与往常不同,这次谷歌无法帮助我(或者至少我找不到一个好的关键字来开始谷歌搜索)。所以在这里我希望有人会很乐意帮助我 :)

最佳答案

尝试在您的模块文件中添加管理布局更新

<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 文件。

关于javascript - 向 magento 后端注入(inject)新的简单 javascript(作为模块),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7804045/

相关文章:

javascript - 数据未显示在流程图中(metronic 主题)

javascript - 过渡/动画后CSS触发javascript

magento - 如何为某些客户分配允许的付款方式?

.htaccess - 为 admin.magentostore.com(不是/admin)的 Magento 创建一个管理 url

javascript - 使用复选框启用调用拖动

Magento:在哪里可以找到状态订单流?

javascript - PrototypeJS 版本 1.6.0.2 覆盖 JSON.parse 和 JSON.stringify 并破坏 socket.io 功能

javascript - 为什么 'onpaste' 事件在设计模式为 ="on"的 Iframe 中不起作用?

javascript - 带有javascript原型(prototype)的ajax请求

javascript - 使用链接在 Protractor 中获取直接子元素