diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index be23a2c..bfbf545 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -109,7 +109,7 @@ "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - "product-separator", + // "product-separator", "product-identifier.product", "sku-selector", "product-quantity", diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..861ad15 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -4,11 +4,10 @@ "colGap": 2, "preserveLayoutOnMobile": true, "preventHorizontalStretch": true, - "marginBottom": 4 + "marginBottom": 4, + "blockClass": "preco" }, - "children": [ - "product-selling-price" - ] + "children": ["product-selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +18,6 @@ "marginBottom": 2, "marginTop": 5 }, - "children": [ - "product-list-price", - "product-price-savings" - ] + "children": ["product-list-price", "product-price-savings"] } } diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..2224337 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -1,9 +1,6 @@ { "modal-trigger#quickview": { - "children": [ - "icon-expand", - "modal-layout#quickview" - ], + "children": ["icon-expand", "modal-layout#quickview"], "props": { "blockClass": "quickview" } @@ -63,9 +60,7 @@ }, "flex-layout.col#quickview-product-quantity": { - "children": [ - "product-summary-quantity#quickview" - ] + "children": ["product-summary-quantity#quickview"] }, "product-summary-quantity#quickview": { "props": { @@ -74,18 +69,14 @@ } }, "flex-layout.col#quickview-add-to-card-button": { - "children": [ - "add-to-cart-button" - ], + "children": ["add-to-cart-button"], "props": { "width": "grow" } }, "flex-layout.row#quickview-actions-2": { - "children": [ - "link.product#button-pdp" - ] + "children": ["link.product#button-pdp"] }, "link.product#button-pdp": { "props": { @@ -107,15 +98,10 @@ } }, "flex-layout.col#quickview-images": { - "children": [ - "product-images#quickview" - ] + "children": ["product-images#quickview"] }, "flex-layout.col#quickview-product-details": { - "children": [ - "modal-content#quickview", - "modal-actions#quickview" - ], + "children": ["modal-content#quickview", "modal-actions#quickview"], "props": { "preventVerticalStretch": true, "blockClass": "quickviewDetails" @@ -134,7 +120,7 @@ "blockClass": "quickview" } }, - "product-images#quickview" : { + "product-images#quickview": { "props": { "blockClass": "quickview", "showNavigationArrows": true diff --git a/styles/configs/style.json b/styles/configs/style.json index 0063688..7d9afd5 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -255,84 +255,84 @@ "measure": [30, 34, 20], "styles": { "heading-1": { - "fontFamily": "Open Sans", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "700", "fontSize": "3rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-2": { - "fontFamily": "Open Sans", + "fontFamily": "'Open Sans', sans-serif", "fontWeight": "700", "fontSize": "2.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-3": { - "fontFamily": "Open Sans", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "700", "fontSize": "1.75rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-4": { - "fontFamily": "Open Sans", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1.5rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-5": { - "fontFamily": "Open Sans", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-6": { - "fontFamily": "Open Sans", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "body": { - "fontFamily": "Open Sans", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "1rem", "textTransform": "initial", "letterSpacing": "0" }, "small": { - "fontFamily": "Open Sans", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "0.875rem", "textTransform": "initial", "letterSpacing": "0" }, "mini": { - "fontFamily": "Open Sans", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "normal", "fontSize": "0.75rem", "textTransform": "initial", "letterSpacing": "0" }, "action": { - "fontFamily": "Open Sans", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "500", "fontSize": "1rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--small": { - "fontFamily": "Open Sans", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "500", "fontSize": "0.875rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--large": { - "fontFamily": "Open Sans", + "fontFamily": "Open Sans, sans-serif", "fontWeight": "500", "fontSize": "1.25rem", "textTransform": "uppercase", diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c156fc8..e493905 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -7,6 +7,11 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); .flexRowContent { position: relative; +} + +.flexRowContent--preco { + margin: 0; } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index f2a8733..c5cdceb 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -7,7 +7,42 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); .savings, .listPrice { display: none; +} + +.sellingPrice { + font-weight: 700; + font-size: 25px; + line-height: 38px; +} + +.installments { + font-size: 0; +} +.installmentsNumber { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.installmentsNumber::after { + content: " x "; +} + +.installmentValue .currencyContainer { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.installmentValue .currencyContainer::before { + content: "de "; + font-weight: 400; +} +.installmentValue .currencyContainer::after { + content: " sem juros "; + font-weight: 400; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 871a233..d6916f8 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,12 +7,16 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); .container { padding: 0 40px; } .container .productImagesThumb { padding-right: 16px; } +.container .productImageTag { + object-fit: fill !important; +} .container .productNameContainer { text-align: right; font-weight: 300; @@ -20,4 +24,70 @@ line-height: 34px; color: #575757; margin-bottom: 31px; +} +.container .skuSelectorSubcontainer { + margin-bottom: 10px; +} +.container .skuSelectorNameContainer { + margin: 0; +} +.container .skuSelectorTextContainer { + font-size: 0; + margin-bottom: 8px; +} +.container .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.container .skuSelectorTextContainer .skuSelectorName:last-child::before { + content: "OUTROS TAMANHOS:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container .skuSelectorTextContainer .skuSelectorName::before { + content: "OUTRAS CORES"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container .skuSelectorTextContainer .skuSelectorSelectorImageValue { + font-size: 0; +} +.container .skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.container .skuSelectorItem { + width: 40px; + height: 40px; + margin-right: 16px; +} +.container .frameAround { + border-radius: 24px; + border: 1px solid #989898; +} +.container .skuSelectorItem--selected .frameAround { + border-radius: 24px; + border: 2px solid #000000; +} +.container .skuSelectorItem--selected .skuSelectorItemTextValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #000000; +} +.container .skuSelectorInternalBox { + border: none; + border-radius: 24px; + display: flex; + align-items: center; + justify-content: center; +} +.container .skuSelectorItemTextValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); } \ 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 5cf6179..e8a79a9 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,3 +1,7 @@ .flexRowContent { position: relative; } + +.flexRowContent--preco { + margin: 0; +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 8126d88..82d9ffe 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -2,3 +2,42 @@ .listPrice { display: none; } + +.sellingPrice { + font-weight: 700; + font-size: 25px; + line-height: 38px; +} + +.installments { + font-size: 0; + + &Number { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: $color-gray7; + + &::after { + content: " x "; + } + } +} +.installmentValue { + .currencyContainer { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: $color-gray7; + + &::before { + content: "de "; + font-weight: 400; + } + + &::after { + content: " sem juros "; + font-weight: 400; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 5b1478a..bca9d52 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -8,6 +8,10 @@ padding-right: 16px; } + .productImageTag { + object-fit: fill !important; + } + .productNameContainer { text-align: right; font-weight: 300; @@ -16,4 +20,87 @@ color: $color-gray6; margin-bottom: 31px; } + + .skuSelectorSubcontainer { + margin-bottom: 10px; + } + + .skuSelectorNameContainer { + margin: 0; + } + + .skuSelectorTextContainer { + font-size: 0; + margin-bottom: 8px; + + .skuSelectorName { + font-size: 0; + + &:last-child { + &::before { + content: "OUTROS TAMANHOS:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray7; + } + } + + &::before { + content: "OUTRAS CORES"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray7; + } + } + + .skuSelectorSelectorImageValue { + font-size: 0; + } + } + + .skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + } + + .skuSelectorItem { + width: 40px; + height: 40px; + margin-right: 16px; + } + + .frameAround { + border-radius: 24px; + border: 1px solid $color-gray8; + } + + .skuSelectorItem--selected { + .frameAround { + border-radius: 24px; + border: 2px solid $color-black2; + } + .skuSelectorItemTextValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-black2; + } + } + + .skuSelectorInternalBox { + border: none; + border-radius: 24px; + display: flex; + align-items: center; + justify-content: center; + } + + .skuSelectorItemTextValue { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); + } } diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 838a57f..f904fa9 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,4 +1,5 @@ $color-black: #292929; +$color-black2: #000000; $color-white: #fff; @@ -9,6 +10,7 @@ $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; $color-gray6: #575757; $color-gray7: #929292; +$color-gray8: #989898; $color-blue: #4267b2; @@ -31,3 +33,7 @@ $z-index: ( level4: 20, level5: 25, ) !default; + +//Fonts + +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");