diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index c93aa11..96d2055 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -79,16 +79,16 @@ "props": { "width": "50%", "preventVerticalStretch": true, - "rowGap": 0 + "blockClass": "right-col" }, "children": [ "flex-layout.row#product-name", - "product-rating-summary", - "flex-layout.row#list-price-savings", + "product-identifier.product", + // "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", @@ -102,7 +102,8 @@ "flex-layout.row#product-name": { "props": { - "marginBottom": 3 + "marginBottom": 3, + "blockClass": "product-name" }, "children": ["vtex.store-components:product-name"] }, diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..a2639d5 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -1,14 +1,11 @@ { "flex-layout.row#selling-price": { "props": { - "colGap": 2, "preserveLayoutOnMobile": true, "preventHorizontalStretch": true, - "marginBottom": 4 + "blockClass": "selling-price" }, - "children": [ - "product-selling-price" - ] + "children": ["product-selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +16,14 @@ "marginBottom": 2, "marginTop": 5 }, - "children": [ - "product-list-price", - "product-price-savings" - ] + "children": ["product-list-price", "product-price-savings"] + }, + + "product-installments": { + "props": { + "markers": ["myMarker"], + "message": "{installmentsNumber} x de {installmentValue} sem juros", + "installmentsCriteria": "max-quantity-without-interest" + } } } diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..a8aa5d4 --- /dev/null +++ b/styles/configs/font-faces.css @@ -0,0 +1,4 @@ +@font-face { + font-family: "Open Sans", sans-serif; + src: url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); +} diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index e36b3d4..f4794cf 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -7,9 +7,11 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +/* ----- PRODUCT-MAIN ----- */ .flexRowContent--productMain { padding: 0 40px; gap: 32px; + justify-content: center; } @media only screen and (min-width: 1920px) { .flexRowContent--productMain { @@ -31,4 +33,17 @@ .flexRowContent--productMain .stretchChildrenWidth:first-child { margin-bottom: 32px; } +} + +/* ----- RIGHT-COL ----- */ +.flexCol--right-col .flexRowContent--product-name { + text-align: right; +} +@media only screen and (max-width: 1024px) { + .flexCol--right-col .flexRowContent--product-name { + text-align: left; + } + .flexCol--right-col .flexRowContent--product-name .stretchChildrenWidth { + margin: 0; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..77cd79e 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,28 @@ +/* +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 */ .product-identifier--productReference { - margin-bottom: 1rem; + display: flex; + justify-content: flex-end; + margin-bottom: 24px; } +@media only screen and (max-width: 1024px) { + .product-identifier--productReference { + justify-content: flex-start; + } +} +.product-identifier--productReference .product-identifier__label, +.product-identifier--productReference .product-identifier__separator { + display: none; +} +.product-identifier--productReference .product-identifier__value { + 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.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..95c67fa 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,27 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - +/* +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 */ .sellingPriceValue { - font-size: 2.25rem; font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; } .installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - font-weight: 500; - color: #79B03A; -} - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; -} - -.savings--summary { - background: #8BC34A; - border-radius: 1000px; - align-items: center; - display: flex; - - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; -} - -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.listPrice--summary { - margin-bottom: 0.25rem; - font-size: .875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.savings--summaryPercentage { - background: #0f3e99; - border-radius: 1000px; - align-items: center; - display: flex; -} - -.savingsPercentage--summaryPercentage { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; + margin-bottom: 8px; + font-family: "Open Sans"; + font-size: 16px; + line-height: 22px; + color: #929292; } +.installments .installmentsNumber, +.installments .currencyContainer { + font-weight: 700; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 0bba16f..e17c978 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,11 +7,13 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); .container { margin: 0; padding: 0; } +/* ----- PRODUCT-MAIN ----- */ .productImagesGallerySlide { width: 100% !important; margin: 0; @@ -48,4 +50,12 @@ .carouselGaleryThumbs .productImagesThumb.productImagesThumbActive .carouselThumbBorder { border-radius: 8px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.33), rgba(0, 0, 0, 0.33)); +} + +/* ----- RIGHT-COL ----- */ +.productBrand--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 8a1c79d..b2d1998 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,19 +1,18 @@ +/* ----- PRODUCT-MAIN ----- */ .flexRowContent--productMain { - // background-color: red; padding: 0 40px; gap: 32px; + justify-content: center; @include mq(xl) { padding: 0 360px; } @include mq(lg, max) { - // background-color: red; flex-direction: column; .stretchChildrenWidth { width: 100% !important; - // background-color: blue; :first-child { padding-right: 0; @@ -27,3 +26,20 @@ } } } + +/* ----- RIGHT-COL ----- */ +.flexCol--right-col { + // background-color: red; + + .flexRowContent--product-name { + text-align: right; + + @include mq(lg, max) { + text-align: left; + + .stretchChildrenWidth { + margin: 0; + } + } + } +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..361c429 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,23 @@ +.product-identifier--productReference { + display: flex; + justify-content: flex-end; + // background-color: yellow; + margin-bottom: 24px; + + @include mq(lg, max) { + justify-content: flex-start; + } + + .product-identifier__label, + .product-identifier__separator { + display: none; + } + + .product-identifier__value { + // font-family: "Open Sans"; + // font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); + } +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..22fbc87 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,25 @@ +.sellingPriceValue { + // background-color: yellowgreen; + // font-family: "Open Sans"; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; +} + +.installments { + margin-bottom: 8px; + font-family: "Open Sans"; + font-size: 16px; + line-height: 22px; + color: #929292; + + .installmentsNumber, + .currencyContainer { + font-weight: 700; + } + + // .installmentValue { + // display: inline; + // } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 41df0c1..613eced 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,23 +1,23 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap"); + .container { margin: 0; padding: 0; } +/* ----- PRODUCT-MAIN ----- */ .productImagesGallerySlide { width: 100% !important; margin: 0; .productImageTag { - // background-color: yellow; width: 100%; - // height: 100% !important; aspect-ratio: 1 / 1; object-fit: cover !important; } } .carouselGaleryThumbs { - // background-color: blue; margin-top: 16px; display: block; @@ -55,3 +55,12 @@ } } } + +/* ----- RIGHT-COL ----- */ +.productBrand--quickview { + // font-family: "Open Sans"; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +}