Store hours and working days in Magento

ALL WE NEED TO KNOW AT THE BEGINNING

Sometimes you want to tell your customers that your shop is available only several hours a day. Don’t you? In many cases, your team works only few days a week, but your online store is working all the time. You’re not being able to find and adjust this settings? By default, Magento doesn’t share these two elements in admin panel, although there is a simple solution for Magento to cover your needs.

Here, I will show you how to write a module, which you add to inputs to section ‘General’ in an admin area. The place where we want to locate our solution is:
System > Configuration > General > Store Information

LET’S START WITH THE XML

At first we need to create new module. Our extension will be named ‘Store Information’. So, the first file that we have to create is file ‘config.xml’, which will contain all important configuration of our module. Simply create a file named config.xml in app/code/local/Light4website/StoreInformation with the code below:

<config>
    <modules>
        <light4website_storeinformation>
            <version>0.1.0</version>
        </light4website_storeinformation>
    </modules>
    <global>
        <models>
            <light4website_storeinformation>
                <class>Light4website_StoreInformation_Model</class>
                <resourcemodel>light4website_storeinformation_resource</resourcemodel>
            </light4website_storeinformation>
            <light4website_storeinformation_resource>
                <class>Light4website_StoreInformation_Model_Resource</class>
            </light4website_storeinformation_resource>
        </models>
        <blocks>
            <light4website_storeinformation>
                <class>Light4website_StoreInformation_Block</class>
            </light4website_storeinformation>
        </blocks>
        <helpers>
            <light4website_storeinformation>
                <class>Light4website_StoreInformation_Helper</class>
            </light4website_storeinformation>
        </helpers>
    </global>
</config>

In this file, we define all elements of our module: models, blocks and helpers. Next important thing we need to do is to create file: Light4webstite_StoreInformation.xml in app/etc/modules

<config>
    <modules>
        <light4website_storeinformation>
            <active>true</active>
            <codepool>local</codepool>
        </light4website_storeinformation>
    </modules>
</config>

File Light4website_StoreInformation.xml is important for our module, because we inform Magento where is our extension and what status it has: active or inactive.

We will need one more xml file. It will be system.xml in location: app/code/local/Light4website/StoreInformation/etc/ . In this xml file we prepare all inputs and declare where they should be placed. We need two inputs: first for store hours and second for working days. These inputs will be shown in admin area:
System > Configuration > General > Store Information.

Our code will look like this:

<config>
    <sections>
        <general>
            <groups>
                <store_information translate="label">
                    <fields>
                        <store_hours translate="label">
                            <label>Store Hours</label>
                            <frontend_type>text</frontend_type>
                            <sort_order>16</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                            <comment>Set store opening hours</comment>
                        </store_hours>
                        <working_days translate="label">
                            <label>Working Days</label>
                            <frontend_type>text</frontend_type>
                            <sort_order>17</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                            <comment>Select days when store is open</comment>
                        </working_days>
                    </fields>
                </store_information>
            </groups>
        </general>
    </sections>
</config>

In code above, we also declare the position of our new elements and comments. They will show up below the inputs.

One more thing we need to do is to build a helper for our extension. So in location app/code/local/Light4website/StoreInformation/Helper we add a file ‘Data.php’ with the code:

/**
* Light4website
*
* @copyright Copyright(c) 2015 light4website (http://light4website.com)
* @license http://light4website.com/license/license.txt
*/
 
 
class Light4website_StoreInformation_Helper_Data extends Mage_Core_Helper_Abstract {
 
 
}

After creating these few moves, we can log into admin panel and in section ‘Store Information’ in System > Configuration > General we will see what we’ve done. Every change in these inputs you can see in your project database.

FROM DATABASE TO FRONTEND

In this section we will show how display in what hours and on what days our team is working. At first we need to take information from inputs that we’ve created before. They’re in database. Model will help us to get this information . Let’s create a file ‘Settings.php’ in location: app/code/local/Light4website/StoreInformation/Model/ with code:

/**
* Light4website
*
* @copyright Copyright(c) 2015 light4website (http://light4website.com)
* @license http://light4website.com/license/license.txt
*/
 
class Light4website_StoreInformation_Model_Settings extends Mage_Core_Model_Abstract {
/**
* return text with store opening hours from admin > system > configuration > general > store information
*
* @return mixed
*/
 
public function getStoreHours()
{
return Mage::getStoreConfig('general/store_information/store_hours');
}
 
/**
* return days set as working days in admin > system > configuration > general > store information
*
* @return mixed
*/
 
public function getWorkingDays()
{
return Mage::getStoreConfig('general/store_information/working_days');
}
}

To display it in frontend we need to prepare Block. Lets code then. Create file: View.php in location:

app/code/local/Light4website/StoreInformation/Block and add this code to it:

class Light4website_StoreInformation_Block_View extends Mage_Core_Block_Template
{
/**
* return StoreInformation Settings Model
*
* @return Light4website_StoreInformation_Model_Settings
*/
 
public function getSettingsModel()
{
return Mage::getModel('light4website_storeinformation/settings');
}
 
/**
* returns Store Opening Hours from settings
*
* @return mixed
*/
 
public function getStoreHours()
{
return $this->getSettingsModel()->getStoreHours();
}
 
/**
* return days from working days
*
* @return mixed
*/
 
public function getSelectedDays()
{
return $this->getSettingsModel()->getWorkingDays();
}
}

In this step we declared that our xml file for frontend changes is in folder light4website in our theme layout files. At this moment we need to add file ‘storeinformation.xml’ to app/design/frontend/your_package/your_theme/layout/light4website/.

FRONTEND TEMPLATES

In file ‘storeinformation.xml’ we will declare where our store hours and working days will be displayed. For now, we still don’t have elements to display, but the good information is that we are really close to do it. To display something in Magento we need to build phtml file.

Lets do it in location: app/design/frontend/your_package/your_theme/template/light4website/storeinformation/. I named my template file as view.phtml. Add code to it:

/**
* @var $this Light4website_StoreInformation_Block_View
*/

<div>

<div>

<h3><!--?php echo $this--->__('Contact'); ?></h3>

    </div>

    <!--?php if($this--->getSelectedDays()) : ?>
    
<div>
        <span><!--?php echo $this--->__('Working Days: '); ?></span><span><!--?php echo $this--->getSelectedDays(); ?></span>
    </div>

    <!--?php endif; ?-->
    <!--?php if($this--->getStoreHours()) : ?>
    
<div>
        <span><!--?php echo $this--->__('Working Hours: '); ?></span><span><!--?php echo $this--->getStoreHours(); ?></span>
    </div>

    <!--?php endif; ?-->
</div>

We’ve done a great job! . Now, we need to consider where we want to display the work. I think the best place to do it is the footer section. So, let’s go back to file ‘storeinformation.xml’ and add there:

<layout version="0.1.0">
    <default>
        <reference name="footer">
            <block type="light4website_storeinformation/view" template="light4website/storeinformation/view.phtml" name="more.storeinformation">
        </block></reference>
    </default>
</layout>

Last thing to do, is to inform Magento where our work should be display in frontend. In ‘storeinformation.xml’ we’ve added our block reference to footer, so we need to go to file: app/design/frontend/your_package/your_theme/template/page/html/footer.phtml and add this code:

echo $this->getChildHtml('more.storeinformations');

FINISH WITH THE STYLE

We’ve just created a module and it will be displayed on frontend. Last part of our work is to add a bundle of css. To do it go back to ‘storeinformation.xml’ in layout folder. After tag <default> and before tag <reference name=”footer”= we’ll add this code:

<reference name="head">
    <action method="addItem">
        <type>skin_css</type>
        <name>css/light4website/storeinformation.css</name>
    </action>
</reference>

In this code we declared where is our css file. Now we need to add file ‘storeinformation.css’ (or less if you work on it) to location: skin/frontend/your_package/your_theme/css/light4website/.

I can write a lot about styling these elements. But I believe we’ve already done an excellent job. Haven’t we?