Como criar links de login e registo

Vários websites (nomeadamente lojas online) necessitam de uma área de login para que o cliente possa ver os produtos/serviços  que tem no seu carrinho de compras, bem como outras opções de gestão de conta.

A plataforma EBSSS tem uma área específica para este efeito, contudo, é preciso criar, no website, uma zona que permita ao utilizador aceder a esta mesma área.

Vamos ver como criar essas ligações, tendo como exemplo o template em baixo.

O objetivo agora será criar as ligações para login e registo, mas, quando o utilizador tiver a sessão iniciada, aparecer outras ligações, como, por exemplo, Área de cliente, Carrinho, Favoritos e Terminar sessão.

Primeiro, vamos identificar as linhas de código destas ligações.

<li class="dropdown-holder user-setting_wrap"><a href="javascript:void(0)"><i class="zmdi zmdi-account-o"></i></a>
  <ul class="quicky-dropdown">
    <li class="position-relative"><a href="javascript:void(0)">User Setting</a></li>
    <li class="position-relative"><a href="javascript:void(0)">Currency</a></li>
    <li class="position-relative"><a href="javascript:void(0)">Language</a></li>
  </ul>
</li>

Agora, vamos colocar, imediatamente antes do primeiro <li>  a Condição: Não tem login ativo, que se encontra em Elementos da Plataforma >  Global. Depois, colocamos o fecho dessa condição após o último <li>.

Vamos colocar no href="" da ligação do primeiro <li> o elemento Link para registo e, no segundo, o elemento Link para Login. Por fim, alteramos o texto dos <li> para o que mais se adequa à situação.

Neste momento, o código deverá estar assim:

<li class="dropdown-holder user-setting_wrap"><a href="javascript:void(0)"><i class="zmdi zmdi-account-o"></i></a>
  <ul class="quicky-dropdown">
    [user_not_logged]
      <li class="position-relative"><a href="[platform login]">Iniciar sessão</a></li>
      <li class="position-relative"><a href="[platform register]">Criar conta</a></li>
    [/user_not_logged]
  </ul>
</li>

Vamos agora criar as ligações que aparecem quando o utilizador tem o login feito.

Para começar, copiamos para baixo apenas as ligações <li> e, da mesma forma como fizemos anteriormente, colocamos, agora, a  Condição: Tem login ativo .

Para este exemplo, vamos apenas colocar os elementos da plataforma Link para a Área de Cliente, Link para o Carrinho e Link para Logout, que se econtram em Elementos da Plataforma >  Global, bem como o Link para página de favoritos, que se encontra em Elementos da Plataforma >  Favoritos. 

NOTA: Dependendo da situação, pode ser que outros links ou informações façam mais sentido, sendo que também se pode adicionar outros elementos HTML para que apareçam apenas quando o utilizador tem o login feito. O único requisito é que o código esteja entre a Condição: Tem login ativo.

Neste momento, o nosso código deverá estar assim:

<li class="dropdown-holder user-setting_wrap"><a href="javascript:void(0)"><i class="zmdi zmdi-account-o"></i></a>
  <ul class="quicky-dropdown">
    [user_not_logged]
      <li class="position-relative"><a href="[platform login]">Iniciar sessão</a></li>
      <li class="position-relative"><a href="[platform register]">Criar conta</a></li>
    [/user_not_logged]
    [user_is_logged]
      <li class="position-relative"><a href="[platform dashboard]">Área de cliente</a></li>
      <li class="position-relative"><a href="[platform cart]">Carrinho de compras</a></li>
      <li class="position-relative"><a href="[platform favorites]">Favoritos</a></li>
      <li class="position-relative"><a href="[platform logout]">Terminar sessão</a></li>
    [/user_is_logged]
  </ul>
</li>

No final, o website deverá mostrar as ligações para iniciar sessão / registar conta por defeito:

E, após o utilizador iniciar a sessão, deverá mostrar apenas as restantes ligações: