Adding Custom Page to Customer Account Dashboard

By on

Magento is the most popular open source cms platform in the world. This the most used for business ecommerce solutions to selling product online, in backend there have a lots functionally and tricky to use for the first time.

As a magento developer we need to extend the functionally of Megento, so we create custom magento modules.

In this tutorial, I would like to share our simple magento modules that Adding Custom Page to the Customer Account Dashboard in step by step. This module works in version Magento Community Edition 1.7.0.2

The goal of the tutorial is to create a magento modules in standard way without touching the core files so we need to override the controller core, block and temples to local folder directory, so we can update the Magento in the future.

However if Magento Community release the new version 1.8.x and up, I will update this post and test the compatibility of the module. So let’s start.

Preview

adding-custom-page-to-the-customer-account-dashboard

In this screenshot of finish custom module, as you see in screenshot we added the custom link and page in customer menu.

Step 1: Activating The Module

\app\etc\modules\Istockphp_Customerpage.xml

<?xml version="1.0" encoding="utf-8"?>
<!--step 1: registering the module-->
<config>
    <modules>
        <Istockphp_Customerpage>
            <active>true</active>
            <codePool>local</codePool>
        </Istockphp_Customerpage>
    </modules>
</config>

The first step is to inform the Magento that our module exists, by creating a XML file in \app\etc\modules\ directory.

Step 2: Config File

\app\code\local\Istockphp\Customerpage\etc\config.xml

<?xml version="1.0"?>
<config>
	<modules>
		<Istockphp_Customerpage>
		  <version>0.1.0</version>
		</Istockphp_Customerpage>
	</modules>

	<global>
		<blocks> <!--Block folder-->
			<istockphp>
				<class>Istockphp_Customerpage_Block</class>
			</istockphp>
		</blocks>
	</global>

	<frontend>
		<routers>
			<istockphp>
				<use>standard</use>
				<args>
					<module>Istockphp_Customerpage</module>
					<frontName>custompage</frontName>
				</args>
			</istockphp>

			<customer>
				<args>
					<modules>
						<!--name / before: change existing -->
						<istockphp before="Mage_Customer">Istockphp_Customerpage</istockphp>
					</modules>
				</args>
			</customer>
		</routers>

		<layout>
		  <updates>
			<istockphp>
                          <!--app\design\frontend\default\default\layout\customer\custompage.xml-->
			  <file>customer/custompage.xml</file>
			</istockphp>
		  </updates>
		</layout>

	</frontend>
 </config>

In the config.xml file we reference the Block directory and assigning a router for frontend and overriding the Mage_Customer in the core and lastly we update the layout for the controller for locating the phtml file.

Step 3: Controller File

\app\code\local\Istockphp\Customerpage\controllers\AccountpageController.php

<?php

class Istockphp_Customerpage_AccountpageController extends Mage_Core_Controller_Front_Action {

    protected function _getSession() {
        return Mage::getSingleton('customer/session');
    }

    public function preDispatch() {
        parent::preDispatch();
            if (!Mage::getSingleton('customer/session')->authenticate($this)) {
                $this->setFlag('', 'no-dispatch', true);
        }
    }

    // http://localhost/istockphp_magento/custompage/accountpage/index
    public function indexAction() { // landing page
        $this->loadLayout();
        $this->renderLayout();

    }

}

In the controller file, we override the front routes action and the method indexAction() is the landing page of the custom customer page in front end.

Step 4: Block

\app\code\local\Istockphp\Customerpage\Block\Customer.php

<?php

class Istockphp_Customerpage_Block_Customer extends Mage_Customer_Block_Account_Dashboard  {

}

This block class overrides the Customer Account Dashboard, we need to add this for enabling to the page.

Step 5: Adding link in Customer Dashboard

\app\design\frontend\default\default\layout\local.xml

<layout version="0.1.0">
    <!--add link to the customer panel-->
    <customer_account>
        <reference name="customer_account_navigation">
            <action method="addLink" translate="label" module="customer">
                <name>custom page</name>
                <!--Customer Block/AccountpageController.php-->
                <path>customer/accountpage/</path>
                <label>Custom Page</label>
            </action>
        </reference>
    </customer_account>

</layout>

In the local.xml file we can add and remove custom blocks, so we add custom link in the customer dashboard.

Step 6: Update Layout

\app\design\frontend\default\default\layout\customer\custompage.xml

<layout version="0.1.0">
     <!--Istockphp\Customerpage\controllers\AccountpageController.php-->
    <customer_accountpage_index translate="label">
        <label>Custom Page</label>
            <reference name="head">
                    <action method="setTitle"><title>Custom Page</title></action> <!--Page Title-->
            </reference>
        <!-- Mage_Customer -->
        <update handle="customer_account"/>
        <reference name="my.account.wrapper">
            <!--name in config file / Istockphp\Customerpage\Block\Customer.php-->
            <block type="istockphp/customer" name="istockphp" before="-" template="customer/custom_customer_page.phtml"/>
        </reference>
    </customer_accountpage_index>
</layout>

This custompage.xml file we included to config.xml in the update layout tag. This file we set the page title and hook the phtml template file.

Step 7: Template File

\app\design\frontend\default\default\template\customer\custom_customer_page.phtml

<div class="page-title">
    <h1><?php echo $this->__('Customer Custom Page') ?></h1>
</div>
<?php echo $this->getMessagesBlock()->getGroupedHtml() ?>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero
    sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
    Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed,
    commodo vitae, ornare sit amet, wisi.
</p>
<p>
    Aenean fermentum, elit eget tincidunt condimentum, eros
    ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis.
    Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna
    eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus,
    metus
</p>
<div class="buttons-set">
    <p class="back-link"><a href="<?php echo $this->getUrl('customer/account/') ?>"><small>&laquo; </small><?php echo $this->__('Back') ?></a></p>
</div>
<script type="text/javascript">
</script>

Lastly the custom template for the customer dashboard. This file called by custompage.xml, and u can edit the content of this file.

Step 8: Done

And were done we creating our own custom magento extensions, hopefully you’ll make sense this tutorial, so can extend the functionally of this module. If you’re in trouble feel free to download the work files (Download Source). Let’s have a look at what we’ve achieved:

  • Creating a module without touching the core files.
  • Can be able to update new version.

If you enjoyed this article, please consider sharing it!

20 comments

  1. Hi,

    I am trying to create a custom controller using this article but I always got fatal error like this:-

    I am also apply your given patch but got same result…

    a:5:{i:0;s:51:”Controller file was loaded but class does not exist”;i:1;s:953:”#0 /var/www/magento/app/code/core/Mage/Core/Controller/Varien/Router/Standard.php(326): Mage::exception(‘Mage_Core’, ‘Controller file…’)
    #1 /var/www/magento/app/code/core/Mage/Core/Controller/Varien/Router/Standard.php(293): Mage_Core_Controller_Varien_Router_Standard->_includeControllerClass(‘/var/www/magent…’, ‘Jgs_Customer_Ac…’)
    #2 /var/www/magento/app/code/core/Mage/Core/Controller/Varien/Router/Standard.php(196): Mage_Core_Controller_Varien_Router_Standard->_validateControllerClassName(‘Jgs_Customer’, ‘accountpage’)
    #3 /var/www/magento/app/code/core/Mage/Core/Controller/Varien/Front.php(176): Mage_Core_Controller_Varien_Router_Standard->match(Object(Mage_Core_Controller_Request_Http))
    #4 /var/www/magento/app/code/core/Mage/Core/Model/App.php(354): Mage_Core_Controller_Varien_Front->dispatch()
    #5 /var/www/magento/app/Mage.php(683): Mage_Core_Model_App->run(Array)
    #6 /var/www/magento/index.php(87): Mage::run(”, ‘store’)
    #7 {main}”;s:3:”url”;s:40:”/magento/index.php/customer/accountpage/”;s:11:”script_name”;s:18:”/magento/index.php”;s:4:”skin”;s:7:”default”;}

    • hello, what version of magento do you have? i tried this in ver 1.7.2 only. i didn’t try this in lower version.

      if your version is 1.7.2, please try follow the tutorial, don’t copy the file, as try :) i believe i should work.

  2. Hello, first, its very useful extension, thank you for sharing.
    second, one question (meaby two ;), how can I put on the custom page some of my extension? and what have to do, to see this page, just after opening “My Account”, before last order etc.

    Thank you
    Best Regards
    Tomasz

  3. I’ve looked everywhere for a simple way to do exactly this and have found countless page discussing how page/template/block/handler/etc. work, but not everything in one place.

    This is a great post and tutorial.

    If you install and run the work files not only will you get a great sense of how magento works you’ll save a lot, and I mean a lot, of time pulling you hair out or reading countless tutorials.

    To whomever wrote this, thank you. Seriously, this was a godsend.

  4. Thanks for the great article.

    However, although I followed all steps carefully and refreshed my Magento cache, but I still can’t get that link to show up on my account page! What could possibly be wrong?

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>