Magento Add Color Picer In Admin Conifuration Page

最新推荐文章于 2024-10-02 22:30:47 发布

最新推荐文章于 2024-10-02 22:30:47 发布 · 131 阅读

php 同时被 2 个专栏收录

129 篇文章

订阅专栏

Magento

127 篇文章

订阅专栏

本文指导您如何仅用几行XML代码在Magento模块的管理员配置页面中添加颜色选择器，简化了通常看起来复杂的任务。

Download JS Extension from here:

http://jscolor.com/

Sometimes you may want to add color picker in the admin configuration page of your Magento module or extension. You may think this as a big task but believe me this is as simple as anything. Few lines of XML code will do it for you. Here are the exact steps to do this.

1. In adminhtml/default/default/layout directory, create the layout XML file for your module. Lets name it as picker.xml. Write following content in picker.xml:

<?xml version="1.0"?>
<layout version="0.1.1">
 <adminhtml_system_config_edit>
  <reference name="head">
   <action method="addJs"><file>jscolor/jscolor.js</file></action>
  </reference>
 </adminhtml_system_config_edit>
</layout>

2. Declare the layout file in your module's config.xml as:

<config>
...
 <adminhtml>
  <layout>
   <updates>
    <basket>
     <file>picker.xml</file>
    </basket>
   </updates>
  </layout>
 </adminhtml>
...
</config>

3. In your module's system.xml, add the color picker field as:

<config>
...
 <sections>
   <myconfig module="picker" translate="label">
   ...
   <groups>
    <my_group translate="label">
     ...
      <my_color>
       <label>Background Color</label>
       <frontend_type>text</frontend_type>
       <validate>color</validate> <!-- This is important -->
       <sort_order>1</sort_order>
       <show_in_default>1</show_in_default>
       <show_in_website>1</show_in_website>
       <show_in_store>1</show_in_store>
       <comment>Specify the background color.</comment>
      </my_color>
    <my_group>
   </groups>
   <myconfig>
 </sections>
...
</config>