diff --git a/react/components/Example/paymentWithPix.tsx b/react/components/Example/paymentWithPix.tsx index b458073..4cb9c7b 100644 --- a/react/components/Example/paymentWithPix.tsx +++ b/react/components/Example/paymentWithPix.tsx @@ -1,24 +1,24 @@ import React from 'react'; import {useProduct} from 'vtex.product-context'; -import styles from "./styles.css"; - -const paymentWithPix =() => { +const PaymentWithPix =() => { const product = useProduct(); + + let imagePix = "https://agenciamagma.vtexassets.com/arquivos/pix-image-victor_souza.svg" return ( -
- Imagem do icone do pix -
-

{(product?.product?.priceRange.sellingPrice.highPrice || 0) * (0.9)}

-

R$ 10 % de desconto

+
+ Imagem do icone do pix +
+

{(product?.product?.priceRange.sellingPrice.highPrice || 0) * (0.9)}

+

R$ 10 % de desconto

) } -export default paymentWithPix +export default PaymentWithPix; diff --git a/react/components/Example/styles.css b/react/components/Example/styles.css index 5755a5b..f425591 100644 --- a/react/components/Example/styles.css +++ b/react/components/Example/styles.css @@ -1,20 +1,21 @@ -.wrapperPix { +[class*="wrapperPix"] { display: flex; gap: 26px; align-items: center; margin-top: 8px; } -.wrapperPixImage { + +[class*="wrapperPixImage"] { width: 66px; height: 24px; } -.wrapperPrices { +[class*="wrapperPrices"] { display: flex; flex-direction: column; } -.wrapperTitle { +[class*="wrapperTitle"] { font-family: 'Open Sans'; font-style: normal; font-weight: 700; @@ -25,7 +26,7 @@ } -.wrapperSubtitle { +[class*="wrapperSubtitle"] { font-family: 'Open Sans'; font-style: normal; font-weight: 300; diff --git a/react/paymentWithPix.tsx b/react/paymentWithPix.tsx index 990bd8a..5cdc4e8 100644 --- a/react/paymentWithPix.tsx +++ b/react/paymentWithPix.tsx @@ -1,3 +1,3 @@ -import paymentWithPix from "./components/Example/paymentWithPix"; +import paymentWithPix from "./components/Example/PaymentWithPix"; export default paymentWithPix; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6791541..b109aa8 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -100,7 +100,8 @@ "props": { "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "auto" + }, "displayThumbnailsArrows": false, @@ -121,9 +122,8 @@ "html#codigo", "product-rating-summary", "flex-layout.row#selling-price", - "example-component", + "html#pixzap", "html#product-installments", - // "html#pixzap", // "product-separator", // "product-identifier.product", "html#sku-selector", @@ -276,7 +276,11 @@ "defaultActiveTab": true }, "children": [ - "tab-content.item#home1" + "tab-content.item#home1", + "tab-content.item#home2", + "tab-content.item#home3", + "tab-content.item#home4", + "tab-content.item#home5" ] }, @@ -289,6 +293,42 @@ "tabId":"description1" } }, +"tab-content.item#home2": { + "children": [ + "image#image-1", + "product-description" + ], +"props": { + "tabId":"description2" +} +}, +"tab-content.item#home3": { + "children": [ + "image#image-1", + "product-description" + ], +"props": { + "tabId":"description3" +} +}, +"tab-content.item#home4": { + "children": [ + "image#image-1", + "product-description" + ], +"props": { + "tabId":"description4" +} +}, +"tab-content.item#home5": { + "children": [ + "image#image-1", + "product-description" + ], +"props": { + "tabId":"description5" +} +}, "html#box-buy" : { "props":{ @@ -345,14 +385,15 @@ "phone": 2 }, "infinite": true, - "showNavigationArrows": "desktopOnly", + "showNavigationArrows": "always", "blockClass": "carousel" } }, "rich-text#1": { "props": { - "text": "Você também pode gostar:" + "text": "Você também pode gostar:", + "blockClass": "m3-richText" } }, @@ -377,12 +418,12 @@ }, "children":["product-installments"] }, - // "html#pixzap": { - // "props":{ - // "testId": "pix-price" - // }, - // "children":["paymentWithPix"] - // }, + "html#pixzap": { + "props":{ + "testId": "pix-price" + }, + "children":["example-component"] + }, "html#sku-selector": { "props":{ "testId": "sku-selector", diff --git a/store/interfaces.json b/store/interfaces.json index b485af2..e0b6ca6 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -1,6 +1,6 @@ { "example-component": { - "component": "paymentWithPix" + "component": "PaymentWithPix" }, "html": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 892d537..976d156 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -32,4 +32,7 @@ display: flex; flex-direction: column; } + .flexRowContent .stretchChildrenWidth { + width: 100% !important; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index aa21160..9cda2ce 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -27,4 +27,10 @@ font-size: 14px; line-height: 19px; color: rgba(146, 146, 146, 0.48); +} + +@media (min-width: 768px) and (max-width: 1024px) { + .product-identifier__value { + justify-content: flex-start; + } } \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 1373242..8ae215d 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -19,4 +19,14 @@ color: #575757; display: flex; justify-content: center; +} + +.m3-richText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 0e382bf..272432e 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -10,6 +10,25 @@ /*font*/ /*colors*/ /* Grid breakpoints */ +.sliderLayoutContainer--carousel { + width: 100%; + padding: 0 16px 0 16px; + display: flex; + justify-content: center; + margin-bottom: 64px; +} +.sliderLayoutContainer--carousel .paginationDotsContainer { + display: flex; + align-items: center; +} +.sliderLayoutContainer--carousel .paginationDot { + background: black; +} +.sliderLayoutContainer--carousel .paginationDot--isActive { + background: white; + border: 0.5px solid black; +} + @media (min-width: 768px) and (max-width: 1024px) { .sliderLayoutContainer--carousel { padding: 24px 62px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index a24a6e7..c3bd5bd 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -12,7 +12,7 @@ /* Grid breakpoints */ .newsletter { background: black; - border-bottom: 1px solid #FFFFFF; + border-bottom: 1px solid #ffffff; margin: 0; display: flex; flex-direction: column; @@ -44,9 +44,9 @@ padding: 0 0 0 0; width: 774px; } -.newsletter .container { + +.container { max-width: 100%; - padding: 32px 0 16px 0; margin: 0; } @@ -57,7 +57,7 @@ font-size: 24px; line-height: 38px; text-align: center; - color: #FFFFFF; + color: #ffffff; border: none; } @@ -100,11 +100,6 @@ height: auto !important; } -@media (min-width: 375px) and (max-width: 1444px) { - .stack { - width: 40%; - } -} .shippingTableHead { display: grid; margin-bottom: 15px; @@ -161,7 +156,7 @@ line-height: 16px; display: flex; align-items: center; - color: #AFAFAF; + color: #afafaf; } .shippingTableCellDeliveryEstimate { @@ -174,7 +169,7 @@ line-height: 16px; display: flex; align-items: center; - color: #AFAFAF; + color: #afafaf; } .shippingTableCellDeliveryPrice { @@ -187,7 +182,7 @@ line-height: 16px; display: flex; align-items: center; - color: #AFAFAF; + color: #afafaf; } .shareContainer { @@ -211,7 +206,7 @@ line-height: 16px; display: flex; align-items: center; - color: #AFAFAF; + color: #afafaf; } .shippingContainer :global(.vtex-input) :global(.vtex-input__label) { @@ -320,4 +315,10 @@ padding: 0; margin: auto; margin: auto; +} + +@media (min-width: 768px) and (max-width: 1024px) { + .productBrand--quickview { + justify-content: flex-start; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index d7aa64a..c1ec31f 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -47,7 +47,7 @@ text-transform: initial; } -@media (min-width: 768px) and (max-width: 1024px) { +@media (min-width: 637px) and (max-width: 1024px) { .listContainer { display: flex; flex-direction: column; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 67cbdba..e65542b 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -20,5 +20,10 @@ .flexRowContent { display: flex; flex-direction: column; + + .stretchChildrenWidth { + width: 100% !important; } + } + } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index b19a895..5f40e51 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -4,9 +4,6 @@ .product-identifier__separator { display: none; } - - - .product-identifier__value { display: flex; justify-content: end; @@ -17,3 +14,9 @@ line-height: 19px; color: rgba(146, 146, 146, 0.48); } + +@media (min-width: 768px) and (max-width: 1024px) { + .product-identifier__value { + justify-content: flex-start; + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 27eef50..ebe41e6 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -8,3 +8,14 @@ display: flex; justify-content: center; } + +.m3-richText { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} + diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index ab2c9ff..ee45877 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -1,7 +1,24 @@ -// .sliderLayoutContainer--carousel { -// padding: ; -// } +.sliderLayoutContainer--carousel { + width: 100%; + padding: 0 16px 0 16px; + display: flex; + justify-content: center; + margin-bottom: 64px; + + .paginationDotsContainer { + display: flex; + align-items: center; + } + .paginationDot { + background: black; + } + .paginationDot--isActive { + background: white; + border: 0.5px solid black; + } +} + @media (min-width:768px) and (max-width:1024px) { .sliderLayoutContainer--carousel { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index aec7f93..493b44e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,58 +1,58 @@ -.newsletter{ - background: black; - border-bottom: 1px solid #FFFFFF; - margin:0; +.newsletter { + background: black; + border-bottom: 1px solid #ffffff; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + + :global(.vtex-button) { + position: relative; + right: 40px; + background: transparent; + border: none; + border-radius: 0; + border-bottom: 3px solid #bfbfbf; + &:hover { + border-bottom: 5px solid #bfbfbf; + } + } + + :global(.vtex-input-prefix__group) { display: flex; - flex-direction: column; justify-content: center; - align-items: center; + border-top: none; + border-right: none; + border-left: none; + border-bottom: 1px solid #929292; + border-radius: 0; + } + :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0 0 0 0; + width: 774px; + } +} - :global(.vtex-button) { - position: relative; - right: 40px; - background: transparent; - border: none; - border-radius: 0; - border-bottom: 3px solid #bfbfbf; - &:hover { - border-bottom: 5px solid #bfbfbf; - } - } - - :global(.vtex-input-prefix__group) { - display: flex; - justify-content: center; - border-top: none; - border-right: none; - border-left: none; - border-bottom: 1px solid #929292; - border-radius: 0; - } - :global(.vtex-styleguide-9-x-input) { - background: transparent; - padding: 0 0 0 0; - width: 774px; - } - .container { - max-width: 100%; - padding: 32px 0 16px 0; - margin:0; - } +.container { + max-width: 100%; + margin: 0; } .label { - font-family: 'Open Sans'; + font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 24px; line-height: 38px; text-align: center; - color: #FFFFFF; + color: #ffffff; border: none; } .label::after { content: "Receba ofertas e novidades por e-mail"; - font-family:'Opens Sans'; + font-family: "Opens Sans"; font-style: normal; font-weight: 400; font-size: 18px; @@ -66,7 +66,7 @@ } .productDescriptionTitle { - font-family:'Opens Sans'; + font-family: "Opens Sans"; font-style: normal; font-weight: 400; font-size: 24px; @@ -75,8 +75,8 @@ margin-bottom: 8px; } -.productDescriptionText { - text-align: left; +.productDescriptionText { + text-align: left; } .thumbImg { @@ -89,10 +89,14 @@ height: auto !important; } -@media (min-width: 375px) and (max-width:1444px) { - .stack { - width: 40%; - } +@media (min-width: 375px) and (max-width: 1444px) { +} + + +@media (min-width: 1898px) and (max-width: 2000px) { + // .carouselGaleryThumbs { + // margin-left: 28px; + // } } // estilização do frete @@ -104,7 +108,7 @@ } .shippingTableHeadDeliveryName { display: flex; - font-family: 'Open Sans'; + font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 14px; @@ -113,7 +117,7 @@ } .shippingTableHeadDeliveryEstimate { display: flex; - font-family: 'Open Sans'; + font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 14px; @@ -122,7 +126,7 @@ } .shippingTableHeadDeliveryPrice { display: flex; - font-family: 'Open Sans'; + font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 14px; @@ -144,40 +148,40 @@ grid-area: t; padding: 0; margin-bottom: 15px; - font-family: 'Open Sans'; + font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; display: flex; align-items: center; - color: #AFAFAF; + color: #afafaf; } .shippingTableCellDeliveryEstimate { - grid-area:d; + grid-area: d; padding: 0; - font-family: 'Open Sans'; + font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; display: flex; align-items: center; - color: #AFAFAF; + color: #afafaf; } -.shippingTableCellDeliveryPrice { +.shippingTableCellDeliveryPrice { grid-area: p; padding: 0; - font-family: 'Open Sans'; + font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; display: flex; align-items: center; - color: #AFAFAF; + color: #afafaf; } .shareContainer { @@ -189,37 +193,37 @@ width: 49px; height: 49px; background-color: black; - :global(.vtex-button__label ){ - font-size: 0; - &::after { - content: "Ok"; - font-family: 'Open Sans'; - font-style: normal; - font-weight: 400; - font-size: 12px; - line-height: 16px; - display: flex; - align-items: center; + :global(.vtex-button__label) { + font-size: 0; + &::after { + content: "Ok"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; - color: #AFAFAF; - } + color: #afafaf; + } } } } .shippingContainer { :global(.vtex-input) { - :global(.vtex-input__label ){ - font-size: 0; - &::after { - content: "CALCULAR FRETE:"; - font-family: 'Open Sans'; - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #929292; - } + :global(.vtex-input__label) { + font-size: 0; + &::after { + content: "CALCULAR FRETE:"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } } } } @@ -230,11 +234,11 @@ } :global(.vtex-button) { - position: relative; - right: 49px; - top: 27px; - width: 49px; - height: 49px; + position: relative; + right: 49px; + top: 27px; + width: 49px; + height: 49px; } } @@ -243,7 +247,7 @@ .productBrand--quickview { display: flex; justify-content: end; - font-family: 'Open Sans'; + font-family: "Open Sans"; font-style: normal; font-weight: 300; font-size: 20px; @@ -254,7 +258,6 @@ //estilização do container de skus ( tamanhos e cores ) - .skuSelectorContainer { display: flex; flex-direction: column-reverse; @@ -327,7 +330,10 @@ margin: auto; } } - - } +@media (min-width: 768px) and (max-width: 1024px) { + .productBrand--quickview{ + justify-content: flex-start; + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 6bbf8b9..7ab21c2 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -38,7 +38,12 @@ } } -@media (min-width:768px) and (max-width:1024px) { +@media (min-width:637px) and (max-width:1024px) { + + // .container { + // display: block; + // flex-direction: column; + // } .listContainer { display: flex; flex-direction: column;