feat: cria prateleira de produtos

This commit is contained in:
Cainã Milech 2022-12-08 22:02:24 -03:00
parent ab13a7c2e3
commit 00c7b53536
16 changed files with 308 additions and 442 deletions

View File

@ -122,120 +122,18 @@ module.exports = {
}, },
], ],
}, },
//====================
// MOSAICO
//====================
{ {
id: "banner-01", id: "prateleira-01",
objects: [ objects: [
{ {
type: "banner", type: "Produtos Relacionados",
name: "banner 01", name: "CONFIRA NOSSAS NOVIDADES",
contents: [ properties: {
{ layout: "caina-prateleira-padrao",
name: "banner 01 content", type: "QuemViuViuTambem",
active: true, "number-of-columns": 12,
type: "image", "number-of-items": 12,
file: "banner-01.png", },
width: 500,
height: 500,
},
],
},
],
},
{
id: "banner-02",
objects: [
{
type: "banner",
name: "banner 02",
contents: [
{
name: "banner 02 content",
active: true,
type: "image",
file: "banner-02.png",
width: 500,
height: 500,
},
],
},
],
},
{
id: "banner-03",
objects: [
{
type: "banner",
name: "banner 03",
contents: [
{
name: "banner 03 content",
active: true,
type: "image",
file: "banner-03.png",
width: 500,
height: 500,
},
],
},
],
},
{
id: "banner-04",
objects: [
{
type: "banner",
name: "banner 04",
contents: [
{
name: "banner 04 content",
active: true,
type: "image",
file: "banner-04.png",
width: 500,
height: 500,
},
],
},
],
},
{
id: "banner-05",
objects: [
{
type: "banner",
name: "banner 05",
contents: [
{
name: "banner 05 content",
active: true,
type: "image",
file: "banner-05.png",
width: 500,
height: 500,
},
],
},
],
},
{
id: "mobile-banner-05",
objects: [
{
type: "banner",
name: "banner 05 mobile",
contents: [
{
name: "banner 05 mobile content",
active: true,
type: "image",
file: "banner-05.png",
width: 500,
height: 500,
},
],
}, },
], ],
}, },

View File

@ -20,6 +20,7 @@ import Promocao from "./partials/Promocao";
import MenuContents from "./partials/MenuContents"; import MenuContents from "./partials/MenuContents";
import Login from "./partials/Login"; import Login from "./partials/Login";
import Prateleira from "./components/Prateleira/Prateleira"; import Prateleira from "./components/Prateleira/Prateleira";
import Shelf from "./partials/Shelf";
import PrateleiraService from "./components/Prateleira/PrateleiraService"; import PrateleiraService from "./components/Prateleira/PrateleiraService";
@ -38,6 +39,7 @@ const app = new Container({
ScrollToTop, ScrollToTop,
AutoComplete, AutoComplete,
Prateleira, Prateleira,
Shelf,
], ],
services: [PrateleiraService], services: [PrateleiraService],
pages: [ pages: [

View File

@ -96,8 +96,8 @@ export default class Prateleira {
//ex atualziar //ex atualziar
atualizar() { atualizar() {
this.flagDeDesconto(); this.flagDeDesconto();
this.precoParcelado(); //this.precoParcelado();
this.precoBoleto(); //this.precoBoleto();
} }
criarHtmlPrecoBoleto(valor) { criarHtmlPrecoBoleto(valor) {
@ -123,7 +123,7 @@ export default class Prateleira {
createFlagDesconto($elemento, percentualDeDesconto) { createFlagDesconto($elemento, percentualDeDesconto) {
var $flag = $("<p />") var $flag = $("<p />")
.addClass("flag produto-off") .addClass("flag produto-off")
.text(percentualDeDesconto + "%"); .text(percentualDeDesconto + "%OFF");
$elemento.find(".flags-product .DiscountHightLight").append($flag); $elemento.find(".flags-product .DiscountHightLight").append($flag);
} }

View File

@ -0,0 +1,16 @@
import slickConfig from "Config/slick";
export default class Shelf {
constructor() {
this.selectors();
this.createSlider();
}
selectors() {
this.shelf = $(".shelf ul");
}
createSlider() {
this.shelf.slick(slickConfig.productShelf.defaultShelf);
}
}

View File

@ -58,7 +58,7 @@ export default {
productShelf: { productShelf: {
defaultShelf: { defaultShelf: {
lazyLoad: "ondemand", lazyLoad: "ondemand",
dots: true, dots: false,
arrows: true, arrows: true,
infinite: true, infinite: true,
slidesToShow: 4, slidesToShow: 4,
@ -68,17 +68,13 @@ export default {
{ {
breakpoint: 1200, breakpoint: 1200,
settings: { settings: {
lazyLoad: "ondemand",
slidesToShow: 3, slidesToShow: 3,
slidesToScroll: 3, slidesToScroll: 3,
infinite: true,
}, },
}, },
{ {
breakpoint: 800, breakpoint: 800,
settings: { settings: {
arrows: true,
lazyLoad: "ondemand",
slidesToShow: 2, slidesToShow: 2,
slidesToScroll: 2, slidesToScroll: 2,
}, },
@ -86,9 +82,8 @@ export default {
{ {
breakpoint: 576, breakpoint: 576,
settings: { settings: {
arrows: false, slidesToShow: 1,
slidesToShow: 2, slidesToScroll: 1,
slidesToScroll: 2,
}, },
}, },
], ],

View File

@ -5,17 +5,7 @@
@import "./utils/all"; @import "./utils/all";
@import "./pages/home"; @import "./partials/slider";
@import "./pages/categoria";
@import "./pages/produto";
@import "./pages/institucional";
@import "./pages/erro";
@import "./pages/login";
@import "./components/mini-cart";
@import "./components/newsletter";
@import "./components/instagram-gallery";
@import "./partials/header"; @import "./partials/header";
@import "./partials/menu"; @import "./partials/menu";
@import "./partials/search"; @import "./partials/search";
@ -25,3 +15,14 @@
@import "./partials/prateleira"; @import "./partials/prateleira";
@import "./partials/ajustes"; @import "./partials/ajustes";
@import "./partials/flags"; @import "./partials/flags";
@import "./components/mini-cart";
@import "./components/newsletter";
@import "./components/instagram-gallery";
@import "./pages/home";
@import "./pages/categoria";
@import "./pages/produto";
@import "./pages/institucional";
@import "./pages/erro";
@import "./pages/login";

View File

@ -2,6 +2,10 @@
.main-banners { .main-banners {
margin-bottom: 38px; margin-bottom: 38px;
@include mq(md, max) {
margin-bottom: 32px;
}
img { img {
width: 100%; width: 100%;
} }
@ -18,17 +22,6 @@
} }
.slick-arrow { .slick-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: map-get($z-index, level-1);
padding: 0;
border: 0;
outline: 0;
font-size: 0;
background-color: transparent;
cursor: pointer;
@extend .sprite; @extend .sprite;
@include mq(md, max) { @include mq(md, max) {
@ -59,13 +52,10 @@
} }
.slick-dots { .slick-dots {
display: flex !important;
align-items: center;
justify-content: center;
position: absolute; position: absolute;
left: 0; left: 0;
bottom: 14px; bottom: 14px;
margin: 0;
z-index: map-get($z-index, level-1); z-index: map-get($z-index, level-1);
width: 100%; width: 100%;
@ -73,9 +63,6 @@
} }
li { li {
display: flex;
margin: 0 4px;
&.slick-active { &.slick-active {
button { button {
width: 16px; width: 16px;
@ -85,21 +72,16 @@
} }
} }
} }
button {
width: 10px;
height: 10px;
padding: 0;
border: 0;
outline: 0;
background: $white-500;
}
} }
} }
.advantages { .advantages {
margin-bottom: 117px; margin-bottom: 117px;
@include mq(md, max) {
margin-bottom: 89px;
}
&__list { &__list {
margin: 0; margin: 0;
display: flex; display: flex;
@ -142,4 +124,12 @@
font-size: 10px; font-size: 10px;
} }
} }
.shelf {
margin-bottom: 172px;
@include mq(md, max) {
margin-bottom: 80px;
}
}
} }

View File

@ -1,43 +1,37 @@
.flags-product { .flags-product {
display: block;
pointer-events: none;
position: absolute; position: absolute;
width: 100%; top: 0;
z-index: 5; left: 0;
z-index: map-get($z-index, level-2);
padding: 8px;
p { .flag {
background-repeat: no-repeat;
color: #fff;
display: none; display: none;
font-size: 11px; line-height: 12px;
float: right; font-size: 10px;
font-weight: 700; text-transform: uppercase;
margin: 0 0 8px;
min-width: 54px; min-width: 54px;
margin: 7px 100% 0 7px; max-width: max-content;
overflow: hidden; height: 20px;
padding: 2.5px 4px;
text-indent: -9999px;
&.novo,
&.produto-off { &.produto-off {
background: #142032; display: flex;
display: table; align-items: center;
float: left; justify-content: center;
text-indent: 0;
width: 50px;
&:after {
content: "OFF";
display: inline-block;
}
} }
&.novo { &.novo {
background-color: #f71963; font-weight: 700;
border-radius: 5px; color: $white-500;
display: table; background: $blue-500;
float: left; }
text-indent: 0;
text-transform: uppercase; &.produto-off {
font-weight: 900;
color: $white-500;
background: $black-500;
} }
} }
} }

View File

@ -1,263 +1,200 @@
/***************************************************************/ .shelf {
/**-- Prateleiras --------------------------********************/ border: 1px solid blue;
/*-------------------------------------------------------------*/
.prateleira-de-produtos {
position: relative;
.slick-next,
.slick-prev {
@extend .sprite;
background-color: transparent;
border: none;
cursor: pointer;
font-size: 0;
outline: none;
padding: 0;
position: absolute;
top: 30%;
z-index: 1;
@include mq(md, max) {
transform: scale(0.8);
}
}
.slick-next {
@extend .sprite;
@extend .sprite-circled-arrow-right;
left: auto;
right: -60px;
@include mq(md, max) {
right: -35px;
}
@include mq_range(md, xl) {
right: -45px;
}
}
.slick-prev {
@extend .sprite;
@extend .sprite-circled-arrow-left;
right: auto;
left: -60px;
@include mq(md, max) {
left: -35px;
}
@include mq_range(md, xl) {
left: -45px;
}
}
.slick-dots {
bottom: 20px;
height: 17px;
position: absolute;
pointer-events: none;
text-align: center;
width: 100%;
@include mq(md, max) {
margin-top: 16px;
position: initial;
}
&,
li {
align-items: center;
display: flex !important;
justify-content: center;
}
li {
display: inline-block;
margin: 0 4px;
}
button {
background-color: #142032;
border: none;
cursor: pointer;
height: 10px;
outline: none;
padding: 0;
pointer-events: all;
transition: all 0.15s ease-in-out;
width: 10px;
}
.slick-active {
button {
background-color: #f71963;
height: 16px;
width: 16px;
}
}
}
h2 { h2 {
color: #f71963; margin: 0 0 16px;
font-size: 24px; line-height: 19px;
margin: 0 0 24px; font-size: 16px;
text-align: center; text-align: center;
text-transform: lowercase;
} }
ul { ul {
max-width: 95%; border: 1px solid green;
margin: auto; margin: 0;
@include mq(md, max) { @include mq(lg, max) {
max-width: 300px; padding: 0 32px;
} }
} }
li { /*PRA QUANDO TIVER PRODUTO INDISPONIVEL, PRECISA TER O MESMO HEIGHT DE UM PRODUTO NORMAL NA PRATELEIRA*/
display: inline-block; .slick-track {
vertical-align: top; display: flex;
padding: 0 2.5px;
} }
}
.produto-na-prateleira { .slick-slide {
padding: 0 5px; height: auto;
position: relative; border: 1px solid yellow;
text-align: center;
.product-image { & > div,
overflow: hidden; li {
height: 100%;
}
}
.slick-arrow {
@extend .sprite;
@include mq(lg, max) {
transform: translateY(-50%) scale(0.7);
}
}
.slick-prev {
right: 100%;
border: 1px solid red;
@include mq(lg, max) {
left: 0;
right: auto;
transform-origin: left;
}
@extend .sprite-left-gray-arrow;
}
.slick-next {
left: 100%;
@include mq(lg, max) {
right: 0;
left: auto;
transform-origin: right;
}
@extend .sprite-right-gray-arrow;
}
.produto-na-prateleira {
position: relative; position: relative;
display: flex;
flex-direction: column;
border: 1px solid red;
height: 100%;
margin: 0 15px;
.lazyload__sibling { .product-image {
padding-bottom: 100%; position: relative;
padding-top: 100%;
overflow: hidden;
margin-bottom: 16px;
+ div { &:hover {
top: 0; .foto-secundaria {
left: 0; opacity: 1;
pointer-events: all;
}
}
.foto-principal,
.foto-secundaria {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: 0;
bottom: 0;
height: 100%;
z-index: map-get($z-index, level-1);
} }
}
.lazyload__sibling img { .foto-secundaria {
left: 50%;
max-width: initial;
position: relative;
transform: translateX(-50%);
width: 100%;
}
.foto-principal,
.foto-secundaria {
transition: all 0.25s linear;
}
&:hover .foto-secundaria,
.foto-principal {
visibility: visible;
opacity: 1;
z-index: 1;
}
.foto-secundaria {
position: absolute;
width: 100%;
top: 0;
z-index: -1;
visibility: hidden;
opacity: 0;
}
}
.informacoes .nome {
font-size: 14px;
line-height: 16px;
margin-top: 16px;
min-height: 34px;
text-transform: capitalize;
}
.price {
margin: 8px 0 17px;
> div {
line-height: 1.3;
}
.antigo {
color: hsla(220, 1%, 43%, 1);
font-size: 14px;
min-height: 18px;
text-decoration: line-through;
}
.principal {
font-size: 18px;
font-weight: 700;
}
.parcelado {
color: hsla(220, 1%, 43%, 1);
font-size: 12px;
strong {
font-weight: normal;
}
}
.boleto {
display: none;
}
}
.compra {
.btn-compra {
margin: 0;
display: block;
transition: all 0.25s linear 0.25s;
@include mq(md, min) {
visibility: hidden;
opacity: 0; opacity: 0;
pointer-events: none;
transition: all 0.2s ease-in-out;
} }
a { img {
background-color: #2fab61; width: 100%;
color: #fff; height: 100%;
display: block; object-fit: cover;
font-size: 14px; }
letter-spacing: 1px; }
padding: 15px 0;
text-transform: uppercase;
transition: all 0.15s linear;
@include mq(lg) { .disponivel,
.indisponivel {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.nome {
line-height: 12px;
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
text-align: center;
margin-bottom: 17px;
}
.price {
text-align: center;
text-transform: uppercase;
margin-bottom: 17px;
.antigo {
margin-bottom: 4px;
color: $gray-300;
text-decoration: line-through;
font-size: 10px;
line-height: 12px;
}
.principal {
margin-bottom: 4px;
font-weight: 900;
font-size: 13px;
line-height: 16px;
}
.parcelado {
font-size: 10px;
line-height: 12px;
color: $gray-400;
}
}
.btn-compra {
a {
display: flex;
align-items: center;
background: $black-500;
justify-content: center;
height: 50px;
line-height: 12px;
font-weight: bold;
font-size: 10px;
color: $white-500;
transition: background-color 0.2s linear;
@include mq(lg, max) {
&:active {
background: lighten($black-500, 10);
}
}
@include mq(lg, min) {
&:hover { &:hover {
background-color: hsla(138, 66%, 41%, 1); background: lighten($black-500, 10);
} }
&:active { &:active {
background-color: hsla(138, 50%, 41%, 1); background: $black-500;
} }
} }
} }
} }
}
@include mq(lg) { .indisponivel {
&:hover .compra .btn-compra { display: none;
visibility: visible; .erro {
opacity: 1; display: flex;
z-index: 1; align-items: center;
justify-content: center;
height: 50px;
font-size: 10px;
line-height: 12px;
font-weight: bold;
color: $red-300;
}
} }
} }
.indisponivel {
color: #f71963;
font-weight: bold;
margin: 5px 0;
}
} }

View File

@ -0,0 +1,32 @@
.slick-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 0;
border: 0;
outline: 0;
font-size: 0;
background-color: transparent;
cursor: pointer;
}
.slick-dots {
display: flex !important;
align-items: center;
justify-content: center;
margin: 0;
li {
display: flex;
margin: 0 4px;
}
button {
width: 10px;
height: 10px;
padding: 0;
border: 0;
outline: 0;
background: $white-500;
}
}

View File

@ -1,6 +1,6 @@
// fonts // fonts
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap");
$font-family: "Inter", sans-serif; $font-family: "Inter", sans-serif;
$font-height: 1.5; $font-height: 1.5;
@ -16,6 +16,7 @@ $red-300: #db4c4c;
$gray-100: #e0e0e0; $gray-100: #e0e0e0;
$gray-200: #bdbdbd; $gray-200: #bdbdbd;
$gray-300: #828282; $gray-300: #828282;
$gray-400: #6d6e70;
$gray-500: #333; $gray-500: #333;
// universal // universal

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

@ -65,6 +65,12 @@
</ul> </ul>
</section> </section>
<section class="shelf">
<div class="container">
<vtex:contentPlaceHolder id="prateleira-01" />
</div>
</section>
</main> </main>
<footer> <footer>

View File

@ -42,7 +42,7 @@
<div class="informacoes"> <div class="informacoes">
<div class="avaliacao"></div> <div class="avaliacao"></div>
<div class="nome"> <div class="nome">
Titulo do produto Lorem ipsum dolor
<!-- $product.EscapedName --> <!-- $product.EscapedName -->
</div> </div>
</div> </div>
@ -52,47 +52,41 @@
<div class="antigo"> <div class="antigo">
<!-- #if ($product.HasBestPrice) --> <!-- #if ($product.HasBestPrice) -->
<span class="value"> <span class="value">
R$ 1500000,00 R$ 4.799,00
<!-- $product.ListPrice --> <!-- $product.ListPrice -->
</span> </span>
<!-- #end --> <!-- #end -->
</div> </div>
<div class="principal"> <div class="principal">
<span class="value"> <span class="value">
R$ 1000000,00 R$ 3.799,00
<!-- $product.BestPrice --> <!-- $product.BestPrice -->
</span> </span>
</div> </div>
<div class="parcelado"> <div class="parcelado">
<span class="desconto-parcelado"> <span class="desconto-parcelado">
ou
<strong>
<span class="numero-de-parcelas">1</span>X de <span class="numero-de-parcelas">10</span>X de
<span class="value"> <span class="value">
R$ 2,50 R$ 399,50
<!-- $product.BestPrice --> <!-- $product.BestPrice -->
</span> </span>
</strong>
no cartão sem juros
</span> </span>
</div> </div>
<div class="boleto">
<span class="value">
R$ 9,50
<!-- $product.BestPrice -->
</span>
à vista no boleto bancário
</div>
</div> </div>
<div class="compra"> <div class="compra">
<span class="btn-compra"> <span class="btn-compra">
<a title="Compre agora" href="produto.html">Compre agora</a> <a title="Compre agora" href="produto.html">COMPRE AGORA</a>
</span> </span>
</div> </div>
</div> </div>
<!-- #else --> <!-- #else -->
<div class="indisponivel"> <div class="indisponivel">
<span class="erro">Produto indisponível</span> <span class="erro">INDISPONIVEL</span>
</div> </div>
<!-- #end --> <!-- #end -->
</div> </div>

View File

@ -58,27 +58,27 @@
#if($product.NumbersOfInstallment > 1) #if($product.NumbersOfInstallment > 1)
<div class="parcelado"> <div class="parcelado">
<span class="desconto-parcelado"> <span class="desconto-parcelado">
ou
<strong>
<span class="numero-de-parcelas">$product.NumbersOfInstallment</span>X de <span class="numero-de-parcelas">$product.NumbersOfInstallment</span>X de
<span class="value"> <span class="value">
$product.InstallmentValue $product.InstallmentValue
</span> </span>
</strong>
no cartão sem juros
</span> </span>
</div> </div>
#end #end
</div> </div>
<div class="compra"> <div class="compra">
<span class="btn-compra"> <span class="btn-compra">
<a title="Compre agora" href="$uri">Compre agora</a> <a title="Compre agora" href="$uri">COMPRE AGORA</a>
</span> </span>
</div> </div>
</div> </div>
#else #else
<div class="indisponivel"> <div class="indisponivel">
<span class="erro">Produto indisponível</span> <span class="erro">INDISPONIVEL</span>
</div> </div>
#end #end
</div> </div>