From 329456e670f2571f5024946d7a0202fd79bd4f1b Mon Sep 17 00:00:00 2001 From: Rhayllon Date: Fri, 10 Feb 2023 06:05:16 -0300 Subject: [PATCH] =?UTF-8?q?Feat(Pdp):=20Cria=20prateleira=20de=20produtos?= =?UTF-8?q?=20relacionados=20e=20cria=20o=20esbo=C3=A7o=20do=20componente?= =?UTF-8?q?=20custom=20Pix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/Pix.tsx | 3 + react/components/Pix/Pix.tsx | 13 +++ store/blocks/pdp/product.jsonc | 96 +++++++++++------ store/interfaces.json | 5 + styles/css/vtex.flex-layout.css | 2 +- styles/css/vtex.product-price.css | 101 +++++------------- styles/css/vtex.product-quantity.css | 4 +- styles/css/vtex.product-summary.css | 64 +++++------ styles/css/vtex.rich-text.css | 9 +- styles/css/vtex.slider-layout.css | 58 ++++++---- styles/css/vtex.store-components.css | 5 +- styles/css/vtex.tab-layout.css | 7 +- .../sass/pages/product/vtex.flex-layout.scss | 2 +- .../pages/product/vtex.product-price.scss | 18 ++++ .../pages/product/vtex.product-quantity.scss | 4 +- .../pages/product/vtex.product-summary.scss | 37 +++++++ styles/sass/pages/product/vtex.rich-text.scss | 7 ++ .../pages/product/vtex.slider-layout.scss | 35 ++++++ .../pages/product/vtex.store-components.scss | 6 +- .../sass/pages/product/vtex.tab-layout.scss | 7 +- styles/sass/utils/_vars.scss | 2 + 21 files changed, 306 insertions(+), 179 deletions(-) create mode 100644 react/Pix.tsx create mode 100644 react/components/Pix/Pix.tsx create mode 100644 styles/sass/pages/product/vtex.product-price.scss create mode 100644 styles/sass/pages/product/vtex.product-summary.scss create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss diff --git a/react/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..22c3905 --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1,3 @@ +import Pix from "./components/Pix/Pix"; + +export default Pix; \ No newline at end of file diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx new file mode 100644 index 0000000..1cf0eeb --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,13 @@ +import React from 'react' +import { useProduct } from 'vtex.product-context' + +const Pix = () => { + const product = useProduct() + // console.log(product) + var pixValue = product?.product?.priceRange?.sellingPrice?.lowPrice; + return ( +
{pixValue}
+ ) +} + +export default Pix \ No newline at end of file diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 655ac11..7ca9da8 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -6,8 +6,8 @@ "tab-layout#descriptionLayout", // "flex-layout.row#specifications-title", // "product-specification-group#table", - // "shelf.relatedProducts", - "list-context.product-list#demo1", + "rich-text#otherProductTitle", + "list-context.product-list#prateleira", "product-questions-and-answers" ] }, @@ -29,50 +29,67 @@ } }, - "product-summary.shelf#demo1": { + "rich-text#otherProductTitle": { + "props": { + "text": "### Você também pode gostar:", + "textAlignment": "CENTER", + "textPosition": "CENTER", + "blockClass": "otherProdcutTitle" + } + }, + + "product-summary.shelf#prateleira": { + "props": { + "blockClass": "prateleiraShelf" + }, "children": [ - "product-summary-name", - "product-summary-description", - "product-summary-image", - "product-summary-price", - "product-summary-sku-selector", - "product-summary-buy-button" + "product-summary-image#prateleiraImg", + "product-summary-name#prateleira", + "product-list-price#prateleira", + "product-selling-price#prateleira" ] }, - "slider-layout#demo-products": { + "product-summary-image#prateleiraImg": { + "props": { + "blockClass": "prateleiraImg" + } + }, + + "product-summary-name#prateleira": { + "props": { + "blockClass": "prateleiraProductName" + } + }, + + "product-list-price#prateleira": { + "props": { + "blockClass": "prateleira" + } + }, + + "product-selling-price#prateleira": { + "props": { + "blockClass": "prateleira" + } + }, + + "slider-layout#prateleiraSlider": { "props": { "itemsPerPage": { - "desktop": 3, - "tablet": 1, - "phone": 1 + "desktop": 4, + "tablet": 3, + "phone": 2 }, "infinite": true, "showNavigationArrows": "desktopOnly", - "blockClass": "carousel" + "blockClass": "prateleiraSlider" } - // "children": ["rich-text#1AA", "rich-text#2AA", "rich-text#3AA"] }, - // "rich-text#1AA": { - // "props": { - // "text": "ADADADAD" - // } - // }, - // "rich-text#2AA": { - // "props": { - // "text": "FGFGFGFG" - // } - // }, - // "rich-text#3AA": { - // "props": { - // "text": "GHGHGHGHHGH" - // } - // }, - - "list-context.product-list#demo1": { - "blocks": ["product-summary.shelf#demo1"], - "children": ["slider-layout#demo-products"] + "list-context.product-list#prateleira": { + "blocks": ["product-summary.shelf#prateleira"], + "children": ["slider-layout#prateleiraSlider"] }, "flex-layout.col#description": { @@ -321,7 +338,9 @@ "product-rating-summary", "product-identifier.product#identifierMain", "flex-layout.row#selling-price", - "product-installments", + "html#productInstallments", + "example-component", + "pix", "product-separator", "sku-selector#inverseOrder", "html#wrapperQuantity", @@ -330,6 +349,13 @@ ] }, + "html#productInstallments": { + "props": { + "testId": "product-installments" + }, + "children": ["product-installments"] + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3 diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..cc2c7a7 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -2,6 +2,11 @@ "example-component": { "component": "Example" }, + + "pix": { + "component": "Pix" + }, + "html": { "component": "html", "composition": "children" diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 4721e88..ed1f9f3 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -22,7 +22,7 @@ height: 49px; } .flexRow--buyButton .flexRowContent--buyButton :global(.vtex-button) { - background-color: #292929; + background-color: #000000; color: #fff; font-style: normal; font-weight: 400; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..b398cf6 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,28 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; +/* +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 */ +.listPrice--prateleira { + padding: 0 16px 8px 16px; + margin: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; } -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; +.sellingPrice--prateleira--hasListPrice { + padding: 0 16px; + font-family: "Open Sans"; + font-style: normal; font-weight: 700; -} - -.installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - font-weight: 500; - color: #79B03A; -} - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; -} - -.savings--summary { - background: #8BC34A; - border-radius: 1000px; - align-items: center; - display: flex; - - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; -} - -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.listPrice--summary { - margin-bottom: 0.25rem; - font-size: .875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.savings--summaryPercentage { - background: #0f3e99; - border-radius: 1000px; - align-items: center; - display: flex; -} - -.savingsPercentage--summaryPercentage { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; -} + font-size: 24px; + line-height: 33px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 383a7e1..00f9476 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -21,12 +21,12 @@ border-left: 0; border-radius: 0; width: 2.5em !important; - color: black; + color: #000000; } .quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__minus-button) { border: 1px solid #CCCCCC; border-right: 0; border-radius: 0; width: 2.5em !important; - color: black; + color: #000000; } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..81f9e46 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,42 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; +/* +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 */ +.containerNormal--prateleiraShelf { + max-width: 315px !important; } -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; +.element--prateleiraShelf { + outline: 0; } -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; +.nameContainer--prateleiraProductName { + padding: 16px 16px 8px 16px; } - -@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; +.nameContainer--prateleiraProductName .brandName--prateleiraProductName { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { + line-height: 25px; text-align: center; + color: #000000; } -.image { - border-radius: 0.25rem; +.imageWrapper--prateleiraImg, +.imageContainer--prateleiraImg, +.image--prateleiraImg { + min-height: 314px; } +@media screen and (max-width: 1280px) { + .imageWrapper--prateleiraImg, + .imageContainer--prateleiraImg, + .image--prateleiraImg { + min-height: 285px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..c9dd8b4 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,11 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.heading--otherProdcutTitle { + margin: 16px 0 24px 0; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..1b5436d 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,47 @@ -.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 */ +.sliderLayoutContainer--prateleiraSlider { + width: 90.63%; + margin: 0 auto 101px auto; } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.sliderArrows--prateleiraSlider { + margin: 0; + padding: 0; } -.sliderTrackContainer { - max-width: 100%; +.sliderRightArrow--prateleiraSlider { + right: -2.53%; } -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +.sliderLeftArrow--prateleiraSlider { + left: -2.53%; } -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +.paginationDotsContainer--prateleiraSlider { + bottom: -32px; + align-items: center; +} +.paginationDotsContainer--prateleiraSlider .paginationDot--prateleiraSlider { + height: 10px !important; + width: 10px !important; + background-color: #000000; + margin: 0 6px; +} +.paginationDotsContainer--prateleiraSlider .paginationDot--prateleiraSlider--isActive { + height: 17px !important; + width: 17px !important; + background-color: #fff !important; + border: 0.5px solid #000000; } -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; -} +.slide--prateleiraSlider { + padding: 0 8px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 92c92b3..3bcc85e 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -55,6 +55,9 @@ padding-top: 16.1px; text-decoration: underline; } +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + color: black; +} .shippingContainer :global(.vtex__icon-external-link) { display: none; } @@ -65,7 +68,7 @@ position: relative; right: 129px; margin-top: 24px; - background-color: #292929; + background-color: #000000; font-size: 0; border: none; border-radius: 0; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 8468ccb..070233f 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -8,7 +8,8 @@ /* Media Query M3 */ /* Grid breakpoints */ .container--descriptionLayout { - margin: 0 40px; + width: 94.44%; + margin: 0 auto; } .container--descriptionLayout .listContainer--descriptionButtonWrapper { justify-content: space-between; @@ -36,9 +37,9 @@ } .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button) { background-color: #fff; - color: #292929; + color: #000000; border: 0; - border-bottom: 2px solid #292929; + border-bottom: 2px solid #000000; border-radius: 0; font-style: normal; font-weight: 400; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index dc5e4b2..20ba3dc 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -12,7 +12,7 @@ height: 49px; :global(.vtex-button){ - background-color: $color-black; + background-color: $color-black2; color: $color-white; font-style: normal; font-weight: 400; diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..fc0c2fa --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,18 @@ +.listPrice--prateleira{ + padding: 0 16px 8px 16px; + margin: 0; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray9; +} +.sellingPrice--prateleira--hasListPrice{ + padding: 0 16px; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 76d3fc0..10eae7e 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -12,13 +12,13 @@ border-left: 0; border-radius: 0; width: 2.5em !important; - color: black; + color: $color-black2; } :global(.vtex-numeric-stepper__minus-button){ border: 1px solid #CCCCCC; border-right: 0; border-radius: 0; width: 2.5em !important; - color: black; + color: $color-black2; } } \ 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 new file mode 100644 index 0000000..60bb2fa --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,37 @@ +.containerNormal--prateleiraShelf{ + max-width: 315px !important; +} +.element--prateleiraShelf{ + outline: 0; +} +.nameContainer--prateleiraProductName{ + padding: 16px 16px 8px 16px; + + .brandName--prateleiraProductName{ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: $color-black2; + } + // .nameWrapper--prateleiraProductName{ + // min-height: 50px; + // } +} +.imageWrapper--prateleiraImg, +.imageContainer--prateleiraImg, +.image--prateleiraImg{ + min-height: 314px; + + @media screen and (min-width: 2500px) { + + } + @media screen and (max-width: 1024px) { + + } + @media screen and (max-width: 1280px) { + min-height: 285px; + } +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..1d9d9d5 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,7 @@ +.heading--otherProdcutTitle{ + margin: 16px 0 24px 0; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; +} \ 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 new file mode 100644 index 0000000..33a12df --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,35 @@ +.sliderLayoutContainer--prateleiraSlider{ + width: 90.63%; + margin: 0 auto 101px auto; +} +.sliderArrows--prateleiraSlider{ + margin: 0; + padding: 0; +} +.sliderRightArrow--prateleiraSlider{ + right: -2.53%; +} +.sliderLeftArrow--prateleiraSlider{ + left: -2.53%; +} +.paginationDotsContainer--prateleiraSlider{ + bottom: -32px; + align-items: center; + + .paginationDot--prateleiraSlider{ + height: 10px !important; + width: 10px !important; + background-color: $color-black2; + margin: 0 6px; + + &--isActive{ + height: 17px !important; + width: 17px !important; + background-color: $color-white !important; + border: 0.5px solid $color-black2; + } + } +} +.slide--prateleiraSlider{ + padding: 0 8px; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 9d3e682..2ca2f94 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -46,6 +46,10 @@ padding-top: 16.1px; text-decoration: underline; + :last-child{ + color: black; + } + } :global(.vtex__icon-external-link){ display: none; @@ -58,7 +62,7 @@ position: relative; right: 129px; margin-top: 24px; - background-color: $color-black; + background-color: $color-black2; font-size: 0; border: none; border-radius: 0; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index bb96da3..61bb40e 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,5 +1,6 @@ .container--descriptionLayout{ - margin: 0 40px; + width: 94.44%; + margin: 0 auto; .listContainer--descriptionButtonWrapper{ justify-content: space-between; @@ -26,9 +27,9 @@ margin-top: 2px; :global(.vtex-button){ background-color: $color-white; - color: $color-black; + color: $color-black2; border: 0; - border-bottom: 2px solid $color-black; + border-bottom: 2px solid $color-black2; border-radius: 0; font-style: normal; font-weight: 400; diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index a8e4e3c..ac559f3 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,4 +1,5 @@ $color-black: #292929; +$color-black2: #000000; $color-white: #fff; @@ -10,6 +11,7 @@ $color-gray5: #e5e5e5; $color-gray6: #B9B9B9; $color-gray7: #CCCCCC; $color-gray8: #bfbfbf; +$color-gray9: #bababa; $color-blue: #4267b2;