diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b116723..cc6c843 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -99,12 +99,11 @@ "product-images": { "props": { "aspectRatio": { - "desktop": "auto", - "phone": "16:9" + "desktop": "auto" + // "phone": "16:9" }, "showNavigationArrows": false, "showPaginationDots": false, - "maxHeight": 664, "thumbnailsOrientation": "horizontal", "thumbnailMaxHeight": 90 } @@ -206,10 +205,18 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "flex-layout.row#availability", + "html#availability", "sku-selector" ] }, + + "html#availability": { + "props": { + "blockClass": "availability" + }, + "children": ["flex-layout.row#availability"] + }, + "flex-layout.row#availability": { "props": { "blockClass": "message-availability" diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index e1a856f..13e2085 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -115,5 +115,15 @@ } .flexRowContent--product-container { - padding: 0 40px; + width: 94.973%; +} + +@media (max-width: 1024px) { + .flexRowContent--product-container .flexRowContent { + flex-direction: column; + } + .flexRowContent--product-container .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index ab33433..878c3fd 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -11,6 +11,7 @@ .product-identifier--productReference { display: flex; justify-content: end; + margin-bottom: 24px; } .product-identifier__value { @@ -18,4 +19,10 @@ font-weight: 400; font-size: 14px; line-height: 19px; +} + +@media (max-width: 1024px) { + .product-identifier--productReference { + justify-content: flex-start; + } } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 2b7ad81..cc09d05 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -35,7 +35,7 @@ } .sliderTrackContainer--shelf { - max-width: 1304px; + width: 95.883%; } .sliderLeftArrow--shelf { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3168fc3..ef2892a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -13,6 +13,11 @@ background: red; } +.container { + display: flex; + justify-content: center; +} + .productBrand--quickview { display: flex; justify-content: end; @@ -28,7 +33,10 @@ } .productImageTag--main { - max-width: 664px; + width: 100%; + max-height: max-content !important; + max-width: 100%; + object-fit: contain; } .carouselThumbBorder { @@ -85,6 +93,7 @@ .skuSelectorSubcontainer--tamanho { order: 1; + margin: 0; } .skuSelectorSubcontainer--tamanho .skuSelectorName { font-size: 0; @@ -332,7 +341,7 @@ .buttonContainer--pageProduct :global(.vtex-button) { border: none; - border-bottom: 4px solid #ffffff; + border-bottom: 4px solid #cccccc; border-radius: 0; background: transparent; font-style: normal; @@ -345,7 +354,7 @@ .inputGroup--pageProduct :global(.vtex-input-prefix__group) { border: none; border-radius: 0; - border-bottom: 1px solid #ffffff; + border-bottom: 1px solid #cccccc; } .inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) { @@ -389,8 +398,7 @@ grid-template-areas: "nm em" "sub sub"; justify-content: inherit; gap: 8px; - width: 100%; - max-width: 399px; + width: 59.024%; } .form .content .inputName { grid-area: nm; @@ -400,13 +408,13 @@ .form .content .inputName :global(.vtex-input-prefix__group) { border: 1px solid #868686; border-radius: 0; + padding-bottom: 5px; } .form .content .inputName :global(.vtex-styleguide-9-x-input)::placeholder { font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; - display: flex; color: #989898; } .form .content .inputEmail { @@ -417,13 +425,13 @@ .form .content .inputEmail :global(.vtex-input-prefix__group) { border: 1px solid #868686; border-radius: 0; + padding-bottom: 5px; } .form .content .inputEmail :global(.vtex-styleguide-9-x-input)::placeholder { font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; - display: flex; color: #989898; } .form .content .submit { @@ -437,6 +445,7 @@ background: #000000; border: none; border-radius: 0; + width: 100%; } .form .content .submit :global(.vtex-button__label) { font-size: 0; @@ -448,4 +457,19 @@ font-size: 18px; line-height: 25px; color: #fff; +} + +.productImagesGallerySlide { + width: 100% !important; +} + +@media (max-width: 1024px) { + .productBrand--quickview { + justify-content: flex-start; + margin-top: 32px; + } + .form .content { + width: 100%; + max-width: 100%; + } } \ 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 index 9db07c2..87b9233 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -107,5 +107,18 @@ } .flexRowContent--product-container { - padding: 0 40px; + width: 94.973%; +} + +@media (max-width: 1024px) { + .flexRowContent--product-container { + .flexRowContent { + flex-direction: column; + } + + .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } + } } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index a8d2879..b6b3265 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -1,6 +1,7 @@ .product-identifier--productReference { display: flex; justify-content: end; + margin-bottom: 24px; } .product-identifier__value { @@ -9,3 +10,9 @@ font-size: 14px; line-height: 19px; } + +@media (max-width: 1024px) { + .product-identifier--productReference { + justify-content: flex-start; + } +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 8812274..9019e7c 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -25,7 +25,7 @@ } .sliderTrackContainer--shelf { - max-width: 1304px; + width: 95.883%; } .sliderLeftArrow--shelf { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index adf25ab..fa9c49e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -2,10 +2,10 @@ background: red; } -// .container { -// display: flex; -// justify-content: center; -// } +.container { + display: flex; + justify-content: center; +} .productBrand--quickview { display: flex; @@ -22,7 +22,10 @@ } .productImageTag--main { - max-width: 664px; + width: 100%; + max-height: max-content !important; + max-width: 100%; + object-fit: contain; } .carouselThumbBorder { @@ -81,6 +84,7 @@ .skuSelectorSubcontainer--tamanho { order: 1; + margin: 0; .skuSelectorName { font-size: 0; @@ -332,7 +336,7 @@ .buttonContainer--pageProduct :global(.vtex-button) { border: none; - border-bottom: 4px solid $color-gray11; + border-bottom: 4px solid $color-gray6; border-radius: 0; background: transparent; font-style: normal; @@ -345,7 +349,7 @@ .inputGroup--pageProduct :global(.vtex-input-prefix__group) { border: none; border-radius: 0; - border-bottom: 1px solid $color-gray11; + border-bottom: 1px solid $color-gray6; } .inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) { @@ -395,8 +399,7 @@ "sub sub"; justify-content: inherit; gap: 8px; - width: 100%; - max-width: 399px; + width: 59.024%; .inputName { grid-area: nm; @@ -406,6 +409,7 @@ & :global(.vtex-input-prefix__group) { border: 1px solid $color-gray12; border-radius: 0; + padding-bottom: 5px; } & :global(.vtex-styleguide-9-x-input)::placeholder { @@ -413,7 +417,6 @@ font-weight: 400; font-size: 12px; line-height: 16px; - display: flex; color: $color-gray13; } } @@ -426,6 +429,7 @@ & :global(.vtex-input-prefix__group) { border: 1px solid $color-gray12; border-radius: 0; + padding-bottom: 5px; } & :global(.vtex-styleguide-9-x-input)::placeholder { @@ -433,7 +437,6 @@ font-weight: 400; font-size: 12px; line-height: 16px; - display: flex; color: $color-gray13; } } @@ -449,6 +452,7 @@ background: $color-black; border: none; border-radius: 0; + width: 100%; } & :global(.vtex-button__label) { @@ -466,3 +470,21 @@ } } } + +.productImagesGallerySlide { + width: 100% !important; +} + +@media (max-width: 1024px) { + .productBrand--quickview { + justify-content: flex-start; + margin-top: 32px; + } + + .form { + .content { + width: 100%; + max-width: 100%; + } + } +}