From cf963f53de07f5622f837ab790475ce70e7cd222 Mon Sep 17 00:00:00 2001 From: amanda almeida Date: Tue, 31 Jan 2023 22:16:13 -0300 Subject: [PATCH] =?UTF-8?q?feat(pix/prateleira):=20Adiciona=20css=20na=20p?= =?UTF-8?q?rateleira,=20e=20come=C3=A7o=20da=20cria=C3=A7=C3=A3o=20do=20co?= =?UTF-8?q?mponente=20pix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/Pix.tsx | 2 + react/Placeholder.js | 3 + react/Placeholder.tsx | 3 - react/components/pix/ValuePix.tsx | 19 +++ react/components/pix/index.tsx | 8 ++ react/components/placeholder/index.js | 11 ++ react/components/placeholder/index.tsx | 8 -- react/tsconfig.json | 4 +- store/blocks/pdp/product.jsonc | 72 +--------- store/blocks/pdp/slider-layout.jsonc | 70 ++++++++++ store/interfaces.json | 3 + styles/css/vtex.product-summary.css | 11 +- styles/css/vtex.slider-layout.css | 32 ++++- styles/css/vtex.store-components.css | 96 ++++++++++++- .../pages/product/vtex.product-summary.scss | 14 +- .../pages/product/vtex.slider-layout.scss | 36 ++++- .../pages/product/vtex.store-components.scss | 127 +++++++++++++++++- 17 files changed, 433 insertions(+), 86 deletions(-) create mode 100644 react/Pix.tsx create mode 100644 react/Placeholder.js delete mode 100644 react/Placeholder.tsx create mode 100644 react/components/pix/ValuePix.tsx create mode 100644 react/components/pix/index.tsx create mode 100644 react/components/placeholder/index.js delete mode 100644 react/components/placeholder/index.tsx create mode 100644 store/blocks/pdp/slider-layout.jsonc diff --git a/react/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..27d8f91 --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1,2 @@ +import Pix from "./components/pix"; +export default Pix; diff --git a/react/Placeholder.js b/react/Placeholder.js new file mode 100644 index 0000000..8980692 --- /dev/null +++ b/react/Placeholder.js @@ -0,0 +1,3 @@ +import Placeholder from "./components/placeholder"; + +export default Placeholder; diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx deleted file mode 100644 index 7f7396e..0000000 --- a/react/Placeholder.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { Placeholder } from "./components/placeholder"; - -export default Placeholder; diff --git a/react/components/pix/ValuePix.tsx b/react/components/pix/ValuePix.tsx new file mode 100644 index 0000000..3c8d235 --- /dev/null +++ b/react/components/pix/ValuePix.tsx @@ -0,0 +1,19 @@ +import { useProduct } from "vtex.product-context"; + +const Pix = () => { + const productContextValue = useProduct(); + console.log(productContextValue); + const price = productContextValue?.product?.priceRange.listPrice.highPrice; + console.log(price); + if (price !== undefined) { + const pix = (price / 100) * 10; + console.log(pix, "valor lido"); + const valuePix = price - pix; + console.log(valuePix); + return valuePix; + } else { + return "valor não encontrado"; + } +}; + +export default Pix; diff --git a/react/components/pix/index.tsx b/react/components/pix/index.tsx new file mode 100644 index 0000000..88d4ea9 --- /dev/null +++ b/react/components/pix/index.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import Pix from "./ValuePix"; + +const ValuePix = () => { + return

R$ {Pix}

; +}; + +export default ValuePix; diff --git a/react/components/placeholder/index.js b/react/components/placeholder/index.js new file mode 100644 index 0000000..8bcc31d --- /dev/null +++ b/react/components/placeholder/index.js @@ -0,0 +1,11 @@ +const Placeholder = () => { + const placeholderCep = document.querySelector(".vtex-address-form-4-x-input"); + + if (placeholderCep) { + return (placeholderCep.placeholder = "Digite seu CEP"); + } else { + return ""; + } +}; + +export default Placeholder; diff --git a/react/components/placeholder/index.tsx b/react/components/placeholder/index.tsx deleted file mode 100644 index 455c50e..0000000 --- a/react/components/placeholder/index.tsx +++ /dev/null @@ -1,8 +0,0 @@ -const Placeholder = () => { - const placeholderCep = ((document.getElementsByClassName( - "vtex-address-form-4-x-input" - )[0] as HTMLInputElement).placeholder = "Digite seu CEP"); - return placeholderCep; -}; - -export { Placeholder }; diff --git a/react/tsconfig.json b/react/tsconfig.json index 6fc5a98..efe58f6 100644 --- a/react/tsconfig.json +++ b/react/tsconfig.json @@ -11,6 +11,8 @@ "./typings/*.d.ts", "./**/*.tsx", "./**/*.ts", - "components/placeholder/index.jsx" + "components/placeholder/index.js", + "Placeholder.js", + "components/placeholder/index.js" ] } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 93669ca..1101b04 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -92,6 +92,7 @@ "product-rating-summary", "product-selling-price", "product-installments", + "pix", "html#sku-selector", "product-gifts", "html#buy-button", @@ -166,6 +167,7 @@ "html#product-availability": { "props": { + "blockClass": "product-main", "colGap": 7, "marginTop": 4, "marginBottom": 7, @@ -182,8 +184,8 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "sku-selector" ] }, "flex-layout.row#availability": { @@ -192,72 +194,10 @@ }, "children": ["availability-subscriber"] }, - "rich-text#prateleira": { - "props": { - "text": "Você também pode gostar:", - "blockClass": "title-prateleira" - } - }, - "html#product-summary.shelf": { + "availability-subscriber": { "props": { - "testId": "vtex-product-summary", - "blockClass": "produto-prateleira" - }, - "children": ["product-summary-image", "product-summary-name", "html#price"] - }, - - "html#price": { - "props": { - "blockClass": "price" - }, - "children": [ - "product-list-price#prateleira", - "product-selling-price#prateleira" - ] - }, - - "product-list-price#prateleira": { - "props": { - "blockClass": "prateleira", - "message": "de {listPriceValue} por " - } - }, - - "product-selling-price#prateleira": { - "props": { - "blockClass": "prateleira" - } - }, - - "product-summary.shelf#slider": { - "props": { - "blockClass": "produto-prateleira" - }, - "children": ["html#product-summary.shelf"] - }, - "list-context.product-list#prateleira": { - "blocks": ["product-summary.shelf#slider"], - "children": ["slider-layout#prateleira"] - }, - - "html#list-context.product-list#prateleira": { - "props": { - "testId": "product-summary-list", - "blockClass": "prateleira" - }, - "children": ["rich-text#prateleira", "list-context.product-list#prateleira"] - }, - - "slider-layout#prateleira": { - "props": { - "itemsPerPage": { - "desktop": 4, - "tablet": 3, - "phone": 2 - }, - "infinite": true, - "blockClass": "prateleira" + "blockClass": "message-availability" } } } diff --git a/store/blocks/pdp/slider-layout.jsonc b/store/blocks/pdp/slider-layout.jsonc new file mode 100644 index 0000000..93376cb --- /dev/null +++ b/store/blocks/pdp/slider-layout.jsonc @@ -0,0 +1,70 @@ +{ + "rich-text#prateleira": { + "props": { + "text": "Você também pode gostar:", + "blockClass": "title-prateleira" + } + }, + + "html#product-summary.shelf": { + "props": { + "testId": "vtex-product-summary", + "blockClass": "produto-prateleira" + }, + "children": ["product-summary-image", "product-summary-name", "html#price"] + }, + + "html#price": { + "props": { + "blockClass": "price" + }, + "children": [ + "product-list-price#prateleira", + "product-selling-price#prateleira" + ] + }, + + "product-list-price#prateleira": { + "props": { + "blockClass": "prateleira", + "message": "de {listPriceValue} por " + } + }, + + "product-selling-price#prateleira": { + "props": { + "blockClass": "prateleira" + } + }, + + "product-summary.shelf#slider": { + "props": { + "blockClass": "produto-prateleira" + }, + "children": ["html#product-summary.shelf"] + }, + "list-context.product-list#prateleira": { + "blocks": ["product-summary.shelf#slider"], + "children": ["slider-layout#prateleira"] + }, + + "html#list-context.product-list#prateleira": { + "props": { + "testId": "product-summary-list", + "blockClass": "prateleira" + }, + "children": ["rich-text#prateleira", "list-context.product-list#prateleira"] + }, + + "slider-layout#prateleira": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "blockClass": "prateleira" + } + } +} diff --git a/store/interfaces.json b/store/interfaces.json index 9555b36..b610fa0 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -8,5 +8,8 @@ }, "placeholder": { "component": "Placeholder" + }, + "pix": { + "component": "Pix" } } diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 32188ba..38ba2e4 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -21,8 +21,8 @@ align-items: center; justify-content: center; width: 100%; - max-width: 314px; - height: 314.4px; + max-width: 334.4px; + height: 334.4px; background: #EDEDED; } .container--produto-prateleira .nameContainer { @@ -40,4 +40,11 @@ } .container--produto-prateleira .priceContainer { padding: 0 0 32px; +} + +@media screen and (max-width: 1024px) { + .container--produto-prateleira .imageContainer { + max-width: 317.87px; + height: 317.87px; + } } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index bfe4103..33ad400 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -11,11 +11,14 @@ background-color: transparent; justify-content: center; } +.sliderLayoutContainer--prateleira .sliderTrack--prateleira { + gap: 16px; +} .sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira { width: 95.96%; } .sliderLayoutContainer--prateleira .slide--prateleira { - margin: 0 16px 0 0; + margin: 0; } .sliderLayoutContainer--prateleira .sliderArrows--prateleira { padding: 0; @@ -23,9 +26,36 @@ } .sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira { left: -12px; + width: 11.2px; + height: 29.6px; +} +.sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira::after { + content: ""; + position: absolute; + padding: 10px; + left: 1px; + box-shadow: 2px -2px 0 0px #000 inset; + border: solid transparent; + border-width: 0 0 1px 1px; + transform: rotate(45deg); +} +.sliderLayoutContainer--prateleira .caretIcon { + display: none; } .sliderLayoutContainer--prateleira .sliderRightArrow--prateleira { right: -12px; + width: 11.2px; + height: 29.6px; +} +.sliderLayoutContainer--prateleira .sliderRightArrow--prateleira::after { + content: ""; + position: absolute; + padding: 10px; + right: 1px; + box-shadow: 2px -2px 0 0px #000 inset; + border: solid transparent; + border-width: 0 0 1px 1px; + transform: rotate(-135deg); } .sliderLayoutContainer--prateleira .paginationDotsContainer { align-items: center; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index e7ca84c..6ada3d7 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 @@ -203,6 +204,17 @@ .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { width: 0; } +.shippingContainer :global(.vtex-address-form-4-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; +} +.shippingContainer :global(.vtex-address-form-4-x-input)::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #AFAFAF; +} .shippingContainer :global(.vtex-button) { width: 49px; height: 49px; @@ -314,6 +326,74 @@ color: #929292; } +.subscriberContainer .content { + flex-wrap: wrap; + justify-content: start; + margin-top: 16px; +} +.subscriberContainer .title { + font-size: 0; +} +.subscriberContainer .title::after { + content: "Produto indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} +.subscriberContainer .subscribeLabel { + font-size: 0; +} +.subscriberContainer .subscribeLabel::after { + content: "Deseja saber quando estiver disponível?"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} +.subscriberContainer .input { + width: 195.5px; + height: 40px; + margin: 0; +} +.subscriberContainer .inputName { + margin-right: 8px; +} +.subscriberContainer :global(.vtex-input-prefix__group) { + border: 1px solid #989898; + border-radius: 0; +} +.subscriberContainer :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} +.subscriberContainer :global(.vtex-button) { + width: 399px; + height: 49px; + margin-top: 15px; + border: 0; + background: #000000; +} +.subscriberContainer :global(.vtex-button__label) { + font-size: 0; + width: 100%; +} +.subscriberContainer :global(.vtex-button__label)::after { + content: "AVISE-ME"; + font-weight: 600; + font-size: 18px; + line-height: 25px; + display: flex; + align-items: center; + color: #FFFFFF; +} + @media screen and (max-width: 1024px) { .productImageTag--main { max-height: 994px !important; @@ -321,7 +401,7 @@ .productNameContainer { text-align: start; } - .imageElement { + .productImagesContainer--description { width: 100%; max-height: 944px; } @@ -332,6 +412,20 @@ padding-bottom: 16px; border-bottom: 1px solid #B9B9B9; } + .subscriberContainer .content { + max-width: 100%; + display: flex; + } + .subscriberContainer .submit { + width: 100%; + } + .subscriberContainer .input { + width: 49.3%; + max-width: 378.5px; + } + .subscriberContainer :global(.vtex-button) { + width: 100%; + } } @media screen and (max-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode) { diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index c36bb77..d5341ef 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -14,8 +14,8 @@ align-items: center; justify-content: center; width: 100%; - max-width: 314px; - height: 314.4px; + max-width: 334.4px; + height: 334.4px; background: #EDEDED; } @@ -39,3 +39,13 @@ padding: 0 0 32px; } } + +@media screen and (max-width: 1024px) { + .container--produto-prateleira { + .imageContainer { + max-width: 317.87px; + height: 317.87px; + } + } + +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 6daec76..ade1eec 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -2,12 +2,16 @@ background-color: transparent; justify-content: center; + .sliderTrack--prateleira { + gap: 16px; + } + .sliderTrackContainer--prateleira { width: 95.96%; } .slide--prateleira { - margin: 0 16px 0 0; + margin: 0; } .sliderArrows--prateleira { @@ -17,10 +21,40 @@ .sliderLeftArrow--prateleira { left: -12px; + width: 11.2px; + height: 29.6px; + + &::after { + content: ""; + position: absolute; + padding: 10px; + left: 1px; + box-shadow: 2px -2px 0 0px #000 inset; + border: solid transparent; + border-width: 0 0 1px 1px; + transform: rotate(45deg); + } + } + + .caretIcon { + display: none; } .sliderRightArrow--prateleira { right: -12px; + width: 11.2px; + height: 29.6px; + + &::after { + content: ""; + position: absolute; + padding: 10px; + right: 1px; + box-shadow: 2px -2px 0 0px #000 inset; + border: solid transparent; + border-width: 0 0 1px 1px; + transform: rotate(-135deg); + } } .paginationDotsContainer { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 027eefc..b080ff2 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -219,6 +219,20 @@ } + :global(.vtex-address-form-4-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + + &::placeholder { + font-weight: 400; + font-size: 12px; + line-height: 16px; + + color: #AFAFAF; + } + } + :global(.vtex-button) { width: 49px; height: 49px; @@ -353,6 +367,97 @@ color: #929292; } +.subscriberContainer { + .content { + flex-wrap: wrap; + justify-content: start; + margin-top: 16px; + } + + .title { + font-size: 0; + + &::after { + content: "Produto indisponível"; + font-weight: 700; + font-size: 14px; + line-height: 19px; + + display: flex; + align-items: center; + + color: #868686; + } + } + + .subscribeLabel { + font-size: 0; + + &::after { + content: "Deseja saber quando estiver disponível?"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + display: flex; + align-items: center; + + color: #868686; + } + } + + .input { + width: 195.5px; + height: 40px; + margin: 0; + + } + + .inputName { + margin-right: 8px; + } + + :global(.vtex-input-prefix__group) { + border: 1px solid #989898; + border-radius: 0; + } + + :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + + color: #989898; + } + + :global(.vtex-button) { + width: 399px; + height: 49px; + margin-top: 15px; + border: 0; + background: #000000; + } + + :global(.vtex-button__label) { + font-size: 0; + width: 100%; + + &::after { + content: "AVISE-ME"; + font-weight: 600; + font-size: 18px; + line-height: 25px; + + display: flex; + align-items: center; + + color: #FFFFFF; + } + } + + +} + @media screen and (min-width: 1920px) {} @@ -366,7 +471,7 @@ text-align: start; } - .imageElement { + .productImagesContainer--description { width: 100%; max-height: 944px; } @@ -379,6 +484,26 @@ padding-bottom: 16px; border-bottom: 1px solid #B9B9B9; } + + .subscriberContainer { + .content { + max-width: 100%; + display: flex; + } + + .submit { + width: 100%; + } + + .input { + width: 49.3%; + max-width: 378.5px; + } + + :global(.vtex-button) { + width: 100%; + } + } } @media screen and (max-width: 768px) {