User account details displayed in the website's header for Prestashop users

I am currently using prestashop 8.1.5 with the Megafox theme installed. The issue I am facing is in the header section where user information is displayed as a drop down menu, but unfortunately, the username is not visible when a user is logged in. I have tried to modify the code to only show the username when the user is logged in, as seen in the picture, but I have not been successful so far.

https://i.sstatic.net/BrXGx.png

 <div class="user-info dropdown js-dropdown">
    <span class="user-info-title expand-more _gray-darker" data-toggle="dropdown">
     <span class="account_title">{l s='Account' d='Shop.Theme.Global'}</span>
     {if $logged}
       <span class="register_text"><a href="{$my_account_url}">{l s='Hi, Welcome ' d='Shop.Theme.Global'}</a></span>
     {else}
       <span class="account_text">{l s='Login - Register' d='Shop.Theme.Global'}</span>
     {/if}
  </span>


   <ul class="dropdown-menu-">
{if $logged}
  <li>
     <a
       class="account dropdown-item"
       href="{$urls.pages.my_account}"
       title="{l s='View my customer account' d='Shop.Theme.Customeraccount'}"
       rel="nofollow"
     >
       <span class="">{$customerName}</span>
     </a>
  </li>
   <li>
  <a
       class="logout dropdown-item"
       href="{$urls.actions.logout}"
       rel="nofollow"
     >
       {l s='Logout' d='Shop.Theme.Actions'}
     </a>
  </li>
   {else}
     <li>
  <a
       class="dropdown-item"
href="{$urls.pages.my_account}"
       title="{l s='Log in to your customer account' d='Shop.Theme.Customeraccount'}"
       rel="nofollow"
     >
       <span>{l s='Login' d='Shop.Theme.Actions'}</span>
       
     </a>
  </li>
   <li>
     <a href="{$urls.pages.register}"><span>{l s='Register' d='Shop.Theme.Global'}</span></a>
   </li>
   {/if}
     <li>
       {hook h='displayStWishlistTopLink'}
     </li>
     <li>
       {hook h='displayStCompareTopLink'}
     </li>
</ul>
 </div>

Any assistance on resolving this issue would be greatly appreciated.

I have attempted editing ps_customersing.tpl and removing the welcome message, but the problem persists.

Answer №1

To change the greeting message from "Hi, Welcome" to the customer's name, simply replace line 5 with:

<span class="register_text"><a href="{$my_account_url}">{l s='Hi, Welcome ' d='Shop.Theme.Global'}</a></span>

to

<span class="register_text"><a href="{$my_account_url}">{$customerName}</a></span>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discovering Characters in String using jQuery and Implementing a Personalized Class

Update: To achieve the desired typography, I will need to implement some creative jquery / css techniques. The first step is to create a class called .underlined which will allow me to have complete control over the underline by setting a background imag ...

Tips for adjusting the color of a link in the Navbar after being clicked

Upon clicking a link in the Navbar, I want to change its color (Link A) and have it return to default if I navigate to another link (Link B). links.forEach( a=>{ //I want all other links to revert back to default color a.onclick = () => { ...

Bootstrap v4 navbar media query

Recently, I've encountered a problem with one of my projects. The mobile layout is not working properly on different pages of the same web application. When inspecting any page on the website IndianStandups using Chrome's inspector tools and swi ...

"Which is better for maximizing the efficiency of an image grid: CSS or Jquery? What are the key

As a UX Designer looking to enhance my coding skills, I must admit my code may not be perfect. Please bear with me as I navigate through this process. I am in the process of revamping my portfolio website. The original seamless grid was created using a Ma ...

Adjusting my navbar to dynamically resize with the changing window dimensions

Seeking guidance on creating a responsive navbar. Currently, I've successfully adjusted the bar's size based on monitor resolution, but the buttons remain static in size. I experimented with using %, vm, and vh, but suspect that there might be a ...

I need assistance setting up a Facebook page feed using Angular.js. I want to display the posts in a list of cards and include a fullscreen image gallery. Is

Hey there! I'm in the process of developing an app that pulls Facebook page posts and showcases them with custom CSS. The app is functioning smoothly with two controllers, DashCtrl and MainCtrl, each working fine on its own. However, when trying to tr ...

Difficulties experienced when attempting to position content following the conversion from flash to html5

Before, I used a flash file within a tag to center it on my Wordpress Website. Now that I have converted it to html5 to serve content to Android browser users, I'm having trouble aligning the content in the center of the page for both Desktop and Andr ...

Distinguishing CSS Variances on ASP.Net Site with Android 4+

I am encountering an issue with my current ASP.Net Mobile Website design. It is rendering correctly on android phones pre 4, iPhones, and Blackberries. This problem requires a bit of setup to explain... CSS tr { color: #00ff00; } #MasterBackButton { ...

Converting line breaks into a visible string format within Angular

After thorough research, all I've come across are solutions that demonstrate how to display the newline character as a new line. I specifically aim to exhibit the "\n" as a string within an Angular view. It appears that Angular disrega ...

determining the 'top' and 'right' coordinates upon clicking

I encountered an issue with a table having a drop-down menu that was getting cut off when opened on the last line. After some experimentation, I came up with a solution to detach the drop-down menu from its parent element and then reposition it by setting ...

Tips for enhancing the fluidity of animations after removing an item from a list

I'm working on a project where I have a list of elements that are removed with an animation when clicked. However, I noticed that when one element is removed, the rest of the elements just jump up instead of smoothly transitioning. Is there a way to m ...

What is the best way to prevent <hr> from covering a <div> in CSS?

I'm currently facing a challenge in moving an <hr> element behind my div element. I have already tried positioning, but it didn't work as expected. The <hr> is still visible through the white parts, most likely because they are transp ...

Continuously refreshing the content

Having an issue with the $.ajax() function while trying to load content into a DIV from another page. The content keeps reloading into the element continuously. Observing my debugger, it seems that the element .driving_action_body is constantly reloading ...

Angular nvd3 Stack Area Chart with Expand Option showcasing the full 0% to 100% range

I'm currently facing a challenge with the stacked area chart. The problem arises when I use the "expand" feature. This option has a y-axis range of 0% to 100%, but the values seem to be multiplied by 100%. Let's consider this dataset... x [1,2, ...

Does the sliding transition between views function properly, even though the view appears on top of the header and behind the footer

My angular app is running smoothly, but now I want to add animations between views. When a user clicks on a link in the navbar, I want the view to slide to a different one. I was inspired by this example: Sliding between views. However, when I implemented ...

Optimizing Image Fit and Positioning for Different Web Browsers

I have designed a webpage using HTML, JavaScript, and CSS that features a photo carousel allowing users to navigate through images by clicking left and right arrows. The carousel's container is set at 500px tall and takes up 100% width of its parent d ...

Enable sidebar navigation exclusively for mobile and iPad devices

Is there a way to implement a different navigation bar specifically for mobile devices like iPads? I'm considering using this one: Here is the source code: JSFiddle If anyone knows how to achieve this, please share! <link rel="shortcut icon" typ ...

Ensure that the background image adjusts appropriately to different screen sizes while maintaining its responsiveness

Currently in the process of developing a single page application using CRA. My goal is to create a hero image with an overlay at the top of the application using a background image. However, I'm facing issues with maintaining the responsiveness of the ...

Could Google Adsense be causing issues with my website's navigation bar?

There seems to be an irritating bug that I've come across. While navigating my website, [the menu (located in the top right corner) functions correctly]. However, when you land on a page with a Google AdSense ad, the menu suddenly appears distorted ...

How can external webpages be effectively integrated under a banner for a cohesive user experience?

Google Images serves as a prime example. Upon clicking on an image, a persistent frame appears at the top of the page, prompting users to easily navigate back to Google. Is there a specific term for this method and what would be the most effective approach ...