feat: cria a prateleira de produtos

meta/pages/home.js

@@ -122,119 +122,20 @@ module.exports = {
 			],
 		},
 		//====================
-		// MOSAICO
+		// PRATELEIRA
 		//====================
 		{
-			id: "banner-01",
+			id: "prateleira-01",
 			objects: [
 				{
-					type: "banner",
+					type: "Produtos Relacionados",
-					name: "banner 01",
+					name: "CONFIRA NOSSAS NOVIDADES",
-					contents: [
+					properties: {
-						{
+						layout: "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,7 +96,7 @@ export default class Prateleira {
 	//ex atualziar
 	atualizar() {
 		this.flagDeDesconto();
-		this.precoParcelado();
+		// this.precoParcelado();
 		this.precoBoleto();
 	}
 

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

@@ -59,7 +59,7 @@ export default {
 	productShelf: {
 		defaultShelf: {
 			lazyLoad: "ondemand",
-			dots: true,
+			dots: false,
 			arrows: true,
 			infinite: true,
 			slidesToShow: 4,
@@ -69,17 +69,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,
 					},
@@ -87,9 +83,8 @@ export default {
 				{
 					breakpoint: 576,
 					settings: {
-						arrows: false,
+						slidesToShow: 1,
-						slidesToShow: 2,
+						slidesToScroll: 1,
-						slidesToScroll: 2,
 					},
 				},
 			],

src/arquivos/sass/main.scss

@@ -5,17 +5,6 @@
 
 @import "./utils/all";
 
-@import "./pages/home";
-@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/barraDeVantagens";
@@ -24,4 +13,19 @@
 @import "./partials/prateleira";
 @import "./partials/ajustes";
 @import "./partials/flags";
-@import "./partials/search"
+@import "./partials/search";
+@import "./partials/slider";
+
+
+@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

@@ -18,16 +18,8 @@
 		}
 
 		.slick-arrow {
-			position: absolute;
+
-			top: 50%;
+
-			transform: translateY(-50%);
-			z-index: 5;
-			padding: 0;
-			border: 0;
-			font-size: 0;
-			background-color: transparent;
-			outline: 0;
-			cursor: pointer;
 			@extend .sprite;
 
 			@include mq(md, max) {
@@ -59,13 +51,10 @@
 		}
 
 		.slick-dots {
-			display: flex !important;
+
-			align-items: center;
-			justify-content: center;
 			position: absolute;
 			z-index: 5;
 
-			margin: 0;
 			width: 100%;
 			bottom: 14px;
 			left: 0;
@@ -75,26 +64,17 @@
 			}
 
 			li {
-				display: flex;
+				&.slick-active {
-				margin: 0 4px;
+					button {
-
+						width: 16px;
-				.slick-active {
+						height: 16px;
-					width: 16px;
+						background: transparent;
-					height: 16px;
+						border: 11ps solid $white-500;
-					border: 11ps solid $white-500;
+					}
-					background: transparent;
 				}
 			}
 
-			button {
-				padding: 0;
-				border: 0;
-				outline: 0;
-				background: $white-500;
 
-				width: 10px;
-				height: 10px;
-			}
 		}
 	}
 
@@ -141,4 +121,8 @@
 			white-space: nowrap;
 		}
 	}
+
+	.shelf {
+		margin-bottom: 172px;
+	}
 }

src/arquivos/sass/partials/_flags.scss

@@ -1,43 +1,38 @@
 .flags-product {
-	display: block;
-	pointer-events: none;
 	position: absolute;
-	width: 100%;
+	top: 0;
-	z-index: 5;
+	left: 0;
+	z-index: 10;
+	padding: 8px;
 
-	p {
+	.flag {
-		background-repeat: no-repeat;
-		color: $color-white;
 		display: none;
-		font-size: 11px;
+
-		float: right;
+		font-size: 10px;
-		font-weight: 700;
+		line-height: 12px;
+		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;
+		&.novo,
-		text-indent: -9999px;
-
 		&.produto-off {
-			background: $color-black2;
+			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: $color-pink;
+			font-weight: bold;
-			border-radius: 5px;
+			background: $blue-500;
-			display: table;
+			color: $white-500;
-			float: left;
+		}
-			text-indent: 0;
+
-			text-transform: uppercase;
+		&.produto-off {
+			font-weight: 900;
+			color: $white-500;
+			background-color: $black-500;
 		}
 	}
 }

src/arquivos/sass/partials/_prateleira.scss

@@ -1,263 +1,189 @@
-/***************************************************************/
+.shelf {
-/**-- Prateleiras --------------------------********************/
-/*-------------------------------------------------------------*/
-
-.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: $color-black2;
-			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: $color-pink;
-				height: 16px;
-				width: 16px;
-			}
-		}
-	}
-
 	h2 {
-		color: $color-pink;
+		margin: 0;
-		font-size: 24px;
+		line-height: 19px;
-		margin: 0 0 24px;
+		font-size: 16px;
+		margin: 0 0 16px 0;
 		text-align: center;
-		text-transform: lowercase;
 	}
 
 	ul {
-		max-width: 95%;
+		margin: 0;
-		margin: auto;
+		@include mq(md, max) {
+			padding: 0 32px;
+		}
+	}
+
+	.slick-track {
+		display: flex;
+	}
+
+	.slick-slide {
+		height: auto;
+
+		& > div, li {
+			height: 100%;
+		}
+	}
+
+	.slick-arrow {
+		@extend .sprite;
 
 		@include mq(md, max) {
-			max-width: 300px;
+			transform: translateY(-50%) scale(0.7);
 		}
 	}
 
-	li {
+	.slick-prev {
-		display: inline-block;
+		right: 100%;
-		vertical-align: top;
+
-		padding: 0 2.5px;
+		@include mq(md, max) {
+			left: 0;
+			right: auto;
+			transform-origin: left;
+		}
+
+		@extend .sprite-arrow-left-prateleira;
 	}
-}
 
-.produto-na-prateleira {
+	.slick-next {
-	padding: 0 5px;
+		left: 100%;
-	position: relative;
-	text-align: center;
 
-	.product-image {
+		@include mq(md, max) {
-		overflow: hidden;
+			right: 0;
+			left: auto;
+			transform-origin: right;
+
+
+		}
+
+		@extend .sprite-arrow-right-prateleira;
+
+	}
+
+	.produto-na-prateleira {
 		position: relative;
+		margin: 0 15px;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		.product-image {
+			overflow: hidden;
+			position: relative;
+			padding-top: 100%;
+			margin-bottom: 16px;
 
-		.lazyload__sibling {
+			&:hover {
-			padding-bottom: 100%;
+				.foto-secundaria {
-
+					opacity: 1;
-			+ div {
+					pointer-events: all;
-				top: 0;
+				}
-				left: 0;
+			}
+			.foto-principal,
+			.foto-secundaria {
 				position: absolute;
 				width: 100%;
+				height: 100%;
+				top: 0;
+				left: 0;
+				z-index: 5;
 			}
-		}
 
-		.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: $color-gray2;
-			font-size: 14px;
-			min-height: 18px;
-			text-decoration: line-through;
-		}
-
-		.principal {
-			font-size: 18px;
-			font-weight: 700;
-		}
-
-		.parcelado {
-			color: $color-gray2;
-			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;
+				pointer-events: none;
+				transition: all 0.2s ease-in-out;
 			}
 
+			img {
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
+			}
+		}
+
+		.indisponivel, .disponivel {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+		}
+
+
+		.nome {
+			text-align: center;
+			text-transform: uppercase;
+			line-height: 12px;
+			font-size: 10px;
+			font-weight: 500;
+			margin-bottom: 17px;
+		}
+
+		.price {
+			text-align: center;
+			text-transform: uppercase;
+			margin-bottom: 17px;
+
+			.antigo {
+				margin-bottom: 4px;
+				color: $gray-300;
+				line-height: 12px;
+				font-size: 10px;
+				text-decoration: line-through;
+			}
+
+			.principal {
+				font-weight: 900;
+				margin-bottom: 4px;
+				line-height: 16px;
+				font-size: 13px;
+			}
+
+			.parcelado {
+				line-height: 12px;
+				font-size: 10px;
+				color: $gray-300;
+			}
+		}
+
+		.btn-compra {
 			a {
-				background-color: $color-green;
+				background-color: $black-500;
-				color: $color-white;
+				display: flex;
-				display: block;
+				align-items: center;
-				font-size: 14px;
+				justify-content: center;
-				letter-spacing: 1px;
+				height: 50px;
-				padding: 15px 0;
+				line-height: 12px;
+				font-size: 10px;
+				font-weight: bold;
+				color: $white-500;
 				text-transform: uppercase;
-				transition: all 0.15s linear;
 
-				@include mq(lg) {
+				transition: background-color 0.2s linear;
-					&:hover {
-						background-color: $color-green2;
-					}
 
+				@include mq(md, max) {
 					&:active {
-						background-color: $color-green3;
+						background: lighten($black-500, 10);
 					}
 				}
 			}
+			&:hover {
+				background: lighten($black-500, 10);
+			}
 		}
-	}
 
-	@include mq(lg) {
+
-		&:hover .compra .btn-compra {
+		.indisponivel {
-			visibility: visible;
+			display: none;
-			opacity: 1;
+			.erro {
-			z-index: 1;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 50px;
+				line-height: 12px;
+				font-size: 10px;
+				font-weight: bold;
+				color: $red-300;
+			}
 		}
 	}
-
-	.indisponivel {
-		color: $color-pink;
-		font-weight: bold;
-		margin: 5px 0;
-	}
 }

src/arquivos/sass/partials/_slider.scss

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

src/arquivos/sass/utils/_variaveis.scss

@@ -1,5 +1,5 @@
 // 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-weight-light: 300;

src/template-pagina/template-home.html

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

src/template-prateleira/prateleira-padrao.html

@@ -16,7 +16,7 @@
 			<!-- $product.DiscountHightLight -->
 		</span>
 	</div>
-	<div class="product-image ">
+	<div class="product-image">
 		<a href="produto.html" title="Titulo do produto">
 			<!-- title=$product.EscapedName -->
 			<div class="foto-principal">
@@ -66,13 +66,11 @@
 			<div class="parcelado">
 				<span class="desconto-parcelado">
 					ou
-					<strong>
+					<span class="numero-de-parcelas">1</span>X de
-						<span class="numero-de-parcelas">1</span>X de
+					<span class="value">
-						<span class="value">
+						R$ 2,50
-							R$ 2,50
+						<!-- $product.BestPrice -->
-							<!-- $product.BestPrice -->
+					</span>
-						</span>
-					</strong>
 					no cartão
 				</span>
 			</div>

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

@@ -1,70 +1,50 @@
-#set($id = $product.Id)
+#set($id = $product.Id) #set($idSku = $product.productVariantId) #set($uri =
-#set($idSku = $product.productVariantId)
+$product.Uri) #set($escapedName = $product.HtmlEscapedName)
-#set($uri = $product.Uri)
-#set($escapedName = $product.HtmlEscapedName)
-
 
 <div class="produto-na-prateleira" data-sku-id="$id">
 	<div class="flags-product">
-		<span class="HightLight">
+		<span class="HightLight"> $product.HightLight </span>
-			$product.HightLight
+		<span class="DiscountHightLight"> $product.DiscountHightLight </span>
-		</span>
-		<span class="DiscountHightLight">
-			 $product.DiscountHightLight
-		</span>
 	</div>
-	<div class="product-image ">
+	<div class="product-image">
-		<a href="$uri" title=$escapedName>
+		<a href="$uri" title="$escapedName">
-
+			<div class="foto-principal">
-			<div class="foto-principal" >
 				<div class="lazyload__sibling"></div>
 				<div class="lazyload" data-noscript="">
-					<noscript>
+					<noscript> $product.GetImageTag(2) </noscript>
-						$product.GetImageTag(2)
-					</noscript>
 				</div>
 			</div>
-			<div class="foto-secundaria" >
+			<div class="foto-secundaria">
 				<div class="lazyload__sibling"></div>
 				<div class="lazyload" data-noscript="">
-					<noscript>
+					<noscript> $product.GetImageTag(2,"ultima") </noscript>
-						$product.GetImageTag(2,"ultima")
-					</noscript>
 				</div>
 			</div>
 		</a>
 	</div>
 	<div class="informacoes">
 		<div class="avaliacao"></div>
-		<div class="nome">
+		<div class="nome">$escapedName</div>
-			$escapedName
-		</div>
 	</div>
-	 #if ($product.IsInStock)
+	#if ($product.IsInStock)
 	<div class="disponivel">
 		<div class="price">
 			<div class="antigo">
-			#if ($product.HasBestPrice)
+				#if ($product.HasBestPrice)
-				<span class="value">
+				<span class="value"> $product.ListPrice </span>
-					$product.ListPrice
+				#end
-				</span>
-			#end
 			</div>
 			<div class="principal">
-				<span class="value">
+				<span class="value"> $product.BestPrice </span>
-				$product.BestPrice
-				</span>
 			</div>
 			#if($product.NumbersOfInstallment > 1)
 			<div class="parcelado">
 				<span class="desconto-parcelado">
 					ou
-					<strong>
+					<span class="numero-de-parcelas"
-						<span class="numero-de-parcelas">$product.NumbersOfInstallment</span>X de
+						>$product.NumbersOfInstallment</span
-						<span class="value">
+					>X de
-							$product.InstallmentValue
+					<span class="value"> $product.InstallmentValue </span>
-						</span>
-					</strong>
 					no cartão
 				</span>
 			</div>