From 236fabddf66d0345b299a59484aee157b85219ff Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Mon, 30 Jan 2023 16:05:21 -0300 Subject: [PATCH] feat: adiciona prateleira --- react/components/PixPrice/PixPrice.tsx | 6 +- store/blocks/pdp/product.jsonc | 26 ++++++++- styles/css/vtex.product-summary.css | 58 +++++-------------- styles/css/vtex.rich-text.css | 8 ++- styles/css/vtex.slider-layout.css | 49 ++++++++-------- .../pages/product/vtex.product-summary.scss | 6 ++ styles/sass/pages/product/vtex.rich-text.scss | 6 ++ .../pages/product/vtex.slider-layout.scss | 18 ++++++ 8 files changed, 102 insertions(+), 75 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-summary.scss create mode 100644 styles/sass/pages/product/vtex.rich-text.scss create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss diff --git a/react/components/PixPrice/PixPrice.tsx b/react/components/PixPrice/PixPrice.tsx index 0dae1c6..6d393c4 100644 --- a/react/components/PixPrice/PixPrice.tsx +++ b/react/components/PixPrice/PixPrice.tsx @@ -4,11 +4,9 @@ import styles from "./styles.module.css"; const PixPrice = () => { useEffect(() => { - const inputCep = document.querySelectorAll(".vtex-address-form-4-x-input"); + const inputCep = document.querySelector(".vtex-address-form-4-x-input"); - // inputCep.setAttribute('placeholder', 'Digite seu CEP'); - - console.log(inputCep); + inputCep?.setAttribute("placeholder", "Digite seu CEP"); }); const productContextValue = useProduct(); diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 43b1702..e22ba85 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,7 +7,9 @@ "html#productDescription", // "flex-layout.row#specifications-title", // "product-specification-group#table", - "shelf.relatedProducts", + // "shelf.relatedProducts", + "rich-text#shelfTitle", + "list-context.product-list#shelfProducts", "product-questions-and-answers" ] }, @@ -223,5 +225,27 @@ "Pinterest": false } } + }, + + "rich-text#shelfTitle": { + "props": { + "textAlignment": "CENTER", + "textPosition": "CENTER", + "text": "# Você também pode gostar:", + "blockClass": "shelfTitleText" + } + }, + + "product-summary.shelf#shelfProducts": { + "children": [ + "product-summary-image", + "product-summary-name", + "product-price" + ] + }, + + "list-context.product-list#shelfProducts": { + "blocks": ["product-summary.shelf#shelfProducts"], + "children": ["slider-layout#demo-products"] } } diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..d813a22 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,16 @@ -.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; -} - -.imageContainer { - text-align: center; -} - -.image { - border-radius: 0.25rem; -} +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* Grid breakpoints */ +.imageWrapper { + height: 314px; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index d88705b..eb4c5eb 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,7 +6,11 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); /* Grid breakpoints */ -.paragraph--product-installments { - margin: 0; +.headingLevel1--shelfTitleText { + 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..6b45fd8 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,28 @@ -.sliderLayoutContainer { +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* Grid breakpoints */ +.paginationDotsContainer--shelf { + display: flex; justify-content: center; + align-items: center; } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.paginationDot--shelf { + background: #292929; + width: 10px !important; + height: 10px !important; } -.sliderTrackContainer { - max-width: 100%; -} - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; -} - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; -} - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; -} +.paginationDot--shelf--isActive { + width: 17px !important; + height: 17px !important; + border: 0.5px solid #292929; + background: transparent; +} \ 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..254a5bc --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,6 @@ +.imageWrapper { + height: 314px; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss new file mode 100644 index 0000000..c025edb --- /dev/null +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,6 @@ +.headingLevel1--shelfTitleText { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; +} 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..3850792 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,18 @@ +.paginationDotsContainer--shelf { + display: flex; + justify-content: center; + align-items: center; +} + +.paginationDot--shelf { + background: $color-black; + width: 10px !important; + height: 10px !important; +} + +.paginationDot--shelf--isActive { + width: 17px !important; + height: 17px !important; + border: 0.5px solid $color-black; + background: transparent; +}