2011-10-18 27 views
3

我想在magento產品管理後端的某些描述和元字段上添加簡單的字符計數器功能。就像下面這張截圖一樣。將新的簡單JavaScript注入到magento後端(作爲模塊)

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

我這樣做,通過添加簡單的原型腳本成得到加載在Magento管理HTML JS文件之一。我選擇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搜索)。所以在這裏我希望有人在那裏會很樂意幫助我:)

回答

5

嘗試在你的模塊文件,管理佈局更新添加

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

+0

謝謝:)我會試試看 – Kamal

相關問題