Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Barra com atalho para rastreio do último pedido

Exiba uma barra próxima ao menu de navegação com link direto para a página de confirmação (Thank You page). Nesta página é possível acompanhar o status do pedido e rastrear a entrega, na Nuvem a chamamos de Tracking Page.

Essa funcionalidade remove fricções que usuários têm ao tentar acompanhar o pedido. Com ela evita-se a necessidade de criar conta e de encontrar o e-mail do pedido com link para a Tracking Page. Basta acessar o site no mesmo navegador da compra e clicar no link destacado.

Passo a passo:

1. Adicione o sniplet status_page_notification.tpl na pasta sniplets:

{% if status_page_url %}
    <div data-url="{{ status_page_url }}" class="js_notification notification-bar" style="display:none;">
        <div class="container">
            <span>{{ "Enterate acá" | translate | a_tag(status_page_url) }}</span> <span>{{ "tu última ordén" | translate }}</span>
            <a class="js_notification_close pull-right notification-close" href="#"><i class="fa fa-close"></i></a>
        </div>
    </div>
{% endif %}

2. Inclua o sniplet acima abaixo do menu de navegação:

{% include "snipplets/status_page_notification.tpl" %}

O local exato varia de acordo com o tema. Sugerimos que esta barra fique abaixo do menu de navegação.

2. Em snipplets/css/critical-css.tpl, adicione:

{# /* // Notification */ #}
.notification-bar {
    width: 100%;
    padding: 15px;
    text-align: center;
}
.notification-bar .container {
    position: relative;
}
.notification-bar-close {
    padding: 10px;
    position: absolute;
    right: 15px;
    top: -10px;
}
@media (max-width: 767px){
  .notification-bar-close {
      right: 0;
  }
}

Se o Theme não tiver este arquivo adicione no CSS default.

3. Em static/css/main-color.scss.tpl adicione:

{# /* // Notification */ #}

.notification-bar {
    background: darken($main-background, 3%);
    text-transform: uppercase;
    color: rgba($main-foreground, .8);
}
.notification-bar a {
    color: $secondary-color;
    font-weight: 600;
}

Obs: Note que há variáveis do SASS, como $main-background. Revise o nome dessa e das demais variáveis de acordo com seu projeto.

4. Em config/translations.txt, adicione:

es "Enterate acá"
pt "Acompanhe aqui"
en "Track here"

es "tu última ordén"
pt "seu último pedido"
en "your last order"

4. Adicione na seção de scripts: 

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

Observações

Ao fechar a barra, ela não será exibida novamente até que uma nova sessão seja iniciada.

O cookie expira 30 dias após a compra.