2

I would like to know if anyone knows how can I make the "My account" menu section (of the shopper page) responsive in Mobile version? Such as I have tabs block per line like "Account Dashboard", "Account Information", "Address Book", "My Orders", etc... in which whenever I click on any of those tabs blocks it discloses the contents and when I click it again it hides the content.

I guess I have to modify those following files:

app/design/frontend/base/default/template/customer/account/navigation.phtml

<div class="block block-account">
    <div class="block-title">
        <strong><span><?php echo $this->__('My Account'); ?></span></strong>
    </div>
    <div class="block-content">
        <ul>
            <?php $_links = $this->getLinks(); ?>
            <?php $_index = 1; ?>
            <?php $_count = count($_links); ?>
            <?php foreach ($_links as $_link): ?>
                <?php $_last = ($_index++ >= $_count); ?>
                <?php if ($this->isActive($_link)): ?>
                    <li class="current<?php echo ($_last ? ' last' : '') ?>"><strong><?php echo $_link->getLabel() ?></strong></li>
                <?php else: ?>
                    <li<?php echo ($_last ? ' class="last"' : '') ?>><a href="<?php echo $_link->getUrl() ?>"><?php echo $_link->getLabel() ?></a></li>
                <?php endif; ?>
            <?php endforeach; ?>
        </ul>
    </div>
</div>

app/code/core/Mage/Customer/Block/Account/Navigation.php

class Mage_Customer_Block_Account_Navigation extends Mage_Core_Block_Template
{
    protected $_links = array();
    protected $_activeLink = false;
    public function addLink($name, $path, $label, $urlParams=array())
    {
        $this->_links[$name] = new Varien_Object(array(
            'name' => $name,
            'path' => $path,
            'label' => $label,
            'url' => $this->getUrl($path, $urlParams),
        ));
        return $this;
    }
    public function setActive($path)
    {
        $this->_activeLink = $this->_completePath($path);
        return $this;
    }
    public function getLinks()
    {
        return $this->_links;
    }
    public function isActive($link)
    {
        if (empty($this->_activeLink)) {
            $this->_activeLink = $this->getAction()->getFullActionName('/');
        }
        if ($this->_completePath($link->getPath()) == $this->_activeLink) {
            return true;
        }
        return false;
    }
    protected function _completePath($path)
    {
        $path = rtrim($path, '/');
        switch (sizeof(explode('/', $path))) {
            case 1:
                $path .= '/index';
                // no break

            case 2:
                $path .= '/index';
        }
        return $path;
    }
}

Thank you for your help/responses.

1

Shouldn't you be using css to do this? Look for the css files in skin/frontend/default/default/css or the css files of whatever theme you are using and google the use of @media to create different styles dependent on the screen size of the device being used.

  • Css will help me to re-size or change the position of some fields. What I am looking for is having a Menu tab so that when you click on "Account Information" the relevant information will be displayed below that section and when i click back it will hide this section. – Joel Jul 4 '15 at 7:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.