Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Barra de seguimiento de última orden

Con este tutorial aprenderás cómo mostrar una barra de seguimiento de la última orden. La misma se exhibirá cerca del menú de navegación y contendrá un link que abrirá la página de confirmación (Thank you page). En esta página es posible seguir el estado de la orden y acompañar su entrega, lo que en Tienda Nube llamamos “Tracking page”. 

Esta funcionalidad tiene como fin eliminar los inconvenientes que los usuarios presentan al intentar seguir la orden. Con la misma se evita la necesidad de crear una cuenta y de encontrar el email de la orden que contiene el link a la Tracking page. El cliente solo deberá acceder a la tienda en la que compró (desde el mismo navegador con el que hizo la compra) y hacer clic en el link destacado en la barra informativa.

Paso a paso para incluir la funcionalidad en un diseño a medida:

1. Agregá el sniplet status_page_notification.tpl en la pestaña 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. Incluí el sniplet arriba o abajo del menú de navegación:

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

El lugar en el que se mostrará depende de la plantilla que estés utilizando. Te recomendamos que esta barra esté debajo del menú de navegación. 

3.En snipplets/css/critical-css.tpl, colocá:

{# /* // 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;
  }
}

Si tu plantilla no cuenta con este archivo, colocalo en el CSS default.  

4. En static/css/main-color.scss.tpl adicioná:

{# /* // 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;
}

Observación: Tené en cuenta que el código contiene variables de SASS, como $main-background. Revisá el nombre de esta y otras variables de acuerdo con tu proyecto. 

5. En config/translations.txt, agregá:

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

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

6. Colocá en la sección 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();
  });
}

Observaciones

Al cerrar la barra, la misma ya no se mostrará nuevamente hasta que se inicie una nueva sesión.
La cookie expira 30 días después de la compra. 

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.