From 6197e7fffb47572f7bc44e0fbad1ec522234a7b8 Mon Sep 17 00:00:00 2001 From: Rallenson Date: Thu, 9 Feb 2023 13:02:46 -0300 Subject: [PATCH] feat(pix):pix finalizado --- assets/pixrallenson.svg | 38 +++++++++++++++++++ react/components/Html/styles.css | 38 +++++++++++++++++++ react/components/ProductContext/Pix.tsx | 13 ++++--- store/blocks/pdp/product.jsonc | 3 ++ .../sass/pages/product/vtex.stack-layout.scss | 1 - 5 files changed, 87 insertions(+), 6 deletions(-) create mode 100644 assets/pixrallenson.svg diff --git a/assets/pixrallenson.svg b/assets/pixrallenson.svg new file mode 100644 index 0000000..1b5b16d --- /dev/null +++ b/assets/pixrallenson.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index da7be09..da001bc 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,5 +1,43 @@ /* [class*=html--pdp-breadcrumb]{ } */ +.html--pdp-pixPrice{ + width: 100%; + max-width: 28.972%; + height: 40px; + margin-top: 8px; + margin-bottom: 16px; +} +.html--pdp-pixPrice div{ + display: flex; + gap: 26px; + align-items: center; +} +.html--pdp-pixPrice div img{ + width: 66px; + height: 24px; +} +.html--pdp-pixPrice div span[datatype='span_wrapper']{ + display: flex; + flex-direction: column; +} +.html--pdp-pixPrice div span[datatype='span_wrapper'] span[class="pix_wrapper-price"]{ + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); + white-space: nowrap; +} +.html--pdp-pixPrice div span[datatype='span_wrapper'] span[class='pix_wrapper-Discount']{ + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; + white-space: nowrap; +} .html--pdp-productMain{ padding-right: 2.778%; padding-left: 2.778%; diff --git a/react/components/ProductContext/Pix.tsx b/react/components/ProductContext/Pix.tsx index f956ffb..4a09b0d 100644 --- a/react/components/ProductContext/Pix.tsx +++ b/react/components/ProductContext/Pix.tsx @@ -14,12 +14,15 @@ const Pix = () => { }); console.log('productContex',product) return ( - - - R$ {formattedNumber} +
+ Logo do Pix + + + R$ {formattedNumber} + + {desconto} % de desconto - {desconto}% de desconto - +
) } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index a56b3b5..d2df9f1 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -9,6 +9,9 @@ ] }, "html#Pix":{ + "props": { + "blockClass": "pdp-pixPrice" + }, "children": ["Pix"] }, "tab-layout#pdp": { diff --git a/styles/sass/pages/product/vtex.stack-layout.scss b/styles/sass/pages/product/vtex.stack-layout.scss index 8a33c87..b20f1f7 100644 --- a/styles/sass/pages/product/vtex.stack-layout.scss +++ b/styles/sass/pages/product/vtex.stack-layout.scss @@ -1,4 +1,3 @@ .stackItem{ display: block; } -