How to create a my account drop down link list for PrestaShop v1.6

blog_post_drop_down

In this post we’ll explore how we can achieve a My Account drop down menu with links such as Orders, Personal Information, Addresses and a Sign Out button, instead of clicking on the account name and redirecting  to the my account page.

Before:

before

After:

after

To achieve this we can use Bootstrap’s dropdown functionality and adjusting blockuserinfo module template files to suit our needs. The file responsible for displaying the my account information in the header is: /root/modules/blockuserinfo/nav.tpl and it contains this code by default:

Lines 2 – 6 and 8 – 10 say for logged in customers display a link to the customer account with their firstname, lastname and also a logout button. Lines 11 – 13 say for users which aren’t logged in display a sing in button.

So in our theme we need to override this file by copy and pasting it in /root/themes/default-bootstrap/modules/blockuserinfo/nav.tpl. If you’re using a different theme than the default one make sure to place it in your custom theme. Now open it up and replace the existing code with this one:

Again the code is similar to the previous but now if the customer is logged in we’re displaying a button with their firstname, lastname but when we click on it a drop down will show up containing links to My Account, Order History, Addresses, Personal Information and the Sign Out button. If you want to add extra links to the my account dropdown list simply add new list element to the <ul class=”dropdown-menu” role=”menu”> or you can use the hook $HOOK_USER_INFO to transplant other modules for which you have to create a special template file for this to work.

We used this techique on our own PrestaShop powered store – PremiumPresta and you can test it by signing up and logging in to your account at http://premiumpresta.com/

  • RobertDude

    Awesome!
    How would you edit this, so that the drop-down menu does not show up onClick, but onMouseOver ?
    Thanks

    • Catalin Scaesteanu

      Hey, as far as I know Bootstrap made the decision to use the click event for mobile devices. To enable

Subscribe!