Esta página contém o carrinho de compras que, embora por padrão tenhamos o Carrinho Ajax (mostrado em um pop-up), ele pode ser desativado na personalização do tema, dando origem à página do carrinho, mantendo o fluxo de compras mais clássico, onde o usuário adiciona um produto e é levado para uma página separada dedicada ao carrinho.
Ele funciona de uma maneira muito semelhante ao snipplet cart/cart-panel.tpl, e você pode verificar o documentação del aqui.
O arquivo começa com o embed page-header.tpl incluindo o título do "Carrinho de compras"
{% embed "snipplets/page-header.tpl" with {'breadcrumbs': true} %}
{% block page_header_text %}{{ "Carrito de Compras" | translate }}{% endblock page_header_text %}
{% endembed %}Em seguida, teremos um container do form que lista os produtos adicionados ao carrinho, se houver algum, para os quais incluímos uma verificação condicional.
O container div tem o ID "shoppingCartPage" ao qual as funções JavaScript são aplicadas, portanto, ele não deve ser modificado.
<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 do form vamos encontrar a lista de itens no carrinho chamando o snipplet “cart-item-ajax.tpl”, também usado no carrinho 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 %}Imediatamente, temos um alerta que é exibido quando a quantidade de produtos no carrinho é modificada e a loja não tem o estoque 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 fechar a lista, chamamos o snipplet cart-totals.tpl com o parâmetro “cart_page”: true (que diz ao snipplet para ser usado no carrinho convencional), que contém:
- O subtotal do carrinho, que não inclui os custos de envio nem as promoções
- Calculadora de envio
- Os locais físicos (não aplicáveis no Brasil)
- A mensagem de promoções, por exemplo, 2x1
- O total do carrinho que inclui o custo de envio e promoções
- As taxas com base no total, aplicam-se apenas no Brasil
- O botão para finalizar a compra
- O link para continuar comprando
<div class="cart-row">
{% include "snipplets/cart-totals.tpl" with {'cart_page': true} %}
</div>No final do arquivo está esta linha de código:
<div id="store-curr" class="hidden">{{ cart.currency }}</div>Usamos a partir do back-end para obter os dados do cart.currency do carrinho, portanto, ele não deve ser excluído.