feat: cria prateleira de produtos

meta/pages/home.js

@@ -122,120 +122,18 @@ module.exports = {
 				},
 			],
 		},
-		//====================
-		// MOSAICO
-		//====================
 		{
-			id: "banner-01",
+			id: "prateleira-01",
 			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,
-						},
-					],
 				},
 			],
 		},

src/arquivos/js/app/app.js

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

src/arquivos/js/app/components/Prateleira/Prateleira.js

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

src/arquivos/js/app/partials/Shelf.js

@@ -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);
+	}
+}

src/arquivos/js/config/slick.js

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

src/arquivos/sass/main.scss

@@ -5,17 +5,7 @@
 
 @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/menu";
 @import "./partials/search";
@@ -25,3 +15,14 @@
 @import "./partials/prateleira";
 @import "./partials/ajustes";
 @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";

src/arquivos/sass/pages/_home.scss

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

src/arquivos/sass/partials/_flags.scss

@@ -1,43 +1,37 @@
 .flags-product {
-	display: block;
-	pointer-events: none;
 	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;
-		font-size: 11px;
+		line-height: 12px;
-		float: right;
+		font-size: 10px;
-		font-weight: 700;
+		text-transform: uppercase;
+		margin: 0 0 8px;
 		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 {
-			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 {
-			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;
 		}
 	}
 }

src/arquivos/sass/partials/_prateleira.scss

@@ -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 {
-		color: #f71963;
+		margin: 0 0 16px;
-		font-size: 24px;
+		line-height: 19px;
-		margin: 0 0 24px;
+		font-size: 16px;
 		text-align: center;
-		text-transform: lowercase;
 	}
 
 	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;
 		}
 	}
 
+	/*PRA QUANDO TIVER PRODUTO INDISPONIVEL, PRECISA TER O MESMO HEIGHT DE UM PRODUTO NORMAL NA PRATELEIRA*/
+	.slick-track {
+		display: flex;
+	}
+
+	.slick-slide {
+		height: auto;
+		border: 1px solid yellow;
+
+		& > div,
 		li {
-		display: inline-block;
+			height: 100%;
-		vertical-align: top;
+		}
-		padding: 0 2.5px;
 	}
-}
 
-.produto-na-prateleira {
+	.slick-arrow {
-	padding: 0 5px;
+		@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;
-	text-align: center;
+		display: flex;
+		flex-direction: column;
+		border: 1px solid red;
+		height: 100%;
+		margin: 0 15px;
 
 		.product-image {
+			position: relative;
+			padding-top: 100%;
 			overflow: hidden;
-		position: relative;
+			margin-bottom: 16px;
 
-		.lazyload__sibling {
+			&:hover {
-			padding-bottom: 100%;
+				.foto-secundaria {
-
+					opacity: 1;
-			+ div {
+					pointer-events: all;
-				top: 0;
-				left: 0;
-				position: absolute;
-				width: 100%;
 				}
 			}
-
-		.lazyload__sibling img {
-			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;
+				bottom: 0;
-			visibility: hidden;
+				height: 100%;
+				z-index: map-get($z-index, level-1);
+			}
+
+			.foto-secundaria {
 				opacity: 0;
+				pointer-events: none;
+				transition: all 0.2s ease-in-out;
+			}
+
+			img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
 			}
 		}
 
-	.informacoes .nome {
+		.disponivel,
-		font-size: 14px;
+		.indisponivel {
-		line-height: 16px;
+			flex: 1;
-		margin-top: 16px;
+			display: flex;
-		min-height: 34px;
+			flex-direction: column;
-		text-transform: capitalize;
+			justify-content: flex-end;
+		}
+
+		.nome {
+			line-height: 12px;
+			font-size: 10px;
+			font-weight: 500;
+			text-transform: uppercase;
+			text-align: center;
+			margin-bottom: 17px;
 		}
 
 		.price {
-		margin: 8px 0 17px;
+			text-align: center;
+			text-transform: uppercase;
+			margin-bottom: 17px;
 
-		> div {
-			line-height: 1.3;
-		}
 			.antigo {
-			color: hsla(220, 1%, 43%, 1);
+				margin-bottom: 4px;
-			font-size: 14px;
+				color: $gray-300;
-			min-height: 18px;
 				text-decoration: line-through;
+				font-size: 10px;
+				line-height: 12px;
 			}
 
 			.principal {
-			font-size: 18px;
+				margin-bottom: 4px;
-			font-weight: 700;
+				font-weight: 900;
+				font-size: 13px;
+				line-height: 16px;
 			}
 
 			.parcelado {
-			color: hsla(220, 1%, 43%, 1);
+				font-size: 10px;
-			font-size: 12px;
+				line-height: 12px;
-
+				color: $gray-400;
-			strong {
-				font-weight: normal;
 			}
 		}
 
-		.boleto {
-			display: none;
-		}
-	}
-
-	.compra {
 		.btn-compra {
-			margin: 0;
+			a {
-			display: block;
+				display: flex;
-			transition: all 0.25s linear 0.25s;
+				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(md, min) {
+				@include mq(lg, max) {
-				visibility: hidden;
+					&:active {
-				opacity: 0;
+						background: lighten($black-500, 10);
+					}
 				}
 
-			a {
+				@include mq(lg, min) {
-				background-color: #2fab61;
-				color: #fff;
-				display: block;
-				font-size: 14px;
-				letter-spacing: 1px;
-				padding: 15px 0;
-				text-transform: uppercase;
-				transition: all 0.15s linear;
-
-				@include mq(lg) {
 					&:hover {
-						background-color: hsla(138, 66%, 41%, 1);
+						background: lighten($black-500, 10);
 					}
 
 					&:active {
-						background-color: hsla(138, 50%, 41%, 1);
+						background: $black-500;
 					}
 				}
 			}
 		}
-	}
-
-	@include mq(lg) {
-		&:hover .compra .btn-compra {
-			visibility: visible;
-			opacity: 1;
-			z-index: 1;
-		}
-	}
 
 		.indisponivel {
-		color: #f71963;
+			display: none;
+			.erro {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 50px;
+				font-size: 10px;
+				line-height: 12px;
 				font-weight: bold;
-		margin: 5px 0;
+				color: $red-300;
+			}
+		}
 	}
 }

src/arquivos/sass/partials/_slider.scss

@@ -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;
+	}
+}

src/arquivos/sass/utils/_variaveis.scss

@@ -1,6 +1,6 @@
 // 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-height: 1.5;
@@ -16,6 +16,7 @@ $red-300: #db4c4c;
 $gray-100: #e0e0e0;
 $gray-200: #bdbdbd;
 $gray-300: #828282;
+$gray-400: #6d6e70;
 $gray-500: #333;
 
 // universal

src/template-pagina/caina-home.html

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

src/template-prateleira/caina-prateleira-padrao.html

@@ -42,7 +42,7 @@
 	<div class="informacoes">
 		<div class="avaliacao"></div>
 		<div class="nome">
-			Titulo do produto
+			Lorem ipsum dolor
 			<!-- $product.EscapedName -->
 		</div>
 	</div>
@@ -52,47 +52,41 @@
 			<div class="antigo">
 				<!-- #if ($product.HasBestPrice) -->
 				<span class="value">
-					R$ 1500000,00
+					R$ 4.799,00
 					<!-- $product.ListPrice -->
 				</span>
 				<!-- #end -->
 			</div>
 			<div class="principal">
 				<span class="value">
-					R$ 1000000,00
+					R$ 3.799,00
 					<!-- $product.BestPrice -->
 				</span>
 			</div>
 			<div class="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">
-							R$ 2,50
+							R$ 399,50
 							<!-- $product.BestPrice -->
 						</span>
-					</strong>
+
-					no cartão
+					sem juros
 				</span>
 			</div>
-			<div class="boleto">
+
-				<span class="value">
-					R$ 9,50
-					<!-- $product.BestPrice -->
-				</span>
-				à vista no boleto bancário
-			</div>
 		</div>
 		<div class="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>
 		</div>
 	</div>
 	<!-- #else -->
 	<div class="indisponivel">
-		<span class="erro">Produto indisponível</span>
+		<span class="erro">INDISPONIVEL</span>
 	</div>
 	<!-- #end -->
 </div>

src/template-prateleira/caina-prateleira-padrao.vtex.html

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