cart.tpl

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.