En este artículo vamos a evitar mostrar un mensaje de 404 a los usuarios de la tienda ante los siguientes escenarios:
- El administrador de la tienda crea un usuario para su cliente y envía el mail de activación de cuenta. Al cliente le llega un link para ir a activar su cuenta pero este expiró.
- El cliente quiere restablecer su contraseña por lo cuál se envía un mail con un link para poder hacerlo, pero este link expiró.
Con los cambios debajo vamos a tener dos mensajes para cada caso:
Link expirado al activar cuenta
Link expirado al restablecer contraseña
HTML
1. En el archivo templates/account/newpass.tpl vamos a cambiar el título de la sección por algo como esto
{% set is_account_activation = action == 'account_activation' %}
{% embed "snipplets/page-header.tpl" %}
{% block page_header_text %}{{ (is_account_activation ? 'Activar cuenta' : 'Cambiar contraseña') | translate }}{% endblock page_header_text %}
{% endembed %}2. Luego dentro del mismo archivo vamos a sumar los nuevos mensajes dentro de una condición {% if link_expired %}, dejando así en el else el resto del contenido que ya teníamos para esta página.
<section class="account-page">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-8">
{% if link_expired %}
{% set contact_links = store.whatsapp or store.phone or store.email %}
<div class="mb-4 text-center">
{% if is_account_activation %}
<div class="mb-1 font-weight-bold">{{ 'El link para activar tu cuenta expiró' | translate }}</div>
<div>{{ 'Contactanos para que te enviemos uno nuevo.' | translate }}</div>
{% else %}
<div class="mb-1 font-weight-bold">{{ 'El link para cambiar tu contraseña expiró' | translate }}</div>
<div class="mb-3">{{ 'Ingresá tu email para recibir uno nuevo.' | translate }}</div>
<a href="{{ store.customer_reset_password_url }}" class="btn-link btn-link-primary">{{ 'Ingresar email' | translate }}</a>
{% endif %}
</div>
{% if contact_links and is_account_activation %}
{% include "snipplets/contact-links.tpl" with {phone_and_mail_only: true} %}
{% endif %}
{% else %}
{# Contenido que ya teníamos #}
{% endif %}
</div>
</div>
</div>
</section>3. Vamos a hacer algunos cambios en el archivo snipplets/contact-links.tpl para que en el caso donde el cliente debe contactarse con la tienda, mostrar sólo los medios de contacto de télefono e email, dejándolo de la siguiente manera:
{# /*============================================================================
#Contact links
==============================================================================*/#}
<ul class="contact-info text-center{% if columns %} row{% endif %}">
{% if store.whatsapp %}
<li class="contact-item{% if columns %} col-6 col-md{% endif %}">
{% include "snipplets/svg/whatsapp.tpl" with {svg_custom_class: "icon-inline icon-lg icon-w mx-2 svg-icon-text"} %}
<a href="{{ store.whatsapp }}" class="contact-link">{{ store.whatsapp |trim('https://wa.me/') }}</a>
</li>
{% elseif store.phone %}
<li class="contact-item{% if columns %} col-6 col-md{% endif %}">
{% include "snipplets/svg/phone.tpl" with {svg_custom_class: "icon-inline icon-lg icon-w mx-2 svg-icon-text"} %}
<a href="tel:{{ store.phone }}" class="contact-link">{{ store.phone }}</a>
</li>
{% endif %}
{% if store.email %}
<li class="contact-item{% if columns %} col-6 col-md{% endif %}">
{% include "snipplets/svg/envelope.tpl" with {svg_custom_class: "icon-inline icon-lg icon-w mx-2 svg-icon-text"} %}
<a href="mailto:{{ store.email }}" class="contact-link">{{ store.email }}</a>
</li>
{% endif %}
{% if not phone_and_mail_only %}
{% if store.address and not is_order_cancellation %}
<li class="contact-item{% if columns %} col-6 col-md{% endif %}">
{% include "snipplets/svg/map-marker-alt.tpl" with {svg_custom_class: "icon-inline icon-lg icon-w mx-2 svg-icon-text"} %}
{{ store.address }}
</li>
{% endif %}
{% if store.blog %}
<li class="contact-item{% if columns %} col-6 col-md{% endif %}">
{% include "snipplets/svg/comments.tpl" with {svg_custom_class: "icon-inline icon-lg icon-w mx-2 svg-icon-text"} %}
<a target="_blank" href="{{ store.blog }}" class="contact-link">{{ "Visita nuestro Blog!" | translate }}</a>
</li>
{% endif %}
{% endif %}
</ul>Traducciones
Por último agregamos los textos para las traducciones en el archivo config/translations.txt
es "El link para cambiar tu contraseña expiró" pt "O link para alterar sua senha expirou" en "The link to change your password has expired" es_mx "El link para cambiar tu contraseña expiró" es "Ingresá tu email para recibir uno nuevo." pt "Insira seu email para receber um novo." en "Enter your email to receive a new one." es_mx "Ingresa tu email para recibir uno nuevo." es "Ingresar email" pt "Inserir e-mail" en "Enter email" es_mx "Ingresar email" es "El link para activar tu cuenta expiró" pt "O link para ativar sua conta expirou" en "The link to activate your account has expired" es_mx "El link para activar tu cuenta expiró" es "Contactanos para que te enviemos uno nuevo." pt "Entre em contato com a gente para que te enviemos um novo." en "Contact us so we can send you a new one." es_mx "Contáctanos para que te enviemos uno nuevo.
Activación
Una vez aplicados todos los cambios en tu código, necesitamos que te contactes con Tiendanube para terminar la activación a socios@tiendanube.com