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 (
+
+
+
+
+
+ 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"
}
}