Advanced Java/CSS for Marketplace Website?

https://chartreuse-bear-bx9w.squarespace.com/

Password: tsny

Hello,

I am currently trying to implement a header change for a marketplace I'm building for a client. The battle started while trying to change the account element to "Login" when a user is logged out, and "Account" when a user is logged in. ChatGPT helped there. But then, I have this "Join the Club" button that I've hyperlinked to the signup page. I want the account button to read "Login" when a user is logged out, with the "Join the Club" button, and I want it to say "Account" and the "Join the Club" button is hidden when a user is logged in.

ChatGPT 4o gave me this code:

 

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Select account button and join club button elements
  var accountButton = document.querySelector(".user-accounts-text-link .auth");
  var joinClubButtons = document.querySelectorAll(".btn.sqs-button-element--primary");

  // Ensure account button is found and check login state
  if (accountButton) {
    var isLoggedIn = accountButton.textContent.trim() === 'Account';

    // Update the account button text based on login state
    if (isLoggedIn) {
      accountButton.textContent = 'Account';
      console.log('Button text set to "Account", user is logged in.');
    } else {
      accountButton.textContent = 'Login';
      console.log('Button text is "Login", user is logged out.');
    }
  } else {
    console.log('Account button not found.');
  }

  // Hide or show "Join the Club" button based on login state
  joinClubButtons.forEach(button => {
    if (isLoggedIn) {
      button.style.display = 'none'; // Hide button when logged in
      console.log('Signup button hidden.');
    } else {
      button.style.display = 'block'; // Show button when logged out
      console.log('Signup button visible.');
    }
  });

  // Additional log for when no join club buttons are found
  if (joinClubButtons.length === 0) {
    console.log('Signup button not found.');
  }
});
</script>

I'm almost certain it isn't this complicated... This code changes the name of "Account" when logged out but hides the button in both states.

Thanks for the help.

-Ethan

I think we can use CSS code to change text instead of using script code. If you remove code temporarily, I can test CSS code easier.

On 8/23/2024 at 2:25 AM, tuanphan said:

I think we can use CSS code to change text instead of using script code. If you remove code temporarily, I can test CSS code easier.

Code is removed. Let me know. Thanks.

16 hours ago, tuanphan said:

You can use this to Website Tools > Custom CSS

/* hide button when users is logged in */
body:has(.auth) a.btn {
    display: none;
}

 

You are the best! Thank you!!