Carrinho Lateral
Snippet para criar o carrinho lateral, ou flutuante como alguns conhecem.
{#
# Snippets do Carrinho Lateral
# elements/snippets/cart.html
#}
<div class="cart-sidebar">
<div class="header-cart">
<div class="box-prev">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 492 492">
<path d="M198.608,246.104L382.664,62.04c5.068-5.056,7.856-11.816,7.856-19.024c0-7.212-2.788-13.968-7.856-19.032l-16.128-16.12
C361.476,2.792,354.712,0,347.504,0s-13.964,2.792-19.028,7.864L109.328,227.008c-5.084,5.08-7.868,11.868-7.848,19.084
c-0.02,7.248,2.76,14.028,7.848,19.112l218.944,218.932c5.064,5.072,11.82,7.864,19.032,7.864c7.208,0,13.964-2.792,19.032-7.864
l16.124-16.12c10.492-10.492,10.492-27.572,0-38.06L198.608,246.104z"/>
</svg>
</div>
<div class="text">Carrinho de compras</div>
</div>
<div class="content-cart empty">
<div class="list">
<div class="error">
<div class="text">Carrinho Vazio</div>
</div>
</div>
</div>
<div class="footer-cart">
<div class="text-info">
<div class="total">
<span>Subtotal:</span>
<span class="value"></span>
</div>
</div>
<div class="line">
<a href="{{ links.cart }}" rel="nofollow" class="link-cart">Finalizar compra</a>
<div class="box-prev">Continuar Comprando</div>
</div>
</div>
</div>
<div class="shadow-cart"></div>.cart-sidebar, .shadow-cart {
position: fixed;
height: 100%;
top: 0;
opacity: 0;
transition: .3s ease-in-out;
}
.shadow-cart {
width: 100%;
background-color: #171717;
left: 0;
z-index: 11;
visibility: hidden;
}
.cart-sidebar.active ~ .shadow-cart {
opacity: .9;
visibility: visible;
}
.cart-sidebar {
right: 0;
background: #ffffff;
color: #0d0d0d;
z-index: 12;
width: 430px;
max-width: 100%;
padding: 0 20px;
transform: translateX(100%);
display: flex;
flex-direction: column;
}
.cart-sidebar.active {
transform: translateX(0);
opacity: 1;
}
.cart-sidebar .header-cart {
background: #0c0c0c;
margin: 0 -20px;
color: #ffffff;
display: flex;
align-items: center;
}
.cart-sidebar .header-cart .box-prev {
padding: 10px;
margin-right: 14px;
cursor: pointer;
background-color: #2d2d2d;
}
.cart-sidebar .header-cart .box-prev .icon {
width: 16px;
height: 16px;
fill: #fff;
display: block;
}
.cart-sidebar .content-cart {
overflow: auto;
padding-top: 20px;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: space-between;
}
.cart-sidebar .item {
margin-bottom: 20px;
}
.cart-sidebar .box-cart {
display: flex;
align-items: center;
}
.cart-sidebar .box-cart .box-image {
width: 84px;
height: 84px;
border: 1px solid #f6f6f8;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.cart-sidebar .box-cart .box-image img {
display: block;
max-height: 100%;
max-width: 100%;
margin: auto;
}
.cart-sidebar .box-cart .info-product {
width: calc(100% - 80px);
margin-left: 10px;
padding-right: 20px;
position: relative;
}
.cart-sidebar .box-cart .line-top {
display: flex;
justify-content: space-between;
}
.cart-sidebar .box-cart .info-product a {
display: block;
margin-bottom: 8px;
}
.cart-sidebar .box-cart .info-product .remove {
width: 12px;
height: 12px;
position: absolute;
cursor: pointer;
top: 0;
right: 0;
}
.cart-sidebar .box-cart .info-product .price {
font-weight: 700;
}
.cart-sidebar .box-cart .info-product .qnt {
font-size: .75rem;
}
.cart-sidebar .footer-cart {
height: 200px;
margin-top: 15px;
}
.cart-sidebar .content-cart.empty + .footer-cart {
display: none;
}
.cart-sidebar .footer-cart .text-info {
display: flex;
align-items: center;
justify-content: flex-end;
border-bottom: 1px solid #e4e4e4;
text-align: right;
}
.cart-sidebar .text-info .value {
font-weight: 700;
display: block;
}
.cart-sidebar .footer-cart .line {
margin: 20px 0;
}
.cart-sidebar .footer-cart .link-cart {
color: #fff;
text-align: center;
background: #646464;
width: 100%;
display: block;
border-radius: 30px;
line-height: 55px;
}
.cart-sidebar .footer-cart .box-prev {
text-align: center;
margin-top: 15px;
cursor: pointer;
}function toReal(value, str_cifrao) {
return str_cifrao + ' ' + value.formatMoney(2, ',', '.');
}
var cart = {
session: function () {
return jQuery("html").attr("data-session");
},
removeProduct: function (element){
var id = parseInt(jQuery(element).attr('data-id'));
var variant = '/' + jQuery(element).attr('data-variant');
var together = jQuery(element).attr('data-together') !== '' ? '/' + jQuery(element).attr('data-together') : '';
var addText = jQuery(element).attr('data-add') == "" ? '' : jQuery(element).attr('data-add');
jQuery.ajax({
method: "DELETE",
url: "/web_api/carts/" + cart.session() + "/" + id + variant + together + "?" + jQuery.param({ "additional_information": addText })
}).done(function(response) {
cart.listProduct();
}).fail(function(error) {
cart.listProduct();
})
},
listProduct: function () {
jQuery.ajax({
method: "GET",
url: "/web_api/cart/" + cart.session(),
success: function (response) {
cart.forProduct(response);
},
error: function (error) {
cart.forProduct([]);
}
});
},
total: function(price){
jQuery('.cart-sidebar .total .value').text(toReal(parseFloat(price), 'R$'));
},
forProduct: function (listProducts) {
var listDom = jQuery('.cart-sidebar .content-cart .list');
listDom.find('*').remove();
listDom.parent().removeClass('empty');
var qnt = 0;
var total = 0.0;
var listId = [];
if (listProducts.length) {
listProducts.forEach(function (product) {
product = product.Cart;
var addMsg = product.additional_information;
prices = product;
var productImage = product.product_image.thumbs[90].https.length ? product.product_image.thumbs[90].https : '';
listDom.append(cart.templateProduct(product.product_id, product.variant_id, product.product_name, productImage, product.quantity, product.price, product.product_url.https,addMsg,product.bought_together_id));
qnt += parseInt(product.quantity);
total += (parseFloat(product.price) * parseInt(product.quantity));
listId.push(parseInt(product.product_id));
});
cart.total(total);
} else {
listDom.append('<div class="error"><div clas="text">Carrinho Vazio</div></div>');
listDom.parent().addClass('empty');
}
},
startCart: function () {
jQuery('.cart-toggle').on('click', function(e){
e.preventDefault();
cart.showCart();
});
jQuery('.shadow-cart, .cart-sidebar .box-prev').on('click', function(e){
jQuery('.cart-sidebar').removeClass('active');
});
},
showCart: function(){
cart.listProduct();
jQuery('.cart-sidebar').addClass('active');
},
templateProduct: function (id, variant, name, image, qnt, price, url, addMsg, together) {
var template = '\
<div class="item">\
<div class="box-cart flex align-center">\
<div class="box-image">\
<a href="{url}" class="image">\
<img src="{image}" alt="{name}">\
</a>\
</div>\
<div class="info-product">\
<div class="line-top flex justify-between">\
<a href="{url}" class="name t-color">{name}</a>\
<div class="remove" data-id="{id}" data-together="{together}" data-variant="{variant}" data-add="{addMsg}" onclick="cart.removeProduct(this)">\
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 438.529 438.529">\
<path d="M417.689,75.654c-1.711-1.709-3.901-2.568-6.563-2.568h-88.224L302.917,25.41c-2.854-7.044-7.994-13.04-15.413-17.989C280.078,2.473,272.556,0,264.945,0h-91.363c-7.611,0-15.131,2.473-22.554,7.421c-7.424,4.949-12.563,10.944-15.419,17.989l-19.985,47.676h-88.22c-2.667,0-4.853,0.859-6.567,2.568c-1.709,1.713-2.568,3.903-2.568,6.567v18.274c0,2.664,0.855,4.854,2.568,6.564c1.714,1.712,3.904,2.568,6.567,2.568h27.406v271.8c0,15.803,4.473,29.266,13.418,40.398c8.947,11.139,19.701,16.703,32.264,16.703h237.542c12.566,0,23.319-5.756,32.265-17.268c8.945-11.52,13.415-25.174,13.415-40.971V109.627h27.411c2.662,0,4.853-0.856,6.563-2.568c1.708-1.709,2.57-3.9,2.57-6.564V82.221C420.26,79.557,419.397,77.367,417.689,75.654z M169.301,39.678c1.331-1.712,2.95-2.762,4.853-3.14h90.504c1.903,0.381,3.525,1.43,4.854,3.14l13.709,33.404H155.311L169.301,39.678z M347.173,380.291c0,4.186-0.664,8.042-1.999,11.561c-1.334,3.518-2.717,6.088-4.141,7.706c-1.431,1.622-2.423,2.427-2.998,2.427H100.493c-0.571,0-1.565-0.805-2.996-2.427c-1.429-1.618-2.81-4.188-4.143-7.706c-1.331-3.519-1.997-7.379-1.997-11.561V109.627h255.815V380.291z"/>\
<path d="M137.04,347.172h18.271c2.667,0,4.858-0.855,6.567-2.567c1.709-1.718,2.568-3.901,2.568-6.57V173.581c0-2.663-0.859-4.853-2.568-6.567c-1.714-1.709-3.899-2.565-6.567-2.565H137.04c-2.667,0-4.854,0.855-6.567,2.565c-1.711,1.714-2.568,3.904-2.568,6.567v164.454c0,2.669,0.854,4.853,2.568,6.57C132.186,346.316,134.373,347.172,137.04,347.172z"/>\
<path d="M210.129,347.172h18.271c2.666,0,4.856-0.855,6.564-2.567c1.718-1.718,2.569-3.901,2.569-6.57V173.581c0-2.663-0.852-4.853-2.569-6.567c-1.708-1.709-3.898-2.565-6.564-2.565h-18.271c-2.664,0-4.854,0.855-6.567,2.565c-1.714,1.714-2.568,3.904-2.568,6.567v164.454c0,2.669,0.854,4.853,2.568,6.57C205.274,346.316,207.465,347.172,210.129,347.172z"/>\
<path d="M283.22,347.172h18.268c2.669,0,4.859-0.855,6.57-2.567c1.711-1.718,2.562-3.901,2.562-6.57V173.581c0-2.663-0.852-4.853-2.562-6.567c-1.711-1.709-3.901-2.565-6.57-2.565H283.22c-2.67,0-4.853,0.855-6.571,2.565c-1.711,1.714-2.566,3.904-2.566,6.567v164.454c0,2.669,0.855,4.853,2.566,6.57C278.367,346.316,280.55,347.172,283.22,347.172z" />\
</svg>\
</div>\
</div>\
<div class="line-down">\
<div class="qnt">Quantidade: {length}</div>\
<div class="price">{price}</div>\
</div>\
</div>\
</div>\
</div>\
';
price = toReal(parseFloat(price), 'R$');
template = template.replace(/{url}/g,url);
template = template.replace(/{image}/g,image);
template = template.replace(/{name}/g,name);
template = template.replace(/{id}/g,id);
template = template.replace(/{variant}/g,variant);
template = template.replace(/{length}/g,qnt);
template = template.replace(/{addMsg}/g,addMsg);
template = template.replace(/{price}/g,price);
template = template.replace(/{together}/g,together);
return template;
}
}
jQuery(function(){
cart.startCart();
}); Como usar
Copie o código HTML e crie um arquivo separado, exemplo:
elements/snippets/cart.html
Faça a chamada desse arquivo onde desejar:
{% element 'snippets/cart' %} Insira o bloco de código CSS em sua folha de estilo .css
Insira o bloco de código Javascript em seu arquivo .js
Last updated
Was this helpful?