Carrinho suspenso
Modelo para utilização do carrinho suspenso.
# Insira o trecho de código no HTML do seu Topo
<div class="suspended-cart">
<div class="cover"></div>
<div class="drop"></div>
</div>
<script>
$(function(){
// carrinho suspenso
loadSuspendedCart();
// este trecho de código fecha o carrinho suspenso ao clicar em seu backdrop
// a segunda parte, chama uma função com alert() sobre a remoção de item do carrinho
$('.suspended-cart').on('click', '.cover, .fechar', function(e){
e.preventDefault();
$('.suspended-cart').removeClass('open');
$('body').css({'overflow': 'inherit'});
}).on('click', '.item-delete', function(){
let sku = $(this).parents('.item').data('sku');
if(confirm('Confirma a remoção deste produto?')){
cartRemoveProduct(sku);
}
});
// aqui você informa o elemento que ao ser clicado, abrirá o carrinho suspenso
// geramente onde tem o icone de cestinha
$('header .cart_container').on('click', function(){
openSuspendedCart();
});
totalItensCarrinho.registerListener(function(){
loadSuspendedCart();
});
onAddProductCart.registerListener(function(fetch){
openSuspendedCart();
});
//
});
function openSuspendedCart(){
$('.suspended-cart').addClass('open');
$('body').css({'overflow': 'hidden'});
}
function loadSuspendedCart(){
$.post('load-twig.php', {folder:'includes', file:'suspended-cart.html'}, function(d){
$('.suspended-cart .drop').html(d);
});
}
</script>
# HTML
# Crie um novo widget e cole o código abaixo
{% set carrinho = store.cart() %}
{% set valores = carrinho.cart.amount %}
{% set valor_carrinho_str = valores.total %}
<div class="drop-header">
<h3>MEU CARRINHO</h3>
<span class="fechar">×</span>
</div>
{% if carrinho.total_items == 0 %}
<div class="msg-empty">
<p><strong>Seu carrinho está vazio</strong>, que tal adicionar um produto?</p>
</div>
{% else %}
<div class="drop-list">
{% for item in carrinho.cart.items %}
<div class="item" data-sku="{{ item.sku }}">
<div class="foto">
<img src="{{ item.foto }}" alt="{{ item.produto }}" class="img-fluid" />
</div>
<div class="det">
<h3 class="produto mb-2"><strong>{{ item.produto }}</strong></h3>
{% if item.prazo_entrega > 0 %}
{{ item.prazo_entrega_raw }}
{% endif %}
{% if item.cor or item.variacao %}
{{ item.variacao_raw }}
{% endif %}
<p class="valores">
<span>{{ item.quantidade }}x R${{ item.valor_unitario|valor }}</span>
<span class="text-right"><strong>R${{ item.valor_parcial|valor }}</strong></span>
</p>
<span class="item-delete text-danger"><i class="fa fa-trash"></i></span>
</div>
</div>
{% endfor %}
</div>
<div class="drop-footer">
<p class="item">
<span>Subtotal</span>
<span class="text-right">R${{ valores.subtotal|valor }}</span>
</p>
<p class="item">
<span>Desconto</span>
<span class="text-right">R${{ valores.discount|valor }}</span>
</p>
<p class="item">
<span><strong>Total</strong></span>
<span class="text-right"><strong>R${{ valores.total|valor }}</strong></span>
</p>
<div class="botoes">
<a href="#" class="bt-continuar fechar">CONTINUAR COMPRANDO</a>
<a href="carrinho/" class="bt-finalizar">FINALIZAR COMPRA</a>
</div>
</div>
{% endif %}
<script>
$(function(){
$('header .cart .sup').html('{{ carrinho.total_items }}');
$('header .cart-total .cart-total-label').html('R${{ valores.total|valor }}');
});
</script>
// SCSS/CSS
// Informe este código CSS no CSS do seu Topo (que vai receber o carrinho suspenso)
.suspended-cart{
position: fixed;
z-index: 9999999999;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
&.open{
visibility: visible;
.cover{
visibility: visible;
opacity: 1;
}
.drop{
right: 0;
}
}
.cover{
background-color: rgba(0,0,0,0.7);
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
visibility: hidden;
opacity: 0;
transition: all .25s;
}
.drop{
position: fixed;
top: 0;
right: -500px;
width: 100%;
max-width: 500px;
height: 100%;
background-color: #FFF;
z-index: 2;
transition: all .25s;
.drop-header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: solid 1px #DDD;
h3{
font-size: 20px;
font-weight: bold;
}
.fechar{
width: 35px;
height: 35px;
border: solid 1px #DDD;
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
cursor: pointer;
}
}
.msg-empty{
padding: 30px;
font-size: 23px;
line-height: 26px;
text-align: center;
}
.drop-list{
height: calc(100% - 290px);
overflow: auto;
.item{
padding: 20px;
.foto{
width: 100px;
display: inline-block;
margin-right: 20px;
vertical-align: top;
}
.det{
width: calc(100% - 130px);
display: inline-block;
vertical-align: top;
position: relative;
.produto{
width: calc(100% - 30px);
display: inline-block;
}
.valores{
margin-top: 10px;
display: flex;
justify-content: space-between;
}
.item-delete{
width: 25px;
height: 25px;
position: absolute;
top: 0;
right: 0;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
border: solid 1px #DDD;
border-radius: 3px;
}
}
}
}
.drop-footer{
padding: 20px;
.item{
display: flex;
justify-content: space-between;
padding: 5px 0;
}
.botoes{
display: flex;
justify-content: space-between;
padding-top: 15px;
margin-top: 10px;
border-top: solid 1px #DDD;
text-align: center;
line-height: 15px;
a{
margin-left: 10px;
border: solid 1px #666;
color: #000;
font-size: 12px;
width: 50%;
display: flex;
justify-content: center;
align-items: center;
height: 60px;
padding: 5px;
&:active{
opacity: 0.7;
}
&:first-child{
margin-left: 0;
}
&.bt-finalizar{
background-color: #666;
color: #FFF;
}
}
}
}
}
}