Adicionando prateleira de produtos na home

meta/pages/home.js

@@ -264,5 +264,20 @@ module.exports = {
 				},
 			],
 		},
+		{
+			id: "prateleira-01",
+			objects: [
+				{
+					type: "Produtos Relacionados",
+					name: "CONFIRA NOSSAS NOVIDADES", //titulo do "carousel"/prateleira
+					properties: {
+						layout: "bernardo-prateleira-padrao", // mesmo nome do arquivo em template-prateleira
+						type: "QuemViuViuTambem",
+						"number-of-columns": 12,
+						"number-of-items": 12,
+					},
+				},
+			],
+		},
 	],
 };

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

@@ -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,9 @@ export default {
 				{
 					breakpoint: 576,
 					settings: {
-						arrows: false,
+						arrows: true,
-						slidesToShow: 2,
+						slidesToShow: 1,
-						slidesToScroll: 2,
+						slidesToScroll: 1,
 					},
 				},
 			],

src/arquivos/sass/components/_newsletter.scss

@@ -98,6 +98,9 @@
 					background: lighten($black, 10);
 					}
 
+					&:active {
+						background: $black;
+					}
 
 				}
 			}

src/arquivos/sass/main.scss

@@ -5,6 +5,21 @@
 
 @import "./utils/all";
 
+@import "./partials/slider";
+@import "./partials/menu";
+@import "./partials/header";
+@import "./partials/search";
+@import "./partials/barraDeVantagens";
+@import "./partials/footer";
+@import "./partials/breadcrumb";
+@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";
@@ -12,16 +27,3 @@
 @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";
-@import "./partials/barraDeVantagens";
-@import "./partials/footer";
-@import "./partials/breadcrumb";
-@import "./partials/prateleira";
-@import "./partials/ajustes";
-@import "./partials/flags";

src/arquivos/sass/pages/_home.scss

@@ -19,16 +19,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;
 
@@ -60,23 +50,17 @@
 		}
 
 		.slick-dots {
-			margin: 0;
 			position: absolute;
 			left: 0;
 			bottom: 14px;
 			z-index: map-get($z-index,  level-1);
 			width: 100%;
-			display: flex !important;
-			align-items: center;
-			justify-content: center;
 
 			@include mq(md, max) {
 				bottom: 9px;
 			}
 
 			li {
-				display: flex;
-				margin: 0 4px;
 
 				&.slick-active {
 					button {
@@ -88,17 +72,6 @@
 					}
 				}
 			}
-
-			button {
-				width: 10px;
-				height: 10px;
-				padding: 0;
-				border: 0;
-				outline: 0;
-				background: $white;
-
-
-			}
 		}
 
 	}
@@ -148,4 +121,8 @@
 			font-size: 10px;
 		}
 	}
+
+	.shelf {
+		margin-bottom: 172px;
+	}
 }

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: $white;
 		display: none;
-		font-size: 11px;
+		margin: 0 0 8px;
-		float: right;
+		height: 20px;
-		font-weight: 700;
 		min-width: 54px;
-		margin: 7px 100% 0 7px;
+		max-width: max-content;
-		overflow: hidden;
+		font-size: 10px;
-		padding: 2.5px 4px;
+		line-height: 12px;
-		text-indent: -9999px;
+		text-transform: uppercase;
 
+		&.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;
+			background: $blue;
-			border-radius: 5px;
+			color: $white;
-			display: table;
+			font-weight: bold;
-			float: left;
+		}
-			text-indent: 0;
+
-			text-transform: uppercase;
+		&.produto-off{
+			font-weight: 900;
+			color: $white;
+			background: $black;
 		}
 	}
 }

src/arquivos/sass/partials/_prateleira.scss

@@ -1,263 +1,197 @@
-/***************************************************************/
+.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: #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;
+		font-size: 16px;
-		margin: 0 0 24px;
+		line-height: 19px;
 		text-align: center;
-		text-transform: lowercase;
 	}
 
 	ul {
-		max-width: 95%;
+		margin: 0;
-		margin: auto;
 
 		@include mq(md, max) {
-			max-width: 300px;
+			padding: 0 32px;
-		}
 		}
 
+	}
+
+	.slick-track {
+		display: flex;
+	}
+
+	.slick-slide {
+		height: auto;
+
+		& > 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(md, max) {
+			transform: translateY(-50%) scale(0.7);
+		}
+	}
+
+	.slick-prev {
+		right: 100%;
+
+		@include mq(md, max) {
+			left: 0;
+			right: auto;
+			transform-origin: left;
+		}
+
+		@extend .sprite-arrow-gray-prev-icon;
+
+	}
+
+	.slick-next {
+		left: 100%;
+
+		@include mq(md, max) {
+			right: 0;
+			left: auto;
+			transform-origin: right;
+		}
+
+		@extend .sprite-arrow-gray-next-icon;
+
+	}
+
+	.produto-na-prateleira {
+		display: flex;
+		flex-direction: column;
 		position: relative;
-	text-align: center;
+		height: 100%;
+		margin: 0 15px;
 
 		.product-image {
+			position: relative;
+			margin-bottom: 16px;
+			padding-top: 100%; //faz o item ficar quadrado
 			overflow: hidden;
-		position: relative;
 
-		.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;
+				position: absolute;
-		}
+				width: 100%;
-
+				height: 100%;
-		&:hover .foto-secundaria,
+				top: 0;
-		.foto-principal {
+				left: 0;
-			visibility: visible;
+				z-index: map-get($z-index , level-1);
-			opacity: 1;
-			z-index: 1;
 			}
 
 			.foto-secundaria {
-			position: absolute;
-			width: 100%;
-			top: 0;
-			z-index: -1;
-			visibility: hidden;
 				opacity: 0;
+				pointer-events: none;
+				transition: all .5s ease-in-out;
+			}
+
+			img{
+				width: 100%;
+				height: 100%;
+				object-fit: cover;
 			}
 		}
 
-	.informacoes .nome {
+		.disponivel,
-		font-size: 14px;
+		.indisponivel{
-		line-height: 16px;
+			display: flex;
-		margin-top: 16px;
+			flex-direction: column;
-		min-height: 34px;
+			justify-content: flex-end;
-		text-transform: capitalize;
+			flex: 1;
+		}
+
+
+		.nome {
+			text-transform: uppercase;
+			text-align: center;
+			line-height: 12px;
+			font-size: 10px;
+			font-weight: 500;
+			margin-bottom: 17px;
 		}
 
 		.price {
-		margin: 8px 0 17px;
+			margin-bottom: 17px;
+			text-align: center;
+			text-transform: uppercase;
 
-		> div {
-			line-height: 1.3;
-		}
 			.antigo {
-			color:  hsla(220, 1%, 43%, 1);
+				margin-bottom: 4px;
-			font-size: 14px;
-			min-height: 18px;
 				text-decoration: line-through;
+				font-size: 10px;
+				line-height: 12px;
+				color: $gray-300;
 			}
 
 			.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);
+				color: $gray-500;
-			font-size: 12px;
+				font-size: 10px;
-
+				line-height: 12px;
-			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;
+				justify-content: center;
+				height: 50px;
+				background: $black;
+				color: $white;
+				font-weight: bold;
+				font-size: 10px;
+				line-height: 12px;
 
-			@include mq(md, min) {
+				@include mq(lg, max) {
-				visibility: hidden;
+					&:active {
-				opacity: 0;
+						background: lighten($black, 10);
+					}
 				}
 
-			a {
+				@include mq(lg, min) {
-				background-color: #2fab61;
+					&:hover{
-				color: $white;
+					background: lighten($black, 10);
-				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);
 					}
 
 					&:active {
-						background-color: hsla(138, 50%, 41%, 1);
+						background: $black;
 					}
 				}
 			}
 		}
-	}
-
-	@include mq(lg) {
-		&:hover .compra .btn-compra {
-			visibility: visible;
-			opacity: 1;
-			z-index: 1;
-		}
-	}
 
 		.indisponivel {
-		color: #f71963;
+			.erro {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				height: 50px;
+				color: $red-300;
 				font-weight: bold;
-		margin: 5px 0;
+				font-size: 10px;
+				line-height: 12px;
+			}
+		}
 	}
 }

src/arquivos/sass/partials/_slider.scss

@@ -0,0 +1,36 @@
+.slick-arrow {
+	position: absolute;
+	top: 50%;
+	transform: translateY(-50%);
+	z-index: map-get($z-index , level-1);
+	font-size: 0;
+	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;
+	}
+
+}

src/arquivos/sass/utils/_variaveis.scss

@@ -1,5 +1,5 @@
 // fonts
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&family=Poppins:wght@700&family=Roboto&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&family=Poppins:wght@700&family=Roboto&display=swap');
 
 $font-family: "Inter", sans-serif;
 $font-height: 1.5;
@@ -18,6 +18,7 @@ $gray-100: #e0e0e0;
 $gray-200: #828282;
 $gray-300: #6D6E70;
 $gray-400: #bdbdbd;
+$gray-500: #6D6E70;
 
 // Grid breakpoints
 

src/template-pagina/bernardo-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/bernardo-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">
@@ -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,37 @@
 			<div class="antigo">
 				<!-- #if ($product.HasBestPrice) -->
 				<span class="value">
-					R$ 1500000,00
+					R$ 4.350,50
 					<!-- $product.ListPrice -->
 				</span>
 				<!-- #end -->
 			</div>
 			<div class="principal">
 				<span class="value">
-					R$ 1000000,00
+					R$ 3.799,05
 					<!-- $product.BestPrice -->
 				</span>
 			</div>
 			<div class="parcelado">
 				<span class="desconto-parcelado">
-					ou
+					<span class="numero-de-parcelas">10</span>X de
-					<strong>
-						<span class="numero-de-parcelas">1</span>X de
 					<span class="value">
-							R$ 2,50
+						R$ 399,90
 						<!-- $product.BestPrice -->
 					</span>
-					</strong>
+					sem juros
-					no cartão
 				</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">
+	<!-- <div class="indisponivel">
-		<span class="erro">Produto indisponível</span>
+		<span class="erro">INDISPONÍVEL</span>
-	</div>
+	</div> -->
 	<!-- #end -->
 </div>

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

@@ -0,0 +1,63 @@
+#set($id = $product.Id) #set($idSku = $product.productVariantId) #set($uri =
+$product.Uri) #set($escapedName = $product.HtmlEscapedName)
+
+<div class="produto-na-prateleira" data-sku-id="$id">
+	<div class="flags-product">
+		<span class="HightLight"> $product.HightLight </span>
+		<span class="DiscountHightLight"> $product.DiscountHightLight </span>
+	</div>
+	<div class="product-image">
+		<a href="$uri" title="$escapedName">
+			<div class="foto-principal">
+				<div class="lazyload__sibling"></div>
+				<div class="lazyload" data-noscript="">
+					<noscript> $product.GetImageTag(2) </noscript>
+				</div>
+			</div>
+			<div class="foto-secundaria">
+				<div class="lazyload__sibling"></div>
+				<div class="lazyload" data-noscript="">
+					<noscript> $product.GetImageTag(2,"ultima") </noscript>
+				</div>
+			</div>
+		</a>
+	</div>
+	<div class="informacoes">
+		<div class="avaliacao"></div>
+		<div class="nome">$escapedName</div>
+	</div>
+	#if ($product.IsInStock)
+	<div class="disponivel">
+		<div class="price">
+			<div class="antigo">
+				#if ($product.HasBestPrice)
+				<span class="value"> $product.ListPrice </span>
+				#end
+			</div>
+			<div class="principal">
+				<span class="value"> $product.BestPrice </span>
+			</div>
+			#if($product.NumbersOfInstallment > 1)
+			<div class="parcelado">
+				<span class="desconto-parcelado">
+					<span class="numero-de-parcelas"
+						>$product.NumbersOfInstallment</span
+					>X de
+					<span class="value"> $product.InstallmentValue </span>
+					sem juros
+				</span>
+			</div>
+			#end
+		</div>
+		<div class="compra">
+			<span class="btn-compra">
+				<a title="Compre agora" href="$uri">COMPRE AGORA</a>
+			</span>
+		</div>
+	</div>
+	#else
+	<div class="indisponivel">
+		<span class="erro">INDISPONÍVEL</span>
+	</div>
+	#end
+</div>

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

@@ -1,84 +0,0 @@
-#set($id = $product.Id)
-#set($idSku = $product.productVariantId)
-#set($uri = $product.Uri)
-#set($escapedName = $product.HtmlEscapedName)
-
-
-<div class="produto-na-prateleira" data-sku-id="$id">
-	<div class="flags-product">
-		<span class="HightLight">
-			$product.HightLight
-		</span>
-		<span class="DiscountHightLight">
-			 $product.DiscountHightLight
-		</span>
-	</div>
-	<div class="product-image ">
-		<a href="$uri" title=$escapedName>
-
-			<div class="foto-principal" >
-				<div class="lazyload__sibling"></div>
-				<div class="lazyload" data-noscript="">
-					<noscript>
-						$product.GetImageTag(2)
-					</noscript>
-				</div>
-			</div>
-			<div class="foto-secundaria" >
-				<div class="lazyload__sibling"></div>
-				<div class="lazyload" data-noscript="">
-					<noscript>
-						$product.GetImageTag(2,"ultima")
-					</noscript>
-				</div>
-			</div>
-		</a>
-	</div>
-	<div class="informacoes">
-		<div class="avaliacao"></div>
-		<div class="nome">
-			$escapedName
-		</div>
-	</div>
-	 #if ($product.IsInStock)
-	<div class="disponivel">
-		<div class="price">
-			<div class="antigo">
-			#if ($product.HasBestPrice)
-				<span class="value">
-					$product.ListPrice
-				</span>
-			#end
-			</div>
-			<div class="principal">
-				<span class="value">
-				$product.BestPrice
-				</span>
-			</div>
-			#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
-				</span>
-			</div>
-			#end
-		</div>
-		<div class="compra">
-			<span class="btn-compra">
-				<a title="Compre agora" href="$uri">Compre agora</a>
-			</span>
-		</div>
-	</div>
-	#else
-	<div class="indisponivel">
-		<span class="erro">Produto indisponível</span>
-	</div>
-	#end
-</div>