diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index da001bc..9d35e26 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -38,12 +38,12 @@ color: #929292; white-space: nowrap; } -.html--pdp-productMain{ +.html--pdp-productMain,.html--availability{ padding-right: 2.778%; padding-left: 2.778%; display: flex; } -.html--StackLayout,.html--pdp-InfoBuy{ +.html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{ width: 50%; } @@ -54,8 +54,8 @@ margin-bottom: 16px; margin-top: 16px; } -.html--pdp-productMain :global(.vtex-button){ - display: none; +.html--pdp-productMain :global(.vtex-button),.html--availability :global(.vtex-button){ + display: block; } .html--buy-button :global(.vtex-button){ display: block; @@ -75,7 +75,7 @@ max-width: 766px; width: 80.126%; } - .html--pdp-productMain{ + .html--pdp-productMain,.html--availability{ padding-right: 12.5393%; padding-left: 12.5393%; margin: 0; @@ -123,7 +123,7 @@ :global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){ margin-bottom: 20px; } -.html--pdp-productMain :global(.vtex-store-components-3-x-container){ +.html--pdp-productMain :global(.vtex-store-components-3-x-container),.html--availability :global(.vtex-store-components-3-x-container){ max-width: 100%; } :global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel){ @@ -160,11 +160,11 @@ padding-top: 12px !important; padding-bottom: 12px !important; } - .html--pdp-productMain{ + .html--pdp-productMain,.html--availability{ flex-direction: column; align-items: center; } - .html--StackLayout,.html--pdp-InfoBuy{ + .html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{ width: 89.23%; } .html--pdp-descriptions :global(.vtex-store-components-3-x-container){ diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index d2df9f1..db392cb 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -239,7 +239,7 @@ } ], "Then": "html#product-main", - "Else": "flex-layout.row#product-availability" + "Else": "html#product-availability" } }, @@ -428,28 +428,23 @@ } }, - "flex-layout.row#product-availability": { + "html#product-availability": { "props": { - "colGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7 + "blockClass": "availability" }, "children": [ "html#stack", - "flex-layout.col#right-col-availability" + "html#right-col-availability" ] }, - "flex-layout.col#right-col-availability": { + "html#right-col-availability": { "props": { - "preventVerticalStretch": true, - "rowGap": 0, "blockClass": "info-availability" }, "children": [ "flex-layout.row#product-name", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "sku-selector" ] }, "flex-layout.row#availability": {