En este tutorial vamos a agregar el botón de arrepentimiento y el formulario de cancelación de orden, para que tus clientes puedan enviarlo en caso de que se arrepientan de su compra. Esto se encuentra sólo disponible para tiendas de Argentina de forma obligatoria debido a regulaciones del gobierno.
Para el theme Base creamos un componente que muestra el botón de arrepentimiento, únicamente en la home y para la última orden efectuada.
HTML
Lo primero que vamos a hacer es crear el botón de arrepentimiento
1. Para eso buscamos en la carpeta snipplets el archivo llamado notification.tpl. En el caso de que no exista, creálo y copia el siguiente código, y si ya lo tenes, agregá esto:
{% if show_order_cancellation %}
<div class="js-notification js-notification-order-cancellation notification notification-fixed-bottom notification-secondary" data-url="{{ status_page_url }}" style="display:none;">
<div class="container">
<div class="row">
<div class="col">
<a href="{{ store.contact_url }}?order_cancellation=true"><strong class="text-primary">{{ "Botón de arrepentimiento" | translate }}</strong></a>
<a class="js-notification-close js-notification-order-cancellation-close ml-3" href="#">
{% include "snipplets/svg/times.tpl" with {svg_custom_class: "icon-inline svg-icon-primary icon-lg"} %}
</a>
</div>
</div>
</div>
</div>
{% endif %}2. En caso que ya tengas creado el archivo de notification.tpl y por ende la notificación para seguir la orden, vamos a buscar el siguiente código: (de lo contrario podes hacer directamente el paso 3 )
{# Order notification #}
{% if order_notification and status_page_url %}
<div data-url="{{ status_page_url }}" class="js-notification notification notification-secondary" style="display:none;">
<div class="container">
<div class="row">
<div class="col">
<a class="btn" href="{{ status_page_url }}"><strong>{{ "Seguí acá" | translate }}</strong> {{ "tu última compra" | translate }}</a>
<a class="js-notification-close ml-3" href="#">
{% include "snipplets/svg/times.tpl" with {svg_custom_class: "icon-inline svg-icon-primary icon-lg"} %}
</a>
</div>
</div>
</div>
</div>
{% endif %}Y lo vamos a reemplazarlo por:
{% if order_notification and status_page_url %}
<div class="js-notification js-notification-status-page notification notification-secondary" data-url="{{ status_page_url }}" style="display:none;">
<div class="container">
<div class="row">
<div class="col">
<a class="btn" href="{{ status_page_url }}"><strong>{{ "Seguí acá" | translate }}</strong> {{ "tu última compra" | translate }}</a>
<a class="js-notification-close js-notification-status-page-close ml-3" href="#">
{% include "snipplets/svg/times.tpl" with {svg_custom_class: "icon-inline svg-icon-primary icon-lg"} %}
</a>
</div>
</div>
</div>
</div>
{% endif %}3. Luego, vamos a llamar a ese botón de arrepentimiento desde el archivo llamado header.tpl que se ubica en la carpeta snipplets, o donde lo necesites en tu diseño para mostrarlo fijo en la parte inferior de la pantalla, y agregamos lo siguiente:
{% if store.country == 'AR' and template == 'home' and status_page_url %}
{% include "snipplets/notification.tpl" with {show_order_cancellation: true} %}
{% endif %}Resta crear el formulario de cancelación
4. Para eso buscamos en la carpeta templates el archivo llamado contact.tpl y lo primero que vamos a hacer es crear el título del formulario, para eso necesitamos sumar el siguiente código:
{% embed "snipplets/page-header.tpl" %}
{% if is_order_cancellation %}
{% set form_title = "Pedí la cancelación de tu última compra" | translate %}
{% else %}
{% set form_title = "Contacto" | translate %}
{% endif %}
{% block page_header_text %}{{ form_title }}{% endblock page_header_text %}
{% endembed %}5. Ahora necesitamos agregar el subtítulo “si te arrepentiste, podes pedir la cancelación enviando este formulario.”, el link de “ver detalle de la compra” y un título para los datos de la tienda “si tenés problemas con otra compra, contactanos”, lo hacemos agregando el siguiente código:
{% set has_contact_info = store.whatsapp or store.phone or store.email or store.address or store.blog %}
<section class="contact-page">
<div class="container">
<div class="row justify-content-md-center">
<div class="col-md-8 text-center">
{% if is_order_cancellation %}
<p>{{ "Si te arrepentiste, podés pedir la cancelación enviando este formulario." | translate }} </p>
<a class="btn-link" href="{{ status_page_url }}">{{'Ver detalle de la compra >' | translate}}</a>
{% if has_contact_info %}
<p class="mt-4 mb-3">{{ 'Si tenés problemas con otra compra, contactanos:' | translate }}</p>
{% endif %}
{% endif %}
{% if has_contact_info %}
{% include "snipplets/contact-links.tpl" %}
{% endif %}
</div>
</div>
[...]
</div>
</section>6. En este formulario, solo se van a utilizar los inputs de “nombre” y “email”, por lo que los otros campos (teléfono y mensaje) deberían ocultarse en este formulario, lo hacemos agregando lo siguiente a esta parte de nuestro código:
{% if not is_order_cancellation %} {# Phone input #} {% embed "snipplets/forms/form-input.tpl" with{input_for: 'phone', type_tel: true, input_name: 'phone', input_id: 'phone', input_label_text: 'Teléfono' | translate } %} {% endembed %} {# Message textarea #} {% embed "snipplets/forms/form-input.tpl" with{text_area: true, input_for: 'message', input_name: 'message', input_id: 'message', input_rows: '7', input_label_text: 'Mensaje' | translate } %} {% endembed %} {% endif %}
7. En este paso vamos a agregar un mensaje de success:
En el mensaje de success de este formulario, vamos a dar un código de trámite una vez que se haya enviado el pedido de cancelación, para eso necesitamos que este formulario tenga su propio mensaje de success, para eso vamos a buscar el siguiente código:
{% if contact %}
{% if contact.success %}
<div class="alert alert-success">{{ "¡Gracias por contactarnos! Vamos a responderte apenas veamos tu mensaje." | translate }}</div>
{% else %}
<div class="alert alert-danger">{{ "Necesitamos tu nombre y un email para poder responderte." | translate }}</div>
{% endif %}
{% endif %} Y lo vamos a reemplazar por este:
{% if contact %}
{% if contact.success %}
{% if is_order_cancellation %}
<div class="alert alert-success">
{{ "¡Tu pedido de cancelación fue enviado!" | translate }}
<br>
{{ "Vamos a ponernos en contacto con vos apenas veamos tu mensaje." | translate }}
<br>
<strong>{{ "Tu código de trámite es" | translate }} #{{ last_order_id }}</strong>
</div>
{% else %}
<div class="alert alert-success">{{ "¡Gracias por contactarnos! Vamos a responderte apenas veamos tu mensaje." | translate }}</div>
{% endif %}
{% else %}
<div class="alert alert-danger">{{ "Necesitamos tu nombre y un email para poder responderte." | translate }}</div>
{% endif %}
{% endif %} 8. Por último agregamos el input que determina el tipo de formulario, agregando en esta parte del código:
<input type="hidden" name="type" value="contact" />
Lo siguiente:
{% if is_order_cancellation %} <input type="hidden" name="type" value="order_cancellation" /> {% else %} <input type="hidden" name="type" value="contact" /> {% endif %}
CSS
Requisito:
Tener agregados en tu diseño las clases helpers. Podés seguir este este pequeño tutorial para hacerlo (simplemente es copiar y pegar algunas clases, no toma más de 1 minuto).
Por último, vamos a agregar los estilos del botón, para eso buscamos en la carpeta static el archivo style-critical.tpl y sumamos los siguientes estilos:
En caso de ya tener creado un archivo de notification.tpl, solo agregar este estilo:
.notification-fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
width: 100%;
}Si de lo contrario, no tenías todavía ese archivo creado, agregar estos estilos:
.notification {
padding: 10px;
text-align: center;
}
.notification-close {
padding: 0 5px;
}
.notification-fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
z-index: 999;
width: 100%;
}JS
⚠️ A partir del día 30 de enero de 2023, la librería jQuery será removida del código de nuestras tiendas, por lo tanto la función "$" no podrá ser utilizada.
Por último, en la carpeta static, buscamos el archivo store.js y donde está este código:
if ($notification_status_page.length > 0){
if (LS.shouldShowOrderStatusNotification($notification_status_page.data('url'))){
$notification_status_page.show();
};
jQueryNuvem(".js-notification-status-page-close").on( "click", function(e) {
e.preventDefault();
LS.dontShowOrderStatusNotificationAgain($notification_status_page.data('url'));
});
}Lo reemplazamos por el siguiente:
{# /* // Follow order status notification */ #}
if ($notification_status_page.length > 0){
if (LS.shouldShowOrderStatusNotification($notification_status_page.data('url'))){
$notification_status_page.show();
};
jQueryNuvem(".js-notification-status-page-close").on( "click", function(e) {
e.preventDefault();
LS.dontShowOrderStatusNotificationAgain($notification_status_page.data('url'));
});
}
{# /* // Follow order cancellation notification */ #}
if ($notification_order_cancellation.length > 0){
if (LS.shouldShowOrderCancellationNotification($notification_order_cancellation.data('url'))){
{% if not params.preview %}
{# Show order cancellation notification only if cookie banner is not visible #}
if (window.cookieNotificationService.isAcknowledged()) {
{% endif %}
$notification_order_cancellation.show();
{% if not params.preview %}
}
{% endif %}
$fixed_bottom_button.css("marginBottom", "40px");
};
jQueryNuvem(".js-notification-order-cancellation-close").on( "click", function(e) {
e.preventDefault();
LS.dontShowOrderCancellationNotification($notification_order_cancellation.data('url'));
});
}Traducciones
Para terminar agregamos los textos para las traducciones en el archivo config/translations.txt
--- --- Order cancellation es "Ver detalle de la compra >" pt "Ver detalhes da compra >" en "View purchase details >" es_mx "Ver detalle de la compra >" es "Si tenés problemas con otra compra, contactanos:" pt "Se você tem problemas com outra compra, entre em contato:" en "If you’re having problems with a different purchase, contact us:" es_mx "Si tienes problemas con otra compra, contáctanos:" es "Botón de arrepentimiento" pt "Botão de arrependimento" en "Cancel your order" es_mx "Botón de arrepentimiento" es "Pedí la cancelación de tu última compra" pt "Pedir o cancelamento da sua ultima compra" en "Request the cancellation of your last order" es_mx "Pide la cancelación de tu última compra" es "Si te arrepentiste, podés pedir la cancelación enviando este formulario." pt "Se você se arrependeu, pode solicitar o cancelamento enviando este formulário." en "If you’re having second thoughts, you can cancel your order using this form." es_mx "Si te arrepentiste, puedes pedir la cancelación enviando este formulario." es "¡Tu pedido de cancelación fue enviado!" pt "Seu pedido de cancelamento foi enviado!" en "Your cancellation request was sent!" es_mx "¡Tu pedido de cancelación fue enviado!" es "Vamos a ponernos en contacto con vos apenas veamos tu mensaje." pt "Entraremos em contato assim que recebermos sua mensagem." en "We’ll get in touch with you as soon as we see your message." es_mx "Vamos a ponernos en contacto contigo apenas veamos tu mensaje." es "Tu código de trámite es" pt "O código da sua solicitação é" en "Your request number is" es_mx "Tu código de trámite es"
Observaciones
Al cerrar el botón, el mismo ya no se mostrará nuevamente.