react/Pix.tsx

@@ -0,0 +1 @@
+export { default } from "./components/Pix/Pix";

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;
+} */

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 (
+    <div className={"PixBlock__container"}>
+      <figure className={"PixBlock__figure"}>
+        <img
+          className={"PixBlock__imgPix"}
+          src="https://agenciamagma.vteximg.com.br/arquivos/pix-manuelaluana.png"
+          alt="Pix"
+        />
+      </figure>
+
+      <div className={"PixBlock__pricePix"}>
+        <span className={"PixBlock__priceNew"}>
+          R$ {priceFinal.replace(".", ",")}
+        </span>
+        <span className={"PixBlock__priceDiscount"}>
+          {discount}% de desconto
+        </span>
+      </div>
+    </div>
+  );
+}
+
+Pix.schema = {
+  title: "Pix discount",
+  type: "object",
+  properties: {
+    discount: {
+      type: "number",
+    },
+  },
+};

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;
+}

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",
+      // "flex-layout.row#specifications-title",
-      "product-specification-group#table",
+      // "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",
+        "desktop": "1:1",
-        "phone": "16:9"
+        "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",
+      "shipping-simulator"
-      "share#default"
+      // "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#shelf",
-      "product-summary-image",
+      "product-list-price#summary",
-      "product-summary-price",
+      "product-selling-price#summary"
-      "product-summary-sku-selector",
+      // "product-summary-price",
-      "product-summary-buy-button"
+      // "product-summary-description",
+      // "product-summary-sku-selector",
+      // "product-summary-buy-button"
     ]
   },
 
-  "slider-layout#text-test": {
+  "slider-layout#prateleira": {
     "props": {
       "itemsPerPage": {
         "desktop": 4,

store/blocks/product-summary/product-summary-list.jsonc

@@ -9,14 +9,10 @@
     ]
   },
   "responsive-layout.desktop#productSummaryList": {
-    "children": [
+    "children": ["flex-layout.row#summaryListDesktop"]
-      "flex-layout.row#summaryListDesktop"
-    ]
   },
   "responsive-layout.mobile#productSummaryList": {
-    "children": [
+    "children": ["flex-layout.row#summaryListMobile"]
-      "flex-layout.row#summaryListMobile"
-    ]
   },
   "product-price-savings#summaryPercentage": {
     "props": {
@@ -69,9 +65,7 @@
     ]
   },
   "flex-layout.row#productSpecifications": {
-    "children": [
+    "children": ["product-specification-group#summary"]
-      "product-specification-group#summary"
-    ]
   },
   "product-summary-name#summaryListDesktop": {
     "props": {
@@ -100,18 +94,13 @@
       "colSizing": "auto",
       "colGap": 5
     },
-    "children": [
+    "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"]
-      "add-to-cart-button",
-      "flex-layout.row#buyNowButton"
-    ]
   },
   "flex-layout.row#buyNowButton": {
     "props": {
       "blockClass": "buyNowButton"
     },
-    "children": [
+    "children": ["add-to-cart-button#buyNow"]
-      "add-to-cart-button#buyNow"
-    ]
   },
 
   "add-to-cart-button#buyNow": {
@@ -123,10 +112,7 @@
     }
   },
   "flex-layout.col#priceSummaryListDesktop": {
-    "children": [
+    "children": ["product-selling-price#summary", "product-list-price#summary"]
-      "product-selling-price#summary",
-      "product-list-price#summary"
-    ]
   },
   "stack-layout#summaryListDesktop": {
     "children": [

store/blocks/product-summary/quickview.json

@@ -1,9 +1,6 @@
 {
   "modal-trigger#quickview": {
-    "children": [
+    "children": ["icon-expand", "modal-layout#quickview"],
-      "icon-expand",
-      "modal-layout#quickview"
-    ],
     "props": {
       "blockClass": "quickview"
     }
@@ -63,9 +60,7 @@
   },
 
   "flex-layout.col#quickview-product-quantity": {
-    "children": [
+    "children": ["product-summary-quantity#quickview"]
-      "product-summary-quantity#quickview"
-    ]
   },
   "product-summary-quantity#quickview": {
     "props": {
@@ -74,18 +69,14 @@
     }
   },
   "flex-layout.col#quickview-add-to-card-button": {
-    "children": [
+    "children": ["add-to-cart-button"],
-      "add-to-cart-button"
-    ],
     "props": {
       "width": "grow"
     }
   },
 
   "flex-layout.row#quickview-actions-2": {
-    "children": [
+    "children": ["link.product#button-pdp"]
-      "link.product#button-pdp"
-    ]
   },
   "link.product#button-pdp": {
     "props": {
@@ -107,15 +98,10 @@
     }
   },
   "flex-layout.col#quickview-images": {
-    "children": [
+    "children": ["product-images#quickview"]
-      "product-images#quickview"
-    ]
   },
   "flex-layout.col#quickview-product-details": {
-    "children": [
+    "children": ["modal-content#quickview", "modal-actions#quickview"],
-      "modal-content#quickview",
-      "modal-actions#quickview"
-    ],
     "props": {
       "preventVerticalStretch": true,
       "blockClass": "quickviewDetails"

store/interfaces.json

@@ -5,5 +5,8 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+  "pix-component": {
+    "component": "Pix"
   }
 }