Notificação sobre o uso de cookies

Neste tutorial vamos adicionar uma notificação que informa a seus clientes sobre o uso de cookies. Isso não afetará a experiência de compra ou as estatisticas

Aplicar esta funcionalidade fará com que você cumpra a LGPD (Lei Geral de Proteção de Dados).

HTML

1. A primeira coisa que fazemos é procurar na pasta snipplets o arquivo chamado notification.tpl. Caso não exista, crie-o e adicione o seguinte 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. Então, vamos chamar esse arquivo dentro do snipplet chamado header.tpl que está localizado na pasta snipplets, ou onde você precisar em seu design para mostrá-lo fixo na parte inferior da tela, e adicionamos o seguinte:

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

CSS

Requisito:

Ter adicionado helper classes em seu layout. Você pode seguir este pequeno tutorial para fazer isso (é só copiar e colar algumas classes, não leva mais que 1 minuto).

Adicione estilos dentro do arquivo static/style-critical.tpl 

.notification {
  padding: 10px;
  text-align: center;
}

.notification-fixed-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}

JS

Na pasta static, procuramos o arquivo store.js.tpl e adicionamos o seguinte código:

{# Notifications variables #}

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

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

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

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

    restoreNotifications = function(){

        // Whatsapp button position
        if (window.innerWidth < 768) {
            $fixed_bottom_button.css("marginBottom", "10px");
        }

        {# Restore notifications when Cookie Banner is closed #}

        var show_order_cancellation = ($notification_order_cancellation.length > 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("marginBottom", "40px");
            }
        {% endif %}
    };

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

        {# Whatsapp button position #}
        if (window.innerWidth < 768) {
            $fixed_bottom_button.css("marginBottom", "120px");
        }else{
            $fixed_bottom_button.css("marginBottom", "70px");
        }
    }

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

{% endif %}

Se você implementou o botão de arrependimento (só para lojas de Argentina), você deve alterar a seguinte função

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 o seguinte:

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'));
    });
}

Traduções

Nesta etapa, adicionamos os textos para as traduções no arquivo 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"

Pronto!