diff --git a/react/components/Html/style.css b/react/components/Html/style.css
index 003005c..93d430b 100644
--- a/react/components/Html/style.css
+++ b/react/components/Html/style.css
@@ -1,11 +1,11 @@
-[class*='html'] {
+[class*='html--Quantity-Button'] {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
-[class*='html'] > [class*='button'] {
+[class*='html--Quantity-Button'] > [class*='button'] {
width: 100%;
height: 49px;
background: #000;
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 8d282b1..d5e78fa 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -58,7 +58,7 @@
"blockClass": "product"
},
"children": [
- "flex-layout.row#product-image",
+ "html#product-images",
"product-bookmark",
"product-specification-badges"
]
@@ -81,9 +81,13 @@
}
},
- "flex-layout.row#product-image": {
+ "html#product-images": {
+ "props": {
+ "testId": "product-images"
+ },
"children": ["product-images"]
},
+
"product-images": {
"props": {
"aspectRatio": {
@@ -118,6 +122,12 @@
]
},
+ "shipping-simulator": {
+ "props": {
+ "testId": "shipping-simulator"
+ }
+ },
+
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
@@ -145,6 +155,9 @@
}
},
"html#quantityAndButton": {
+ "props": {
+ "blockClass": "Quantity-Button"
+ },
"children": ["product-quantity", "add-to-cart-button"]
},
@@ -322,6 +335,14 @@
]
},
+ "product-summary-image": {
+ "props": {
+ "aspectRatio": {
+ "desktop": "1:1"
+ }
+ }
+ },
+
"slider-layout#demo-products": {
"props": {
"itemsPerPage": {
@@ -330,7 +351,7 @@
"phone": 2
},
"infinite": true,
- "showNavigationArrows": "desktopOnly",
+ "showNavigationArrows": "always",
"blockClass": "carousel"
}
}
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 2501f7c..ab2cb17 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -20,6 +20,9 @@
.flexColChild :global(.vtex-store-components-3-x-container) {
padding: 0 32px;
}
+.flexColChild .agenciamagma-store-theme-5-x-html--Quantity-Button {
+ display: flex;
+}
.flexRowContent {
margin-bottom: 0;
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 7216b8c..03890a2 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -8,19 +8,28 @@
/* Media Query M3 */
/* Grid breakpoints */
.sliderLayoutContainer {
- padding: 16px 40px 113px;
+ padding: 0 40px 32px;
+ margin-bottom: 32px;
+}
+.sliderLayoutContainer .sliderLeftArrow {
+ left: 36px;
+ margin: 0;
+ padding: 0;
+}
+.sliderLayoutContainer .sliderRightArrow {
+ right: 36px;
+ margin: 0;
+ padding: 0;
}
.sliderLayoutContainer .sliderTrackContainer {
- padding: 0 40px 36px;
+ margin: 0 auto;
+ width: 94%;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack {
- width: 450% !important;
gap: 16px;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) {
margin: 0;
- width: 100%;
- max-width: none !important;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) {
padding: 0;
@@ -28,22 +37,13 @@
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) {
display: flex;
order: 1;
- width: fit-content;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-store-components-3-x-discountInsideContainer) {
display: none;
}
-.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) {
- background-color: #ededed;
-}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) {
- width: fit-content;
- min-width: 314.4px;
- height: fit-content;
- min-height: 314.4px;
- max-height: 314.4px;
- border-radius: 0;
- background-color: #ededed;
+ width: 100%;
+ height: 100%;
}
.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) {
display: flex;
@@ -138,7 +138,6 @@
}
.sliderLayoutContainer .paginationDotsContainer {
align-items: center;
- bottom: 113px;
}
.sliderLayoutContainer .paginationDotsContainer .paginationDot {
width: 10px;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 6b60e6b..a0989dd 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -9,8 +9,12 @@
/* Media Query M3 */
/* Grid breakpoints */
.newsletter {
+ margin-top: 32px;
background: black;
}
+.newsletter .container {
+ padding: 32px 0 16px 0;
+}
.newsletter .container .form .label {
font-size: 0;
display: flex;
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 617257b..4fe41e9 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -15,6 +15,10 @@
:global(.vtex-store-components-3-x-container) {
padding: 0 32px;
}
+
+ .agenciamagma-store-theme-5-x-html--Quantity-Button {
+ display: flex;
+ }
}
.flexRowContent {
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index 36c3bb6..4efa614 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -1,42 +1,45 @@
.sliderLayoutContainer {
- padding: 16px 40px 113px;
+ padding: 0 40px 32px;
+ margin-bottom: 32px;
+
+ .sliderLeftArrow {
+ left: 36px;
+ margin: 0;
+ padding: 0;
+ }
+
+ .sliderRightArrow {
+ right: 36px;
+ margin: 0;
+ padding: 0;
+ }
.sliderTrackContainer {
- padding: 0 40px 36px;
+ margin: 0 auto;
+ width: 94%;
.sliderTrack {
- width: 450% !important;
gap: 16px;
.slide {
.slideChildrenContainer {
:global(.vtex-product-summary-2-x-container) {
margin: 0;
- width: 100%;
- max-width: none !important;
:global(.vtex-product-summary-2-x-element) {
padding: 0;
:global(.vtex-product-summary-2-x-imageContainer) {
display: flex;
order: 1;
- width: fit-content;
:global(.vtex-store-components-3-x-discountContainer) {
:global(.vtex-store-components-3-x-discountInsideContainer) {
display: none;
}
:global(.vtex-product-summary-2-x-imageContainer) {
- background-color: #ededed;
-
:global(.vtex-product-summary-2-x-imageNormal) {
- width: fit-content;
- min-width: 314.4px;
- height: fit-content;
- min-height: 314.4px;
- max-height: 314.4px;
- border-radius: 0;
- background-color: #ededed;
+ width: 100%;
+ height: 100%;
}
}
}
@@ -149,7 +152,7 @@
}
.paginationDotsContainer {
align-items: center;
- bottom: 113px;
+ // bottom: -32px;
.paginationDot {
width: 10px;
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 2d51094..c478808 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,6 +1,8 @@
.newsletter {
+ margin-top: 32px;
background: black;
.container {
+ padding: 32px 0 16px 0;
.form {
.label {
font-size: 0;
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index 558055b..a1f9c43 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -4,7 +4,6 @@
flex-direction: row;
justify-content: space-around;
padding: 0 40px;
- // column-gap: 197.5px;
&::after {
content: '';