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:
![](http://dyzz9obi78pm5.cloudfront.net/app/image/id/6628fc304e13965894508c27/n/1713962036101.png)
![](http://dyzz9obi78pm5.cloudfront.net/app/image/id/6628fcab40b96f45b92df44a/n/1713962159487.png)
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