diff --git a/react/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..4811319 --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1 @@ +export { default } from "./components/Pix/Pix"; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 82197e1..5c1600f 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -105,7 +105,7 @@ [class*="skuSelectorNameContainer"] [class*="skuSelectorTextContainer"] [class*="skuSelectorName"]::after { - content: "OUTROS TAMANHOS:"; + content: "OUTRAS CORES:"; font-weight: 400; font-size: 14px; line-height: 19px; @@ -116,9 +116,33 @@ [class*="skuSelectorNameContainer"] [class*="skuSelectorTextContainer "] [class*="skuSelectorName"]::after { - content: "OUTRAS CORES:"; + content: "OUTROS TAMANHOS:"; font-weight: 400; font-size: 14px; line-height: 19px; text-transform: uppercase; } + +[class*="wrapper--shelfTitle"] { + display: flex; + justify-content: center; + width: 100%; +} + +[class*="shelfTitle"] [class*="t-heading-4"] { + font-weight: 400; + text-align: center; + font-style: normal; + font-size: 24px; + line-height: 38px; + color: #575757 !important; + margin: 16px 0 32px 0; +} + +[class*="paginationDotsContainer"] { + bottom: -32px; +} + +/* [class*="headingLevel4--shelfTitle"] [class*="c-on-base"] { + color: #575757 !important; +} */ diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx new file mode 100644 index 0000000..f072fe5 --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,45 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; +import "../Pix/styles.css"; + +export default function Pix({ discount = 10 }: { discount: number }) { + const productPriceDiscount = useProduct(); + const productPrice = + productPriceDiscount?.product?.priceRange?.sellingPrice?.lowPrice; + const priceFinal = Math.abs( + Number(productPrice) * (discount / 100) - Number(productPrice) + ).toFixed(2); + + console.log(productPriceDiscount?.product?.priceRange?.sellingPrice); + + return ( +
+
+ Pix +
+ +
+ + R$ {priceFinal.replace(".", ",")} + + + {discount}% de desconto + +
+
+ ); +} + +Pix.schema = { + title: "Pix discount", + type: "object", + properties: { + discount: { + type: "number", + }, + }, +}; diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css new file mode 100644 index 0000000..44d4a26 --- /dev/null +++ b/react/components/Pix/styles.css @@ -0,0 +1,43 @@ +[class*="__container"] { + width: 100%; + display: flex; + margin-top: 8px; + margin-bottom: 16px; +} + +[class*="__figure"] { + display: flex; + align-self: center; + margin: 0; + margin-right: 26.21px; +} + +[class*="__imgPix"] { + display: block; + + width: 100%; + max-width: fit-content; + /* width: auto; */ + height: 24px; +} + +[class*="__pricePix"] { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: center; +} + +[class*="__priceNew"] { + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} + +[class*="__priceDiscount"] { + 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 a672a4b..4be5c77 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -2,16 +2,33 @@ "store.product": { "children": [ "html#breadcrumb", + // "html#imagens", + // "html#product-name", + // "html#codigo", + // "html#selling-price", + // "html#product-installments", + // "html#pixzap", + // "html#sku-selector", + // "html#product-quantity", + // "html#add-to-cart-button", + // "html#shipping-simulator", + // "html#product-description", + // "html#slider", + // "html#prateleira", + "condition-layout.product#availability", "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", + "tab-layout#pdp-descriptions", + "flex-layout.row#shelf-title", "flex-layout.row#shelf-product-page", // "html#product-summary", // "shelf.relatedProducts", "product-questions-and-answers" ] }, + "html#breadcrumb": { "props": { "tag": "section", @@ -20,6 +37,92 @@ }, "children": ["breadcrumb"] }, + "html#imagens": { + "props": { + "testId": "product-images" + }, + "children": ["product-images"] + }, + "html#product-name": { + "props": { + "testId": "product-name" + }, + "children": ["vtex.store-components:product-name"] + }, + "html#codigo": { + "props": { + "testid": "product-code", + "blockClass": "codigo" + }, + "children": ["product-identifier.product"] + }, + "html#selling-price": { + "props": { + "testid": "product-price" + }, + "children": ["product-selling-price"] + }, + "html#product-installments": { + "props": { + "testid": "product-installments" + }, + "children": ["product-installments"] + }, + "html#pixzap": { + "props": { + "testid": "pix-price", + "blockClass": "pix" + }, + "children": ["pix-component"] + }, + "html#sku-selector": { + "props": { + "testid": "sku-selector" + }, + "children": ["sku-selector"] + }, + "html#product-quantity": { + "props": { + "testid": "product-quantity" + }, + "children": ["product-quantity"] + }, + "html#add-to-cart-button": { + "props": { + "testid": "add-to-cart-button" + }, + "children": ["add-to-cart-button"] + }, + "html#shipping-simulator": { + "props": { + "testid": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + "html#product-description": { + "props": { + "testid": "product-description" + }, + "children": ["tab-layout"] + }, + "html#slider": { + "props": { + "testid": "product-summary-list" + }, + "children": ["slider-layout#prateleira"] + }, + "html#prateleira": { + "props": { + "testid": "vtex-product-summary" + }, + "children": [ + "product-summary-name", + "product-summary-image#shelf", + "product-list-price#summary", + "product-selling-price#summary" + ] + }, + "flex-layout.row#specifications-title": { "children": ["rich-text#specifications"] }, @@ -28,6 +131,16 @@ "text": "##### Product Specifications" } }, + + "flex-layout.row#shelf-title": { + "children": ["rich-text#shelfTitle"] + }, + "rich-text#shelfTitle": { + "props": { + "text": "#### Você também pode gostar:", + "blockClass": "shelfTitle" + } + }, "flex-layout.row#description": { "props": { "marginBottom": 7 @@ -92,8 +205,9 @@ "showPaginationDots": false, "showNavigationArrows": false, "aspectRatio": { - "desktop": "auto", - "phone": "16:9" + "desktop": "1:1", + "phone": "1:1" + // "phone": "16:9" }, "maxHeight": "unset", "thumbnailsOrientation": "horizontal", @@ -112,15 +226,16 @@ // "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - "product-separator", + "pix-component", + // "product-separator", "sku-selector", "product-quantity", "product-assembly-options", "product-gifts", "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" + // "share#default" ] }, @@ -189,13 +304,93 @@ } } }, + + // "tab-layout#home": + // "children": [ + // "tab-list#home", + // "tab-content#home" + // ], + // "props": { + // "blockClass": "home", + // "defaultActiveTabId": "home1" + // } + // }, + + "flex-layout.row#product-image-description": { + "children": ["product-images#description-image"] + }, + + "flex-layout.row#product-image-description2": { + "children": ["product-images#description-image"] + }, + + "product-images#description-image": { + "props": { + "aspectRatio": { + "desktop": "1:1", + "phone": "1:1" + }, + "thumbnailVisibility": "hidden", + "showNavigationArrows": false, + "showPaginationDots": false + } + }, + + "tab-layout#pdp-descriptions": { + "props": { + "blockClass": "pdp-descriptions", + "defaultActiveTabId": "pdp-descriptions1" + }, + "children": ["tab-list#pdp-descriptions", "tab-content#pdp-descripitions"] + }, + + "tab-list#pdp-descriptions": { + "children": [ + "tab-list.item#pdp-descripitions1", + "tab-list.item#pdp-descripitions2" + ] + }, + "tab-list.item#pdp-descripitions1": { + "props": { + "tabId": "pdp-descriptions1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#pdp-descripitions2": { + "props": { + "tabId": "pdp-descriptions2", + "label": "Descrição" + } + }, + + "tab-content#pdp-descripitions": { + "children": [ + "tab-content.item#pdp-descriptions1", + "tab-content.item#pdp-descripitions2" + ] + }, + + "tab-content.item#pdp-descriptions1": { + "children": ["flex-layout.row#product-image-description"], + "props": { + "tabId": "pdp-descriptions1" + } + }, + "tab-content.item#pdp-descripitions2": { + "children": ["flex-layout.row#product-image-description2"], + "props": { + "tabId": "pdp-descripitions2" + } + }, + "flex-layout.row#shelf-product-page": { "children": ["list-context.product-list#product-shelf"] }, "list-context.product-list#product-shelf": { "blocks": ["product-summary.shelf"], - "children": ["slider-layout#text-test"] + "children": ["slider-layout#prateleira"] }, "product-summary.shelf#teste": { @@ -207,15 +402,17 @@ }, "children": [ "product-summary-name", - "product-summary-description", - "product-summary-image", - "product-summary-price", - "product-summary-sku-selector", - "product-summary-buy-button" + "product-summary-image#shelf", + "product-list-price#summary", + "product-selling-price#summary" + // "product-summary-price", + // "product-summary-description", + // "product-summary-sku-selector", + // "product-summary-buy-button" ] }, - "slider-layout#text-test": { + "slider-layout#prateleira": { "props": { "itemsPerPage": { "desktop": 4, diff --git a/store/blocks/product-summary/product-summary-list.jsonc b/store/blocks/product-summary/product-summary-list.jsonc index cfc3226..971cd70 100644 --- a/store/blocks/product-summary/product-summary-list.jsonc +++ b/store/blocks/product-summary/product-summary-list.jsonc @@ -9,14 +9,10 @@ ] }, "responsive-layout.desktop#productSummaryList": { - "children": [ - "flex-layout.row#summaryListDesktop" - ] + "children": ["flex-layout.row#summaryListDesktop"] }, "responsive-layout.mobile#productSummaryList": { - "children": [ - "flex-layout.row#summaryListMobile" - ] + "children": ["flex-layout.row#summaryListMobile"] }, "product-price-savings#summaryPercentage": { "props": { @@ -36,7 +32,7 @@ ] }, "flex-layout.row#summaryListDesktop": { - "props":{ + "props": { "fullWidth": true, "colSizing": "auto", "blockClass": "summaryListDesktop" @@ -69,9 +65,7 @@ ] }, "flex-layout.row#productSpecifications": { - "children": [ - "product-specification-group#summary" - ] + "children": ["product-specification-group#summary"] }, "product-summary-name#summaryListDesktop": { "props": { @@ -100,18 +94,13 @@ "colSizing": "auto", "colGap": 5 }, - "children": [ - "add-to-cart-button", - "flex-layout.row#buyNowButton" - ] + "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"] }, "flex-layout.row#buyNowButton": { "props": { "blockClass": "buyNowButton" }, - "children": [ - "add-to-cart-button#buyNow" - ] + "children": ["add-to-cart-button#buyNow"] }, "add-to-cart-button#buyNow": { @@ -123,10 +112,7 @@ } }, "flex-layout.col#priceSummaryListDesktop": { - "children": [ - "product-selling-price#summary", - "product-list-price#summary" - ] + "children": ["product-selling-price#summary", "product-list-price#summary"] }, "stack-layout#summaryListDesktop": { "children": [ @@ -144,7 +130,7 @@ } }, "flex-layout.row#summaryListMobile": { - "props":{ + "props": { "preserveLayoutOnMobile": true, "colSizing": "auto", "blockClass": "summaryListMobile", diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..2224337 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -1,9 +1,6 @@ { "modal-trigger#quickview": { - "children": [ - "icon-expand", - "modal-layout#quickview" - ], + "children": ["icon-expand", "modal-layout#quickview"], "props": { "blockClass": "quickview" } @@ -63,9 +60,7 @@ }, "flex-layout.col#quickview-product-quantity": { - "children": [ - "product-summary-quantity#quickview" - ] + "children": ["product-summary-quantity#quickview"] }, "product-summary-quantity#quickview": { "props": { @@ -74,18 +69,14 @@ } }, "flex-layout.col#quickview-add-to-card-button": { - "children": [ - "add-to-cart-button" - ], + "children": ["add-to-cart-button"], "props": { "width": "grow" } }, "flex-layout.row#quickview-actions-2": { - "children": [ - "link.product#button-pdp" - ] + "children": ["link.product#button-pdp"] }, "link.product#button-pdp": { "props": { @@ -107,15 +98,10 @@ } }, "flex-layout.col#quickview-images": { - "children": [ - "product-images#quickview" - ] + "children": ["product-images#quickview"] }, "flex-layout.col#quickview-product-details": { - "children": [ - "modal-content#quickview", - "modal-actions#quickview" - ], + "children": ["modal-content#quickview", "modal-actions#quickview"], "props": { "preventVerticalStretch": true, "blockClass": "quickviewDetails" @@ -134,7 +120,7 @@ "blockClass": "quickview" } }, - "product-images#quickview" : { + "product-images#quickview": { "props": { "blockClass": "quickview", "showNavigationArrows": true diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..7a7dfed 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "pix-component": { + "component": "Pix" } }