diff --git a/assets/pix-106 1.svg b/assets/pix-106 1.svg deleted file mode 100644 index 42e5799..0000000 --- a/assets/pix-106 1.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/pix.svg b/assets/pix-samuelcondack similarity index 100% rename from assets/pix.svg rename to assets/pix-samuelcondack diff --git a/react/imagempix.css b/react/imagempix.css new file mode 100644 index 0000000..c8231f1 --- /dev/null +++ b/react/imagempix.css @@ -0,0 +1,17 @@ +.pixwrapper{ + display: flex; + flex-direction: row; + align-items: center; +} +.priceandp{ + margin-left: 26px; +} +.priceandp>p{ + margin: 0; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/react/imagempix.tsx b/react/imagempix.tsx new file mode 100644 index 0000000..a4fc5cb --- /dev/null +++ b/react/imagempix.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import { useProduct } from 'vtex.product-context' +import { useCssHandles } from 'vtex.css-handles' +import "./imagempix.css" + +const piximgacademy = () => { + + const CSS_HANDLES = [ + "pixwrapper", + "priceandp" + ] + const handles = useCssHandles(CSS_HANDLES) + const product = useProduct() + const productPrice = product?.selectedItem?.sellers[0].commertialOffer.Price + const discount = Number(productPrice) * 0.1 + const pixprice = Number(productPrice) - discount + return ( + <> +
+
+ imagem pix +
+
+ R$ {pixprice.toFixed(2).toString().replace(".",",")} +

10 % de desconto

+
+
+ + ) +} +export default piximgacademy; diff --git a/react/parcelamento.tsx b/react/parcelamentoPage.tsx similarity index 100% rename from react/parcelamento.tsx rename to react/parcelamentoPage.tsx diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6456dbe..33d5cfb 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -10,6 +10,11 @@ "product-questions-and-answers" ] }, + "Pix-academy": { + "props": { + "blockClass": "pix-wrapper" + } + }, "tab-layout#desc": { "children": [ "tab-list#home", @@ -235,6 +240,7 @@ "product-rating-summary", "flex-layout.row#selling-price", "Parcelamento", + "Pix-academy", "sku-selector", "product-separator", "product-quantity", diff --git a/store/interfaces.json b/store/interfaces.json index 2f56585..2c40f7f 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -7,6 +7,9 @@ "composition": "children" }, "Parcelamento": { - "component": "parcelamento" + "component": "parcelamentoPage" + }, + "Pix-academy": { + "component": "imagempix" } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 55cfa5e..7906aba 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -27,4 +27,13 @@ font-weight: 400; font-size: 14px; line-height: 19px; +} + +.pixWrapper { + display: flex; + flex-direction: row; +} + +.pix-wrapper { + display: none; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 9ed635d..713be36 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -37,5 +37,5 @@ .skuSelectorContainer { display: flex; - flex-direction: column; + flex-direction: column-reverse; } \ 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 b6b0a20..1f299f3 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -17,3 +17,10 @@ font-size: 14px; line-height: 19px; } +.pixWrapper{ + display: flex; + flex-direction: row; + } +.pix-wrapper{ + display: none; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index a140b3d..5b51ed8 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -26,6 +26,5 @@ } .skuSelectorContainer{ display: flex; - flex-direction: column; - + flex-direction: column-reverse; }