diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index a00b23b..c15fdf7 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -61,3 +61,7 @@ padding: 0 64px; } } + +[class*="html--containerbotao"] { + display: contents; +} diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..ebacd49 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,9 +2,9 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "example-component", /* You can make references to blocks defined in other files. - * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ - "flex-layout.row#deals", + "example-component", + /* You can make references to blocks defined in other files. + * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals", "__fold__", "rich-text#shelf-title", "flex-layout.row#shelf", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 83490d9..ab7c09b 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -1,18 +1,10 @@ { "store.product": { "children": [ - /*"html#breadcrumb",*/ "breadcrumb#pdp", "condition-layout.product#availability", "tab-layout#details", - /*"html#description",*/ - /*"flex-layout.row#description",*/ - /*"flex-layout.row#specifications-title",*/ - /*"product-specification-group#table",*/ - "list-context.product-list#prateleira", - /*"shelf.relatedProducts",*/ - /*"product-questions-and-answers",*/ "newsletter" ] }, @@ -27,7 +19,7 @@ "list-context.product-list#prateleira": { "blocks": ["product-summary.shelf"], - "children": ["rich-text#prateleira", "slider-layout#prateleira"] + "children": ["rich-text#prateleira", "html#slidercontainer"] }, "rich-text#prateleira": { "props": { @@ -49,10 +41,18 @@ "blockClass": "prateleira" } }, + "html#slidercontainer": { + "props": { + "testId": "product-summary-list", + "tag": "div" + }, + "children": ["slider-layout#prateleira"] + }, "breadcrumb#pdp": { "props": { - "blockClass": "testebread", + "testId": "breadcrumbs", + "blockClass": "breadcrumb", "showOnMobile": true } }, @@ -86,11 +86,6 @@ "flex-layout.row#product-main": { "props": { - /*"colGap": 7,*/ - /*"rowGap": 7, - "marginTop": 5, - "marginBottom": 7, - "paddingBottom": 7,*/ "blockClass": "container-produto" }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] @@ -125,8 +120,9 @@ } }, "flex-layout.row#product-image": { - "children": ["product-images"] + "children": ["html#imagens"] }, + "product-images": { "props": { "showNavigationArrows": false, @@ -141,6 +137,11 @@ "blockClass": "images-container" } }, + "html#imagens": { + "props": { "testId": "product-images" }, + "children": ["product-images"] + }, + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, @@ -150,20 +151,13 @@ "flex-layout.row#product-name", "html#codigo", "product-rating-summary", - /*"flex-layout.row#list-price-savings", desconto*/ "flex-layout.row#selling-price", "product-installments", - "Pix", - /*"product-separator",*/ - "sku-selector", - /*"product-quantity",*/ - /*"product-assembly-options",*/ - /*"product-gifts",*/ - /*"flex-layout.row#buy-button",*/ + "html#pix", + "html#skus", "html#qtd-btn", "availability-subscriber", "shipping-simulator" - /*"share#default"*/ ] }, @@ -190,6 +184,14 @@ "children": ["product-identifier.product"] }, + "html#pix": { + "props": { + "testId": "pix-price", + "blockClass": "pix" + }, + "children": ["Pix"] + }, + "sku-selector": { "props": { "variationsSpacing": 3, @@ -197,6 +199,10 @@ "blockClass": "skus" } }, + "html#skus": { + "props": { "testId": "sku-selector" }, + "children": ["sku-selector"] + }, "flex-layout.row#buy-button": { "props": { @@ -213,7 +219,15 @@ "testId": "qtd-btn", "blockClass": "qtd-btn" }, - "children": ["product-quantity", "add-to-cart-button"] + "children": ["html#quantidade", "html#botao"] + }, + "html#botao": { + "props": { + "tag": "div", + "testId": "add-to-cart-button", + "blockClass": "containerbotao" + }, + "children": ["add-to-cart-button"] }, "product-quantity": { @@ -221,14 +235,17 @@ "blockClass": "quantidade" } }, + "html#quantidade": { + "props": { + "tag": "div", + "testId": "product-quantity", + "blockClass": "containerquantidade" + }, + "children": ["product-quantity"] + }, "flex-layout.row#product-availability": { "props": { - /*"colGap": 7,*/ - /*"rowGap": 7, - "marginTop": 5, - "marginBottom": 7, - "paddingBottom": 7,*/ "blockClass": "container-produto" }, "children": [ diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index d17137d..f2c0eff 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -1,5 +1,9 @@ { - "product-summary.shelf": { + "html#prateleira": { + "props": { + "testId": "vtex-product-summary", + "blockClass": "item-prateleira" + }, "children": [ "stack-layout#prodsum", "product-summary-name", @@ -7,10 +11,11 @@ "product-summary-space", "product-list-price#summary", "flex-layout.row#selling-price-savings" - /*"product-installments#summary", - "add-to-cart-button"*/ ] }, + "product-summary.shelf": { + "children": ["html#prateleira"] + }, "flex-layout.col#productRating": { "props": { "blockClass": "productRating" diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 0c0d229..bb9656c 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -7,7 +7,7 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.container--testebread { +.container--breadcrumb { margin-left: 40px; margin-right: 40px; font-style: normal; @@ -16,29 +16,35 @@ line-height: 19px; color: #929292; } -.container--testebread .homeIcon--testebread { +@media screen and (min-width: 1921px) { + .container--breadcrumb { + margin-left: 360px; + margin-right: 360px; + } +} +.container--breadcrumb .homeIcon--breadcrumb { display: none; } -.container--testebread .homeLink--testebread { +.container--breadcrumb .homeLink--breadcrumb { vertical-align: top; } -.container--testebread .homeLink--testebread::after { +.container--breadcrumb .homeLink--breadcrumb::after { content: "Home"; font-style: normal; font-weight: 400; font-size: 14px; line-height: 19px; } -.container--testebread .link--testebread--1 { +.container--breadcrumb .link--breadcrumb--1 { font-size: 0; } -.container--testebread .link--testebread--1::after { +.container--breadcrumb .link--breadcrumb--1::after { content: "Sapatos"; font-weight: 400; font-size: 14px; line-height: 19px; } -.container--testebread .termArrow--testebread, -.container--testebread .term--testebread { +.container--breadcrumb .termArrow--breadcrumb, +.container--breadcrumb .term--breadcrumb { display: none; } \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 4f88e2d..5d9f863 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -30,6 +30,15 @@ padding-left: 40px; padding-right: 40px; } +@media screen and (min-width: 1921px) { + .flexRow--container-produto { + padding-left: 360px; + padding-right: 360px; + } +} +.flexRow--container-produto :global(.vtex-store-components-3-x-container) { + display: contents; +} .flexRowContent--container-produto { gap: 32px; diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 1268528..74f637a 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -17,11 +17,6 @@ display: none; } -/*.vtex-numeric-stepper__input { - border-left: none; - border-right: none; - height: 50px; -}*/ .hideDecorators { border: 1px solid red; border-left: none; @@ -29,24 +24,11 @@ height: 49px; } -/*.numeric-stepper__plus-button { - border: none; - height: 50px; -}*/ -/*.quantitySelectorInputContainer { - height: 50px; -}*/ -/*.availableQuantityContainer { - border: 1px solid yellow; - margin: 0; - padding: 0; -} -*/ .quantitySelectorContainer--quantidade { - margin-right: 5px; + margin-right: 10px; + margin-bottom: 16px; padding: 0; height: 100%; - /*height: 49px;*/ } @media screen and (max-width: 768px) { .quantitySelectorContainer--quantidade { @@ -54,14 +36,9 @@ } } -/*.summaryContainer { - background-color: blue; - border: 1px solid orange; - height: 49px; -}*/ :global(.vtex-numeric-stepper__input) { height: 49px; - width: 30px; + width: 32px; border-right: 0; border-left: 0; font-weight: 400; diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index ab81519..08cfe03 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -12,9 +12,20 @@ padding-right: 40px; justify-content: center; } +@media screen and (min-width: 1921px) { + .sliderLayoutContainer--prateleira { + padding-left: 360px; + padding-right: 360px; + } +} .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { width: 97.1773%; } +@media screen and (min-width: 1921px) { + .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { + width: 97.914%; + } +} @media screen and (max-width: 1024px) { .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { width: 97.63%; @@ -54,14 +65,38 @@ } .sliderArrows--prateleira { - margin: 14px; + margin: 30px; +} +@media screen and (min-width: 1921px) { + .sliderArrows--prateleira { + margin: 350px; + } } @media screen and (max-width: 1024px) { .sliderArrows--prateleira { - margin: 28px; + margin: 30px; + } +} +@media screen and (max-width: 768px) { + .sliderArrows--prateleira { + margin: 34px; } } +.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderRightArrow) { + visibility: hidden; +} +.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderRightArrow)::after { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-caina.png); +} +.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderLeftArrow) { + visibility: hidden; +} +.sliderLayoutContainer :global(.vtex-slider-layout-0-x-sliderLeftArrow)::before { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-left-caina.png); +} .sliderLayoutContainer :global(.vtex-product-summary-2-x-containerNormal) { max-width: unset !important; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d7118c0..eb03a5b 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -348,8 +348,9 @@ .container--descricao { margin: 0; } + @media screen and (max-width: 1024px) { - .container--descricao { + .productDescriptionContainer--descricao { border-bottom: 1px solid #bfbfbf; padding-bottom: 16px; } @@ -362,32 +363,41 @@ color: #575757; margin-bottom: 8px; } +@media screen and (min-width: 1921px) { + .productDescriptionTitle--descricao { + font-size: 32px; + } +} @media screen and (max-width: 1024px) { .productDescriptionTitle--descricao { font-size: 20px; } } -.content--descricao { +/*.content--descricao { font-weight: 400; font-size: 16px; line-height: 22px; - color: #929292; -} -@media screen and (max-width: 1024px) { - .content--descricao { + color: $color-gray6; + + @media screen and (max-width: 1024px) { font-size: 14px; line-height: 19px; } -} - +}*/ .productDescriptionText--descricao { font-weight: 400; font-size: 16px; line-height: 22px; color: #929292; } -@media screen and (max-width: 768px) { +@media screen and (min-width: 1921px) { + .productDescriptionText--descricao { + font-size: 18px; + line-height: 25px; + } +} +@media screen and (max-width: 1024px) { .productDescriptionText--descricao { font-size: 14px; line-height: 19px; @@ -615,4 +625,12 @@ line-height: 19px; color: #fff; padding: 0; +} + +:global(.vtex-store-footer-2-x-socialNetworksContainer) { + margin: 0; +} + +:global(.vtex-store-footer-2-x-acceptedPaymentMethodContainer) { + margin: 0; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 9e720a0..088820c 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -11,6 +11,12 @@ padding-left: 40px; padding-right: 40px; } +@media screen and (min-width: 1921px) { + .container--details { + padding-left: 360px; + padding-right: 360px; + } +} .listContainer { border-bottom: 1px solid #bfbfbf; @@ -47,6 +53,12 @@ background-color: transparent; cursor: pointer; } +@media screen and (max-width: 1024px) { + .listItem :global(.vtex-button) { + width: 100%; + display: flex; + } +} .listItem :global(.vtex-button) { background-color: transparent; border: none; @@ -60,9 +72,14 @@ margin: 0; padding: 0; } +@media screen and (min-width: 1921px) { + .listItem :global(.vtex-button__label) { + font-size: 24px; + } +} .listItemActive { - border-bottom: 2px solid #000000; + /*border-bottom: 2px solid $color-black-100;*/ } .listItemActive :global(.vtex-button__label) { color: #000000; @@ -77,10 +94,18 @@ .listItemActive--descricao { border-bottom: 2px solid #000000; + padding-left: 14px; + padding-right: 14px; +} +@media screen and (min-width: 1921px) { + .listItemActive--descricao { + border-bottom: 3px solid #000000; + } } @media screen and (max-width: 1024px) { .listItemActive--descricao { border: none; + padding: 0; } } .listItemActive--descricao :global(.vtex-button) { diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 8aeed9c..8a121c3 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,4 +1,4 @@ -.container--testebread { +.container--breadcrumb { margin-left: 40px; margin-right: 40px; font-style: normal; @@ -6,12 +6,16 @@ font-size: 14px; line-height: 19px; color: $color-gray6; + @media screen and (min-width: 1921px) { + margin-left: 360px; + margin-right: 360px; + } - .homeIcon--testebread { + .homeIcon--breadcrumb { display: none; } - .homeLink--testebread { + .homeLink--breadcrumb { vertical-align: top; &::after { content: "Home"; @@ -22,7 +26,7 @@ } } - .link--testebread--1 { + .link--breadcrumb--1 { font-size: 0; &::after { @@ -33,8 +37,8 @@ } } - .termArrow--testebread, - .term--testebread { + .termArrow--breadcrumb, + .term--breadcrumb { display: none; } } diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 54bdf7c..ad2e1f1 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -18,6 +18,13 @@ .flexRow--container-produto { padding-left: 40px; padding-right: 40px; + @media screen and (min-width: 1921px) { + padding-left: 360px; + padding-right: 360px; + } + :global(.vtex-store-components-3-x-container) { + display: contents; + } } .flexRowContent--container-produto { diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 30e24ca..eb25300 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -8,12 +8,6 @@ display: none; } -/*.vtex-numeric-stepper__input { - border-left: none; - border-right: none; - height: 50px; -}*/ - .hideDecorators { border: 1px solid red; border-left: none; @@ -21,39 +15,19 @@ height: 49px; } -/*.numeric-stepper__plus-button { - border: none; - height: 50px; -}*/ - -/*.quantitySelectorInputContainer { - height: 50px; -}*/ - -/*.availableQuantityContainer { - border: 1px solid yellow; - margin: 0; - padding: 0; -} -*/ .quantitySelectorContainer--quantidade { - margin-right: 5px; + margin-right: 10px; + margin-bottom: 16px; padding: 0; height: 100%; - /*height: 49px;*/ @media screen and (max-width: 768px) { margin: 0 0 10px 0; } } -/*.summaryContainer { - background-color: blue; - border: 1px solid orange; - height: 49px; -}*/ :global(.vtex-numeric-stepper__input) { height: 49px; - width: 30px; + width: 32px; border-right: 0; border-left: 0; font-weight: 400; diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 68ec06e..6ec2fbf 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -2,9 +2,16 @@ padding-left: 40px; padding-right: 40px; justify-content: center; + @media screen and (min-width: 1921px) { + padding-left: 360px; + padding-right: 360px; + } .sliderTrackContainer--prateleira { width: 97.1773%; + @media screen and (min-width: 1921px) { + width: 97.914%; + } @media screen and (max-width: 1024px) { width: 97.63%; } @@ -46,14 +53,35 @@ } .sliderArrows--prateleira { - margin: 14px; - + margin: 30px; + @media screen and (min-width: 1921px) { + margin: 350px; + } @media screen and (max-width: 1024px) { - margin: 28px; + margin: 30px; + } + @media screen and (max-width: 768px) { + margin: 34px; } } .sliderLayoutContainer { + //ARROWS CUSTOM + :global(.vtex-slider-layout-0-x-sliderRightArrow) { + visibility: hidden; + &::after { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-caina.png); + } + } + :global(.vtex-slider-layout-0-x-sliderLeftArrow) { + visibility: hidden; + &::before { + visibility: visible; + content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-left-caina.png); + } + } + :global(.vtex-product-summary-2-x-containerNormal) { max-width: unset !important; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 98d78de..f304009 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -389,6 +389,9 @@ .container--descricao { margin: 0; +} + +.productDescriptionContainer--descricao { @media screen and (max-width: 1024px) { border-bottom: 1px solid $color-gray9; padding-bottom: 16px; @@ -400,26 +403,34 @@ line-height: 32px; color: $color-gray8; margin-bottom: 8px; + @media screen and (min-width: 1921px) { + font-size: 32px; + } @media screen and (max-width: 1024px) { font-size: 20px; } } -.content--descricao { +/*.content--descricao { font-weight: 400; font-size: 16px; line-height: 22px; color: $color-gray6; + @media screen and (max-width: 1024px) { font-size: 14px; line-height: 19px; } -} +}*/ .productDescriptionText--descricao { font-weight: 400; font-size: 16px; line-height: 22px; color: $color-gray6; - @media screen and (max-width: 768px) { + @media screen and (min-width: 1921px) { + font-size: 18px; + line-height: 25px; + } + @media screen and (max-width: 1024px) { font-size: 14px; line-height: 19px; } @@ -650,3 +661,10 @@ } } } +//BUG SCROLL +:global(.vtex-store-footer-2-x-socialNetworksContainer) { + margin: 0; +} +:global(.vtex-store-footer-2-x-acceptedPaymentMethodContainer) { + margin: 0; +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 4a746b9..af20a6c 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,6 +1,10 @@ .container--details { padding-left: 40px; padding-right: 40px; + @media screen and (min-width: 1921px) { + padding-left: 360px; + padding-right: 360px; + } } .listContainer { @@ -34,6 +38,10 @@ :global(.vtex-button) { background-color: transparent; cursor: pointer; + @media screen and (max-width: 1024px) { + width: 100%; + display: flex; + } } :global(.vtex-button) { @@ -49,11 +57,15 @@ text-transform: capitalize; margin: 0; padding: 0; + @media screen and (min-width: 1921px) { + font-size: 24px; + } } } .listItemActive { - border-bottom: 2px solid $color-black-100; + /*border-bottom: 2px solid $color-black-100;*/ + :global(.vtex-button__label) { color: $color-black-100; margin: 0; @@ -66,8 +78,14 @@ .listItemActive--descricao { border-bottom: 2px solid $color-black-100; + padding-left: 14px; + padding-right: 14px; + @media screen and (min-width: 1921px) { + border-bottom: 3px solid $color-black-100; + } @media screen and (max-width: 1024px) { border: none; + padding: 0; } :global(.vtex-button) { border: none;