Often Magento developers need to add setting of their Theme or Module. Let me show you quick overview of types of fields developers have on disposal in Magento 2. I would recommend to place everything about Magneto 2 system config in to system.xml file.
Let me show you how to build custom Magento 2 system config.
You need to create system.xml file in your module and add your structure in to the file.
Magento 2 has the similar structure of elements as Magento 1.x: tabs, sections, groups and fields.
This code snippet shows an example of custom configuration settings.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../Config/etc/system_file.xsd"> <system> <tab id="cookiecode" translate="label" sortOrder="50"> <label>Cookiecode</label> <class>cookiecode</class> </tab> <section id="cc_general" translate="label" type="text" sortOrder="100" showInDefault="1" showInWebsite="1" showInStore="1"> <label>General config</label> <tab>cookiecode</tab> <resource>Cookiecode_Mymodule::mymodule</resource> <group id="country" translate="label" type="text" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Country Options</label> <field id="allow" translate="label" type="multiselect" sortOrder="2" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Allow Countries</label> <source_model>Magento\Directory\Model\Config\Source\Country</source_model> <can_be_empty>1</can_be_empty> </field> <field id="default" translate="label" type="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Default Country</label> <source_model>Magento\Directory\Model\Config\Source\Country</source_model> </field> <field id="eu_countries" translate="label" type="multiselect" sortOrder="30" showInDefault="1" showInWebsite="0" showInStore="0"> <label>European Union Countries</label> <source_model>Magento\Directory\Model\Config\Source\Country</source_model> </field> <field id="destinations" translate="label" type="multiselect" sortOrder="40" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Top destinations</label> <source_model>Magento\Directory\Model\Config\Source\Country</source_model> </field> </group> <group id="allfieldset" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1"> <label>All config type</label> <field id="yesno" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Yes/No field</label> <source_model>Magento\Config\Model\Config\Source\Yesno</source_model> <backend_model>Magento\Contact\Model\System\Config\Backend\Links</backend_model> <comment> <![CDATA[Comment test!]]></comment> </field> <field id="search_terms" translate="label" type="select" sortOrder="11" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Popular Search Terms</label> <source_model>Magento\Config\Model\Config\Source\Enabledisable</source_model> </field> <field id="yesno-depends" translate="label" type="select" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Yes/No field (depends option)</label> <source_model>Magento\Config\Model\Config\Source\Yesno</source_model> <backend_model>Magento\Contact\Model\System\Config\Backend\Links</backend_model> <comment> <![CDATA[Yes showing text box.!]]></comment> </field> <field id="text_text_depends" translate="label comment" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Text box depends</label> <comment>How many links to display at once.</comment> <depends> <field id="yesno-depends">1</field> </depends> </field> <field id="text_test" translate="label comment" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Text box</label> <comment>How many links to display at once.</comment> </field> <field id="weekend" translate="label" type="multiselect" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Weekend Days</label> <source_model>Magento\Config\Model\Config\Source\Locale\Weekdays</source_model> <can_be_empty>1</can_be_empty> </field> <field id="country_id" translate="label" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Country</label> <source_model>Magento\Directory\Model\Config\Source\Country</source_model> <frontend_class>countries</frontend_class> <can_be_empty>1</can_be_empty> </field> <field id="imgupload" type="image" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1"> <label></label> <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model> <upload_dir config="system/filesystem/media" scope_info="1">catalog/product/custom_image</upload_dir> <base_url type="media" scope_info="1">catalog/product/custom_image</base_url> </field> <field id="specificerrmsg" translate="label" type="textarea" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Displayed Error Message</label> </field> <field id="time" translate="label" type="time" sortOrder="90" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Start Time</label> </field> </group> <group id="cron" translate="label comment" type="text" sortOrder="15" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Cron (Scheduled Tasks) - all the times are in minutes</label> <comment>For correct URLs generated during cron runs please make sure that Web > Secure and Unsecure Base URLs are explicitly set.</comment> <group id="template" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Cron configuration options for group: </label> <field id="schedule_generate_every" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Generate Schedules Every</label> </field> <field id="schedule_ahead_for" translate="label" type="text" sortOrder="20" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Schedule Ahead for</label> </field> <field id="schedule_lifetime" translate="label" type="text" sortOrder="30" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Missed if Not Run Within</label> </field> <field id="history_cleanup_every" translate="label" type="text" sortOrder="40" showInDefault="1" showInWebsite="0" showInStore="0"> <label>History Cleanup Every</label> </field> <field id="history_success_lifetime" translate="label" type="text" sortOrder="50" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Success History Lifetime</label> </field> <field id="history_failure_lifetime" translate="label" type="text" sortOrder="60" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Failure History Lifetime</label> </field> <field id="use_separate_process" translate="label" type="select" sortOrder="70" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Use Separate Process</label> <source_model>Magento\Config\Model\Config\Source\Yesno</source_model> </field> </group> </group> </section> </system> </config> |
Here is an image of Magento 2 admin.
Following images show details: fields by field type.
Text field
1 2 3 4 5 |
<field id="text_test_field" translate="label comment" type="text" sortOrder="40" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Text box</label> <comment><![CDATA[Your field comment.]]</comment> </field> |
Textarea field
1 2 3 4 |
<field id="specificerrmsg" translate="label" type="textarea" sortOrder="80" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Displayed Error Message</label> </field> |
Yes/No dropdown field
1 2 3 4 5 6 7 |
<field id="yesno" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Yes/No field</label> <source_model>Magento\Config\Model\Config\Source\Yesno</source_model> <comment> <![CDATA[Comment test!]]></comment> </field> |
Enable/Disable dropdown field
1 2 3 4 5 |
<field id="search_terms" translate="label" type="select" sortOrder="11" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Popular Search Terms</label> <source_model>Magento\Config\Model\Config\Source\Enabledisable</source_model> </field> |
Depend field – you can add ‘depends’ tag on numerous individual fields that need to depend on other fields.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<field id="yesno-depends" translate="label" type="select" sortOrder="20" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Yes/No field (depends option)</label> <source_model>Magento\Config\Model\Config\Source\Yesno</source_model> <comment><![CDATA[Yes showing text box.!]]></comment> </field> <field id="text_text_depends" translate="label comment" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Text box depends</label> <comment>Your field comment.</comment> <depends> <field id="yesno-depends">1</field> </depends> </field> |
Multi-select field
1 2 3 4 5 6 7 |
<field id="weekend" translate="label" type="multiselect" sortOrder="50" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Weekend Days</label> <!-- Source model for countries list. For custom list you need to use your own source model --> <source_model>Magento\Config\Model\Config\Source\Locale\Weekdays</source_model> <can_be_empty>1</can_be_empty> </field> |
Select field
1 2 3 4 5 6 7 8 9 |
<field id="country_id" translate="label" type="select" sortOrder="60" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Country</label> <!-- Source model for countries list. For custom list you need to use your own source model --> <source_model>Magento\Directory\Model\Config\Source\Country</source_model> <!-- Frontend class you can to add if you want to add custom css class on some field into admin theme--> <frontend_class>countries</frontend_class> <can_be_empty>1</can_be_empty> </field> |
Upload image field
1 2 3 4 5 6 |
<field id="imgupload" type="image" sortOrder="70" showInDefault="1" showInWebsite="1" showInStore="1"> <label>Upload image field</label> <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model> <upload_dir config="system/filesystem/media" scope_info="1">catalog/product/custom_image</upload_dir> <base_url type="media" scope_info="1">catalog/product/custom_image</base_url> </field> |
Time field
1 2 3 4 |
<field id="time" translate="label" type="time" sortOrder="90" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Start Time</label> </field> |
Group area within group area
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<group id="cron" translate="label comment" type="text" sortOrder="15" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Cron (Scheduled Tasks) - all the times are in minutes</label> <comment>For correct URLs generated during cron runs please make sure that Web > Secure and Unsecure Base URLs are explicitly set.</comment> <group id="template" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Cron configuration options for group: </label> <field id="schedule_generate_every" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="0" showInStore="0"> <label>Generate Schedules Every</label> </field> </group> </group> |
More or less, those are most common fields we use in our modules or theme setting. Hope this helps. Looking forward to any feedback you might have. Enjoy!
What about appending to an already exisiting tab/section/group? It use to be that I would add field to the
general
tab, under thegeneral
section in thestore_information
group. I can’t seem to get that to work now in Magento 2. Know who to handle appends as you could in Magento 1.x.x?n/m there.. turns out the only reason the append was failing had to do something with
s and them freaking out. I can’t get any of them to show so something else was the issue, but it’s sort out on the appending part. Appending is just as it was, call the area and defined the override as before
Hi Jeremy,
Sorry for late answer. Here is example how you can show add your configuration within existing tabs of store configuration.
Try to use following code.
I’ve added group within General -> General -> Cookiecode Test
See image how it looks: https://goo.gl/p9GV9o
Hope it helps.
Thanks for such a great tutorial.
Very helpful.
I have a query, I want to list out all email template in dropdown, please, may admin reply me source model for that ??
Thanks.
I am in hurry please reply little bit fast.
source model for both
customer email template
Admin email template