From c90218a770793935c4167f611907672f5bf216ef Mon Sep 17 00:00:00 2001 From: MarcelloMartins Date: Fri, 10 Feb 2023 23:45:20 -0300 Subject: [PATCH] feat(flexCol): created flex col --- store/blocks/pdp/product.jsonc | 29 ++++-- styles/css/vtex.flex-layout.css | 9 ++ styles/css/vtex.product-identifier.css | 25 ++++- styles/css/vtex.product-price.css | 93 ++++--------------- styles/css/vtex.store-components.css | 30 ++++++ .../sass/pages/product/vtex.flex-layout.scss | 9 ++ .../product/vtex.product-identifier.scss | 15 +++ .../pages/product/vtex.product-price.scss | 13 +++ .../pages/product/vtex.store-components.scss | 30 ++++++ 9 files changed, 170 insertions(+), 83 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss create mode 100644 styles/sass/pages/product/vtex.product-price.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 45ed312..b25c15f 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -243,6 +243,21 @@ "showNavigationArrows": false } }, + + "flex-layout.col#skuCol": { + "props": { + "blockClass": "skuProduct" + }, + "children": ["product-identifier.product"] + }, + + "product-installments": { + "props": { + "message": "{installmentsNumber} {hasInterest, select, true {x} false {}} de {installmentValue} sem juros", + "blockClass": "installmentsPrice" + } + }, + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, @@ -250,17 +265,14 @@ }, "children": [ "flex-layout.row#product-name", - "product-identifier.product", + "flex-layout.col#skuCol", "product-rating-summary", // "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", // "product-separator", "sku-selector", - "product-quantity", - "product-assembly-options", - "product-gifts", - "flex-layout.row#buy-button", + "flex-layout.row#cartPlus", "availability-subscriber", "shipping-simulator" // "share#default" @@ -284,11 +296,16 @@ "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "buttonCart" }, "children": ["add-to-cart-button"] }, + "flex-layout.row#cartPlus": { + "children": ["product-quantity", "flex-layout.row#buy-button"] + }, + "flex-layout.row#product-availability": { "props": { "colGap": 7, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c3ed26a..86dc184 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -9,4 +9,13 @@ /* Grid breakpoints */ .flexRow--containerFlexRow { margin: 32px 72px 16px; +} + +.flexColChild--skuProduct { + text-align: end; +} + +.flexRowContent--buttonCart :global(.vtex-button) { + background: black; + border: 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..49ed9b6 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,24 @@ -.product-identifier--productReference { - margin-bottom: 1rem; +/* +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__label { + display: none; } + +.product-identifier__value { + text-align: end; + color: rgba(146, 146, 146, 0.48); + font-weight: 400; + font-size: 14px; + line-height: 19px; +} + +.product-identifier__separator { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 6b5431c..de9f116 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,22 @@ -.listPrice { - color: #727273; - margin-bottom: 0.25rem; - font-size: 1rem; +/* +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 */ +.installments { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } .sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; font-weight: 700; -} - -.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: 0.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; -} + font-size: 25px; + line-height: 38px; + color: #000000; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 9940aec..5543faa 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -72,4 +72,34 @@ .discountInsideContainer { display: none; +} + +.productBrand { + text-align: end; +} + +.productNameContainer--quickview { + text-align: end; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} + +.skuSelectorItemTextValue { + padding: unset; +} + +.skuSelectorItem { + border-radius: 50%; + width: 45px; + height: 45px; +} + +.skuSelectorInternalBox { + border-radius: 50%; +} + +.frameAround { + border-radius: 50%; } \ 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 322ac00..c832a4d 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,3 +1,12 @@ .flexRow--containerFlexRow { margin: 32px 72px 16px; } + +.flexColChild--skuProduct { + text-align: end; +} + +.flexRowContent--buttonCart :global(.vtex-button) { + background: black; + border: 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..5b7a765 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,15 @@ +.product-identifier__label { + display: none; +} + +.product-identifier__value { + text-align: end; + color: rgba(146, 146, 146, 0.48); + font-weight: 400; + font-size: 14px; + line-height: 19px; +} + +.product-identifier__separator { + display: none; +} 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..0b631c8 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,13 @@ +.installments { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.sellingPrice { + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 82ed130..cd51ca2 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -66,3 +66,33 @@ .discountInsideContainer { display: none; } + +.productBrand { + text-align: end; +} + +.productNameContainer--quickview { + text-align: end; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} + +.skuSelectorItemTextValue { + padding: unset; +} + +.skuSelectorItem { + border-radius: 50%; + width: 45px; + height: 45px; +} + +.skuSelectorInternalBox { + border-radius: 50%; +} + +.frameAround { + border-radius: 50%; +}