diff --git a/react/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..d44578a --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1,3 @@ +// import { Pix } from "./components/Pix/Pix"; + +// export default Pix; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index b62b66c..47285e6 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,9 +1,7 @@ -* -{ - margin:0; +/* * { + margin: 0; } - [class*="productNameContainer--quickview"] { color: gray; text-align: right; @@ -24,3 +22,75 @@ background-color: black; color: white; } + +[class*="shippingContainer"] button div { + color: white; + font-size: 0px; +} + +[class*="shippingContainer"] button div::before { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-size: 14px; + font-weight: 600; + line-height: 19px; + letter-spacing: 0em; +} + +[class*="flexRowContent--btn-product"] button { + background-color: black; + border-color: black; + max-width: 526px; + width: 100%; + height: 49px; + display: flex; + border-radius: 0px; +} + +[class*="flexRowContent--btn-product"] button span { + font-size: 0px; +} + +[class*="flexRowContent--btn-product"] button span::after { + content: "ADICIONAR À SACOLA"; + font-size: 14px; + font-family: "Open Sans", sans-serif; +} + +[class*="quantitySelectorStepper"] button { + height: 49px; + background: white; +} + +[class*="quantitySelectorStepper"] input { + height: 49px; + border-right: 0px; + border-left: 0px; +} + +[class*="quantitySelectorStepper"] input { + height: 49px; + border: 1px solid #cccccc; + border-right: 0px; + border-left: 0px; +} + +[class*="quantitySelectorStepper"] button:last-child { + border: 1px solid #cccccc; + border-left: 0; + width: 3em; + transition: opacity 150ms; + border-radius: 0; +} + +button[class*="vtex-numeric-stepperminus-button numeric-stepperminus-button br2 pa0 br-0 flex items-center justify-center ba b--muted-4 bw1 h-small f6 bg-muted-5 c-disabled o-100 "] { + border: 1px solid #cccccc; + border-right: 0; + width: 3em; + transition: opacity 150ms; + border-radius: 0; +} + +[class*="quantitySelectorTitle"] { + display: none; +} */ diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx new file mode 100644 index 0000000..e9911e4 --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,31 @@ +// import React, { FC } from "react"; +// import { useProduct } from "vtex.product-context"; +// import pix from "./pix.svg"; + +// const ProductValue = () => { +// const productValue = useProduct(); +// export const PixProduct: FC = () => { +// const productContextValue = useProduct(); +// const vavazinha = +// productContextValue?.product?.priceRange?.sellingPrice?.highPrice; + +// console.log('productValue', productValue); + +// // return <>oi; +// return ( +// <> +//
+// Pix +// {`R$ ${(vavazinha! - vavazinha! * 0.1) +// .toFixed(2) +// .replace(".", ",")}` +// } +// +// 10% de desconto +// +//
+// +// ); +// }; + +// export default ProductValue; diff --git a/react/components/Pix/pix.svg b/react/components/Pix/pix.svg new file mode 100644 index 0000000..3f54b74 --- /dev/null +++ b/react/components/Pix/pix.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index aa8e6d4..c9d040e 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -103,6 +103,7 @@ "flex-layout.row#product-name", "product-identifier.product", "product-rating-summary", + // "use-product", "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", @@ -135,7 +136,8 @@ "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "btn-product" }, "children": ["add-to-cart-button"] }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..34c4328 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,9 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; -} - -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; - } -} - -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; - } -} - -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; -} - -.flexRowContent--main-header { - background-color: #f0f0f0; -} - -.flexRowContent--main-header-mobile { - align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; -} - -.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { - color: #ffffff; - font-size: 14px; -} - -.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { - color: #727273; - font-size: 14px; -} - -.flexRow--deals { - background-color: #0F3E99; - padding: 14px 0px; -} - -.flexRow--deals .stretchChildrenWidth { - align-items: center; -} - -.flexRow--deals .flexCol { - align-items: center; - margin-bottom: 5px; - padding-top: 5px; -} - -.flexCol--filterCol { - max-width: 500px; - min-width: 230px; -} - -.flexCol--productCountCol { - align-items: flex-start; -} - -.flexCol--orderByCol { - align-items: flex-end; -} - -.flexCol--orderByMobileCol { - width: 42%; -} - -.flexCol--filterMobileCol { - width: 38%; -} - -.flexRow--quickviewMainRow { - display: flex; - max-height: 100%; -} - -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; -} - -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-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 */ \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 87de235..34c4328 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,18 +1,9 @@ -.product-identifier--productReference { - margin-bottom: 1rem; -} - -.product-identifier--productReference { - margin-bottom: 1rem; - display: flex; - justify-content: right; - color: gray; -} - -.product-identifier__label { - display: none; -} - -.product-identifier__separator { - display: none; -} +/* +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.product-price.css b/styles/css/vtex.product-price.css index 36f2850..fa8d19a 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,7 +1,17 @@ +/* +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 */ .listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; + display: none; +} + +.savings { display: none; } @@ -20,44 +30,37 @@ margin-bottom: 1rem; } -.savings { - font-weight: 500; - color: #79B03A; - display:none; -} - .sellingPriceValue--summary { font-size: 1.25rem; font-weight: 600; - color: #2E2E2E; + color: #2e2e2e; } .savings--summary { - background: #8BC34A; + 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; + color: #ffffff; } .savings-discount--summary { font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; padding-left: 0.5rem; padding-right: 0.5rem; } .listPrice--summary { margin-bottom: 0.25rem; - font-size: .875rem; + font-size: 0.875rem; } .installments--summary { @@ -76,6 +79,6 @@ font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; padding: 0.25rem 0.5rem 0.25rem 0.5rem; -} +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..32d6e49 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 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..4145dd4 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,4 +9,14 @@ /* Grid breakpoints */ .newsletter { background: red; +} + +.productNameContainer { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; } \ No newline at end of file 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..8b13789 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1 @@ + 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..18551f6 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,76 @@ +.listPrice { + display: none; +} + +.savings { + display: none; +} + +.sellingPrice { + color: #3f3f40; + font-size: 1.25rem; +} + +.sellingPriceValue { + font-size: 2.25rem; + font-weight: 700; +} + +.installments { + color: #727273; + margin-bottom: 1rem; +} + +.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; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..a9ea5b8 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..34d51e4 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,16 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.newsletter { + background: red; +} + + +.productNameContainer { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} + +