• Home
• Funcionalidades mais pedidas

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.