react/Pix.tsx

@@ -0,0 +1,3 @@
+import Pix from "./components/Example/Pix";
+
+export default Pix;

react/components/Pix/Pix.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+// import styles from "./styles.css";
+
+const Pix = () => {
+  const product = useProduct();
+  console.log(product);
+
+  return <span>Pixxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>;
+
+  // return <button className={styles.PixButton}>Pix</button>;
+};
+
+export default Pix;

react/components/Pix/styles.css

@@ -0,0 +1,5 @@
+.PixButton {
+  width: 40px;
+  height: 40px;
+  background: black;
+}

react/index.d.ts

@@ -0,0 +1,7 @@
+declare module "*.css" {
+  interface IClassNames {
+    [className: string]: string;
+  }
+  const classNames: IClassNames;
+  export = classNames;
+}

store/blocks/pdp/product.jsonc

@@ -78,7 +78,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      "width": "50%",
       "rowGap": 0
     }
   },
@@ -108,6 +108,7 @@
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
+      "html#pix-component",
       "product-separator",
       "product-identifier.product",
       "sku-selector",
@@ -120,6 +121,12 @@
       "share#default"
     ]
   },
+  "html#pix-component": {
+    "props": {
+      "testId": "pix-price"
+    },
+    "children": ["pix-component"]
+  },
 
   "flex-layout.row#product-name": {
     "props": {

store/interfaces.json

@@ -2,6 +2,9 @@
   "example-component": {
     "component": "Example"
   },
+  "pix-component": {
+    "component": "Pix"
+  },
   "html": {
     "component": "html",
     "composition": "children"

styles/css/vtex.flex-layout.css

@@ -1,98 +1,9 @@
-.flexRowContent--menu-link,
-.flexRowContent--main-header {
-  padding: 0 0.5rem;
-}
-
-@media screen and (min-width: 40em) {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 1rem;
-  }
-}
-
-@media screen and (min-width: 80rem) {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 0.25rem;
-  }
-}
-
-.flexRowContent--menu-link {
-  background-color: #03044e;
-  color: #fff;
-}
-
-.flexRowContent--main-header {
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--main-header-mobile {
-  align-items: center;
-  padding: 0.625rem 0.5rem;
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
-  color: #ffffff;
-  font-size: 14px;
-}
-
-.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
-  color: #727273;
-  font-size: 14px;
-}
-
-.flexRow--deals {
-  background-color: #0F3E99;
-  padding: 14px 0px;
-}
-
-.flexRow--deals .stretchChildrenWidth {
-  align-items: center;
-}
-
-.flexRow--deals .flexCol {
-  align-items: center;
-  margin-bottom: 5px;
-  padding-top: 5px;
-}
-
-.flexCol--filterCol {
-  max-width: 500px;
-  min-width: 230px;
-}
-
-.flexCol--productCountCol {
-  align-items: flex-start;
-}
-
-.flexCol--orderByCol {
-  align-items: flex-end;
-}
-
-.flexCol--orderByMobileCol {
-  width: 42%;
-}
-
-.flexCol--filterMobileCol {
-  width: 38%;
-}
-
-.flexRow--quickviewMainRow {
-  display: flex;
-  max-height: 100%;
-}
-
-.flexColChild--quickviewDetails:first-child {
-  overflow-y: auto;
-  height: 66% !important;
-  overflow-x: hidden;
-}
-
-.flexColChild--quickviewDetails:last-child {
-  height: 34% !important;
-}
-
-.flexRow--addToCartRow {
-  padding-bottom: 1rem;
-}
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */

styles/css/vtex.product-quantity.css

@@ -0,0 +1,16 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.quantitySelectorContainer {
+  width: max-content;
+}
+.quantitySelectorContainer .quantitySelectorStepper,
+.quantitySelectorContainer .quantitySelectorTitle {
+  width: max-content;
+}

styles/css/vtex.store-components.css

@@ -10,3 +10,17 @@
 .newsletter {
   background: red;
 }
+
+.productImageTag {
+  width: 664px !important;
+  height: 664px !important;
+  max-height: none !important;
+}
+
+.productImagesThumb,
+.carouselThumbBorder,
+.figure,
+.thumbImg {
+  width: 90px !important;
+  height: 90px !important;
+}

styles/sass/pages/product/vtex.flex-layout.scss

@@ -0,0 +1,4 @@
+// .flexRow {
+//   width: auto;
+//   padding: 0 40px;
+// }

styles/sass/pages/product/vtex.product-quantity.scss

@@ -0,0 +1,8 @@
+.quantitySelectorContainer {
+  width: max-content;
+
+  .quantitySelectorStepper,
+  .quantitySelectorTitle {
+    width: max-content;
+  }
+}

styles/sass/pages/product/vtex.store-components.scss

@@ -1,3 +1,16 @@
-.newsletter{
-    background: red;
+.newsletter {
+  background: red;
+}
+.productImageTag {
+  width: 664px !important;
+  height: 664px !important;
+  max-height: none !important;
+}
+
+.productImagesThumb,
+.carouselThumbBorder,
+.figure,
+.thumbImg {
+  width: 90px !important;
+  height: 90px !important;
 }