From 364a9b2003d20c960f47e413000620b353ee23ce Mon Sep 17 00:00:00 2001 From: Carlos Lins Date: Tue, 24 Jan 2023 21:23:44 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20Finaliza=C3=A7=C3=A3o=20Descri=C3=A7ao?= =?UTF-8?q?=20PDP=20e=20Slider=20Related=20Products=20Desktop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/ProductReference.tsx | 3 - react/SKUSelectorPDP.tsx | 3 - .../descont-pix/assets/logo-pix.png | Bin 1411 -> 0 bytes .../descont-pix/assets/logo-pix.svg | 38 ---- react/components/descont-pix/index.tsx | 3 +- .../components/description-section/index.tsx | 13 +- .../components/description-section/styles.css | 44 ++--- react/components/installments/index.tsx | 7 + react/components/product-reference/index.tsx | 28 --- react/components/product-reference/styles.css | 13 -- react/components/sku-selector-pdp/index.tsx | 11 -- react/components/sku-selector-pdp/styles.css | 3 - store/blocks/pdp/product.jsonc | 179 ++++++++++++++++-- store/interfaces.json | 6 - styles/css/vtex.flex-layout.css | 9 + styles/css/vtex.product-highlights.css | 22 +-- styles/css/vtex.product-identifier.css | 23 ++- styles/css/vtex.product-summary.css | 101 +++++++--- styles/css/vtex.rich-text.css | 14 +- styles/css/vtex.slider-layout.css | 66 ++++--- styles/css/vtex.stack-layout.css | 20 +- styles/css/vtex.tab-layout.css | 49 +++++ .../sass/pages/product/vtex.flex-layout.scss | 11 ++ .../product/vtex.product-highlights.scss | 3 + .../product/vtex.product-identifier.scss | 17 ++ .../pages/product/vtex.product-summary.scss | 88 +++++++++ styles/sass/pages/product/vtex.rich-text.scss | 14 ++ .../pages/product/vtex.slider-layout.scss | 49 +++++ .../sass/pages/product/vtex.stack-layout.scss | 3 + .../sass/pages/product/vtex.tab-layout.scss | 51 +++++ 30 files changed, 646 insertions(+), 245 deletions(-) delete mode 100644 react/ProductReference.tsx delete mode 100644 react/SKUSelectorPDP.tsx delete mode 100644 react/components/descont-pix/assets/logo-pix.png delete mode 100644 react/components/descont-pix/assets/logo-pix.svg delete mode 100644 react/components/product-reference/index.tsx delete mode 100644 react/components/product-reference/styles.css delete mode 100644 react/components/sku-selector-pdp/index.tsx delete mode 100644 react/components/sku-selector-pdp/styles.css create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.product-highlights.scss create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss create mode 100644 styles/sass/pages/product/vtex.product-summary.scss create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss create mode 100644 styles/sass/pages/product/vtex.stack-layout.scss create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/react/ProductReference.tsx b/react/ProductReference.tsx deleted file mode 100644 index c951523..0000000 --- a/react/ProductReference.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { ProductReference } from "./components/product-reference"; - -export default ProductReference; diff --git a/react/SKUSelectorPDP.tsx b/react/SKUSelectorPDP.tsx deleted file mode 100644 index aa22d81..0000000 --- a/react/SKUSelectorPDP.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import { SkuSelectorPDP } from "./components/sku-selector-pdp"; - -export default SkuSelectorPDP; diff --git a/react/components/descont-pix/assets/logo-pix.png b/react/components/descont-pix/assets/logo-pix.png deleted file mode 100644 index fcfe58ee42aa30e82f0b2a2e606b2e8809da20c2..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1411 zcmV-}1$_F6P)X1^@s6g&p|Z00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPKPJ-Dt$odH^`vr_D@gXNeB{}4TbPLD?=?N^JKmq|WC&VdLNu`8OsY+6X zbWhpK6R>&$i*js0yE~Jfl~xhbY9$d>fs?;#i)FTFH1o|&ch4YvL`v2UOA2{ROqGf;yk(rWx_b&DL~wo~?3-#Ks# zdi?v(1)jb7pHIK7!weM*q6^`KUkB;W1V*t^u?EZXYirI(yURo?pU<=={WeV>MuJHG z`lCg2#v2%h5b8!Sip4`yo4ZIOk|l&3>NpXa+^I#kEw}Rd4wUV3r4W2Wup~+QhxPSR z*cR!Rx&HdXgKAhWPCL8%IVrI>wnz|N2x=u*5U;6Wl=olOJe2vUneW#wcN9_9v)QcO zU#_4CFHwq`eKotfz@pdY_G4gd?{OO-j`MwO4>`*zASea4s?G$qJPQZ8Ngyaaf4*Ll zpluG8qXcJe!C#E3quTY_^BH{}4~xa&ZKo7~9DtxS1VYX3>o324z-uJ~hz`U_!j{nJ z(WEOvqO>M~(6bl#s$8xt!4y&}g<)rO1B+_w^nX(mA!rzaQV)ch)yIGQa>kG3=PiHw zTo9&s4x$~9fDFg;Gx9}P=WOiCi0}z<@^oQKInm0zreI}|%r=vguR)vUwp&$@)A7vH(ai*PZGUNDuQ}x5x-mO&QASh9+Pf##4cyW9);$S=~wugg^+GB=3F>?tsdB2QLf~rcY4s-zHH~ zTO&QTMFoSzCdb_;aS(b!ScO?gXeNiysgoon1%W^`v)Q$3xJ~AatKuko8tDuNC85dI z%}MNW(l*CvPRdnJM|;|O{Sd-31;Zt|Ro?3)XM-XM;uVZjH$w2Hkde-FKx}pd|57Rs z5ac(f3Aaj75JGiU22`V9=u*>iDC86Fy%pK=HRp)H{-Pj!Oc4P)SUI%k*zV}f({D;} zL#chN8|_U_dXQ7;!Zh_%y3G)rC3dfU!{X%VxHm9~C7ug+_TK^=*X&}mtL9n}Gq-tqtoa0jJ_ zFFXK;|0LBd5F|{K46#a*Y9nhR6bVID2tN()-#hk7W+o2uwxkc0m<&Nk-X;^JwrP#@ zq;Hxj_{cSU=;DSQ#Ut z34>x_kEVeT`iQV2hVj8_3o^k2N7pF{-~(#fqI)G8y3Us{yefS^ajfj*{QO&a;Xc@4 zC#nEwzFd}wraDsVpg-eTIpylgnJ#jW=bQ&0Ze+jT-r1?7{e{G_{-MoBdfDQXyQ!gX zA!!arOUd0>;&6XH^71xzWpp4+y%LbX30@MHCh*{bcZOgX!X)w>@3VV#7e#{&S{|4C zKA#a3ETWeC&P7#L-alAYUSH!&8zG=>s5XRu>RoYtZbK5BvjbO=r`hQ$|K?wpNf4sp zwfzQo!bXX<=Zlu>%2QWj12nS7U*7hj2|Nr6Bs4fWq`S`b|0f1wst5j~`WydE@+nTa R7T*8>002ovPDHLkV1kTrg}wj) diff --git a/react/components/descont-pix/assets/logo-pix.svg b/react/components/descont-pix/assets/logo-pix.svg deleted file mode 100644 index 1021608..0000000 --- a/react/components/descont-pix/assets/logo-pix.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/react/components/descont-pix/index.tsx b/react/components/descont-pix/index.tsx index af25c9a..4d2dca7 100644 --- a/react/components/descont-pix/index.tsx +++ b/react/components/descont-pix/index.tsx @@ -1,7 +1,6 @@ import React, { FC } from 'react' import { useProduct } from 'vtex.product-context' import styles from "./styles.css"; -import logopix from "./assets/logo-pix.png"; export const DescontPix: FC = () => { @@ -12,7 +11,7 @@ export const DescontPix: FC = () => { return (
- Desconto no PIX + Logo PIX
R$ {sellingPrice.toFixed(2).replace(".", ",")} 10 % de desconto diff --git a/react/components/description-section/index.tsx b/react/components/description-section/index.tsx index 8cc0e57..2d5d5af 100644 --- a/react/components/description-section/index.tsx +++ b/react/components/description-section/index.tsx @@ -9,18 +9,8 @@ export const DescriptionSection: FC = () => { const imageProduct = productContextValue?.product?.items[0].images[0].imageUrl; const imageProductAlt = productContextValue?.product?.productName; const descriptionProduct = productContextValue?.product?.description; - return ( -
- + return (
{imageProductAlt}
@@ -28,6 +18,5 @@ export const DescriptionSection: FC = () => {

{descriptionProduct}

-
); } diff --git a/react/components/description-section/styles.css b/react/components/description-section/styles.css index 3aaf8fe..8fada6f 100644 --- a/react/components/description-section/styles.css +++ b/react/components/description-section/styles.css @@ -1,37 +1,25 @@ -.containerDescriptionSection{ +.wrapperImageAndDescription{ display: flex; - flex-direction: column; - padding: 0 40px; + gap: 32px; } -.containerDescriptionSectionNav{ - display: flex; - list-style: none; - padding: 0 64px; - justify-content: space-between; +.imageProductDescriptionSection{ + margin-left: 32px; + width: 632px; + height: 632px; } -.linkContainer{ - width: 114px; - height: 38px; - display: grid; - place-items: center; - - border-bottom: 2px solid #000000; -} - -.linkContainer a:active{ +.descriptionSectionTitle{ font-weight: 400; - font-size: 18px; - line-height: 38px; - color: #000000; - text-decoration: none; + font-size: 24px; + line-height: 32px; + color: #575757; } -/* .active{ +.descriptionSectionParagraph{ font-weight: 400; - font-size: 18px; - line-height: 38px; - color: #000000; - text-decoration: none; -} */ + font-size: 16px; + line-height: 22px; + + color: #929292; +} diff --git a/react/components/installments/index.tsx b/react/components/installments/index.tsx index 2bf9072..011482f 100644 --- a/react/components/installments/index.tsx +++ b/react/components/installments/index.tsx @@ -4,6 +4,13 @@ import styles from "./styles.css"; export const Installments: FC = () => { + // INSERIR PLACEHOLDER NO INPUT CEP + if (typeof document !== 'undefined') { + const inputCEP = document.querySelector(".vtex-address-form-4-x-input"); + inputCEP?.setAttribute("placeholder", "Digite seu CEP") + console.log(inputCEP); + } + const productContextValue = useProduct(); let sellingPrice = Number(productContextValue?.product?.priceRange.sellingPrice.highPrice)/4; diff --git a/react/components/product-reference/index.tsx b/react/components/product-reference/index.tsx deleted file mode 100644 index d8cc358..0000000 --- a/react/components/product-reference/index.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React, { FC } from 'react' -import { useProduct } from 'vtex.product-context' -import styles from "./styles.css"; - -export const ProductReference: FC = () => { - - // MODIFICAÇÂO DE TITULOS DE ALGUNS ELEMENTOS - // if (typeof document !== 'undefined') { - // const titleSizeSKU = document.querySelectorAll(".vtex-store-components-3-x-skuSelectorName"); - // titleSizeSKU[1].innerHTML = "Outros Tamanhos:" - // titleSizeSKU[0].innerHTML = "Outras Cores" - // } - - if (typeof document !== 'undefined') { - const inputCEP = document.querySelector(".vtex-address-form-4-x-input"); - inputCEP?.setAttribute("placeholder", "Digite seu CEP") - console.log(inputCEP); - } - - const productContextValue = useProduct(); - console.log(productContextValue) - - return ( -
- {productContextValue?.product?.productReference} -
- ); -} diff --git a/react/components/product-reference/styles.css b/react/components/product-reference/styles.css deleted file mode 100644 index 19931b9..0000000 --- a/react/components/product-reference/styles.css +++ /dev/null @@ -1,13 +0,0 @@ -.containerProductReference{ - display: flex; - justify-content: right; - margin-bottom: 16px; -} - -.productReference{ - font-weight: 400; - font-size: 14px; - line-height: 19px; - text-align: right; - color: rgba(146, 146, 146, 0.48); -} diff --git a/react/components/sku-selector-pdp/index.tsx b/react/components/sku-selector-pdp/index.tsx deleted file mode 100644 index 8411caa..0000000 --- a/react/components/sku-selector-pdp/index.tsx +++ /dev/null @@ -1,11 +0,0 @@ - - -export const SkuSelectorPDP = () => { - - if (typeof document !== 'undefined') { - const inputCEP = document.querySelector(".vtex-address-form-4-x-input"); - console.log(inputCEP); - } - - return null; -} diff --git a/react/components/sku-selector-pdp/styles.css b/react/components/sku-selector-pdp/styles.css deleted file mode 100644 index 3a99065..0000000 --- a/react/components/sku-selector-pdp/styles.css +++ /dev/null @@ -1,3 +0,0 @@ -.containerSKUSelector{ - display: flex; -} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 1784b91..efe12ba 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,11 +3,8 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "description-section", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", + "html#DescriptionSectionPDP", + "flex-layout.row#related-products-pdp", "product-questions-and-answers" ], "props": { @@ -22,6 +19,161 @@ }, "children": ["breadcrumb"] }, + + "html#DescriptionSectionPDP":{ + "children": [ + "tab-layout#pdp" + ] + }, + + "tab-layout#pdp": { + "children": [ + "tab-list#pdp", + "tab-content#pdp" + ], + "props": { + "blockClass": "description-pdp-tab-layout", + "defaultActiveTabId": "description1" + } +}, + +"tab-list#pdp": { + "children": [ + "tab-list.item#description1", + "tab-list.item#description2", + "tab-list.item#description3", + "tab-list.item#description4", + "tab-list.item#description5" + ], + "props": { + "blockClass": "container-list-tab-layout-pdp" + } +}, +"tab-list.item#description1": { + "props": { + "tabId": "description1", + "label": "Descrição", + "defaultActiveTab": true + } +}, +"tab-list.item#description2": { + "props": { + "tabId": "description2", + "label": "Descrição" + } +}, +"tab-list.item#description3": { + "props": { + "tabId": "description3", + "label": "Descrição", + "defaultActiveTab": true + } +}, +"tab-list.item#description4": { + "props": { + "tabId": "description4", + "label": "Descrição" + } +}, +"tab-list.item#description5": { + "props": { + "tabId": "description5", + "label": "Descrição", + "defaultActiveTab": true + } +}, +"tab-content#pdp": { + "children": [ + "tab-content.item#description1", + "tab-content.item#description2", + "tab-content.item#description3", + "tab-content.item#description4", + "tab-content.item#description5" + ] + }, + "tab-content.item#description1": { + "children": [ + "description-section" + ], + "props": { + "tabId": "description1" + } + }, + "tab-content.item#description2": { + "children": [ + "description-section" + ], + "props": { + "tabId": "description2" + } + }, + "tab-content.item#description3": { + "children": [ + "description-section" + ], + "props": { + "tabId": "description3" + } + }, + "tab-content.item#description4": { + "children": [ + "description-section" + ], + "props": { + "tabId": "description4" + } + }, + "tab-content.item#description5": { + "children": [ + "description-section" + ], + "props": { + "tabId": "description5" + } + }, + + "rich-text#title-related-products": { + "props": { + "text": "### Você também pode gostar:", + "blockClass": "title-related-products" + } + }, + + "product-summary.shelf#demo1": { + "children": [ + "stack-layout#prodsum", + "product-summary-name", + "product-summary-price" + ], + "props":{ + "blockClass": "container-product-summary-related-products-pdp", + "maxWidth": "100%" + } + }, + "list-context.product-list#demo1": { + "blocks": ["product-summary.shelf#demo1"], + "children": ["slider-layout#demo-products"] + }, + + "slider-layout#demo-products": { + "props": { + "blockClass": "container-slider-related-products-pdp", + "itemsPerPage": { + "desktop": 4 + } + } + }, + + "flex-layout.row#related-products-pdp":{ + "props": { + "blockClass": "container-related-products-pdp" + }, + "children": [ + "rich-text#title-related-products", + "list-context.product-list#demo1" + ] + }, + "flex-layout.row#specifications-title": { "children": ["rich-text#specifications"] }, @@ -38,7 +190,6 @@ }, "condition-layout.product#availability": { "props": { - "blockClass": "vtex.store-components-3", "conditions": [ { "subject": "isProductAvailable" @@ -115,24 +266,17 @@ }, "children": [ "flex-layout.row#product-name", - "product-reference", + "product-identifier.product", "flex-layout.row#selling-price", "installments", "descont-pix", - // "product-separator", - // "product-identifier.product", - // "sku-selector-pdp", "sku-selector", "flex-layout.row#quantity-and-buy-button", - // "product-quantity", - // "product-assembly-options", - // "product-gifts", - // "flex-layout.row#buy-button", "availability-subscriber", "shipping-simulator" - // "share#default" ] }, + "flex-layout.row#quantity-and-buy-button": { "props": { "blockClass": "container-quantity-and-buy-button" @@ -153,11 +297,6 @@ "width": "100%" } }, - "product-reference": { - "props": { - "blockClass": "title-product-reference" - } - }, "flex-layout.row#product-name": { "props": { diff --git a/store/interfaces.json b/store/interfaces.json index e23f04a..722c9d6 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -2,18 +2,12 @@ "example-component": { "component": "Example" }, - "product-reference": { - "component": "ProductReference" - }, "installments": { "component": "Installments" }, "descont-pix": { "component": "DescontPix" }, - "sku-selector-pdp": { - "component": "SKUSelectorPDP" - }, "description-section": { "component": "DescriptionSection" }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 2149ee4..0f36af1 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -14,6 +14,7 @@ display: grid; grid-template-columns: 48.824% 1fr; grid-column-gap: 32px; + padding-bottom: 16px; } .flexRow--container-product-main .flexRowContent--container-product-main .stretchChildrenWidth { padding-right: 0; @@ -44,4 +45,12 @@ .container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { width: 100%; +} + +.flexRowContent--container-related-products-pdp { + flex-direction: column; + padding: 0 61px; +} +.flexRowContent--container-related-products-pdp .stretchChildrenWidth { + width: 100% !important; } \ No newline at end of file diff --git a/styles/css/vtex.product-highlights.css b/styles/css/vtex.product-highlights.css index c08e8e4..e9df25f 100644 --- a/styles/css/vtex.product-highlights.css +++ b/styles/css/vtex.product-highlights.css @@ -1,12 +1,12 @@ +/* +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 */ .productHighlightWrapper--collection { - position: absolute; - top: 10px; - left: 5px; - width: 200px; -} - -.productHighlightText { - background: antiquewhite; - border-radius: 20px; - padding: 5px 10px; -} + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..ee1e0a2 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,24 @@ +/* +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 */ .product-identifier--productReference { - margin-bottom: 1rem; + display: flex; + justify-content: flex-end; + margin-bottom: 16px; } +.product-identifier--productReference .product-identifier__label, .product-identifier--productReference .product-identifier__separator { + display: none; +} +.product-identifier--productReference .product-identifier__value { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + color: rgba(146, 146, 146, 0.48); +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..1a8e3aa 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,81 @@ -.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--container-product-summary-related-products-pdp { + max-width: 100% !important; } - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; +.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp { + padding: 0; } - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; +.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .imageStackContainer { + display: flex; } - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } +.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .imageStackContainer .imageNormal { + max-height: 100% !important; } - -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; +.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .nameContainer { + padding: 16px 0 8px 0; } - -.brandName { - font-weight: 600; +.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .nameContainer .productBrand { + font-weight: 400; font-size: 18px; - color: #2E2E2E; + line-height: 25px; + color: #000000; } - -.container { - text-align: start; +.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer { + padding: 0; } - -.imageContainer { +.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPriceLabel { + display: none; +} +.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPriceContainer { + padding: 0; +} +.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice::before { + content: "de "; + font-weight: 400; + font-size: 14px; + line-height: 19px; text-align: center; + text-decoration-line: line-through; + color: #BABABA; } - -.image { - border-radius: 0.25rem; +.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice::after { + content: " por"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #BABABA; } +.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .listPrice .currencyContainer { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #BABABA; +} +.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .sellingPriceContainer { + padding: 0; + margin-top: 8px; +} +.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .sellingPriceContainer .sellingPriceLabel { + display: none; +} +.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .sellingPriceContainer .currencyContainer { + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; +} +.containerNormal--container-product-summary-related-products-pdp .element--container-product-summary-related-products-pdp .priceContainer .installmentContainer { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..9b4a1aa 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,16 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--title-related-products { + justify-content: center; + margin-top: 16px; + margin-bottom: 32px; +} +.container--title-related-products .heading--title-related-products { + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + margin: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..b009796 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--container-slider-related-products-pdp { + margin-bottom: 113px; } - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.sliderLayoutContainer--container-slider-related-products-pdp .sliderTrack--container-slider-related-products-pdp { + gap: 16px; } - -.sliderTrackContainer { - max-width: 100%; +.sliderLayoutContainer--container-slider-related-products-pdp .sliderLeftArrow--container-slider-related-products-pdp { + left: -36px; } - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +.sliderLayoutContainer--container-slider-related-products-pdp .sliderLeftArrow--container-slider-related-products-pdp .caretIcon--container-slider-related-products-pdp { + display: none; } - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +.sliderLayoutContainer--container-slider-related-products-pdp .sliderLeftArrow--container-slider-related-products-pdp::after { + content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowLeftjosecarloslins.svg"); } - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +.sliderLayoutContainer--container-slider-related-products-pdp .sliderRightArrow--container-slider-related-products-pdp { + right: -30px; } +.sliderLayoutContainer--container-slider-related-products-pdp .sliderRightArrow--container-slider-related-products-pdp .caretIcon--container-slider-related-products-pdp { + display: none; +} +.sliderLayoutContainer--container-slider-related-products-pdp .sliderRightArrow--container-slider-related-products-pdp::after { + content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowRightjosecarloslins.svg"); +} +.sliderLayoutContainer--container-slider-related-products-pdp .paginationDotsContainer--container-slider-related-products-pdp { + bottom: -42px; + display: flex; + align-items: center; +} +.sliderLayoutContainer--container-slider-related-products-pdp .paginationDotsContainer--container-slider-related-products-pdp .paginationDot--container-slider-related-products-pdp { + background-color: #000000; +} +.sliderLayoutContainer--container-slider-related-products-pdp .paginationDotsContainer--container-slider-related-products-pdp .paginationDot--container-slider-related-products-pdp--isActive { + width: 17px !important; + height: 17px !important; + background-color: #FFFFFF; + border: 0.5px solid #000000; +} \ No newline at end of file diff --git a/styles/css/vtex.stack-layout.css b/styles/css/vtex.stack-layout.css index 7149eb7..b22234c 100644 --- a/styles/css/vtex.stack-layout.css +++ b/styles/css/vtex.stack-layout.css @@ -1,10 +1,12 @@ -.stackItem--product { - width: 100%; - min-height: 257px -} - +/* +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 */ .stackItem--quickview { - right: 0; - top: 0; - left: auto; -} + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..0132a3a --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,49 @@ +/* +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 */ +.container--description-pdp-tab-layout { + padding: 0 40px; +} + +.listContainer--container-list-tab-layout-pdp { + display: flex; + list-style: none; + padding: 0 64px; + justify-content: space-between; + border-bottom: 1px solid #B9B9B9; + margin-bottom: 32px; +} +.listContainer--container-list-tab-layout-pdp .listItem { + width: 114px; + height: 38px; + display: grid; + place-items: center; + padding: 0; + margin: 0; +} +.listContainer--container-list-tab-layout-pdp .listItem :global(.vtex-button) { + border: 0; + width: max-content; + min-height: auto; + background: transparent; +} +.listContainer--container-list-tab-layout-pdp .listItem :global(.vtex-button) :global(.vtex-button__label) { + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #BFBFBF; + text-transform: capitalize; + padding: 0 !important; +} +.listContainer--container-list-tab-layout-pdp .listItemActive { + border-bottom: 2px solid #000000; +} +.listContainer--container-list-tab-layout-pdp .listItemActive :global(.vtex-button) :global(.vtex-button__label) { + color: #000000; +} \ 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 fe5872e..2bbed2c 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -4,6 +4,8 @@ display: grid; grid-template-columns: 48.824% 1fr; grid-column-gap: 32px; + + padding-bottom: 16px; .stretchChildrenWidth{ padding-right: 0; } @@ -40,3 +42,12 @@ .container-quantity-and-buy-button :global(.vtex-flex-layout-0-x-stretchChildrenWidth){ width: 100%; } + +.flexRowContent--container-related-products-pdp{ + flex-direction: column; + padding: 0 61px; + + .stretchChildrenWidth{ + width: 100% !important; + } +} 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..1df0678 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-highlights.scss @@ -0,0 +1,3 @@ +.productHighlightWrapper--collection{ + display: none; +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..4846395 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,17 @@ +.product-identifier--productReference{ + display: flex; + justify-content: flex-end; + margin-bottom: 16px; + + .product-identifier__label, .product-identifier__separator{ + display: none; + } + + .product-identifier__value{ + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + color: rgba(146, 146, 146, 0.48); + } +} 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..beb920e --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,88 @@ +.containerNormal--container-product-summary-related-products-pdp{ + max-width: 100% !important; + + .element--container-product-summary-related-products-pdp{ + padding: 0; + + .imageStackContainer{ + display: flex; + + .imageNormal{ + max-height: 100% !important; + } + } + + .nameContainer{ + padding: 16px 0 8px 0; + + .productBrand{ + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #000000; + } + } + + .priceContainer{ + padding: 0; + + .listPriceLabel{ + display: none; + } + + .listPriceContainer{ + padding: 0; + } + + .listPrice{ + &::before{ + content: "de "; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #BABABA; + } + + &::after{ + content: " por"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #BABABA; + } + + .currencyContainer{ + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + text-decoration-line: line-through; + color: #BABABA; + } + } + + .sellingPriceContainer{ + padding: 0; + margin-top: 8px; + .sellingPriceLabel{ + display: none; + } + + .currencyContainer{ + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; + } + } + + .installmentContainer{ + display: none; + } + } + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..382d229 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,14 @@ +.container--title-related-products{ + justify-content: center; + margin-top: 16px; + margin-bottom: 32px; + + .heading--title-related-products{ + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + + margin: 0; + } +} 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..5f70910 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,49 @@ +.sliderLayoutContainer--container-slider-related-products-pdp { + margin-bottom: 113px; + .sliderTrack--container-slider-related-products-pdp{ + gap: 16px; + } + + .sliderLeftArrow--container-slider-related-products-pdp{ + left: -36px; + + .caretIcon--container-slider-related-products-pdp{ + display: none; + } + + &::after{ + content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowLeftjosecarloslins.svg"); + } + } + .sliderRightArrow--container-slider-related-products-pdp{ + right: -30px; + + .caretIcon--container-slider-related-products-pdp{ + display: none; + } + + &::after{ + content: url("https://agenciamagma.vteximg.com.br/arquivos/arrowRightjosecarloslins.svg"); + } + } + + .paginationDotsContainer--container-slider-related-products-pdp{ + bottom: -42px; + display: flex; + align-items: center; + + .paginationDot--container-slider-related-products-pdp{ + background-color: #000000; + } + + .paginationDot--container-slider-related-products-pdp--isActive{ + width: 17px !important; + height: 17px !important; + background-color: #FFFFFF; + + border: 0.5px solid #000000; + } + } +} + + diff --git a/styles/sass/pages/product/vtex.stack-layout.scss b/styles/sass/pages/product/vtex.stack-layout.scss new file mode 100644 index 0000000..2573843 --- /dev/null +++ b/styles/sass/pages/product/vtex.stack-layout.scss @@ -0,0 +1,3 @@ +.stackItem--quickview{ + display: none; +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..61b0a3b --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,51 @@ +.container--description-pdp-tab-layout{ + padding: 0 40px; +} + +.listContainer--container-list-tab-layout-pdp{ + display: flex; + list-style: none; + padding: 0 64px; + justify-content: space-between; + + border-bottom: 1px solid #B9B9B9; + + margin-bottom: 32px; + + .listItem{ + width: 114px; + height: 38px; + display: grid; + place-items: center; + + padding: 0; + margin: 0; + + :global(.vtex-button){ + border: 0; + width: max-content; + min-height: auto; + background: transparent; + + :global(.vtex-button__label){ + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #BFBFBF; + text-transform: capitalize; + + padding: 0 !important; + } + } + } + + .listItemActive{ + border-bottom: 2px solid #000000; + + :global(.vtex-button){ + :global(.vtex-button__label){ + color: #000000; + } + } + } +}