custom-page-customer-account-dashboard

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!

  • Saurabh

    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”;}

    • http://istockphp.com admin

      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.

  • Tomasz

    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

  • asra

    Gr8 tutorial, but i am unable to understand how to change the label Custom Page in My account left Navigation ??

  • justsomeguy

    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.

  • ChefMaha

    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?

    • axlmulat

      hi ChefMaha, just download this complete files

      http://istockphp.com/snippets/customer-dashboard-custom-page.zip

      1st. disable all cache types, and upload the files
      2nd. flush the cache, and check if its appear the link in the customer dashboard.

      • ChefMaha

        Thank you so much for your prompt reply. Thank God it worked! :D :D

        • axlmulat

          hi you can override the codes in your custom temple folder. welcome :)

          • ChefMaha

            This local.xml is inside my custom template folder. That’s the file I’m trying to edit. How do you suggest I arrange the codes exactly? (meaning where does my original code go and where does the custom page go?)

            Thanks

      • ChefMaha

        Well… Maybe not :/

        At least I figured out the source of the problem! The thing is my local.xml already contains the following code:

        So, when I attempt to add in the custom page code, the link disappears. However, if I remove all the code in the file and just add the custom page code, the link appears again!

        How can I add the custom page code and still have my original code in there?

        Thanks

  • http://www.ibrahimmumcu.com İbrahim Mumcu

    How can I change link? In this example link looks like “customer/accountpage”. I want to change “accountpage”

    • http://www.ibrahimmumcu.com İbrahim Mumcu

      And I tried to change “accountpage” in appdesignfrontenddefaultdefaultlayoutlocal.xml file. Nothing happened.

      • axlmulat

        hi, im sorry i forgot to code magento. please study the source files :)

        Regards,

        Axl,

  • Vitaliy

    Great post! please tell, how add grid(for example orders) on this page?

    • axlmulat

      hi, im sorry i forgot to code magento. please study the source files.. …:)

      Regards,

      Axl,

  • Guest

    Great post! please tell, how add grid(for example orders) on this page?

    • axlmulat

      hi, im sorry i forgot to code magento. please study the source files.. :)

      Regards,

      Axl,

  • axlmulat

    hi,, im sorry i forgot to code magento. please study the source files.. :)

    Regards,

    Axl,

  • axlmulat

    Sorry for this post, i forgot to code magento. please study the source files.. :)

    Regards,

    Axl,