diff --git a/manifest.json b/manifest.json index 9ee3cc5..a2cde0d 100644 --- a/manifest.json +++ b/manifest.json @@ -15,7 +15,6 @@ "postreleasy": "vtex publish --verbose" }, "dependencies": { - "agenciamagma.store-theme": "5.x", "vtex.store": "2.x", "vtex.store-header": "2.x", "vtex.product-summary": "2.x", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..b8e75c8 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -45,6 +45,7 @@ }, "flex-layout.row#product-main": { "props": { + "blockClass": "divProduct", "colGap": 7, "rowGap": 7, "marginTop": 4, @@ -52,9 +53,14 @@ "paddingTop": 7, "paddingBottom": 7 }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "children": [ + "flex-layout.col#stack", + "flex-layout.col#right-col" + ] }, + + "stack-layout": { "props": { "blockClass": "product" @@ -78,35 +84,48 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "58%", "rowGap": 0 } }, + + + "flex-layout.row#product-image": { + "props":{ + + }, "children": ["product-images"] }, + "product-images": { "props": { + "blockClass":"divImagens", "aspectRatio": { "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "thumbnailsOrientation": "horizontal", + "displayThumbnailsArrows": false, + "showNavigationArrows": false, + "showPaginationDots": false } }, + "flex-layout.col#right-col": { "props": { + "blockClass":"divInfoProduct", "preventVerticalStretch": true, "rowGap": 0 }, "children": [ "flex-layout.row#product-name", + "flex-layout.row#product-modelo", "product-rating-summary", "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - "product-separator", - "product-identifier.product", + // "product-separator", "sku-selector", "product-quantity", "product-assembly-options", @@ -118,8 +137,16 @@ ] }, + "flex-layout.row#product-modelo": { + "props": { + "blockClass":"divNomeProductModelo" + }, + "children": ["product-identifier.product"] + }, + "flex-layout.row#product-name": { "props": { + "blockClass":"divNomeProduct", "marginBottom": 3 }, "children": ["vtex.store-components:product-name"] diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..00098e6 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -12,5 +12,5 @@ } .html--pdp-breadcrumb { - background-color: green; + background-color: #fff; } \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 32083bb..d25a463 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -9,9 +10,15 @@ /* Grid breakpoints */ .container { background-color: #fff; - font-weight: 700; + font-weight: 400; font-size: 14px; line-height: 19px; + margin-left: 40px; +} +@media (min-width: 2500px) { + .container { + margin-left: 360px; + } } .container .homeIcon { display: none; @@ -19,4 +26,27 @@ .container .homeLink::after { content: "Home"; display: inline-block; +} +.container .arrow .link { + font-size: 0; +} +.container .arrow .link--1::after { + content: "Sapatos"; + display: inline-block; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.container .arrow .link--2::after { + content: "Sandálias"; + display: inline-block; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.container .termArrow { + display: none; +} +.container .term { + display: none; } \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 34c4328..a063a70 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -6,4 +6,33 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.flexRowContent--divProduct { + margin-top: 16px; + margin-left: 40px; + margin-bottom: 16px; + padding-right: 40px !important; + padding: 0; +} +.flexRowContent--divProduct .stretchChildrenWidth { + width: 100% !important; +} + +.flexCol--divInfoProduct .flexRow--divNomeProduct { + text-align: end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} +.flexCol--divInfoProduct .flexRow--divNomeProductModelo { + text-align: end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} \ No newline at end of file diff --git a/styles/css/vtex.stack-layout.css b/styles/css/vtex.stack-layout.css index 7149eb7..34c4328 100644 --- a/styles/css/vtex.stack-layout.css +++ b/styles/css/vtex.stack-layout.css @@ -1,10 +1,9 @@ -.stackItem--product { - width: 100%; - min-height: 257px -} - -.stackItem--quickview { - right: 0; - top: 0; - left: auto; -} +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..c0910bc 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,4 +9,32 @@ /* Grid breakpoints */ .newsletter { background: red; +} + +.container { + margin: 0; + padding: 0; +} +.container .productImagesContainer--divImagens { + width: 100%; +} +.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer { + width: 100%; + max-width: 100%; + height: 100%; + max-height: 100%; +} +.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens { + width: 100% !important; +} +.container .productImagesContainer--divImagens .productImagesGallerySwiperContainer .productImagesGallerySlide--divImagens .productImageTag { + max-height: 100% !important; + margin-bottom: 16px; +} +.container .productImagesContainer--divImagens .carouselGaleryThumbs--divImagens .productImagesThumb { + margin-right: 16px; + padding: 0px; + width: 90px; + height: 90px !important; + border-radius: 8px; } \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index ea7d5b9..a3f7a45 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -3,6 +3,6 @@ } .html--pdp-breadcrumb { - background-color: green; + background-color: $color-white; } diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 643955a..d28c868 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,13 +1,42 @@ -.container{ - background-color: $color-white; - font-weight: 700; - font-size: 14px; - line-height: 19px; - .homeIcon{ - display: none; +.container { + background-color: $color-white; + font-weight: 400; + font-size: 14px; + line-height: 19px; + margin-left: 40px; + @media (min-width: 2500px) { + margin-left: 360px; + } + .homeIcon { + display: none; + } + .homeLink::after { + content: "Home"; + display: inline-block; + } + .arrow { + .link{ + font-size: 0; } - .homeLink::after{ - content: 'Home'; + .link--1::after { + content: "Sapatos"; display: inline-block; + font-weight: 400; + font-size: 14px; + line-height: 19px; } -} \ No newline at end of file + .link--2::after { + content: "Sandálias"; + display: inline-block; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } +} +.termArrow{ + display: none; +} +.term{ + display: none; +} +} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index e69de29..837fe57 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,30 @@ +.flexRowContent--divProduct { + margin-top: 16px; + margin-left: 40px; + margin-bottom: 16px; + padding-right: 40px !important; + padding: 0; + .stretchChildrenWidth { + width: 100% !important; + } +} +.flexCol--divInfoProduct { + .flexRow--divNomeProduct { + text-align: end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; + } + .flexRow--divNomeProductModelo { + text-align: end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); + } +} diff --git a/styles/sass/pages/product/vtex.stack-layout.scss b/styles/sass/pages/product/vtex.stack-layout.scss new file mode 100644 index 0000000..e69de29 diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..f8bdcdf 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,32 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.newsletter { + background: red; +} +.container { + margin: 0; + padding: 0; + .productImagesContainer--divImagens { + width: 100%; + .productImagesGallerySwiperContainer { + width: 100%; + max-width: 100%; + height: 100%; + max-height: 100%; + .productImagesGallerySlide--divImagens { + width: 100% !important; + .productImageTag { + max-height: 100% !important; + margin-bottom: 16px; + } + } + } + .carouselGaleryThumbs--divImagens { + .productImagesThumb { + margin-right: 16px; + padding: 0px; + width: 90px; + height: 90px !important; + border-radius: 8px; + } + } + } +}