2011-10-18 10 views
3

magento製品管理バックエンドの説明とメタフィールドの一部に単純なcharカウンタ機能を追加したいと思います。ちょうどこのスクリーンショットのように。新しい単純なjavascriptをmagentoバックエンドに(モジュールとして)

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

私は、Magentoの管理者HTMLにロードされるJSファイルのいずれかに簡単なプロトタイプのスクリプトを追加することによって、ということでした。私はそれが私のmagentoインストールのバックエンド領域にロードされる最後のスクリプトであるため、browser.js(/js/mage/adminhtml/browser.js)を選択します。これは、コードの私のプロトタイプのスクリプトチャンクです:

/* 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モジュールを作成する経験はありません。単純なマゼンタモジュールを作成する方法についての基本的なチュートリアルを見つけようとしました。しかし、これらのチュートリアルでは私に新しいスクリプトを挿入する方法はありません。この1は、最も近いガイドことがあります

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

が、私はまだすべてで任意のアイデアを持っていないところ、この単純なモジュールの作成を開始するために開始します。この質問があまりにも初心者だと思ったら申し訳ありませんが、私は本当にここで助けが必要で、いつものように、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

関連する問題