diff --git a/react/Pix.tsx b/react/Pix.tsx
new file mode 100644
index 0000000..236fa9e
--- /dev/null
+++ b/react/Pix.tsx
@@ -0,0 +1,3 @@
+import Pix from "./components/Example/Pix";
+
+export default Pix;
diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx
new file mode 100644
index 0000000..360c9be
--- /dev/null
+++ b/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 Pixxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx;
+
+ // return ;
+};
+
+export default Pix;
diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css
new file mode 100644
index 0000000..35ed200
--- /dev/null
+++ b/react/components/Pix/styles.css
@@ -0,0 +1,5 @@
+.PixButton {
+ width: 40px;
+ height: 40px;
+ background: black;
+}
diff --git a/react/index.d.ts b/react/index.d.ts
new file mode 100644
index 0000000..1fb927a
--- /dev/null
+++ b/react/index.d.ts
@@ -0,0 +1,7 @@
+declare module "*.css" {
+ interface IClassNames {
+ [className: string]: string;
+ }
+ const classNames: IClassNames;
+ export = classNames;
+}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 0381446..150e5ba 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/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": {
diff --git a/store/interfaces.json b/store/interfaces.json
index c4b2ac4..c55366c 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -2,6 +2,9 @@
"example-component": {
"component": "Example"
},
+ "pix-component": {
+ "component": "Pix"
+ },
"html": {
"component": "html",
"composition": "children"
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index a7c5732..34c4328 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/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 */
\ No newline at end of file
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
new file mode 100644
index 0000000..dc2d5e3
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index f8fa6cb..2384943 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -9,4 +9,18 @@
/* Grid breakpoints */
.newsletter {
background: red;
+}
+
+.productImageTag {
+ width: 664px !important;
+ height: 664px !important;
+ max-height: none !important;
+}
+
+.productImagesThumb,
+.carouselThumbBorder,
+.figure,
+.thumbImg {
+ width: 90px !important;
+ height: 90px !important;
}
\ 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
new file mode 100644
index 0000000..33a0e3a
--- /dev/null
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -0,0 +1,4 @@
+// .flexRow {
+// width: auto;
+// padding: 0 40px;
+// }
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
new file mode 100644
index 0000000..3c7761d
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -0,0 +1,8 @@
+.quantitySelectorContainer {
+ width: max-content;
+
+ .quantitySelectorStepper,
+ .quantitySelectorTitle {
+ width: max-content;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 36d0f22..35b299a 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,3 +1,16 @@
-.newsletter{
- background: red;
-}
\ No newline at end of file
+.newsletter {
+ background: red;
+}
+.productImageTag {
+ width: 664px !important;
+ height: 664px !important;
+ max-height: none !important;
+}
+
+.productImagesThumb,
+.carouselThumbBorder,
+.figure,
+.thumbImg {
+ width: 90px !important;
+ height: 90px !important;
+}