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