<html lang="en">
<head>
<meta charset="UTF-8">
<title>Atelie da Lola Produtos</title>
<link rel="stylesheet" href="lib/style.css">
</head>
<body>
<div class="controls">
<label for="sort">Ordenar por:</label>
<select id="sort">
<option value="finalValue">Valor</option>
<option value="amount">Quantidade</option>
<option value="unit">Custo unitário</option>
</select>
<button id="sort-direction" onclick="toggleSortDirection()">Menor</button>
</div>
<div id="products"></div>
<script src="lib/script.js"></script>
</body>
</html>
html {
background-color: #ccc;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.controls {
position: fixed;
background-color: #fafafa;
width: 100%;
top: 0;
left: 0;
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #333;
}
.controls label {
margin-right: 10px;
font-weight: bold;
}
#products {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
padding: 20px;
justify-items: center; /* Optional: centers products in their grid cells */
}
/* Medium screens (2 columns) */
@media (max-width: 1040px) {
#products {
grid-template-columns: repeat(auto-fill, minmax(320px, 320px));
justify-content: center;
}
}
/* Small screens (1 column) */
@media (max-width: 700px) {
#products {
grid-template-columns: 320px;
}
}
.product-list {
border-collapse: collapse;
width: 100%;
}
.product-row {
display: flex;
flex-direction: column;
border: 1px solid #ccc;
margin-bottom: 10px;
padding: 10px;
border-radius: 8px;
align-items: center;
background-color: #fafafa;
text-decoration: none;
}
.product-row .image-holder {
max-width: 320px;
max-height: 320px;
height: 320px;
border-radius: 4px;
overflow: hidden;
}
.product-row .image-holder img {
width: 100%;
height: 100%;
object-fit: contain;
}
.product-info {
display: flex;
flex-direction: column;
gap: 5px;
}
.product-name {
font-size: 1rem;
font-weight: bold;
color: #333;
}
.product-size {
font-size: 0.75rem;
color: #333;
}
.amount {
font-size: 0.75rem;
color: #333;
}
.price-block {
display: flex;
gap: 0.5rem;
font-size: 0.75rem;
font-weight: bold;
}
.normal-value {
text-decoration: line-through;
color: #F44336;
}
.discount-value {
color: #333;
}
.final-value {
color: #27ae60;
font-weight: bold;
}
.unit-cost {
font-size: 0.75rem;
color: #333;
}
let products = [
{
"name": "Cartao de agradecimento para lojas",
"normalValue": "R$ 1,49 ",
"discount": "R$ 1,00",
"finalValue": "R$ 0,95",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/75785189/813f91a933.jpg",
"link": "https://www.ateliedalola.com.br/cartao-de-agradecimento-para-lojas",
"size": "10x10cm",
"amount": 1,
"unitPrice": 0.95,
"unitDiscountPrice": 1
},
{
"name": "Sacola personalizada tamanho PP - Kit com 50",
"normalValue": "R$ 250,00 ",
"discount": "R$ 150,00",
"finalValue": "R$ 142,50",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/59382477/fe7b8b560a.jpg",
"link": "https://www.ateliedalola.com.br/sacolapp.kit50",
"size": "9,7cm (largura) x 15cm (altura) x 5cm (profundidade)",
"amount": 50,
"unitPrice": 2.85,
"unitDiscountPrice": 3
},
{
"name": "Sacola personalizada tamanho P - Kit com 50",
"normalValue": "R$ 250,00 ",
"discount": "R$ 175,00",
"finalValue": "R$ 166,25",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/59363611/sacola-p-nova-fjidnxqkmc.jpg",
"link": "https://www.ateliedalola.com.br/sacolaPkit50",
"size": "15cm (largura) x 23cm (altura) x 8cm (profundidade)",
"amount": 50,
"unitPrice": 3.325,
"unitDiscountPrice": 3.5
},
{
"name": "Sacola personalizada tamanho P3 - Kit com 50",
"normalValue": "R$ 250,00 ",
"discount": "R$ 175,00",
"finalValue": "R$ 166,25",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/331837881/p3-powyo9wynz.jpg",
"link": "https://www.ateliedalola.com.br/kit50p3",
"size": "15cm (largura) x 15cm (altura) x 8cm (profundidade)",
"amount": 50,
"unitPrice": 3.325,
"unitDiscountPrice": 3.5
},
{
"name": "Sacola personalizada tamanho P2 - Kit com 50",
"normalValue": "R$ 250,00 ",
"discount": "R$ 175,00",
"finalValue": "R$ 166,25",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/231586234/whatsapp-image-2023-09-01-at-12-40-14-j4wh1t1wse.jpeg",
"link": "https://www.ateliedalola.com.br/p2kit50",
"size": "20cm (largura) x 15cm (altura) x 8cm (profundidade)",
"amount": 50,
"unitPrice": 3.325,
"unitDiscountPrice": 3.5
},
{
"name": "Sacola personalizada em papel tamanho M4 - Kit com 50",
"normalValue": "R$ 290,00 ",
"discount": "R$ 220,00",
"finalValue": "R$ 209,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/89315328/4d40be8a92.jpg",
"link": "https://www.ateliedalola.com.br/sacola-personalizada-em-papel-tamanho-m4-kit-com-50",
"size": "20cm (largura) x 21cm (altura) x 17cm (profundidade)",
"amount": 50,
"unitPrice": 4.18,
"unitDiscountPrice": 4.4
},
{
"name": "Sacola personalizada Tamanho M3 - Kit com 50",
"normalValue": "R$ 225,00 ",
"discount": "R$ 220,00",
"finalValue": "R$ 209,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/62579748/c6d0f17aca.jpg",
"link": "https://www.ateliedalola.com.br/sacola-personalizada-tamanho-m3-kit-com-50",
"size": "25,5cm (largura) x 22,5cm (altura) x 12cm (profundidade)",
"amount": 50,
"unitPrice": 4.18,
"unitDiscountPrice": 4.4
},
{
"name": "Sacola personalizada tamanho M2 - Kit com 50",
"normalValue": "R$ 225,00 ",
"discount": "R$ 220,00",
"finalValue": "R$ 209,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/59644536/967f159018.jpg",
"link": "https://www.ateliedalola.com.br/sacolaM2.kit50",
"size": "19cm (largura) x 28cm (altura) x 10cm (profundidade)",
"amount": 50,
"unitPrice": 4.18,
"unitDiscountPrice": 4.4
},
{
"name": "Sacola personalizada tamanho M - Kit com 50",
"normalValue": "R$ 225,00 ",
"discount": "R$ 220,00",
"finalValue": "R$ 209,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/59326860/6f1b4d6fd5.jpg",
"link": "https://www.ateliedalola.com.br/sacolaM.kit50",
"size": "33cm (largura) x 23cm (altura) x 10cm (profundidade)",
"amount": 50,
"unitPrice": 4.18,
"unitDiscountPrice": 4.4
},
{
"name": "Sacola personalizada tamanho PP - Kit com 100",
"normalValue": "R$ 399,00 ",
"discount": "R$ 275,00",
"finalValue": "R$ 261,25",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/59384797/e8f49c0f68.jpg",
"link": "https://www.ateliedalola.com.br/SacolaPP100",
"size": "9,7cm (largura) x 15cm (altura) x 5cm (profundidade)",
"amount": 100,
"unitPrice": 2.6125,
"unitDiscountPrice": 2.75
},
{
"name": "Sacola personalizada tamanho P - Kit com 100",
"normalValue": "R$ 355,00 ",
"discount": "R$ 320,00",
"finalValue": "R$ 304,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/59366554/7463588826.jpg",
"link": "https://www.ateliedalola.com.br/sacolap.kit100",
"size": "15cm (largura) x 23cm (altura) x 8cm (profundidade)",
"amount": 100,
"unitPrice": 3.04,
"unitDiscountPrice": 3.2
},
{
"name": "Sacola personalizada tamanho P3 - Kit com 100",
"normalValue": "R$ 450,00 ",
"discount": "R$ 320,00",
"finalValue": "R$ 304,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/332442744/p3-zi184nr7ob.jpg",
"link": "https://www.ateliedalola.com.br/p3com100",
"size": "15cm (largura) x 15cm (altura) x 8cm (profundidade)",
"amount": 100,
"unitPrice": 3.04,
"unitDiscountPrice": 3.2
},
{
"name": "Sacola personalizada tamanho P2 - Kit com 100",
"normalValue": "R$ 355,00 ",
"discount": "R$ 320,00",
"finalValue": "R$ 304,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/231588579/whatsapp-image-2023-09-01-at-12-40-14-ah9hfijplm.jpeg",
"link": "https://www.ateliedalola.com.br/p2kit100",
"size": "20cm (largura) x 15cm (altura) x 8cm (profundidade)",
"amount": 100,
"unitPrice": 3.04,
"unitDiscountPrice": 3.2
},
{
"name": "Sacola personalizada em papel tamanho M4 - Kit com 100",
"normalValue": "R$ 440,00 ",
"discount": "R$ 415,00",
"finalValue": "R$ 394,25",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/89214539/7690f061dc.jpg",
"link": "https://www.ateliedalola.com.br/sacola-personalizada-em-papel-tamanho-m4-kit-com-100",
"size": "20cm (largura) x 21cm (altura) x 17cm (profundidade)",
"amount": 100,
"unitPrice": 3.9425,
"unitDiscountPrice": 4.15
},
{
"name": "Sacola personalizada Tamanho M3 - Kit com 100",
"normalValue": "R$ 420,00 ",
"discount": "R$ 415,00",
"finalValue": "R$ 394,25",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/62579929/dd7779940c.jpg",
"link": "https://www.ateliedalola.com.br/M3_kit1000",
"size": "25,5cm (largura) x 22,5cm (altura) x 12cm (profundidade)",
"amount": 100,
"unitPrice": 3.9425,
"unitDiscountPrice": 4.15
},
{
"name": "Sacola personalizada papel tamanho M2 - Kit com 100",
"normalValue": "R$ 420,00 ",
"discount": "R$ 415,00",
"finalValue": "R$ 394,25",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/59645265/34872aadd2.jpg",
"link": "https://www.ateliedalola.com.br/sacolaM2.kit100",
"size": "19cm (largura) x 28cm (altura) x 10cm (profundidade)",
"amount": 100,
"unitPrice": 3.9425,
"unitDiscountPrice": 4.15
},
{
"name": "Sacola personalizada tamanho M - Kit com 100",
"normalValue": "R$ 450,00 ",
"discount": "R$ 415,00",
"finalValue": "R$ 394,25",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/59335871/4650b8fc87.jpg",
"link": "https://www.ateliedalola.com.br/SacolaM.kit100",
"size": "33cm (largura) x 23cm (altura) x 10cm (profundidade)",
"amount": 100,
"unitPrice": 3.9425,
"unitDiscountPrice": 4.15
},
{
"name": "Sacola personalizada tamanho PP - Kit com 250",
"normalValue": "R$ 1.240,00 ",
"discount": "R$ 1.080,00",
"finalValue": "R$ 1.026,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/59385329/9eae17e6eb.jpg",
"link": "https://www.ateliedalola.com.br/sacolapp.kit250",
"size": "9,7cm (largura) x 15cm (altura) x 5cm (profundidade)",
"amount": 250,
"unitPrice": 4.104,
"unitDiscountPrice": 4.32
},
{
"name": "Sacola personalizada tamanho P - Kit com 250",
"normalValue": "R$ 1.350,00 ",
"discount": "R$ 1.140,00",
"finalValue": "R$ 1.083,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/59367180/28af873e43.jpg",
"link": "https://www.ateliedalola.com.br/sacolap.kit250",
"size": "15cm (largura) x 23cm (altura) x 8cm (profundidade)",
"amount": 250,
"unitPrice": 4.332,
"unitDiscountPrice": 4.56
},
{
"name": "Sacola personalizada tamanho P2 - Kit com 250",
"normalValue": "R$ 1.350,00 ",
"discount": "R$ 1.140,00",
"finalValue": "R$ 1.083,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/231590525/whatsapp-image-2023-08-31-at-16-50-24-rlxy2ap553.jpeg",
"link": "https://www.ateliedalola.com.br/p2kit250",
"size": "20cm (largura) x 15cm (altura) x 8cm (profundidade)",
"amount": 250,
"unitPrice": 4.332,
"unitDiscountPrice": 4.56
},
{
"name": "Sacola personalizada Tamanho M3 - Kit com 250",
"normalValue": "R$ 1.450,00 ",
"discount": "R$ 1.320,00",
"finalValue": "R$ 1.254,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/62580661/c6d525edd3.jpg",
"link": "https://www.ateliedalola.com.br/m3.kit.250",
"size": "25,5cm (largura) x 22,5cm (altura) x 12cm (profundidade)",
"amount": 250,
"unitPrice": 5.016,
"unitDiscountPrice": 5.28
},
{
"name": "Sacola personalizada papel tamanho M2 - Kit com 250",
"normalValue": "R$ 1.450,00 ",
"discount": "R$ 1.320,00",
"finalValue": "R$ 1.254,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/59645628/95b66cc7d4.jpg",
"link": "https://www.ateliedalola.com.br/sacolam2.250",
"size": "19cm (largura) x 28cm (altura) x 10cm (profundidade)",
"amount": 250,
"unitPrice": 5.016,
"unitDiscountPrice": 5.28
},
{
"name": "Sacola personalizada de papel tamanho M - Kit com 250",
"normalValue": "R$ 1.390,00 ",
"discount": "R$ 1.320,00",
"finalValue": "R$ 1.254,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/59336705/whatsapp-image-2022-11-30-at-18-14-28-ar6qkp2n7x.jpeg",
"link": "https://www.ateliedalola.com.br/sacolaMkit250",
"size": "33cm (largura) x 23cm (altura) x 10cm (profundidade)",
"amount": 250,
"unitPrice": 5.016,
"unitDiscountPrice": 5.28
},
{
"name": "Sacola personalizada Tamanho M4 - Kit com 250",
"normalValue": "R$ 1.450,00 ",
"discount": "R$ 1.320,00",
"finalValue": "R$ 1.254,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/106118830/d10b5096bf.jpg",
"link": "https://www.ateliedalola.com.br/M4com250",
"size": "20cm (largura) x 21cm (altura) x 17cm (profundidade)",
"amount": 250,
"unitPrice": 5.016,
"unitDiscountPrice": 5.28
},
{
"name": "Sacola personalizada tamanho PP - Kit com 500",
"normalValue": "R$ 1.550,00 ",
"discount": "R$ 1.380,00",
"finalValue": "R$ 1.311,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/59386561/a06f79019a.jpg",
"link": "https://www.ateliedalola.com.br/sacolapp.kit500",
"size": "9,7cm (largura) x 15cm (altura) x 5cm (profundidade)",
"amount": 500,
"unitPrice": 2.622,
"unitDiscountPrice": 2.76
},
{
"name": "Sacola personalizada de papel tamanho X3 - Kit com 250",
"normalValue": "R$ 1.650,00 ",
"discount": "R$ 1.430,00",
"finalValue": "R$ 1.358,50",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/231683222/whatsapp-image-2023-09-01-at-12-38-24-fsxt563lgy.jpeg",
"link": "https://www.ateliedalola.com.br/x3kit250",
"size": "27cm (largura) x 27cm (altura) x 12cm (profundidade)",
"amount": 250,
"unitPrice": 5.434,
"unitDiscountPrice": 5.72
},
{
"name": "Sacola personalizada de papel tamanho X2 - Kit com 250",
"normalValue": "R$ 1.650,00 ",
"discount": "R$ 1.430,00",
"finalValue": "R$ 1.358,50",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/178854707/c57a81e96f.jpg",
"link": "https://www.ateliedalola.com.br/x2kit250",
"size": "23cm (largura) x 34cm (altura) x 11cm (profundidade)",
"amount": 250,
"unitPrice": 5.434,
"unitDiscountPrice": 5.72
},
{
"name": "Sacola personalizada de papel tamanho X1 - Kit com 250",
"normalValue": "R$ 1.650,00 ",
"discount": "R$ 1.430,00",
"finalValue": "R$ 1.358,50",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/170419324/a82fa01504.jpg",
"link": "https://www.ateliedalola.com.br/sacolax250",
"size": "35cm (largura) x 25cm (altura) x 11,5cm (profundidade)",
"amount": 250,
"unitPrice": 5.434,
"unitDiscountPrice": 5.72
},
{
"name": "Sacola personalizada tamanho P - Kit com 500",
"normalValue": "R$ 1.620,00 ",
"discount": "R$ 1.480,00",
"finalValue": "R$ 1.406,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/59367618/0b75e8a168.jpg",
"link": "https://www.ateliedalola.com.br/sacolap.kit500",
"size": "15cm (largura) x 23cm (altura) x 8cm (profundidade)",
"amount": 500,
"unitPrice": 2.812,
"unitDiscountPrice": 2.96
},
{
"name": "500 sacolas - Sacola Tamanho P2",
"normalValue": "R$ 1.620,00 ",
"discount": "R$ 1.480,00",
"finalValue": "R$ 1.406,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/231590840/whatsapp-image-2024-09-11-at-18-27-14-8riv8x0u8c.jpeg",
"link": "https://www.ateliedalola.com.br/p2kit500",
"size": "20cm (largura) x 15cm (altura) x 8cm (profundidade)",
"amount": 500,
"unitPrice": 2.812,
"unitDiscountPrice": 2.96
},
{
"name": "Sacola personalizada Tamanho G2 - kit com 250",
"normalValue": "R$ 1.790,00 ",
"discount": "R$ 1.700,00",
"finalValue": "R$ 1.615,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/88884533/733fa4c198.jpg",
"link": "https://www.ateliedalola.com.br/sacola-personalizada-g2-kit-com-250",
"size": "29cm (largura) x 29cm (altura) x 19cm (profundidade)",
"amount": 250,
"unitPrice": 6.46,
"unitDiscountPrice": 6.8
},
{
"name": "Sacola personalizada Tamanho G - Kit com 250",
"normalValue": "R$ 1.850,00 ",
"discount": "R$ 1.700,00",
"finalValue": "R$ 1.615,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/75095886/0171e67d96.jpg",
"link": "https://www.ateliedalola.com.br/sacola-personalizada-g-kit-com-250",
"size": "45cm (largura) x 31cm (altura) x 13cm (profundidade)",
"amount": 250,
"unitPrice": 6.46,
"unitDiscountPrice": 6.8
},
{
"name": "Sacola personalizada tamanho M2 - Kit com 500",
"normalValue": "R$ 1.790,00 ",
"discount": "R$ 1.760,00",
"finalValue": "R$ 1.672,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/59646414/937711d7fe.jpg",
"link": "https://www.ateliedalola.com.br/sacolaM2.kit500",
"size": "19cm (largura) x 28cm (altura) x 10cm (profundidade)",
"amount": 500,
"unitPrice": 3.344,
"unitDiscountPrice": 3.52
},
{
"name": "Sacola personalizada tamanho M - Kit com 500",
"normalValue": "R$ 2.990,00 ",
"discount": "R$ 1.760,00",
"finalValue": "R$ 1.672,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/185936568/3cc07a3f00.jpg",
"link": "https://www.ateliedalola.com.br/500msac",
"size": "33cm (largura) x 23cm (altura) x 10cm (profundidade)",
"amount": 500,
"unitPrice": 3.344,
"unitDiscountPrice": 3.52
},
{
"name": "Sacola personalizada Tamanho M3 - Kit com 500 sacolas",
"normalValue": "R$ 1.800,00 ",
"discount": "R$ 1.760,00",
"finalValue": "R$ 1.672,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/108649447/85af87ddc7.jpg",
"link": "https://www.ateliedalola.com.br/m3_500unid",
"size": "25,5cm (largura) x 22,5cm (altura) x 12cm (profundidade)",
"amount": 500,
"unitPrice": 3.344,
"unitDiscountPrice": 3.52
},
{
"name": "Sacola personalizada tamanho M4 - Kit com 500",
"normalValue": "R$ 1.895,00 ",
"discount": "R$ 1.760,00",
"finalValue": "R$ 1.672,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/105139659/9a7aa37007.jpg",
"link": "https://www.ateliedalola.com.br/M4kit500",
"size": "20cm (largura) x 21cm (altura) x 17cm (profundidade)",
"amount": 500,
"unitPrice": 3.344,
"unitDiscountPrice": 3.52
},
{
"name": "Sacola personalizada tamanho PP - Kit com 1000",
"normalValue": "R$ 1.950,00 ",
"discount": "R$ 1.880,00",
"finalValue": "R$ 1.786,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/59386789/322d96bf29.jpg",
"link": "https://www.ateliedalola.com.br/sacolapp.kit1000",
"size": "9,7cm (largura) x 15cm (altura) x 5cm (profundidade)",
"amount": 1000,
"unitPrice": 1.786,
"unitDiscountPrice": 1.88
},
{
"name": "Sacola personalizada tamanho P - Kit com 1000",
"normalValue": "R$ 2.350,00 ",
"discount": "R$ 2.140,00",
"finalValue": "R$ 2.033,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/66260813/0eb52a2040.jpg",
"link": "https://www.ateliedalola.com.br/1000sacolasP",
"size": "15cm (largura) x 23cm (altura) x 8cm (profundidade)",
"amount": 1000,
"unitPrice": 2.033,
"unitDiscountPrice": 2.14
},
{
"name": "Sacola personalizada tamanho P2 - Kit com 1000",
"normalValue": "R$ 2.350,00 ",
"discount": "R$ 2.140,00",
"finalValue": "R$ 2.033,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/231591207/whatsapp-image-2023-08-31-at-16-50-24-6uuxjbj3z1.jpeg",
"link": "https://www.ateliedalola.com.br/p2kit1000",
"size": "20cm (largura) x 15cm (altura) x 8cm (profundidade)",
"amount": 1000,
"unitPrice": 2.033,
"unitDiscountPrice": 2.14
},
{
"name": "Sacola personalizada Tamanho G - Kit com 500",
"normalValue": "R$ 2.490,00 ",
"discount": "R$ 2.400,00",
"finalValue": "R$ 2.280,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/97539505/efd9e9d55a.jpg",
"link": "https://www.ateliedalola.com.br/500sacolasg",
"size": "45cm (largura) x 31cm (altura) x 13cm (profundidade)",
"amount": 500,
"unitPrice": 4.56,
"unitDiscountPrice": 4.8
},
{
"name": "Sacola personalizada Tamanho M3 - Kit com 1000",
"normalValue": "R$ 3.100,00 ",
"discount": "R$ 2.840,00",
"finalValue": "R$ 2.698,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/71314416/whatsapp-image-2021-04-26-at-13-53-42--1----copia-u4pos7s99h.jpeg",
"link": "https://www.ateliedalola.com.br/sacola-personalizada-tamanho-m3-kit-com-1000",
"size": "25,5cm (largura) x 22,5cm (altura) x 12cm (profundidade)",
"amount": 1000,
"unitPrice": 2.698,
"unitDiscountPrice": 2.84
},
{
"name": "Sacola de papel Personalizada Tamanho M2 - 1000 unidades",
"normalValue": "R$ 3.100,00 ",
"discount": "R$ 2.840,00",
"finalValue": "R$ 2.698,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/62379970/9582290842.jpg",
"link": "https://www.ateliedalola.com.br/sacola-de-papel-personalizada-m2-1000-unidades",
"size": "19cm (largura) x 28cm (altura) x 10cm (profundidade)",
"amount": 1000,
"unitPrice": 2.698,
"unitDiscountPrice": 2.84
},
{
"name": "Sacola personalizada tamanho M - Kit com 1000",
"normalValue": "R$ 2.990,00 ",
"discount": "R$ 2.840,00",
"finalValue": "R$ 2.698,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/178692389/435156ba8f.jpg",
"link": "https://www.ateliedalola.com.br/sacm1000",
"size": "33cm (largura) x 23cm (altura) x 10cm (profundidade)",
"amount": 1000,
"unitPrice": 2.698,
"unitDiscountPrice": 2.84
},
{
"name": "Sacola de papel Personalizada Tamanho M4 - 1000 unidades",
"normalValue": "R$ 3.100,00 ",
"discount": "R$ 2.840,00",
"finalValue": "R$ 2.698,00",
"img": "https://cdn.awsli.com.br/400x400/551/551527/produto/109255506/d0686d28c8.jpg",
"link": "https://www.ateliedalola.com.br/M4kit1000",
"size": "20cm (largura) x 21cm (altura) x 17cm (profundidade)",
"amount": 1000,
"unitPrice": 2.698,
"unitDiscountPrice": 2.84
}
]
const sizes = {
"PP": "9,7cm (largura) x 15cm (altura) x 5cm (profundidade)",
"P": "15cm (largura) x 23cm (altura) x 8cm (profundidade)",
"P3": "15cm (largura) x 15cm (altura) x 8cm (profundidade)",
"P2": "20cm (largura) x 15cm (altura) x 8cm (profundidade)",
"M4": "20cm (largura) x 21cm (altura) x 17cm (profundidade)",
"M3": "25,5cm (largura) x 22,5cm (altura) x 12cm (profundidade)",
"M2": "19cm (largura) x 28cm (altura) x 10cm (profundidade)",
"M": "33cm (largura) x 23cm (altura) x 10cm (profundidade)",
"G": "45cm (largura) x 31cm (altura) x 13cm (profundidade)",
"G2": "29cm (largura) x 29cm (altura) x 19cm (profundidade)",
"X3": "27cm (largura) x 27cm (altura) x 12cm (profundidade)",
"X2": "23cm (largura) x 34cm (altura) x 11cm (profundidade)",
"X1": "35cm (largura) x 25cm (altura) x 11,5cm (profundidade)",
}
function addSizeProperty(products, sizes) {
return products.map(product => {
// Find the size in the product name
const sizeMatch = product.name.match(/tamanho (\w+)|Tamanho (\w+)/i);
let sizeKey = null;
if (sizeMatch) {
// Check which group matched (tamanho or Tamanho)
sizeKey = sizeMatch[1] || sizeMatch[2];
// Convert to uppercase to match the sizes object keys
sizeKey = sizeKey.toUpperCase();
// Special case for "M3", "M2", etc. which might be captured as just "M"
if (sizeKey === 'M' || sizeKey === 'P' || sizeKey === 'G' || sizeKey === 'X') {
// Look for more specific size in the name
const specificSizeMatch = product.name.match(/(M\d|P\d|G\d|X\d)/i);
if (specificSizeMatch) {
sizeKey = specificSizeMatch[0].toUpperCase();
}
}
}
// Add the size property if we found a match in the sizes object
if (sizeKey && sizes[sizeKey]) {
product.size = sizes[sizeKey];
} else {
product.size = "Tamanho não especificado";
}
return product;
});
}
const formatCurrency = (value) => {
return `R$ ${value.toFixed(2).replace(".", ",")}`;
};
const productsWithUnitPrice = products.map(product => {
const finalValue = parseFloat(
product.discount.replace("R$", "").replace(".", "").replace(",", ".").trim())
const unitPrice = finalValue / product.amount;
return {
...product,
unitDiscountPrice: unitPrice
};
});
// Usage:
console.log(JSON.stringify(productsWithUnitPrice,null,2))
function parseCurrency(value) {
return parseFloat(value.replace(/[R$\s]/g, '').replace('.', '').replace(',\d+', ''));
}
function renderProducts(list) {
const container = document.getElementById('products');
container.innerHTML = '';
list.forEach(product => {
const row = document.createElement('a');
row.href = product.link
row.className = 'product-row';
row.target = "_blank";
const imgHolder = document.createElement('div');
imgHolder.className = "image-holder";
const img = document.createElement('img');
img.src = product.img;
img.alt = product.name;
const info = document.createElement('div');
info.className = 'product-info';
const name = document.createElement('div');
name.className = 'product-name';
name.textContent = product.name;
const sizeInfo = document.createElement('div');
sizeInfo.className = 'product-size';
sizeInfo.textContent = product.size;
const amount = document.createElement('div');
amount.className = 'amount';
amount.textContent = `Quantidade: ${product.amount}`;
const priceBlock = document.createElement('div');
priceBlock.className = 'price-block';
const finalPriceBlock = document.createElement('div');
finalPriceBlock.className = 'price-block';
const normal = document.createElement('div');
normal.className = 'normal-value';
normal.textContent = product.normalValue;
const discount = document.createElement('span');
discount.className = 'discount-value';
discount.textContent = product.discount;
const finalVal = document.createElement('span');
finalVal.className = 'final-value';
finalVal.textContent = `${product.finalValue} Pix`;
imgHolder.appendChild(img)
priceBlock.appendChild(normal)
priceBlock.appendChild(discount)
finalPriceBlock.appendChild(finalVal)
info.appendChild(name);
info.appendChild(sizeInfo);
info.appendChild(amount);
info.appendChild(priceBlock);
if(product.unitPrice > 0){
const unit = document.createElement('div');
unit.className = 'unit-cost';
unit.textContent = `Custo unitário R$ ${formatCurrency(product.unitPrice)}`;
info.appendChild(unit);
}
info.appendChild(finalPriceBlock);
if(product.unitDiscountPrice > 0){
const unit = document.createElement('div');
unit.className = 'unit-cost';
unit.textContent = `Custo unitário R$ ${formatCurrency(product.unitDiscountPrice)}`;
info.appendChild(unit);
}
row.appendChild(imgHolder);
row.appendChild(info);
container.appendChild(row);
});
}
// Sort function with direction toggle
let sortDirection = 1; // 1 for ascending, -1 for descending
function toggleSortDirection() {
sortDirection = sortDirection * -1;
const sortBy = document.getElementById('sort').value;
sortProducts(sortBy);
}
function sortProducts(sortBy) {
let sorted = [...products];
if (sortBy === 'name') {
sorted.sort((a, b) => a.name.localeCompare(b.name) * sortDirection);
} else if (sortBy === 'amount') {
sorted.sort((a, b) => (a.amount - b.amount) * sortDirection);
} else if (sortBy === 'finalValue') {
sorted.sort((a, b) => (parseCurrency(a.finalValue) - parseCurrency(b.finalValue)) * sortDirection);
} else if (sortBy === 'unit') {
sorted.sort((a, b) => (a.unitPrice - b.unitPrice) * sortDirection);
}
renderProducts(sorted);
updateSortIndicator();
}
function updateSortIndicator() {
const indicator = document.getElementById('sort-direction');
if (indicator) {
indicator.textContent = sortDirection === 1 ? 'Menor' : 'Maior';
}
}
document.getElementById('sort').addEventListener('change', function() {
sortDirection = 1; // Reset to ascending when changing sort type
sortProducts(this.value);
});
// Initial render
renderProducts(products);