Account Page Navigation

Hopefully this will help someone. I really hate the way cs-cart displays the account pages, so I modified it to keep everything together and behave like tabs. My site probably won’t be live for a while so I’ll have to post a screenshot instead of the actual link (please ignore the ugly mini-cart on the side, it is not done yet). I am running the community edition to mess with modding until I go live and buy the professional edition, so my account page doesn’t have the amount of links it will once done (like reward points, etc).



[list=1]



[]Create a template for the navigation. I just used blocks/my_account.tpl since I am not going to use that anywhere else on my site, but you can create a separate template for it if you still want to keep the default one for something else. If you use blocks/my_account.tpl, make sure to back it up first, otherwise copy what is in my_account.tpl into your new template – you’ll want to name it my_account_nav or something similar.



[
]Delete everything that is not part of the navigation. That is everything after the (this is the order tracking and doesn’t really work as part of the navigation) and three lines up top that says to display the user name. You’ll also want to remove

  • . I also took out the sign out link (since it is at the top of my page) after that delim, but you can leave if if you want. I left the sign-in and register links there to display if not logged in, since the profile/update template is used for registration. Just make sure everything is a list item.



    []I renamed the class of the list from “arrows-list” to “page_nav-list” so I could control it specifically (I also use the format for my pages, but you can call it “account-list” or something like that). If you just want the normal arrows list on the side you can leave it.



    [
    ]If you want the navigation links to change when active, change the class of each list item to something unique (I used “profile_link” for profile detail, “download_link” for downloads, etc). Since some things are called in through the hooks, you will either want to remove the hook and just add them in manually, or make sure to change the class of each linked item in the hooks. If you are not using my_account.tpl and you are using that somewhere else in your site, just add them manually, or you will be changing the styling for those links there too.



    []You’ll want to add this template to every page that is part of your account menu. Use customization mode to help find the template for each page (views/profiles/update.tpl, views/orders/search.tpl, etc). You’ll simply want to put {include file=“blocks/[your navigation template].tpl”} where you want your navigation. I wrapped mine in a div with the class “page_nav”, and since my links will change when the page is active, I gave each page a separate id (like “ac_nav_downloads” for downloads, etc.)



    [
    ]I wrapped the rest of each page in a div with id “account_content.” I also changed the capture at the bottom of each profile page to {$user_info.firstname}'s {$lang.account} since that is the title that I wanted in my mainbox. I then just added a header in each page inside the content div I created earlier with the title of the page itself (obviously, that is optional and depends on your page).



    []All that is left is styling. I put my links on the side, but you could just as easily put them above the content or have them normal looking links or whatever. For my page, that involved putting a big margin on the right of my “account_content” div, and giving the page navigation absolute positioning. I also styled each link (with .page_nav_list a).



    [
    ]If you are having your links change when active, you will want to create a style for the active links. These will look something like this “#(id for the unique div you wrapped you nav in in each page template) .(class of the navigation list item for that page) a”. For example, I have #ac_nav_downloads .downloads_link a, etc. You’ll want to do this for each page.



    [/list]



    I think that is it. I apologize if that is hard to understand, I did this a while ago so the process isn't fresh in my mind (and sorry for any typos – I tend to never notice them). I did the same thing for my pages (I have 2 main categories, and a bunch of pages in each), but that is a little more of a pain since I had to create separate unique html blocks for each page to get each link to highlight when active. I did that before I really figured out what I was doing so there might be a better way. I'll explain how I did that if someone wants. I’ll try to answer any questions too.



    [attachment=4677:accountscreenshot.png]

    accountscreenshot.png