From d109da77606308bbb72fec30b63f8ea4595cd402 Mon Sep 17 00:00:00 2001 From: Saulo Klein Nery Date: Thu, 2 Feb 2023 21:37:40 -0300 Subject: [PATCH] =?UTF-8?q?feat:Cria=20=C3=A1rea=20do=20pix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/Pix.tsx | 3 + react/components/Pix/Pix.tsx | 87 +++++++++++++++++++ react/components/Pix/style.css | 30 +++++++ store/blocks/pdp/product.jsonc | 42 +++++++-- store/interfaces.json | 3 + styles/configs/style.json | 36 ++++---- styles/css/vtex.add-to-cart-button.css | 15 ++++ styles/css/vtex.breadcrumb.css | 1 + styles/css/vtex.flex-layout.css | 15 +++- styles/css/vtex.product-identifier.css | 3 +- styles/css/vtex.product-price.css | 34 +++++++- ...re-theme.css => vtex.product-quantity.css} | 9 +- styles/css/vtex.rich-text.css | 1 + styles/css/vtex.shelf.css | 1 + styles/css/vtex.store-components.css | 63 +++++++++++++- styles/css/vtex.styleguide.css | 15 ++++ .../product/vtex.add-to-cart-button.scss | 5 ++ .../sass/pages/product/vtex.flex-layout.scss | 17 +++- .../product/vtex.product-identifier.scss | 2 +- .../pages/product/vtex.product-price.scss | 38 ++++++++ .../pages/product/vtex.product-quantity.scss | 3 + .../pages/product/vtex.store-components.scss | 84 +++++++++++++++++- .../sass/pages/product/vtex.styleguide.scss | 5 ++ styles/sass/utils/_vars.scss | 4 + 24 files changed, 474 insertions(+), 42 deletions(-) create mode 100644 react/Pix.tsx create mode 100644 react/components/Pix/Pix.tsx create mode 100644 react/components/Pix/style.css create mode 100644 styles/css/vtex.add-to-cart-button.css rename styles/css/{agenciamagma.store-theme.css => vtex.product-quantity.css} (56%) create mode 100644 styles/css/vtex.styleguide.css create mode 100644 styles/sass/pages/product/vtex.add-to-cart-button.scss create mode 100644 styles/sass/pages/product/vtex.product-price.scss create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss create mode 100644 styles/sass/pages/product/vtex.styleguide.scss diff --git a/react/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..52ecbb2 --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1,3 @@ +import Pix from "./components/Pix/Pix"; + +export default Pix; diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx new file mode 100644 index 0000000..b692894 --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,87 @@ +import React, { useEffect, useState } from "react"; +import { useProduct } from "vtex.product-context"; +import "./style.css"; + +const Pix = () => { + const productContext = useProduct(); + + const [pixValue, setPixValue] = useState(0); + const [discountValue, setDiscountValue] = useState(""); + + const objectPass = [ + { + id: productContext?.selectedItem?.itemId, + quantity: 1, + seller: productContext?.selectedItem?.sellers[0].sellerId, + }, + ]; + + function getDiscount(discountValue: number, commonValue: number | undefined) { + let discount = 0; + if (commonValue) { + discount = Math.floor(discountValue / commonValue) - 100; + + if (discount > 0) return `${discount} % de desconto`; + else return "sem desconto"; + } + + return null; + } + + async function request() { + const response = await fetch("/api/checkout/pub/orderForms/simulation", { + method: "POST", + headers: { + "content-type": "application/json", + }, + body: JSON.stringify({ + items: objectPass, + country: "BRA", + postalCode: "", + }), + }); + + const data = await response.json(); + + const getPix = data.paymentData.installmentOptions.find( + (e: { paymentName: string }) => { + return e.paymentName === "Pix"; + } + ); + + setPixValue(getPix.value); + + const discountMessage = getDiscount( + getPix.value, + productContext?.product?.priceRange.sellingPrice.highPrice + ); + + if (discountMessage) setDiscountValue(discountMessage); + } + + useEffect(() => { + request(); + }, [productContext?.selectedItem]); + + return ( +
+ Pix Icon + +
+ + {(pixValue / 100).toLocaleString("pt-br", { + style: "currency", + currency: "BRL", + })} + + {discountValue} +
+
+ ); +}; + +export default Pix; diff --git a/react/components/Pix/style.css b/react/components/Pix/style.css new file mode 100644 index 0000000..504cfe2 --- /dev/null +++ b/react/components/Pix/style.css @@ -0,0 +1,30 @@ +[class*="pix-container"] { + display: flex; + align-items: center; + margin: 8px 0 0; +} + +[class*="price-wrapper"] { + display: flex; + flex-direction: column; + margin: 0 0 0 26px; +} + +[class*="pix-image"] { + width: 66px; + height: 24px; +} + +[class*="price-value"] { + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} + +[class*="price-discount"] { + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 16f1ba2..cf35a93 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -100,6 +100,20 @@ "showPaginationDots": false } }, + + "product-installments": { + "props": { + "blockClass": "sellingInfo" + } + }, + + "flex-layout.row#selling-prices": { + "props": { + "blockClass": "sellingPrice" + }, + "children": ["product-selling-price"] + }, + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, @@ -109,12 +123,13 @@ "flex-layout.row#product-name", "product-rating-summary", //"flex-layout.row#list-price-savings", - "flex-layout.row#selling-price", + "flex-layout.row#selling-prices", "product-installments", - "product-separator", - "product-identifier.product", + "pix-component", + //"product-separator", "sku-selector", - "product-quantity", + "product-identifier.product", + //"product-quantity", "product-assembly-options", "product-gifts", "flex-layout.row#buy-button", @@ -138,12 +153,27 @@ } }, + "product-quantity": { + "props": { + "size": "large", + "showLabel": false + } + }, + + "add-to-cart-button": { + "props": { + "blockClass": "addToCartButton", + "text": "ADICIONAR À SACOLA" + } + }, + "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "quantityAndBuy" }, - "children": ["add-to-cart-button"] + "children": ["product-quantity", "add-to-cart-button"] }, "flex-layout.row#product-availability": { diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..c55366c 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -2,6 +2,9 @@ "example-component": { "component": "Example" }, + "pix-component": { + "component": "Pix" + }, "html": { "component": "html", "composition": "children" diff --git a/styles/configs/style.json b/styles/configs/style.json index e9bab1c..424da33 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -59,7 +59,7 @@ "background": { "base": "#ffffff", "base--inverted": "#03044e", - "action-primary": "#0F3E99", + "action-primary": "#000", "action-secondary": "#eef3f7", "emphasis": "#f71963", "disabled": "#f2f4f5", @@ -76,7 +76,7 @@ "muted-5": "#f2f4f5" }, "hover-background": { - "action-primary": "#072c75", + "action-primary": "#292929", "action-secondary": "#dbe9fd", "emphasis": "#dd1659", "success": "#8bc34a", @@ -92,7 +92,7 @@ "muted-5": "#f2f4f5" }, "active-background": { - "action-primary": "#0c389f", + "action-primary": "#000", "action-secondary": "#d2defc", "emphasis": "#dd1659", "success": "#8bc34a", @@ -108,7 +108,7 @@ "muted-5": "#f2f4f5" }, "text": { - "action-primary": "#0F3E99", + "action-primary": "#000", "action-secondary": "#eef3f7", "link": "#0F3E99", "emphasis": "#f71963", @@ -151,7 +151,7 @@ "warning--faded": "#fff6e0" }, "border": { - "action-primary": "#0F3E99", + "action-primary": "#000", "action-secondary": "#eef3f7", "emphasis": "#f71963", "disabled": "#e3e4e6", @@ -242,7 +242,7 @@ } }, "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], - "borderRadius": [0, 0.125, 0.25, 0.5, 1], + "borderRadius": [0, 0, 0, 0.5, 1], "widths": [1, 2, 4, 8, 16], "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], "heights": [1, 2, 4, 8, 16], @@ -255,84 +255,84 @@ "measure": [30, 34, 20], "styles": { "heading-1": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "'Open Sans', sans-serif", "fontWeight": "700", "fontSize": "3rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-2": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "'Open Sans', sans-serif", "fontWeight": "700", "fontSize": "2.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-3": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "'Open Sans', sans-serif", "fontWeight": "700", "fontSize": "1.75rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-4": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "'Open Sans', sans-serif", "fontWeight": "normal", "fontSize": "1.5rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-5": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "'Open Sans', sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "heading-6": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "'Open Sans', sans-serif", "fontWeight": "normal", "fontSize": "1.25rem", "textTransform": "initial", "letterSpacing": "0" }, "body": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "'Open Sans', sans-serif", "fontWeight": "normal", "fontSize": "1rem", "textTransform": "initial", "letterSpacing": "0" }, "small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "'Open Sans', sans-serif", "fontWeight": "normal", "fontSize": "0.875rem", "textTransform": "initial", "letterSpacing": "0" }, "mini": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "'Open Sans', sans-serif", "fontWeight": "normal", "fontSize": "0.75rem", "textTransform": "initial", "letterSpacing": "0" }, "action": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "'Open Sans', sans-serif", "fontWeight": "500", "fontSize": "1rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "'Open Sans', sans-serif", "fontWeight": "500", "fontSize": "0.875rem", "textTransform": "uppercase", "letterSpacing": "0" }, "action--large": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontFamily": "'Open Sans', sans-serif", "fontWeight": "500", "fontSize": "1.25rem", "textTransform": "uppercase", diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css new file mode 100644 index 0000000..052bf42 --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,15 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); +/* Grid breakpoints */ +.buttonText--addToCartButton { + font-weight: 400; + font-size: 18px; + line-height: 25px; +} \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 70d25a3..86dd71f 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -7,6 +7,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); /* Grid breakpoints */ .container { padding: 0 40px; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 8ef88a4..0953621 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); /* Grid breakpoints */ .flexRow .flexRowContent--productPanel { margin: 16px 0 0; @@ -14,7 +15,17 @@ } .flexRow .flexRowContent--productPanel .stretchChildrenWidth:first-child { padding: 0; + justify-content: normal; } -.flexRow .flexRowContent--productPanel .stretchChildrenWidth:first-child .flexCol--productShowcase { - margin: 0 32px 0 0; +.flexRow .flexRowContent--productPanel .flexCol--productShowcase { + padding: 0 32px 0 0; +} +.flexRow .flexRowContent--quantityAndBuy { + margin: 0 0 16px; +} +.flexRow .flexRowContent--quantityAndBuy .stretchChildrenWidth { + width: auto !important; +} +.flexRow .flexRowContent--quantityAndBuy .stretchChildrenWidth:last-child { + flex: 1; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 5f5fe29..178adb0 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -6,10 +6,11 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); /* Grid breakpoints */ .product-identifier { position: absolute; - top: 65px; + top: 35px; right: 40px; font-weight: 400; font-size: 14px; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 34c4328..80ceb71 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -6,4 +6,36 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); +/* Grid breakpoints */ +.sellingPrice--hasListPrice { + font-weight: 700; + font-size: 25px; + line-height: 38px; +} + +.installments--sellingInfo { + font-size: 0; +} +.installments--sellingInfo .installmentsNumber, +.installments--sellingInfo .installmentValue { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.installments--sellingInfo .installmentsNumber::after { + content: " x "; + font-weight: 700; + font-size: 16px; + line-height: 22px; +} +.installments--sellingInfo .installmentValue::before, .installments--sellingInfo .installmentValue::after { + content: "de "; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} +.installments--sellingInfo .installmentValue::after { + content: " sem juros"; +} \ No newline at end of file diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/vtex.product-quantity.css similarity index 56% rename from styles/css/agenciamagma.store-theme.css rename to styles/css/vtex.product-quantity.css index 1dd7d62..cfb3097 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/vtex.product-quantity.css @@ -6,11 +6,8 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); /* Grid breakpoints */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: blue; +.quantitySelectorContainer { + margin: 0 10px 0 0; } \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..0bb4020 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,5 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); /* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.shelf.css b/styles/css/vtex.shelf.css index 919551d..dcf8e43 100644 --- a/styles/css/vtex.shelf.css +++ b/styles/css/vtex.shelf.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); /* Grid breakpoints */ .relatedProducts { padding: 0 40px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index a5d4ba8..f3227f9 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); /* Grid breakpoints */ .container { padding: 0; @@ -39,9 +40,69 @@ } .container .productNameContainer { text-align: right; + margin: 0 0 51px; +} +.container .productNameContainer .productBrand--quickview { font-weight: 300; font-size: 20px; line-height: 34px; color: #575757; - margin: 0 0 51px; +} +.container .skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.container .skuSelectorContainer .skuSelectorSubcontainer { + margin: 0; + margin: 16px 0 10px; +} +.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorTextContainer { + margin: 0 0 8px 0; +} +.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorTextContainer .skuSelectorName::before { + content: "OUTROS TAMANHOS:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList { + margin: 0; +} +.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem { + margin: 0 16px 0 0; +} +.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem .frameAround { + display: none; +} +.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #989898; +} +.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox { + border: 2px solid #000; +} +.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer { + margin: 0; +} +.container .skuSelectorContainer .skuSelectorSubcontainer:first-child { + margin: 0 0 16px; +} +.container .skuSelectorContainer .skuSelectorSubcontainer:first-child .skuSelectorTextContainer .skuSelectorName::before { + content: "OUTRAS CORES:"; +} +.container .skuSelectorContainer .skuSelectorSubcontainer:first-child .skuSelectorTextContainer .skuSelectorSelectorImageValue, +.container .skuSelectorContainer .skuSelectorSubcontainer:first-child .skuSelectorTextContainer .skuSelectorNameSeparator { + display: none; +} +.container .skuSelectorContainer .skuSelectorSubcontainer:first-child .skuSelectorOptionsList { + margin: 0; } \ No newline at end of file diff --git a/styles/css/vtex.styleguide.css b/styles/css/vtex.styleguide.css new file mode 100644 index 0000000..66cb6aa --- /dev/null +++ b/styles/css/vtex.styleguide.css @@ -0,0 +1,15 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); +/* Grid breakpoints */ +.hideDecorators { + border-left: none; + border-right: none; + color: #929292; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss new file mode 100644 index 0000000..f8de0dc --- /dev/null +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -0,0 +1,5 @@ +.buttonText--addToCartButton { + font-weight: 400; + font-size: 18px; + line-height: 25px; +} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index a77563f..0dc19c7 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -6,9 +6,22 @@ .stretchChildrenWidth:first-child { padding: 0; + justify-content: normal; + } - .flexCol--productShowcase { - margin: 0 32px 0 0; + .flexCol--productShowcase { + padding: 0 32px 0 0; + } + } + + .flexRowContent--quantityAndBuy { + margin: 0 0 16px; + + .stretchChildrenWidth { + width: auto !important; + + &:last-child { + flex: 1; } } } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 3559aea..408b4aa 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -1,6 +1,6 @@ .product-identifier { position: absolute; - top: 65px; + top: calc(27px + 8px); right: 40px; font-weight: 400; font-size: 14px; 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..d3266e6 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,38 @@ +.sellingPrice--hasListPrice { + font-weight: 700; + font-size: 25px; + line-height: 38px; +} + +.installments--sellingInfo { + font-size: 0; + + .installmentsNumber, + .installmentValue { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: $color-gray6; + } + + .installmentsNumber::after { + content: " x "; + font-weight: 700; + font-size: 16px; + line-height: 22px; + } + + .installmentValue { + &::before, + &::after { + content: "de "; + font-weight: 400; + font-size: 16px; + line-height: 22px; + } + + &::after { + content: " sem juros"; + } + } +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss new file mode 100644 index 0000000..8b1de10 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,3 @@ +.quantitySelectorContainer { + margin: 0 10px 0 0; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index eb99131..87cd9a1 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -36,10 +36,86 @@ .productNameContainer { text-align: right; - font-weight: 300; - font-size: 20px; - line-height: 34px; - color: $color-gray7; margin: 0 0 51px; + + .productBrand--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: $color-gray7; + } + } + + .skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + + .skuSelectorSubcontainer { + margin: 0; + margin: 16px 0 10px; + .skuSelectorTextContainer { + margin: 0 0 8px 0; + + .skuSelectorName { + font-size: 0; + + &::before { + content: "OUTROS TAMANHOS:"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray6; + } + } + } + + .skuSelectorOptionsList { + margin: 0; + + .skuSelectorItem { + margin: 0 16px 0 0; + + .frameAround { + display: none; + } + .skuSelectorInternalBox { + width: 40px; + height: 40px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid $color-gray9; + } + + &--selected .skuSelectorInternalBox { + border: 2px solid $color-black2; + } + } + } + + .skuSelectorNameContainer { + margin: 0; + } + + &:first-child { + margin: 0 0 16px; + + .skuSelectorTextContainer { + .skuSelectorName::before { + content: "OUTRAS CORES:"; + } + + .skuSelectorSelectorImageValue, + .skuSelectorNameSeparator { + display: none; + } + } + + .skuSelectorOptionsList { + margin: 0; + } + } + } } } diff --git a/styles/sass/pages/product/vtex.styleguide.scss b/styles/sass/pages/product/vtex.styleguide.scss new file mode 100644 index 0000000..14ac2c3 --- /dev/null +++ b/styles/sass/pages/product/vtex.styleguide.scss @@ -0,0 +1,5 @@ +.hideDecorators { + border-left: none; + border-right: none; + color: $color-gray6; +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 4930bad..62b737e 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,4 +1,7 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap"); + $color-black: #292929; +$color-black2: #000; $color-white: #fff; @@ -10,6 +13,7 @@ $color-gray5: #e5e5e5; $color-gray6: #929292; $color-gray7: #575757; $color-gray8: #9292927a; +$color-gray9: #989898; $color-blue: #4267b2;