Notificación sobre el uso de cookies

En este tutorial vamos a agregar una notificación que le avisa a tus clientes sobre el uso de cookies. Esto no afectará la experiencia de compra y las estadísticas.

HTML

1. Lo primero que vamos a hacer es buscar en la carpeta snipplets el archivo llamado notification.tpl. En el caso de que no existe, créalo y agregá el siguiente código:

{# Cookie validation #}

{% if show_cookie_banner and not params.preview %}
    <div class="js-notification js-notification-cookie-banner notification notification-fixed-bottom notification-above notification-secondary" style="display: none;">
        <div class="container text-center text-md-left">
            <div class="row align-items-md-center">
                <div class="col-12 col-md-7 offset-md-2 mb-3 mb-md-0 text-foreground">
                    {{ 'Al navegar por este sitio <strong>aceptás el uso de cookies</strong> para agilizar tu experiencia de compra.' | translate }}
                </div>
                <div class="col-md-auto">
                    <a href="#" class="js-notification-close js-acknowledge-cookies btn btn-primary btn-medium px-4 py-2 d-inline-block">{{ "Entendido" | translate }}</a>
                </div>
            </div>
        </div>
    </div>
{% endif %}

 2. Luego, vamos a llamar a este archivo dentro del snipplet 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:

{# Show cookie validation message #}
{% include "snipplets/notification.tpl" with {show_cookie_banner: true} %}

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:

.notification {
  padding: 10px;
  text-align: center;
}
.notification-fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}

JS

Por último, en la carpeta static, buscamos el archivo store.js y donde está este código:

{# Notifications variables #}

var $notification_status_page = $(".js-notification-status-page");
var $notification_order_cancellation = $(".js-notification-order-cancellation");
var $fixed_bottom_button = $(".js-btn-fixed-bottom");


{# /* // Close notification */ #}

$(".js-notification-close").on( "click", function(e) {
e.preventDefault();
$(this).closest(".js-notification").hide();
});

{% if not params.preview %}
        
        {# /* // Cookie banner notification */ #}

        restoreNotifications = function(){

            // Whatsapp button position
            $fixed_bottom_button.css({"margin-bottom": "10px"});

            {# Restore notifications when Cookie Banner is closed #}

            var show_order_cancellation = ($notification_order_cancellation.size() > 0) && (LS.shouldShowOrderCancellationNotification($notification_order_cancellation.data('url')));

            {% if store.country == 'AR' %}
                {# Order cancellation #}
                if (show_order_cancellation){
                    $notification_order_cancellation.show();
                    $fixed_bottom_button.css({"margin-bottom": "40px"});
                }
            {% endif %}
        };

        if (!window.cookieNotificationService.isAcknowledged()) {
            $(".js-notification-cookie-banner").show();

            {# Whatsapp button position #}
            if ($(window).width() < 768) {
                $fixed_bottom_button.css({"margin-bottom": "120px"});
            }else{
                $fixed_bottom_button.css({"margin-bottom": "70px"});
            }
        }

        $(".js-acknowledge-cookies").on( "click", function(e) {
            window.cookieNotificationService.acknowledge();
            restoreNotifications();
        });
{% endif %}

En caso de tener implementado el botón de arrepentimiento deberás cambiar la siguiente función

if ($js_notification_order_cancellation.size() > 0){
        if (LS.shouldShowOrderCancellationNotification($js_notification_order_cancellation.data('url'))){
            {# Show order cancellation notification only if cookie banner is not visible #}
            $js_notification_order_cancellation.show();
            $whatsapp_button.css({"margin-bottom": "40px"});
        };
        $(".js-notification-order-cancellation-close").on( "click", function(e) {
            e.preventDefault();
            LS.dontShowOrderCancellationNotification($js_notification_order_cancellation.data('url'));
        });
    }

Por esto:

if ($notification_order_cancellation.size() > 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({"margin-bottom": "40px"});
        };
        $(".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

--- --- Notifications

es "Al navegar por este sitio <strong>aceptás el uso de cookies</strong> para agilizar tu experiencia de compra."
pt "Ao navegar por este site <strong>você aceita o uso de cookies</strong> para agilizar a sua experiencia de compra."
en "While navigating this site <strong>you accept the use of cookies</strong> to improve your shopping experience."
es_mx "Al navegar por este sitio <strong>aceptas el uso de cookies</strong> para agilizar tu experiencia de compra."

es "Entendido"
pt "Entendi"
en "Understood"
es_mx "Entendido" 

¡Listo!