diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 7879718..4131ae0 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -82,9 +82,11 @@ "product-images": { "props": { "aspectRatio": { - "desktop": "auto", + "desktop": "1:1", "phone": "auto" }, + "maxHeight": 664, + "showPaginationDots": false, "displayThumbnailsArrows": false, "thumbnailsOrientation": "horizontal", @@ -180,8 +182,8 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "flex-layout.row#availability", - "sku-selector" + "sku-selector", + "flex-layout.row#availability" ] }, "flex-layout.row#availability": { diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..5cb4698 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -29,8 +29,8 @@ "product-summary-image#shelf": { "props": { "showBadge": false, - "aspectRatio": "1:1", - "maxHeight": 300 + "aspectRatio": "1:1" + // "maxHeight": 300 } }, @@ -81,9 +81,7 @@ }, "product-price-savings#summary": { "props": { - "markers": [ - "discount" - ], + "markers": ["discount"], "blockClass": "summary" } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 0693381..3aa744c 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -7,15 +7,54 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.flexRowContent--product-main { + padding: 0; + margin: 0; + border: 1px solid red; +} + +.flexRow--indisponivel :global(.vtex-store-components-3-x-container) { + padding: 0; +} +.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel { + padding: 0; + margin: 0; + gap: 32px; +} +@media (max-width: 1024px) { + .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel { + padding: 0 40px; + flex-direction: column; + } +} +.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + min-width: 296px; + max-width: 664px; + padding: 0; + border-radius: 0; +} +@media (max-width: 1024px) { + .flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + height: 402px; + } +} +.flexRow--indisponivel :global(.vtex-store-components-3-x-container) .flexRowContent--indisponivel :global(.vtex-flex-layout-0-x-stretchChildrenWidth) .flexColChild--info-availability :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + justify-content: initial; +} + .flexRow--description :global(.vtex-store-components17-x-container) { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 94.4444444444% !important; - background-color: red; +} +.flexRow--description :global(.vtex-store-components-3-x-container) { + padding-left: 0 !important; + padding-right: 0 !important; } .flexRowContent--description { + width: auto; gap: 32px; } @media (min-width: 1920px) { diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index e67f4b4..ce11133 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -65,7 +65,7 @@ visibility: hidden; } .sliderLeftArrow--m3-carousel-products::after { - position: relative !important; + position: relative; visibility: visible; content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-left.svg"); width: 12px; @@ -83,7 +83,7 @@ } @media (max-width: 1024px) { .sliderLeftArrow--m3-carousel-products::after { - left: -8px !important; + left: -8px; bottom: 3px; } } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 51e6dd1..553fd4a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -114,6 +115,167 @@ border-bottom: 3px solid #BFBFBF; } +.subscriberContainer { + max-width: 399px; +} +@media (max-width: 1024px) { + .subscriberContainer { + max-width: 765px; + } +} +.subscriberContainer :global(.vtex-store-components-3-x-title) { + font-size: 0; + margin: 0; +} +.subscriberContainer :global(.vtex-store-components-3-x-title)::after { + content: "Produto indisponível"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + /* or 136% */ + display: flex; + align-items: center; + color: #868686; +} +.subscriberContainer :global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; +} +.subscriberContainer :global(.vtex-store-components-3-x-subscribeLabel)::after { + content: "Deseja saber quando estiver disponível?"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + /* or 136% */ + display: flex; + align-items: center; + color: #868686; +} +.subscriberContainer .form { + width: 100%; + margin: 0; + padding: 0; +} +.subscriberContainer .form .content { + display: grid; + grid-template-areas: "nome email" "submit submit"; + justify-content: inherit; + gap: 16px 8px; + width: 100%; + max-width: none; +} +.subscriberContainer .form .content .inputName { + grid-area: nome; +} +.subscriberContainer .form .content .inputName, +.subscriberContainer .form .content .inputEmail { + margin: 0; + max-width: 195.5px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + height: 40px; + margin: 0; +} +@media (max-width: 1024px) { + .subscriberContainer .form .content .inputName, + .subscriberContainer .form .content .inputEmail { + max-width: 378.5px; + } +} +.subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group), +.subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) { + height: 40px; + border: 1px solid #989898; + border-radius: 0; +} +.subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input), +.subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; + border-radius: 0; +} +.subscriberContainer .form .content .inputName :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder, +.subscriberContainer .form .content .inputEmail :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} +.subscriberContainer .form .content .submit { + width: 100%; + grid-area: submit; + margin: 0; +} +.subscriberContainer .form .content .submit :global(.vtex-button) { + width: 100%; + height: 49px; + border: none; + border-radius: 0; + background: #000; +} +.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; +} +.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label)::after { + content: "avise-me"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + display: flex; + align-items: center; + color: #ffffff; +} +@media (min-width: 1920px) { + .subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label)::after { + font-weight: 600; + font-size: 18px; + line-height: 25px; + } +} + +.carouselGaleryThumbs { + margin: 16px 0 32px; + max-height: 90px; +} +@media (max-width: 1024px) { + .carouselGaleryThumbs { + display: block; + } +} + +.carouselThumbBorder, +.thumbImg { + width: 100%; + height: 100%; + max-width: 90px; + height: 90px; + border-radius: 8px; +} + +.productImagesThumb { + margin-right: 16px !important; + max-height: 90px !important; + width: 90px !important; +} + +.figure, +.productImagesThumb { + width: 90px !important; +} + .productDescriptionContainer .productDescriptionTitle { font-family: "Open Sans"; font-style: normal; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 0cb484e..bdefa5a 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -24,6 +24,7 @@ } @media (max-width: 1024px) { .container--tab-product .listContainer--m3-tab-list-product { + margin-top: 16px; flex-direction: column; } } diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index e2b0812..ce9da29 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,3 +1,54 @@ +// INICIO PRODUCT +.flexRowContent--product-main { + padding: 0; + margin: 0; + border: 1px solid red; +} + +// FIM PRODUCT + +// INICIO INDISPONIVEL +.flexRow--indisponivel { + + :global(.vtex-store-components-3-x-container) { + padding: 0; + + .flexRowContent--indisponivel { + padding: 0; + margin: 0; + gap: 32px; + + @media (max-width:1024px) { + padding: 0 40px; + flex-direction: column; + } + + // padding: 0 40px; + :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + min-width: 296px; + max-width: 664px; + padding: 0; + border-radius: 0; + + @media (max-width:1024px) { + // width: 100% !important; + // max-width: none; + height: 402px; + } + + .flexColChild--info-availability { + :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + justify-content: initial; + } + } + } + } + } +} + +// FIM INDISPONIVEL + + // INICIO DESCRIÇÃO .flexRow--description { :global(.vtex-store-components17-x-container) { @@ -5,17 +56,23 @@ padding-right: 0 !important; width: 100% !important; max-width: 94.444444444444444444444444444444% !important; - background-color: red; + } + + :global(.vtex-store-components-3-x-container) { + padding-left: 0 !important; + padding-right: 0 !important; } } .flexRowContent--description { + width: auto; gap: 32px; + + @media (min-width:1920px) { .stretchChildrenWidth { width: unset !important; - // width: 100% !important; } } @@ -24,21 +81,13 @@ display: flex; flex-direction: column; + + .stretchChildrenWidth { width: unset !important; } } } -// @media (max-width: 1024px) { -// .flexRowContent--description { -// display: flex; -// flex-direction: column; -// } - -// .flexRowContent--description .stretchChildrenWidth { -// width: 100% !important; -// } -// } // FIM DESCRIÇÃO \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 1ee603b..db8cf50 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -1,9 +1,5 @@ :global(.vtex-product-summary-2-x-containerNormal) { max-width: unset !important; - - // @media (min-width:374px) and (max-width:376px) { - // max-width: 124.8px !important; - // } } :global(.vtex-product-summary-2-x-imageNormal) { @@ -93,4 +89,4 @@ } } -} +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 8bb74ba..4e49b89 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -22,22 +22,18 @@ @media (min-width:1920px) { max-width: 434.4px !important; - } @media(max-width:1440px) { max-width: 314.4px !important; - } @media (max-width:1024px) { max-width: 291.2px !important; - } @media (max-width:375px) { width: 124.8px !important; - } } @@ -61,7 +57,7 @@ visibility: hidden; &::after { - position: relative !important; + position: relative; visibility: visible; content: url("https://agenciamagma.vtexassets.com/arquivos/emmanuelvitor-arrow-left.svg"); width: 12px; @@ -76,7 +72,7 @@ } @media (max-width:1024px) { - left: -8px !important; + left: -8px; bottom: 3px; } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 3d253f5..b2e062e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -119,6 +119,198 @@ // FIM NEWSLETTER +// INICIO INDISPONIVEL +.subscriberContainer { + max-width: 399px; + + @media (max-width:1024px) { + max-width: 765px; + + } + + :global(.vtex-store-components-3-x-title) { + font-size: 0; + margin: 0; + + &::after { + content: "Produto indisponível"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + /* or 136% */ + + display: flex; + align-items: center; + + color: #868686; + } + } + + :global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; + + &::after { + content: "Deseja saber quando estiver disponível?"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + /* or 136% */ + + display: flex; + align-items: center; + + color: #868686; + } + } + + .form { + width: 100%; + margin: 0; + padding: 0; + + .content { + display: grid; + grid-template-areas: + "nome email" + "submit submit"; + justify-content: inherit; + gap: 16px 8px; + width: 100%; + max-width: none; + + + .inputName { + grid-area: nome; + + } + + .inputName, + .inputEmail { + margin: 0; + max-width: 195.5px; + + @media (max-width:1024px) { + max-width: 378.5px; + } + + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + + height: 40px; + margin: 0; + + :global(.vtex-input-prefix__group) { + height: 40px; + + border: 1px solid $color-gray10; + border-radius: 0; + + :global(.vtex-styleguide-9-x-input) { + // padding: 12px 14px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray10; + border-radius: 0; + + &::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray10; + } + } + } + + } + + .submit { + width: 100%; + grid-area: submit; + margin: 0; + + :global(.vtex-button) { + width: 100%; + height: 49px; + + border: none; + border-radius: 0; + background: #000; + + :global(.vtex-button__label) { + font-size: 0; + + &::after { + content: "avise-me"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + text-transform: uppercase; + + display: flex; + align-items: center; + + color: #ffffff; + + @media (min-width:1920px) { + font-weight: 600; + font-size: 18px; + line-height: 25px; + } + } + } + } + } + } + } +} + +// imagens abaixo da imagem principal +.carouselGaleryThumbs { + + margin: 16px 0 32px; + max-height: 90px; + + @media (max-width:1024px) { + display: block; + } + +} + +.carouselThumbBorder, +.thumbImg { + width: 100%; + height: 100%; + max-width: 90px; + height: 90px; + border-radius: 8px; +} + +.productImagesThumb { + margin-right: 16px !important; + max-height: 90px !important; + width: 90px !important; +} + +.figure, +.productImagesThumb { + width: 90px !important; +} + + +// FIM INDISPONIVEL + // INICIO DESCRIÇÃO .flexRow--description {} @@ -141,7 +333,6 @@ line-height: 22px; color: $color-gray6; max-width: 632px; - // max-width: 632px !important; @media (min-width:1920px) { diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index f4e35a4..88e3ffc 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -17,6 +17,7 @@ margin-bottom: 32px; @media (max-width:1024px) { + margin-top: 16px; flex-direction: column; } diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index c24dde1..a1585b1 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -14,6 +14,7 @@ $color-gray6: #929292; $color-gray7: #AFAFAF; $color-gray8: #BFBFBF; $color-gray9: #BABABA; +$color-gray10: #989898; $color-blue: #4267b2;