Esta página contiene al carrito de compras que si bien por defecto tenemos el Carrito ajax, el cual se muestra dentro de un popup haciendo que el usuario se mantenga en la misma página al agregar un producto; se puede apagar desde la personalización del theme dando lugar a la página del carrito, manteniendo el flujo de compras más clásico donde el usuario agrega un producto y este es llevado a una página aparte dedicada al carrito.
Funciona de una forma muy similar al snipplet cart/cart-panel.tpl por lo que podés revisar la documentación de dicho componente acá.
El archivo comienza con el embed del page-header.tpl incluyendo el título del “Carrito de Compras”
{% embed "snipplets/page-header.tpl" with {'breadcrumbs': true} %}
{% block page_header_text %}{{ "Carrito de Compras" | translate }}{% endblock page_header_text %}
{% endembed %}Luego vamos a tener un container del form que lista los productos agregados al carrito, si es que existen, para lo que incluimos un condicional que lo compruebe.
El div contenedor tiene el ID “shoppingCartPage” al que se le aplican funciones JavaScript, por lo que no se debe modificar.
<div id="shoppingCartPage" class="container" data-minimum="{{ settings.cart_minimum_value }}">
<form action="{{ store.cart_url }}" method="post" id="ajax-cart-details" class="js-ajax-cart-panel cart-body">Dentro del form vamos a encontrar el listado de items en el carrito llamando al snipplet “cart-item-ajax.tpl” también utilizado en el carrito Ajax:
{% if cart.items %}
<div class="js-ajax-cart-list cart-row">
{# Cart panel items #}
{% if cart.items %}
{% for item in cart.items %}
{% include "snipplets/cart-item-ajax.tpl" with {'cart_page': true} %}
{% endfor %}
{% endif %}
</div>
{% else %}
{# Empty cart #}
<div class="alert alert-info">
{% if error %}
{{ "¡Uy! No tenemos más stock de este producto para agregarlo al carrito. Si querés podés" | translate }}
<a href="{{ store.products_url }}" class="btn btn-link p-none">{{ "ver otros acá" | translate }}</a>
{% else %}
{{ "El carrito de compras está vacío." | translate }}
{% endif %}
{{ ("Seguir comprando" | translate ~ " »") | a_tag(store.products_url) }}
</div>
{% endif %}Inmediatamente, tenemos un alert que se muestra cuando se modifica la cantidad de los productos en el carrito y la tienda no dispone del stock que estamos indicando
<div id="error-ajax-stock" style="display: none;">
<div class="alert alert-warning">
{{ "¡Uy! No tenemos más stock de este producto para agregar este producto al carrito. Si querés podés" | translate }}<a href="{{ store.products_url }}" class="btn-link">{{ "ver otros acá" | translate }}</a>
</div>
</div>Para cerrar el listado llamamos al snipplet cart-totals.tpl con el parametro “cart_page”:true (que le indica al snipplet que va a ser utilizado en el carrito convencional), que contiene:
- El subtotal del carrito, que no incluye el costo de envío ni promociones
- El calculador de envíos
- Los locales físicos (no aplica en Brasil)
- El mensaje de promociones, por ejemplo 2x1
- El total del carrito que incluye el costo de envío y promociones
- Las cuotas en base al total, solo aplica en Brasil
- El botón para finalizar la compra
- El link para continuar comprando
<div class="cart-row">
{% include "snipplets/cart-totals.tpl" with {'cart_page': true} %}
</div>Al final del archivo se encuentra esta línea de código:
<div id="store-curr" class="hidden">{{ cart.currency }}</div>Lo utilizamos desde el backend para para obtener el dato cart.currency del carrito, por lo que no se debe eliminar.