1. Theme options module

we will learn how to create a theme admin panel with the same module structure, which allows a store manager to customize some important theme parts. The powerful admin theme will include options in a dedicated section in the Magento system configuration section in the backend.

Now that we have a full working theme, we are going to create a powerful admin theme options panel. Through this awesome panel, the store manager will have the option of configuring some settings of the theme without having programming knowledge.

To create the admin theme options panel, we need to develop a custom Magento module that will have the scope of creating options in the backend, which will make changes in the frontend.The following are the topics that will be covered in this chapter:

•Creating the theme options module
•Overviewing the System.xml fields
•Creating the advanced admin options panel
•Interfacing the admin panel with the theme
•Advanced options features
•Creating a visual color picker in admin
•Defining default values for options fields
•A quick theme option panel recap

Creating the theme options module:
We can use the same namespace used for the Widget module, BookStore,and create the module inside that folder. We are going to name it ThemeOptions.Let’s start creating the basic module. The following is the folder structure:

app
- code
	- local
		- BookStore
			- ThemeOptions
			- etc
			- Helper
			- Model
- etc

Activating the module
To activate the module, we need to do the following three simple operations:

1.Create the BookStore_ThemeOptions.xml file in app/etc/modules/with the following
code to activate the module:

<?xml version="1.0"?>
	<config>
		<modules>
			<BookStore_ThemeOptions>
				<active>true</active>
				<codePool>local</codePool>
				<depends>
					<Mage_Cms/>
				</depends>
			</BookStore_ThemeOptions>
		</modules>
	</config>

2.Then, Disable or Refresh the cache. To do this, go to admin and open System | Cache Management. Remember that once you create a theme,a module, and so on with Magento and you find some visualization issues or 404 errors, first check if the cache is disabled; if so, refresh and delete all the cache.

3.Then, in the admin panel, go to the System | Configuration | Advanced tab on the left-hand side and check if the module is present and enabled as shown in the following screenshot:

Creating the module helper
To make the module work correctly, you need to create the module helper file. This file is needed to make the system of translations work correctly. In fact, if you don’t create this file, you will get an error on the screen. So, let’s create the Data.php file in
app/code/local/BookStore/ThemeOptions/Helper/ with the following code:

<?php
/**
* BookStore Theme Options
*/
class BookStore_Themeoptions_Helper_Data extends Mage_Core_Helper_Abstract{
}

Creating the configuration file config.xml
The configuration file is very important for a Magento module, and in our case, it will show the tab in System | Configuration. In order to use Magento’s configuration section, you need to define models’ and helpers’ locations by performing the following steps:

1.Let’s create the config.xml file in app/code/local/BookStore/ThemeOptions/etc/ with the following basic code structure:

<config>
		<modules>
			<BookStore_ThemeOptions>
				<version>0.0.1</version>
			</BookStore_ThemeOptions>
		</modules>
</config>

2.Then, inside config, you need to define models and helpers locations as follows:

<!-- define models and helpers -->
	<global>
		<models>
			<themeoptions>
				<class>BookStore_ThemeOptions_Model</class>
			</themeoptions>
		</models>
		<helpers>
			<themeoptions>
				<class>BookStore_ThemeOptions_Helper</class>
			</themeoptions>
		</helpers>
	</global>

3.Finally, in order to avoid the “permission denied” problem, you need to always add the following code inside the

<config>and </config> tags:
	<!-- in order to avoid "404 and Permission Denied -->
		<adminhtml>
			<acl>
				<resources>
					<all>
						<title>Allow Everything</title>
					</all>
					<admin>
						<children>
							<system>
								<children>
									<config>
										<children>
											<bookstore>
												<title>Bookstore - All</title>
											</bookstore>
										</children>
									</config>
								</children>
							</system>
						</children>
					</admin>
				</resources>
			</acl>
		</adminhtml>	

The following is the full code of the config.xml file:

<?xml version="1.0" encoding="UTF-8"?>
	<config>
		<modules>
			<BookStore_ThemeOptions>
				<version>0.0.1</version>
			</BookStore_ThemeOptions>
		</modules>
		<!-- define models and helpers -->
		<global>
			<models>
				<themeoptions>
					<class>BookStore_ThemeOptions_Model</class>
				</themeoptions>
			</models>
			<helpers>
				<themeoptions>
					<class>BookStore_ThemeOptions_Helper</class>
				</themeoptions>
			</helpers>
		</global>
		<!-- in order to avoid "404 and Permission Denied -->
		<adminhtml>
			<acl>
				<resources>
					<all>
						<title>Allow Everything</title>
					</all>
					<admin>
						<children>
							<system>
								<children>
									<config>
										<children>
											<bookstore>
												<title>Bookstore - All</title>
											</bookstore>
										</children>
									</config>
								</children>
							</system>
						</children>
					</admin>
				</resources>
			</acl>
		</adminhtml>
	</config>

Creating the options file system.xml
Now we need to create a file that will manage all the options of our theme by performing the following steps:
1.Create the file system.xml in app/code/local/BookStore/ThemeOptions/etc/ with the following basic code:

<config>
	<tabs>
	. . .
	</tabs>
	<sections>
	. . .
	</sections>
</config>

2.Inside the <tabs></tabs> tags, you need to define the tab that will be displayed on the left in system configuration. In our case, we create the Bookstore tab and place it at the very top of the left sidebar with <sort_order>000</sort_order> as follows:

<bookstore translate="label">
	<label>BookStore Theme</label>
	<sort_order>000</sort_order>
</bookstore>

3.And now the fun part! Let’s create the options. Inside the <sections></section> tags, insert the following code that will define the section of our module’s tab:

<bookstore translate="label">
	<label>Theme Options</label>
	<tab>bookstore</tab>
	<frontend_type>text</frontend_type>
	<sort_order>1000</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
	<groups>
				
	</groups>
</bookstore>

4.Now, to make the module appear in the admin, we need to insert at least one option. All the options are located inside the <groups></groups> tags that we defined in the previous step. Here, all the options must be organized in subgroups that you can name as you prefer. In this case, we are going to create a test field inside the group general with the following code:

<general translate="label" module="themeoptions">
	<label>Test Group</label>
	<frontend_type>text</frontend_type>
	<sort_order>01</sort_order>
	<show_in_default>1</show_in_default>
	<show_in_website>1</show_in_website>
	<show_in_store>1</show_in_store>
	<fields>
		<text_field translate="label">
			<label>Input Text Field</label>
			<frontend_type>text</frontend_type>
			<sort_order>00</sort_order>
			<show_in_default>1</show_in_default>
			<show_in_website>1</show_in_website>
			<show_in_store>1</show_in_store>
		</text_field>
	</fields>
</general>	

5.Now, go to System | Configuration in admin, and you should see the new BOOKSTORE THEME tab in the left-hand side column

If you want to add the section inside one of the present tabs, you need to indicate the tab inside the <tab /tabs> tag. Let’s suppose that you want to add a section Theme Options inside the General settings tab. To display the new section there, you need to define the general tab in the following way: <tab>general</tab>

Only for your reference, the following is the full code of the system.xml file that we have created:

<config>
	<tabs>
		<bookstore translate="label">
			<label>BookStore Theme</label>
			<sort_order>000</sort_order>
		</bookstore>
	</tabs>
	<sections>
		<bookstore translate="label">
			<label>Theme Options</label>
			<tab>bookstore</tab>
			<frontend_type>text</frontend_type>
			<sort_order>1000</sort_order>
			<show_in_default>1</show_in_default>
			<show_in_website>1</show_in_website>
			<show_in_store>1</show_in_store>
			<groups>
				<general translate="label" module="themeoptions">
					<label>Test Group</label>
					<frontend_type>text</frontend_type>
					<sort_order>01</sort_order>
					<show_in_default>1</show_in_default>
					<show_in_website>1</show_in_website>
					<show_in_store>1</show_in_store>
					<fields>
						<text_field translate="label">
							<label>Input Text Field</label>
							<frontend_type>text</frontend_type>
							<sort_order>00</sort_order>
							<show_in_default>1</show_in_default>
							<show_in_website>1</show_in_website>
							<show_in_store>1</show_in_store>
						</text_field>
					</fields>
				</general>
			</groups>
		</bookstore>
	</sections>
</config>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s