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 = $(".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 %}

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

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!