Barra com atalho para acompanhamento do último pedido

Com este tutorial, você aprenderá a exibir uma barra de rastreamento do último pedido, dando aos compradores de loja acesso aos detalhes e ao status de sua compra.










HTML

A primeira coisa que vamos fazer é criar o tpl da notificação, se você ainda não o tiver. Ele também é usado para notificar que um produto foi adicionado ao carrinho.

1. Verifique se você já tem um arquivo chamado notification.tpl na pasta snipplets. Se não existir, crie-o. Adicione o seguinte código neste arquivo:

{# 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">
                    <span>{{ "Seguí acá" | translate | a_tag(status_page_url) }}</span> <span class="btn btn-link">{{ "tu última compra" | translate }}</span>
                    <a class="js-notification-close ml-2" href="#">
                        {% include "snipplets/svg/times.tpl" with {svg_custom_class: "icon-inline svg-icon-primary"} %}
                    </a>
                </div>
            </div>
        </div>
    </div>
{% endif %}

2. Incluímos o snipplet de notificação no arquivo snipplets/header/header.tpl ou onde você tem a navegação da sua loja, antes de fechar a tag <head> </ head>, da seguinte forma:

 {% include 'snipplets/notification.tpl' with {order_notification: true} %}

Se você já está chamando este snipplet para notificação do carrinho, você deve adicionar o parâmetro "order_notification: true", ficando:

 {% include 'snipplets/notification.tpl' with {order_notification: true, add_to_cart: true} %}

3.  Por último, para a parte HTML, precisamos adicionar uma pasta SVG dentro da pasta snipplets. Aqui vamos adicionar o SVG que usamos como ícone que fecha a notificação.

times.tpl

<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>

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).

1. Adicionamos o seguinte SASS de cores em style-colors.scss.tpl (ou no stylesheet do seu layout que possui as cores e fontes da loja). Lembre-se de que as variáveis de cores e fontes podem variar em relação ao seu layout:

{# /* // Mixins */ #}


@mixin prefix($property, $value, $prefixes: ()) {
    @each $prefix in $prefixes {
        #{'-' + $prefix + '-' + $property}: $value;
    }
       #{$property}: $value;
}


{# /* // Buttons */ #}


.btn{
  text-decoration: none;
  text-align: center;
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-transform: uppercase;
  background: none;
  @include prefix(transition, all 0.4s ease, webkit ms moz o);
  &:hover,
  &:focus{
    outline: 0;
    opacity: 0.8;
  }
  &[disabled],
  &[disabled]:hover{
    opacity: 0.5;
    cursor: not-allowed;
    outline: 0;
  }
  &-default{
    padding: 10px 15px; 
    background-color: rgba($main-foreground, .2);
    color: $main-foreground;
    fill: $main-foreground;
    font-weight: bold;
  }
  &-primary{
    padding: 15px;
    background-color: $primary-color;
    color: $main-background;
    fill: $main-background;
    letter-spacing: 4px;
    &:hover{
      color: $main-background;
      fill: $main-background;
    }
  }
  &-secondary{
    padding: 10px 15px; 
    background-color: $main-background;
    color: $main-foreground;
    fill: $main-foreground;
    border: 1px solid $main-foreground;
  }
  &-block{
    float: left;
    width: 100%;
  }
  &-small{
    display: inline-block;
    padding: 10px;
    font-size: 10px;
    letter-spacing: 2px;
  }
}


.btn-link{
  color: $primary-color;
  fill: $primary-color;
  text-transform: uppercase;
  border-bottom: 1px solid;
  font-weight: bold;
  cursor: pointer;
  &:hover,
  &:focus{
    color: rgba($primary-color, .5);
    fill: rgba($primary-color, .5);
  }
}


{# /* // Alerts and notifications */ #}


.notification-primary{
  color: $primary-color;
  fill: $primary-color;
  border-color: rgba($primary-color, .2);
  background-color: rgba($primary-color, .1);
}


.notification-floating .notification-primary{
  background-color: $main-background;
  border-color: rgba($primary-color, .2);
}


.notification-secondary {
  padding: 5px 0;
  background: darken($main-background, 3%);
  color: rgba($main-foreground, .8);
  border-bottom: 1px solid rgba($main-foreground, .1);
}

2. Adicione os estilos no arquivo static/style-critical.tpl

Se em seu layout você usar um stylesheet para o CSS crítico, precisaremos adicionar o código abaixo nele, mas se não for o caso, você poderá unificar o CSS dos passos 1 e 2 em um único arquivo.

{# /* // Notifications */ #}

.notification{
  padding: 10px;
  opacity: 0.98;
  text-align: center;
}
.notification-close {
  padding: 0 5px;
}

JS

1. O JavaScript deve ser adicionado no arquivo store.js.tpl (ou onde você tem suas funções JS). O código que precisamos para notificação é o seguinte:

{#/*============================================================================
      #Notifications
    ==============================================================================*/ #}


    {# /* // Follow order status notification */ #}


    var $js_notification = $(".js-notification");
    if ($js_notification.size() > 0){
        if (LS.shouldShowOrderStatusNotification($js_notification.data('url'))){
            $js_notification.show();
        };
        $(".js-notification-close").on( "click", function(e) {
            e.preventDefault();
            LS.dontShowOrderStatusNotificationAgain($js_notification.data('url'));
            $(".js-notification").hide();
        });
    }

Traduções

Por fim, adicionamos os textos para as traduções no arquivo config/translations.txt.

es "Seguí acá"
pt "Acompanhe aqui"
en "Track here"
es_mx "Sigue aquí"

es "tu última compra"
pt "seu último pedido"
en "your last order"
es_mx "tu última compra"

Observações

Quando a barra é fechada, ela não é mais exibida até que uma nova sessão seja iniciada. O cookie expira 30 dias após a compra.