diff --git a/react/components/Example/Example.tsx b/react/components/Example/Example.tsx index 4f8cf1d..1223c30 100644 --- a/react/components/Example/Example.tsx +++ b/react/components/Example/Example.tsx @@ -51,7 +51,7 @@ const Pix = () => {
pix diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 4723abe..e8f9118 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -37,7 +37,9 @@ [class*='vtex-numeric-stepper__minus-button'] { border: none; border: 1px solid #afafaf; + border-right: none; border-radius: 0; + background-color: white; } [class*='vtex-numeric-stepper__minus-button-container'], @@ -48,6 +50,7 @@ [class*='vtex-numeric-stepper__plus-button'] { border: none; border: 1px solid #afafaf; + border-left: none; border-radius: 0; } @@ -61,6 +64,7 @@ display: flex; align-items: center; color: #000000; + height: 43px; } [class*='html--buy-button'] { diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index d64acc0..6783c5f 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -67,7 +67,7 @@ "itemsPerPage": { "desktop": 4, "tablet": 3, - "phone": 1 + "phone": 2 }, "infinite": true, "fullWidth": false, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index e0b0ad2..bc3ad4e 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,11 +7,51 @@ "html#product-description", // "flex-layout.row#specifications-title", // "product-specification-group#table", - "shelf.relatedProducts" + "flex-layout.row#shelf-row" // "product-questions-and-answers" ] }, + "flex-layout.row#shelf-row": { + "children": ["flex-layout.col#shelf-col"], + "props": { + "blockClass": "shelf-product-row" + } + }, + "flex-layout.col#shelf-col": { + "children": ["rich-text#shelf-related", "list-context.product-list"], + "props": { + "blockClass": "shelf-product-col" + } + }, + + "rich-text#shelf-related": { + "props": { + "text": "### Você também pode gostar:", + "blockClass": "shelf-title" + } + }, + + "list-context.product-list": { + "children": ["slider-layout#shelf-prod"], + "blocks": ["product-summary.shelf"] + }, + + "slider-layout#shelf-prod": { + "props": { + "itemsPerPage": { + "(min-width:1025px)": 4, + "(min-width:768px)": 3, + "(max-width:767px)": 2 + }, + "infinite": true, + "showNavigationArrows": "always", + "showPaginationDots": "always", + "blockClass": "slide-shelf", + "colGap": 16 + } + }, + "html#product-description": { "props": { "testId": "product-description" diff --git a/store/blocks/product-summary/product-summary-list.jsonc b/store/blocks/product-summary/product-summary-list.jsonc index cfc3226..971cd70 100644 --- a/store/blocks/product-summary/product-summary-list.jsonc +++ b/store/blocks/product-summary/product-summary-list.jsonc @@ -9,14 +9,10 @@ ] }, "responsive-layout.desktop#productSummaryList": { - "children": [ - "flex-layout.row#summaryListDesktop" - ] + "children": ["flex-layout.row#summaryListDesktop"] }, "responsive-layout.mobile#productSummaryList": { - "children": [ - "flex-layout.row#summaryListMobile" - ] + "children": ["flex-layout.row#summaryListMobile"] }, "product-price-savings#summaryPercentage": { "props": { @@ -36,7 +32,7 @@ ] }, "flex-layout.row#summaryListDesktop": { - "props":{ + "props": { "fullWidth": true, "colSizing": "auto", "blockClass": "summaryListDesktop" @@ -69,9 +65,7 @@ ] }, "flex-layout.row#productSpecifications": { - "children": [ - "product-specification-group#summary" - ] + "children": ["product-specification-group#summary"] }, "product-summary-name#summaryListDesktop": { "props": { @@ -100,18 +94,13 @@ "colSizing": "auto", "colGap": 5 }, - "children": [ - "add-to-cart-button", - "flex-layout.row#buyNowButton" - ] + "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"] }, "flex-layout.row#buyNowButton": { "props": { "blockClass": "buyNowButton" }, - "children": [ - "add-to-cart-button#buyNow" - ] + "children": ["add-to-cart-button#buyNow"] }, "add-to-cart-button#buyNow": { @@ -123,10 +112,7 @@ } }, "flex-layout.col#priceSummaryListDesktop": { - "children": [ - "product-selling-price#summary", - "product-list-price#summary" - ] + "children": ["product-selling-price#summary", "product-list-price#summary"] }, "stack-layout#summaryListDesktop": { "children": [ @@ -144,7 +130,7 @@ } }, "flex-layout.row#summaryListMobile": { - "props":{ + "props": { "preserveLayoutOnMobile": true, "colSizing": "auto", "blockClass": "summaryListMobile", diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..ada9742 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -3,12 +3,12 @@ "children": [ "stack-layout#prodsum", "product-summary-name", - "flex-layout.col#productRating", - "product-summary-space", + // "flex-layout.col#productRating", + // "product-summary-space", "product-list-price#summary", - "flex-layout.row#selling-price-savings", - "product-installments#summary", - "add-to-cart-button" + "product-selling-price#summary" + // "product-installments#summary" + // "add-to-cart-button" ] }, "flex-layout.col#productRating": { @@ -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 bf41184..82fe0d7 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -30,6 +30,14 @@ padding: 0; } +.flexColChild--productRating { + display: none; +} + +.flexRowContent--shelf-product-row { + padding-bottom: 70px; +} + @media screen and (max-width: 768px) { .stretchChildrenWidth { flex-direction: column; diff --git a/styles/css/vtex.modal-layout.css b/styles/css/vtex.modal-layout.css index 3ff69e2..7141046 100644 --- a/styles/css/vtex.modal-layout.css +++ b/styles/css/vtex.modal-layout.css @@ -1,89 +1,13 @@ -@media screen and (min-width: 40em) { - .paper--quickview { - height: 260px; - width: 580px; - } - - .actionsContainer--quickview { - padding: 0 2rem 2rem 2rem; - } -} - -@media screen and (min-width: 50em) { - .paper--quickview { - height: 450px; - width: 900px; - } -} - - -@media screen and (min-width: 75em) { - .paper--quickview { - width: calc(100% - 4rem); - height: auto; - } -} - -@media screen and (min-width: 82em) { - .actionsContainer--quickview { - padding: 0 2.5rem 2.5rem 2.5rem; - } -} - -.paper--quickview { - min-width: 320px; - max-width: 96rem; -} - -.headerContainer--quickview { - border: none; - position: absolute; - right: 0; -} - -.actionsContainer--quickview { - height: 100%; - width: 100%; - transition: box-shadow 150ms ease-in-out, border-top 150ms ease-in-out; - border-top-style: solid; - border-top-width: 1px; - border-top-color: transparent; - box-shadow: -4px 0px 27px -12px transparent; -} - -.actionsContentWrapper { - border-top-width: 1px; - border-top-style: solid; - border-top-color: #aaa; - padding-top: 1.5rem; -} - -.contentContainer--quickviewContent { - padding: 2.5rem 0 2.5rem 2rem; - overflow-x: hidden; -} - +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); .triggerContainer--quickview { - padding: .75rem; -} - -.triggerContainer { - outline: none; -} - -.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) { - border-top-color: rgb(238, 238, 238); - box-shadow: -4px 0px 27px -12px rgba(0,0,0,0.64); -} - -.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) .actionsContentWrapper { - border-top-color: transparent; -} - -.closeButton { - padding-right: 1rem; -} - -.paper--product-gifts { - padding: 1.5rem; -} + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-highlights.css b/styles/css/vtex.product-highlights.css index c08e8e4..9dae0da 100644 --- a/styles/css/vtex.product-highlights.css +++ b/styles/css/vtex.product-highlights.css @@ -1,12 +1,13 @@ -.productHighlightWrapper--collection { - position: absolute; - top: 10px; - left: 5px; - width: 200px; -} - +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); .productHighlightText { - background: antiquewhite; - border-radius: 20px; - padding: 5px 10px; -} + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index c5cdceb..203a4ad 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -13,6 +13,28 @@ display: none; } +.listPrice--summary { + display: block; + font-size: 14px; + line-height: 19px; + color: #bababa; + padding-bottom: 8px; +} +.listPrice--summary::before { + content: "de "; + text-decoration: line-through; +} +.listPrice--summary::after { + content: " por"; + text-decoration: line-through; +} + +.sellingPriceValue--summary { + font-weight: 700; + font-size: 24px; + line-height: 33px; +} + .sellingPrice { font-weight: 700; font-size: 25px; diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..dafe775 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,32 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } -} - -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; -} - -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +.element { + padding: 0; } .imageContainer { - text-align: center; + width: 100%; } -.image { - border-radius: 0.25rem; +.containerNormal { + max-width: none !important; } + +.brandName { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #000000; +} + +.nameContainer { + padding: 16px 0 8px; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 8235eba..930cb79 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -7,4 +7,15 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); \ No newline at end of file +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +.container--shelf-title { + justify-content: center; +} + +.heading--shelf-title { + margin: 16px 0 32px 0; + font-size: 24px; + line-height: 38px; + color: #575757; + font-weight: 400; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..36b5fe2 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,87 @@ -.sliderLayoutContainer { - justify-content: center; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +.sliderLayoutContainer--slide-shelf { + padding: 0 19px; + margin: 0 0 113px; +} +@media only screen and (max-width: 1024px) { + .sliderLayoutContainer--slide-shelf { + margin: 0 0 105px; + padding: 0 17px; + } +} +@media only screen and (max-width: 768px) { + .sliderLayoutContainer--slide-shelf { + margin: 0 0 65px; + padding: 0 15px; + } +} +.sliderLayoutContainer--slide-shelf .slideChildrenContainer { + margin: 0 8px; +} +@media only screen and (max-width: 1024px) { + .sliderLayoutContainer--slide-shelf .slideChildrenContainer { + margin: 0 6px; + } +} +@media only screen and (max-width: 768px) { + .sliderLayoutContainer--slide-shelf .slideChildrenContainer { + margin: 0 4px; + } +} +.sliderLayoutContainer--slide-shelf .slideChildrenContainer .paginationDotsContainer { + top: calc(100% + 32px); } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.sliderLeftArrow--slide-shelf { + padding: 0; + margin: 0; + left: 0; +} +.sliderLeftArrow--slide-shelf::before { + content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-filipequintanilha.svg); + width: 11px; + height: 29px; } -.sliderTrackContainer { - max-width: 100%; +.sliderRightArrow--slide-shelf { + padding: 0; + margin: auto; + right: 0; +} +.sliderRightArrow--slide-shelf::before { + content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-filipequintanilha.svg); + width: 11px; + height: 29px; } -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +.caretIcon--slide-shelf { + width: 0; + height: 0; } -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +.paginationDotsContainer--slide-shelf { + bottom: -42px; + align-items: center; + gap: 12px; } -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +.paginationDot--slide-shelf { + background-color: #000000; + margin: 0; } + +.paginationDot--slide-shelf--isActive { + background-color: white; + border: 1px solid #000000; + width: 17px !important; + height: 17px !important; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 4b5a33d..055d643 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -388,6 +388,14 @@ .productImagesContainer--first-image { width: 100%; } + .productDescriptionTitle { + font-size: 20px; + line-height: 32px; + } + .productDescriptionText { + font-size: 14px; + line-height: 19px; + } } @media screen and (min-width: 1920px) { .container { diff --git a/styles/css/vtex.store-footer.css b/styles/css/vtex.store-footer.css index 1fd6bb3..fa9237d 100644 --- a/styles/css/vtex.store-footer.css +++ b/styles/css/vtex.store-footer.css @@ -1,11 +1,13 @@ -.row--menu-row { - padding-right: 24px; -} - -.row--menu-row .rowContainer { - align-items: flex-start; -} - -.row--payment-methods { - padding-top: 16px; -} +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap"); +.poweredBy { + display: none; +} \ 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 7e3d86a..3b1f4f4 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -20,6 +20,13 @@ padding: 0; } +.flexColChild--productRating { + display: none; +} + +.flexRowContent--shelf-product-row { + padding-bottom: 70px; +} // .flexCol--conteudo-imagens { // width: 98.35% !important; // } diff --git a/styles/sass/pages/product/vtex.modal-layout.scss b/styles/sass/pages/product/vtex.modal-layout.scss new file mode 100644 index 0000000..58d018e --- /dev/null +++ b/styles/sass/pages/product/vtex.modal-layout.scss @@ -0,0 +1,3 @@ +.triggerContainer--quickview { + display: none; +} diff --git a/styles/sass/pages/product/vtex.product-highlights.scss b/styles/sass/pages/product/vtex.product-highlights.scss new file mode 100644 index 0000000..755a1ff --- /dev/null +++ b/styles/sass/pages/product/vtex.product-highlights.scss @@ -0,0 +1,3 @@ +.productHighlightText { + display: none; +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 82d9ffe..a8281eb 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -3,6 +3,30 @@ display: none; } +.listPrice--summary { + display: block; + font-size: 14px; + line-height: 19px; + color: $color-gray13; + padding-bottom: 8px; + + &::before { + content: 'de '; + text-decoration: line-through; + } + + &::after { + content: ' por'; + text-decoration: line-through; + } +} + +.sellingPriceValue--summary { + font-weight: 700; + font-size: 24px; + line-height: 33px; +} + .sellingPrice { font-weight: 700; font-size: 25px; @@ -19,7 +43,7 @@ color: $color-gray7; &::after { - content: " x "; + content: ' x '; } } } @@ -31,12 +55,12 @@ color: $color-gray7; &::before { - content: "de "; + content: 'de '; font-weight: 400; } &::after { - content: " sem juros "; + content: ' sem juros '; font-weight: 400; } } diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..1c68ef4 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,25 @@ +// .container { +// margin: 0 8px; +// } + +.element { + padding: 0; +} + +.imageContainer { + width: 100%; +} +.containerNormal { + max-width: none !important; +} + +.brandName { + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $color-black2; +} + +.nameContainer { + padding: 16px 0 8px; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..eb6275f 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,11 @@ +.container--shelf-title { + justify-content: center; +} + +.heading--shelf-title { + margin: 16px 0 32px 0; + font-size: 24px; + line-height: 38px; + color: $color-gray6; + font-weight: 400; +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss new file mode 100644 index 0000000..1acf42c --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,75 @@ +.sliderLayoutContainer--slide-shelf { + padding: 0 19px; + margin: 0 0 113px; + + @include mq(md, max) { + margin: 0 0 105px; + padding: 0 17px; + } + + @include mq(sm, max) { + margin: 0 0 65px; + padding: 0 15px; + } + + .slideChildrenContainer { + margin: 0 8px; + + @include mq(md, max) { + margin: 0 6px; + } + + @include mq(sm, max) { + margin: 0 4px; + } + + .paginationDotsContainer { + top: calc(100% + 32px); + } + } +} + +.sliderLeftArrow--slide-shelf { + padding: 0; + margin: 0; + left: 0; + &::before { + content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-filipequintanilha.svg); + width: 11px; + height: 29px; + } +} + +.sliderRightArrow--slide-shelf { + padding: 0; + margin: auto; + right: 0; + + &::before { + content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-filipequintanilha.svg); + width: 11px; + height: 29px; + } +} + +.caretIcon--slide-shelf { + width: 0; + height: 0; +} + +.paginationDotsContainer--slide-shelf { + bottom: -42px; + align-items: center; + gap: 12px; +} + +.paginationDot--slide-shelf { + background-color: $color-black2; + margin: 0; +} +.paginationDot--slide-shelf--isActive { + background-color: white; + border: 1px solid $color-black2; + width: 17px !important; + height: 17px !important; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 1e58da0..09ec6b7 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -466,6 +466,16 @@ .productImagesContainer--first-image { width: 100%; } + + .productDescriptionTitle { + font-size: 20px; + line-height: 32px; + } + + .productDescriptionText { + font-size: 14px; + line-height: 19px; + } } @media screen and (min-width: 1920px) { diff --git a/styles/sass/pages/product/vtex.store-footer.scss b/styles/sass/pages/product/vtex.store-footer.scss new file mode 100644 index 0000000..bf53c7f --- /dev/null +++ b/styles/sass/pages/product/vtex.store-footer.scss @@ -0,0 +1,3 @@ +.poweredBy { + display: none; +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 6df61c0..3b9fa57 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -16,6 +16,7 @@ $color-gray9: #afafaf; $color-gray10: #868686; $color-gray11: #b9b9b9; $color-gray12: #bfbfbf; +$color-gray13: #bababa; $color-blue: #4267b2; @@ -25,10 +26,10 @@ $color-green: #4caf50; $grid-breakpoints: ( xs: 0, cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px, + sm: 769px, + md: 1025px, + lg: 1440px, + xl: 1920px, ) !default; $z-index: (