diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index d0fd5b3..dcedc6d 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -4,6 +4,14 @@
padding: 0 40px;
}
+[class*="html--product-quantity"] {
+ width: 24.335%;
+}
+
+[class*="html--add-to-cart"] {
+ width: 100%;
+}
+
[class*="html--buy-button"] {
display: flex;
gap: 10px;
@@ -36,6 +44,10 @@
}
@media (min-width: 1921px) {
+ [class*="html--product-quantity"] {
+ width: 16.712%;
+ }
+
[class*="html--descriptionImage"] {
width: 47.392%;
}
diff --git a/react/components/PixPrice/styles.module.css b/react/components/PixPrice/styles.module.css
index 0ff58e3..5f5a6d1 100644
--- a/react/components/PixPrice/styles.module.css
+++ b/react/components/PixPrice/styles.module.css
@@ -7,6 +7,7 @@
.pixPrice-content {
display: flex;
gap: 26px;
+ width: 197px;
}
.pixPrice-img {
diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc
index 335c267..0caa02a 100644
--- a/store/blocks/minicart.jsonc
+++ b/store/blocks/minicart.jsonc
@@ -1,4 +1,12 @@
{
+ "html#add-to-cart": {
+ "props": {
+ "testId": "add-to-cart-button",
+ "blockClass": "add-to-cart"
+ },
+ "children": ["add-to-cart-button#addToCart"]
+ },
+
"add-to-cart-button#addToCart": {
"props": {
"blockClass": "addToCart",
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 00e7240..7e4edfa 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -94,6 +94,13 @@
}
},
"flex-layout.row#product-image": {
+ "children": ["html#product-images"]
+ },
+ "html#product-images": {
+ "props": {
+ "testId": "product-images",
+ "blockClass": "product-images"
+ },
"children": ["product-images"]
},
"product-images": {
@@ -120,17 +127,33 @@
"product-rating-summary",
"flex-layout.row#selling-price",
"product-installments",
- "PixPrice",
- "sku-selector",
+ "html#pix",
+ "html#sku-selector",
"product-gifts",
// "flex-layout.row#buy-button",
"html#buy-button",
// "availability-subscriber",
- "shipping-simulator",
+ "html#shipping-simulator",
"share#default"
]
},
+ "html#pix": {
+ "props": {
+ "blockClass": "pix",
+ "testId": "pix-price"
+ },
+ "children": ["PixPrice"]
+ },
+
+ "html#shipping-simulator": {
+ "props": {
+ "blockClass": "shipping-simulator",
+ "testId": "shipping-simulator"
+ },
+ "children": ["shipping-simulator"]
+ },
+
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
@@ -153,6 +176,14 @@
}
},
+ "html#sku-selector": {
+ "props": {
+ "blockClass": "sku-selector",
+ "testId": "sku-selector"
+ },
+ "children": ["sku-selector"]
+ },
+
"sku-selector": {
"props": {
"variationsSpacing": 3
@@ -163,7 +194,7 @@
"props": {
"blockClass": "buy-button"
},
- "children": ["product-quantity#addToCart", "add-to-cart-button#addToCart"]
+ "children": ["html#product-quantity", "html#add-to-cart"]
},
// "flex-layout.row#buy-button": {
@@ -175,12 +206,19 @@
// "children": ["product-quantity#addToCart", "add-to-cart-button#addToCart"]
// },
+ "html#product-quantity": {
+ "props": {
+ "testId": "product-quantity",
+ "blockClass": "product-quantity"
+ },
+ "children": ["product-quantity#addToCart"]
+ },
+
"product-quantity#addToCart": {
"props": {
"blockClass": "addToCartQuantity",
"showLabel": false,
- "size": "large",
- "width": "25%"
+ "size": "large"
}
},
@@ -243,15 +281,6 @@
"blockClass": "shelfTitleText"
}
},
-
- "product-summary.shelf#shelfProducts": {
- "children": [
- "product-summary-image",
- "product-summary-name",
- "product-price"
- ]
- },
-
// "product-summary-image": {
// "props": {
// "showBadge": false
@@ -267,6 +296,30 @@
"list-context.product-list#shelfProducts": {
"blocks": ["product-summary.shelf#shelfProducts"],
+ "children": ["html#slider-layout"]
+ },
+
+ "product-summary.shelf#shelfProducts": {
+ "children": ["html#product-summary"]
+ },
+
+ "html#product-summary": {
+ "props": {
+ "blockClass": "product-summary",
+ "testId": "vtex-product-summary"
+ },
+ "children": [
+ "product-summary-image",
+ "product-summary-name",
+ "product-price"
+ ]
+ },
+
+ "html#slider-layout": {
+ "props": {
+ "blockClass": "shelf",
+ "testId": "product-summary-list"
+ },
"children": ["slider-layout#demo-products"]
},
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
index 1e87e7e..1a1f06e 100644
--- a/styles/css/vtex.product-quantity.css
+++ b/styles/css/vtex.product-quantity.css
@@ -26,4 +26,8 @@
border: 1px solid #cccccc;
border-left: 0;
border-right: 0;
+}
+
+.quantitySelectorStepper--addToCartQuantity :global(.vtex-numeric-stepper__input) {
+ width: 100%;
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index 3a8da6f..eec33f5 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -9,7 +9,6 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27");
/* Grid breakpoints */
.imageWrapper {
- height: 100%;
width: 100%;
display: flex;
justify-content: center;
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
index 4086ed4..257cdb9 100644
--- a/styles/sass/pages/product/vtex.product-quantity.scss
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -20,3 +20,8 @@
border-left: 0;
border-right: 0;
}
+
+.quantitySelectorStepper--addToCartQuantity
+ :global(.vtex-numeric-stepper__input) {
+ width: 100%;
+}
diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss
index a98d8da..7f396f9 100644
--- a/styles/sass/pages/product/vtex.product-summary.scss
+++ b/styles/sass/pages/product/vtex.product-summary.scss
@@ -1,5 +1,4 @@
.imageWrapper {
- height: 100%;
width: 100%;
display: flex;
justify-content: center;