Adicionando banners na home

meta/pages/home.js

@@ -1,31 +1,20 @@
 module.exports = {
 	contentPlaceHolders: [
 		{
-			// Registra  o contentPlaceholder
+			id: "banners-principais-desktop",
-			id: "htmlSeo",
-			objects: [
-				//  Registra os objetos vtex
-				{
-					type: "html",
-					name: "Html SEO",
-					contents: [],
-				},
-			],
-		},
-		{
-			id: "slide-principal",
 			objects: [
+				// cada objeto dento do array será um banner
 				{
 					type: "banner",
-					name: "banner principal",
+					name: "Banner Principal Desktop 01",
 					contents: [
 						{
-							name: "banner principal content",
+							name: "Banner Principal Desktop 01",
 							active: true,
 							type: "image",
-							file: "slide-principal.png",
+							file: "banner-principal.png",
-							width: 1920,
+							width: 1440,
-							height: 500,
+							height: 532,
 							//   "category": "*",
 							//   "brand": "*"
 							//   "period": ""
@@ -34,48 +23,125 @@ module.exports = {
 				},
 				{
 					type: "banner",
-					name: "banner principal-2",
+					name: "Banner Principal Desktop 02",
 					contents: [
 						{
-							name: "banner principal content",
+							name: "Banner Principal Desktop 02",
 							active: true,
 							type: "image",
 							file: "slide-principal.png",
-							width: 1920,
+							width: 1440,
-							height: 500,
+							height: 532,
+							//   "category": "*",
+							//   "brand": "*"
+							//   "period": ""
+						},
+					],
+				},
+				{
+					type: "banner",
+					name: "Banner Principal Desktop 03",
+					contents: [
+						{
+							name: "Banner Principal Desktop 03",
+							active: true,
+							type: "image",
+							file: "banner-principal.png",
+							width: 1440,
+							height: 532,
+							//   "category": "*",
+							//   "brand": "*"
+							//   "period": ""
+						},
+					],
+				},
+				{
+					type: "banner",
+					name: "Banner Principal Desktop 04",
+					contents: [
+						{
+							name: "Banner Principal Desktop 04",
+							active: true,
+							type: "image",
+							file: "slide-principal.png",
+							width: 1440,
+							height: 532,
+							//   "category": "*",
+							//   "brand": "*"
+							//   "period": ""
 						},
 					],
 				},
 			],
 		},
 		{
-			id: "slide-principal-mobile",
+			id: "banners-principais-mobile",
 			objects: [
 				{
 					type: "banner",
-					name: "banner principal mobile",
+					name: "Banner Principal Mobile 01",
 					contents: [
 						{
-							name: "banner principal mobile content",
+							name: "Banner Principal Mobile 01",
 							active: true,
 							type: "image",
-							file: "slide-principal-mobile.png",
+							file: "banner-principal-mobile.png",
-							width: 500,
+							width: 375,
-							height: 500,
+							height: 342,
+							//   "category": "*",
+							//   "brand": "*"
+							//   "period": ""
 						},
 					],
 				},
 				{
 					type: "banner",
-					name: "banner principal mobile 2",
+					name: "Banner Principal Mobile 02",
 					contents: [
 						{
-							name: "banner principal mobile 2 content",
+							name: "Banner Principal Mobile 02",
 							active: true,
 							type: "image",
 							file: "slide-principal-mobile.png",
-							width: 500,
+							width: 375,
-							height: 500,
+							height: 342,
+							//   "category": "*",
+							//   "brand": "*"
+							//   "period": ""
+						},
+					],
+				},
+				{
+					type: "banner",
+					name: "Banner Principal Mobile 03",
+					contents: [
+						{
+							name: "Banner Principal Mobile 03",
+							active: true,
+							type: "image",
+							file: "banner-principal-mobile.png",
+							width: 375,
+							height: 342,
+							//   "category": "*",
+							//   "brand": "*"
+							//   "period": ""
+						},
+					],
+				},
+				{
+					type: "banner",
+					name: "Banner Principal Mobile 04",
+					contents: [
+						{
+							name: "Banner Principal Mobile 04",
+							active: true,
+							type: "image",
+							file: "slide-principal-mobile.png",
+							width: 375,
+							height: 342,
+							//   "category": "*",
+							//   "brand": "*"
+							//   "period": ""
 						},
 					],
 				},

src/arquivos/js/app/pages/Home.js

@@ -1,38 +1,17 @@
-import {
+import slickConfig from "Config/slick";
-	bannerHome,
-	barraDeVantagens,
-	naveguePorCategorias,
-} from "App/functions/slide";
-
-import InstagramGallery from "../components/InstagramGallery";
-
 export default class Home {
 	constructor() {
-		bannerHome(".main-gallery");
+		this.selectors();
-		barraDeVantagens(".tipbar ul");
+		this.createSliders();
-		naveguePorCategorias(".categorias-home .categorias");
-
-		new InstagramGallery({
-			gallery: ".instagramGallery__photos",
-			account: "agenciam3",
-			limit: 6,
-		});
 	}
 
-	naveguePorCategorias() {
+	selectors() {
-		// preencher titulos
+		this.desktopMainBaners = $(".main-banners__desktop");
-		var $container = $(".home-categories .categorias");
+		this.mobileMainBaners = $(".main-banners__mobile");
-		$container.find(".box-banner").each(function (i, el) {
+	}
-			const $banner = $(el);
-			let name;
 
-			name = $banner.find("img").prop("alt");
+	createSliders() {
-			let $titulo = $("<span />", {
+		this.desktopMainBaners.slick(slickConfig.home.desktopMainBanners);
-				text: name,
+		this.mobileMainBaners.slick(slickConfig.home.mobileMainBanners);
-				class: "nome-categoria",
-			});
-			$banner.find("img").after($titulo);
-		});
-		slide.naveguePorCategorias($container);
 	}
 }

src/arquivos/js/config/slick.js

@@ -1,18 +1,18 @@
 export default {
 	home: {
-		bannerDesktop: {
+		desktopMainBanners: {
 			dots: true,
-			arrows: false,
+			arrows: true,
-			pauseOnHover: false,
+			pauseOnHover: true,
 			autoplay: true,
-			autoplaySpeed: 6000,
+			autoplaySpeed: 5000,
 		},
-		bannerMobile: {
+		mobileMainBanners: {
 			dots: true,
-			arrows: false,
+			arrows: true,
 			pauseOnHover: false,
 			autoplay: true,
-			autoplaySpeed: 6000,
+			autoplaySpeed: 5000,
 		},
 	},
 	general: {

src/arquivos/sass/pages/_home.scss

@@ -1,178 +1,104 @@
-/***************************************************************/
-/**-- Home ---------------------------------********************/
-/*-------------------------------------------------------------*/
-
 .home {
-	.main-gallery {
+	.main-banners {
-		> div {
-			&:not(.slick-initialized) {
-				.box-banner {
-					&:not(:first-child) {
-						display: none;
-					}
-				}
-			}
-
-			&.desktop {
-				@include mq(md, max) {
-					display: none;
-				}
-			}
-
-			&.mobile {
-				@include mq(md, min) {
-					display: none;
-				}
-			}
-		}
 
 		img {
 			width: 100%;
 		}
 
-		.slick-next,
+		&__desktop {
-		.slick-prev {
+			@include mq(md, max) {
-			@extend .sprite;
+				display: none;
-			background-color: transparent;
+			}
-			border: none;
+		}
-			cursor: pointer;
+
-			font-size: 0;
+		&__mobile {
-			outline: none;
+			@include mq(md, min) {
-			padding: 0;
+				display: none;
+			}
+		}
+
+		.slick-arrow {
 			position: absolute;
-			top: 40%;
+			top: 50%;
-			transform: scale(0.7);
+			transform: translateY(-50%);
-			z-index: 1;
+			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) {
+				transform: translatey(-50%) scale(0.7);
+			}
+		}
+
+		.slick-prev {
+			left: 24px;
+
+			@extend .sprite-arrow-white-prev-icon;
+
+			@include mq(md, max) {
+				left: 16px;
+				transform-origin: left;
+			}
 		}
 
 		.slick-next {
-			@extend .sprite;
+			right: 24px;
-			@extend .sprite-circled-arrow-right;
-			left: auto;
-			right: 8px;
-		}
 
-		.slick-prev {
+			@extend .sprite-arrow-white-next-icon;
-			@extend .sprite;
+
-			@extend .sprite-circled-arrow-left;
+			@include mq(md, max) {
-			right: auto;
+				right: 16px;
-			left: 8px;
+				transform-origin: right;
+			}
 		}
 
 		.slick-dots {
-			bottom: 20px;
-			position: absolute;
-			pointer-events: none;
-			text-align: center;
-			width: 100%;
-
-			&,
-			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;
-				}
-			}
-		}
-	}
-
-	.banner {
-		&.desktop {
-			@include mq(md, max) {
-				display: none;
-			}
-		}
-
-		&.mobile {
-			@include mq(md, min) {
-				display: none;
-			}
-		}
-
-		img {
-			width: 100%;
-		}
-	}
-
-	.mosaico-home,
-	.mosaico-home-footer {
-		@include mq(md, max) {
-			padding: 0;
-		}
-
-		@include mq_range(md, xl) {
-			max-width: 100%;
-		}
-
-		.row {
-			@include mq(md, max) {
 			margin: 0;
-			}
+			position: absolute;
-		}
+			left: 0;
-	}
+			bottom: 14px;
-
+			z-index: map-get($z-index,  level-1);
-	.mosaico-home {
-		> .row {
-			@include mq(md, min) {
-				margin-left: 0;
-			}
-		}
-
-		.banner {
-			padding: 0 0 40px;
-
-			@include mq(md, min) {
-				padding: 0 10px;
-			}
-
-			img {
 			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 {
+						width: 16px;
+						height: 16px;
+						background: transparent;
+						border: 1px solid $white;
+
+					}
 				}
 			}
 
-		.banners-left {
+			button {
-			@include mq(md, min) {
+				width: 10px;
-				padding-left: 0px;
+				height: 10px;
-				padding-right: 12px;
-			}
-		}
-
-		.banners-right {
 				padding: 0;
+				border: 0;
+				outline: 0;
+				background: $white;
 
-			.banner {
-				padding-right: 0;
 
-				&:nth-child(2) {
-					@include mq(md, min) {
-						padding-left: 8px;
-					}
-				}
 			}
 		}
+
 	}
 }

src/arquivos/sass/partials/_footer.scss

@@ -2,7 +2,7 @@
 
 	@include mq(md, min) {
 		padding: 29px 0 25px;
-		border: 1px solid $gray-100;
+		border-bottom: 1px solid $gray-100;
 	}
 
 	&__wrapper {

src/template-pagina/bernardo-home.html

@@ -20,7 +20,17 @@
 	<body>
 		<vtex:template id="bernardo-header" />
 
-		<main class="home" style="height: 600px"></main>
+		<main class="home">
+			<section class="main-banners">
+				<div class="main-banners__desktop">
+					<vtex:contentPlaceHolder id="banners-principais-desktop" />
+				</div>
+
+				<div class="main-banners__mobile">
+					<vtex:contentPlaceHolder id="banners-principais-mobile" />
+				</div>
+			</section>
+		</main>
 
 		<footer>
 			<vtex:template id="bernardo-footer-newsletter" />