diff --git a/docs/Todo.md b/docs/Todo.md index 0fc80a1..d08b1b8 100644 --- a/docs/Todo.md +++ b/docs/Todo.md @@ -11,7 +11,7 @@ os Requisitos cobrados serão: {cm:2023-02-07} - HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p {cm:2023-02-07} -- FIXME [Blocos que devem ser ajustado e desenvolvidos](6){ +- FIXME [Blocos que devem ser ajustado e desenvolvidos](testeid){ - [x] 1. BreadCrumb; {cm:2023-01-31} @@ -23,9 +23,9 @@ os Requisitos cobrados serão: {cm:2023-02-07} - HACK 5. prateleira de produtos, {cm:2023-02-07} - - HACK 6. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc) + - HACK 6. fazer o pix.(se ele for um bloco custom adiciona ele na linha 104 do bloco product.jsonc) {cm:2023-02-10} - - HACK 7.Fazer o cep + - HACK 7.Fazer o cep {cm:2023-02-10} - FIXME COLOCAR OS TESTESID!!!!! @@ -36,8 +36,8 @@ os Requisitos cobrados serão: {cm:2023-02-07} {cm:2023-01-25} -* FIXME Bloco de Preço com Desconto deve ser CUSTOM +* FIXME Bloco de Preço com Desconto deve ser CUSTOM {cm:2023-02-10} -* FIXME O bloco de cores do produto deve ser feito com o bloco de produtos similares da VTEX. +* FIXME O bloco de cores do produto deve ser feito com o bloco de produtos similares da VTEX. {cm:2023-02-10} -* FIXME Os Comentários que estão no figma devem ser seguidos, incluindo aqueles que falam qual bloco da Vtex vcs devem usar no desenvolvimento. +* FIXME Os Comentários que estão no figma devem ser seguidos, incluindo aqueles que falam qual bloco da Vtex vcs devem usar no desenvolvimento. {cm:2023-02-10} diff --git a/react/CEP.tsx b/react/CEP.tsx new file mode 100644 index 0000000..fe88985 --- /dev/null +++ b/react/CEP.tsx @@ -0,0 +1,3 @@ +import CEP from "./components/ProductContext/cep"; + +export default CEP; diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx new file mode 100644 index 0000000..8ca0212 --- /dev/null +++ b/react/Placeholder.tsx @@ -0,0 +1,3 @@ +import Placeholder from "./components/ProductContext/Placeholder"; + +export default Placeholder; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 9d35e26..961c1b0 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -20,7 +20,10 @@ display: flex; flex-direction: column; } -.html--pdp-pixPrice div span[datatype='span_wrapper'] span[class="pix_wrapper-price"]{ +.html--pdp-pixPrice div span[datatype='span_wrapper'] p{ + margin: 0; +} +.html--pdp-pixPrice div span[datatype='span_wrapper'] p[class="pix_wrapper-price"]{ font-family: 'Open Sans',sans-serif; font-style: normal; font-weight: 700; @@ -29,7 +32,7 @@ color: rgba(0, 0, 0, 0.58); white-space: nowrap; } -.html--pdp-pixPrice div span[datatype='span_wrapper'] span[class='pix_wrapper-Discount']{ +.html--pdp-pixPrice div span[datatype='span_wrapper'] p[class='pix_wrapper-Discount']{ font-family: 'Open Sans',sans-serif; font-style: normal; font-weight: 300; @@ -46,7 +49,9 @@ .html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{ width: 50%; } - +.html--card-button{ + width: -webkit-fill-available; +} .html--buy-button{ display: flex; gap: 10px; @@ -55,13 +60,13 @@ margin-top: 16px; } .html--pdp-productMain :global(.vtex-button),.html--availability :global(.vtex-button){ - display: block; + display: none; } .html--buy-button :global(.vtex-button){ display: block; background: black; height: 49px; - max-width: 77.354%; + max-width: 97.05%; border: 1px solid black; } .html--pdp-section_descriptions{ @@ -73,7 +78,7 @@ @media screen and (min-width: 1920px){ .html--buy-button :global(.vtex-button){ max-width: 766px; - width: 80.126%; + width: 96%; } .html--pdp-productMain,.html--availability{ padding-right: 12.5393%; @@ -193,3 +198,17 @@ padding-left: 0px; } } +:global(.vtex-address-form__postalCode-forgottenURL) a{ + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-decoration-line: underline; + color: #000000; +} +:global(.vtex-address-form__postalCode-forgottenURL) a span{ + display: none; +} diff --git a/react/components/ProductContext/Pix.tsx b/react/components/ProductContext/Pix.tsx index 4b8c073..7a70488 100644 --- a/react/components/ProductContext/Pix.tsx +++ b/react/components/ProductContext/Pix.tsx @@ -1,36 +1,43 @@ -import React, { useRef, useEffect } from 'react'; +import React from 'react'; import { useProduct } from 'vtex.product-context'; -const Pix: React.FC = () => { - const buttonRef = useRef(null); - useEffect(() => { - if (buttonRef.current) { - buttonRef.current.innerHTML = 'Novo texto'; - buttonRef.current.setAttribute('placeholder', 'Novo placeholder'); - } - }, []); +type price = { + discountRate:number +} +const Pix = ({ discountRate}:price) => { const { product } = useProduct() let pixprice = product?.priceRange.sellingPrice.lowPrice - let desconto = 10 + let desconto = discountRate >= 0 ? discountRate : 10; let finalprice = pixprice - (pixprice/desconto) let RoundedNumber = Number(Math.round(finalprice * 100) / 100); const formattedNumber = RoundedNumber.toLocaleString('pt-BR', { minimumFractionDigits: 2, maximumFractionDigits: 2, }); - console.log('productContex',product) return (
Logo do Pix - +

R$ {formattedNumber} - - {desconto} % de desconto +

+

{desconto} % de desconto
) } - +Pix.schema = { + title:"Pix-Price", + description:"quantos % o pagamento via pix irá proporcionar", + type:"object", + properties:{ + discountRate:{ + title: "Pix-Price", + description:"quantos % o pagamento via pix irá proporcionar", + type:"number", + default:10 + } + } +} export default Pix diff --git a/react/components/ProductContext/Placeholder.tsx b/react/components/ProductContext/Placeholder.tsx new file mode 100644 index 0000000..136ddd4 --- /dev/null +++ b/react/components/ProductContext/Placeholder.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +const Placeholder = () => { + if (typeof document !== "undefined") { + const Placeholder = document.querySelector(".vtex-address-form-4-x-input") + const placeholdertamanho = document.querySelector(".vtex-store-components-3-x-skuSelectorSubcontainer--tamanho .vtex-store-components-3-x-skuSelectorName"); + const placeholdercor = document.querySelector(".vtex-store-components-3-x-skuSelectorSubcontainer--cor .vtex-store-components-3-x-skuSelectorName"); + console.log(placeholdertamanho) + if(placeholdertamanho){ + placeholdertamanho.textContent = "OUTROS TAMANHOS:"; + } + if(placeholdercor){ + placeholdercor.textContent = "OUTRAS CORES:"; + } + Placeholder?.setAttribute("Placeholder","Digite seu CEP") + } + return( + <> + + ) +} +export default Placeholder; diff --git a/react/components/ProductContext/cep.tsx b/react/components/ProductContext/cep.tsx new file mode 100644 index 0000000..1dc2e4b --- /dev/null +++ b/react/components/ProductContext/cep.tsx @@ -0,0 +1,50 @@ +import React from 'react'; + +const CEP = () => { + function handleButtonClick(){ + setTimeout(() => { + if (typeof document !== "undefined"){ + const tr = document.querySelector('.vtex-store-components-3-x-shippingTableRow'); + const trRow = document.querySelectorAll('.vtex-store-components-3-x-shippingTableBody .vtex-store-components-3-x-shippingTableRow '); + const tdEstimate = document.querySelectorAll('.vtex-store-components-3-x-shippingTableCellDeliveryEstimate'); + const thEstimate = document.querySelector('.vtex-store-components-3-x-shippingTableHeadDeliveryEstimate'); + const thPrice = document.querySelector('.vtex-store-components-3-x-shippingTableHeadDeliveryPrice'); + if(tdEstimate){ + tdEstimate.forEach((row) => { + if(row.parentNode){ + row.parentNode.removeChild(row); + } + }); + + trRow.forEach((row, index) => { + const td = tdEstimate[index]; + row.appendChild(td); + }); + } + if(tr){ + if(thEstimate){ + thEstimate.textContent = "PRAZO"; + tr.removeChild(thEstimate); + tr.appendChild(thEstimate); + } + if(thPrice){ + thPrice.textContent = "FRETE"; + tr.removeChild(thPrice); + tr.insertBefore(thPrice,thEstimate); + } + } + } + }, 1000); + } + if (typeof document !== "undefined") { + const btnCep = document.querySelector(".vtex-store-components-3-x-shippingContainer .vtex-button"); + if (btnCep) { + btnCep.addEventListener('click', handleButtonClick); + } + } + return( + <> + + ) +} +export default CEP; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 700f7d8..15e7ed2 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -1,6 +1,8 @@ { "store.product": { "children": [ + "html#Placeholder", + "html#CEP", "html#breadcrumb", "condition-layout.product#availability", "html#departaments", @@ -8,12 +10,25 @@ "html#carousel" ] }, - "html#Pix":{ + "html#Pix": { "props": { + "testId": "pix-price", "blockClass": "pdp-pixPrice" }, "children": ["Pix"] }, + "html#Placeholder": { + "children": ["Placeholder"] + }, + "html#CEP": { + "children": ["CEP"] + }, + "html#tab-layout": { + "props": { + "testId": "tab-layout" + }, + "children": ["tab-layout#pdp"] + }, "tab-layout#pdp": { "children": [ "tab-list#pdp", @@ -118,13 +133,14 @@ }, "html#prateleira": { "props": { - "testId": "vtex-product-sumary" + "testId": "vtex-product-summary" }, "children": [ - "product-summary-image#shelfpdp", + "stack-layout#pdp", "product-summary-name", "product-list-price#summary", - "product-selling-price#summary" + "html#selling-price", + "flex-layout.row#selling-price-savingspdp" ] }, "html#carousel": { @@ -138,11 +154,17 @@ }, "list-context.product-list#pdp": { "blocks": ["product-summary.shelf#Pdp"], - "children": ["slider-layout#demo-products#pdp"], + "children": ["html#slider"], "props": { "orderBy": "OrderByTopSaleDESC" } }, + "html#slider": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#demo-products#pdp"] + }, "slider-layout#demo-products#pdp": { "props": { "itemsPerPage": { @@ -155,14 +177,9 @@ "blockClass": "pdp-carrousel" } }, - "product-summary.shelf#Pdp": { "children": [ - "stack-layout#pdp", - "product-summary-name", - "product-list-price#summary", - "product-selling-price#summarypdp", - "flex-layout.row#selling-price-savingspdp" + "html#prateleira" ] }, @@ -208,8 +225,6 @@ "children": ["breadcrumb"] }, - - "flex-layout.row#specifications-title": { "children": ["rich-text#specifications"] }, @@ -249,7 +264,7 @@ "testId": "Product-Images", "blockClass": "pdp-productMain" }, - "children": ["html#stack", "html#right-col"] + "children": ["html#stack", "html#right-col"] }, "flex-layout.row#product-main": { "props": { @@ -260,8 +275,8 @@ "marginBottom": 0, "paddingTop": 0, "paddingBottom": 0, - "paddingright":0, - "paddingleft":0 + "paddingright": 0, + "paddingleft": 0 } }, @@ -291,7 +306,7 @@ "testId": "product-description", "blockClass": "pdp-section_descriptions" }, - "children": ["tab-layout#pdp"] + "children": ["html#tab-layout"] }, "html#description": { @@ -307,12 +322,13 @@ "children": ["stack-layout"], "props": { "width": "50%", - "blockClass": "StackLayout" + "blockClass": "StackLayout", + "testId": "product-images" } }, "flex-layout.row#product-image": { - "props":{ + "props": { "blockClass": "product-image" }, "children": ["product-images"] @@ -351,52 +367,83 @@ "blockClass": "pdp-InfoBuy" }, "children": [ - "flex-layout.row#product-name", + "html#product-name", "product-rating-summary", "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", - "product-installments", + "html#product-installments", "html#Pix", - "sku-selector", + "html#sku-selector", "product-assembly-options", "product-gifts", "html#buy-button", "availability-subscriber", - "shipping-simulator", + "html#shipping-simulator", "share#default" ] }, - "shipping-simulator": { - "props": {} + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + "html#product-installments": { + "props": { + "testId": "product-installments" + }, + "children": ["product-installments"] }, "product-installments": { "props": { "message": "{installmentsNumber} de {installmentValue} sem juros" } }, + + "html#selling-price": { + "props": { + "testId": "product-price" + }, + "children": ["product-selling-price#summarypdp"] + }, + "product-selling-price#summarypdp": { "props": { "blockClass": "desconto", "message": "de {sellingPriceWithTax} por" } }, + + "html#product-name": { + "props": { + "testId": "product-name" + }, + "children": ["flex-layout.row#product-name"] + }, "flex-layout.row#product-name": { "props": { "marginBottom": 3, "blockClass": "title" }, - "children": [ - "product-identifier.product", - "vtex.store-components:product-name" - ] + "children": ["html#código", "vtex.store-components:product-name"] + }, + "html#código": { + "props": { + "testId": "product-code" + }, + "children": ["product-identifier.product"] }, - "product-identifier.product": { "props": { - "label": "hide", //'default' | 'custom' | 'hide' - "blockClass": "sku" + "label": "hide" //'default' | 'custom' | 'hide' } }, + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, "sku-selector": { "props": { "variationsSpacing": 3, @@ -405,7 +452,7 @@ }, "flex-layout.row#buy-button": { - "children": ["product-quantity", "add-to-cart-button"] + "children": ["html#product-quantity", "add-to-cart-button"] }, "html#buy-button": { "props": { @@ -413,7 +460,13 @@ "marginBottom": 7, "blockClass": "buy-button" }, - "children": ["product-quantity", "add-to-cart-button"] + "children": ["html#product-quantity", "html#add-to-cart-button#pdp"] + }, + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["product-quantity"] }, "product-quantity": { "props": { @@ -422,7 +475,14 @@ "size": "regular" } }, - "add-to-cart-button": { + "html#add-to-cart-button#pdp": { + "props": { + "blockClass": "card-button", + "testId": "add-to-cart-button" + }, + "children": ["add-to-cart-button#pdp"] + }, + "add-to-cart-button#pdp": { "props": { "text": "ADICIONAR À SACOLA" } @@ -432,17 +492,14 @@ "props": { "blockClass": "availability" }, - "children": [ - "html#stack", - "html#right-col-availability" - ] + "children": ["html#stack", "html#right-col-availability"] }, "html#right-col-availability": { "props": { "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", + "html#product-name", "flex-layout.row#availability", "sku-selector" ] @@ -454,7 +511,7 @@ "children": ["availability-subscriber"] }, - "availability-subscriber":{ + "availability-subscriber": { "props": { "blockClass": "message-availability" } diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index aa14868..41db674 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -8,9 +8,15 @@ "marginBottom": 4 }, "children": [ - "product-selling-price" + "html#selling--price" ] }, + "html#selling--price":{ + "props":{ + "testId": "product-price" + }, + "children": ["product-selling-price"] + }, "product-selling-price#ProducyImage":{ "props":{ "blockClass": "price" diff --git a/store/interfaces.json b/store/interfaces.json index a4662c7..0384170 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,6 +5,12 @@ "Pix": { "component": "Pix" }, + "Placeholder": { + "component": "Placeholder" + }, + "CEP": { + "component": "CEP" + }, "html": { "component": "html", diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8f3d246..051d83d 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -63,22 +63,16 @@ left: 0; right: 0; } +.skuSelectorContainer .skuSelectorName { + text-transform: uppercase; + font-family: "Open Sans", sans-serif; +} .skuSelectorContainer .skuSelectorSubcontainer--cor { height: 75px; } .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList { height: 48px; } -.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName { - text-transform: uppercase; - font-family: "Open Sans", sans-serif; -} -.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after { - content: "ES:"; -} -.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before { - content: "OUTRAS "; -} .skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround { width: 40px; height: 40px; @@ -91,16 +85,6 @@ width: 40px; height: 40px; } -.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName { - text-transform: uppercase; - font-family: "Open Sans", sans-serif; -} -.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after { - content: "S:"; -} -.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::before { - content: "OUTROS "; -} .skuSelectorContainer .skuSelectorInternalBox { border: 2px solid #B9B9B9; } @@ -246,6 +230,13 @@ .form { width: max-content; } +@media screen and (max-width: 1024px) { + .form { + width: 100%; + display: flex; + justify-content: center; + } +} .form .content { width: 65.532%; height: 108px; @@ -255,6 +246,11 @@ grid-template-rows: 1fr 1fr; gap: 8px; } +@media screen and (max-width: 1024px) { + .form .content { + width: 100%; + } +} .form .content .inputName, .form .content .inputEmail { width: 100%; height: 40px; @@ -262,6 +258,11 @@ margin-right: 0; margin-bottom: 7px; } +@media screen and (max-width: 1024px) { + .form .content .inputName, .form .content .inputEmail { + min-width: 0; + } +} .form .submit { width: 100%; justify-content: center; @@ -269,6 +270,7 @@ grid-row: 2; } .form .submit :global(.vtex-button) { + display: block; width: 100%; background: #000000; width: 308px; @@ -294,4 +296,157 @@ line-height: 28px; padding: 14px 14px 16px; color: #989898; +} + +.shippingContainer { + display: grid; + position: relative; + align-items: end; + width: max-content; +} +@media screen and (max-width: 1024px) { + .shippingContainer { + max-width: 100%; + min-width: 93.665%; + grid-template-columns: 1fr auto; + grid-template-rows: 1fr 1fr; + height: 100px; + } +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: grid; + grid-column: 1/2; + padding: 0; + min-width: 230px; +} +@media screen and (max-width: 1024px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + min-width: 100%; + max-width: 100%; + width: 100%; + grid-row: 1; + } +} +.shippingContainer :global(.vtex-button) { + display: block; + grid-column: 2/3; + background: #000000; + width: 100%; + height: max-content; + border: 0; + border-radius: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; + padding: 0; + padding-top: 0 !important; + padding-bottom: 0 !important; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { + content: "ok"; + padding: 14px; + min-height: 21px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #FFFFFF; +} +.shippingContainer :global(.vtex-input) { + grid-column: 1/2; +} +.shippingContainer :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: 1px solid #CCCCCC; + height: 49px; + max-width: 100%; + border-radius: 0; +} +.shippingContainer :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { + color: #AFAFAF; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + padding: 16.5px 16px; +} +.shippingContainer :global(.vtex-input) :global(.vtex-input__label) { + font-size: 0; + width: max-content; +} +.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after { + content: "CALCULAR FRETE:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + width: max-content; + position: absolute; + grid-column: 3/4; + right: 0; + bottom: 25%; + left: 0; + margin-left: 32px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-decoration-line: underline; +} +@media screen and (max-width: 1024px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + margin-left: 0; + grid-column: 1/4; + left: auto; + bottom: 0; + } +} + +.shippingTable { + border: 0; + width: max-content; +} +.shippingTable .shippingTableHead { + display: table-row-group; + vertical-align: middle; + text-align: center; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} +.shippingTable .shippingTableHead .shippingTableRow { + width: 100%; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + text-transform: uppercase; + padding-bottom: 15px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { + padding-bottom: 15px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn { + display: none; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell, .shippingTable .shippingTableBody .shippingTableRow .shippingTableLabel, .shippingTable .shippingTableBody .shippingTableRow .currencyContainer { + font-size: 12px; + line-height: 16px; + color: #AFAFAF; + text-align: start; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; } \ 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 f4a374e..61f2b5c 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -50,24 +50,16 @@ left: 0; right: 0; } + .skuSelectorName{ + text-transform: uppercase; + font-family: 'Open Sans',sans-serif; + } .skuSelectorSubcontainer-{ &-cor{ height: 75px; .skuSelectorOptionsList{ height: 48px; } - .skuSelectorTextContainer{ - .skuSelectorName{ - text-transform: uppercase; - font-family: 'Open Sans',sans-serif; - &::after{ - content: "ES:"; - } - &::before{ - content: "OUTRAS "; - } - } - } } &-tamanho{ .frameAround{ @@ -82,18 +74,6 @@ width: 40px; height: 40px; } - .skuSelectorTextContainer{ - .skuSelectorName{ - text-transform: uppercase; - font-family: 'Open Sans',sans-serif; - &::after{ - content: "S:"; - } - &::before{ - content: "OUTROS "; - } - } - } } } @@ -218,6 +198,11 @@ .form{ width: max-content; + @media screen and (max-width: 1024px){ + width: 100%; + display: flex; + justify-content: center; + } .content{ width: 65.532%; height: 108px; @@ -226,12 +211,18 @@ grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr 1fr; gap: 8px; + @media screen and (max-width: 1024px){ + width: 100%; + } .inputName,.inputEmail{ width: 100%; height: 40px; min-width: 150px; margin-right: 0; margin-bottom: 7px; + @media screen and (max-width: 1024px){ + min-width: 0; + } } } .submit{ @@ -240,6 +231,7 @@ grid-column: span 2; grid-row: 2; :global(.vtex-button){ + display: block; width: 100%; background: #000000; width: 308px; @@ -268,5 +260,158 @@ color: #989898; } } +.shippingContainer{ + display: grid; + position: relative; + align-items: end; + width: max-content; + @media screen and (max-width: 1024px){ + max-width: 100%; + min-width: 93.665%; + grid-template-columns: 1fr auto; + grid-template-rows: 1fr 1fr; + height: 100px; + } + :global(.vtex-address-form__postalCode ){ + display: grid; + grid-column: 1 / 2; + padding: 0; + min-width: 230px; + @media screen and (max-width: 1024px){ + min-width: 100%; + max-width: 100%; + width: 100%; + grid-row: 1; + } + } + :global(.vtex-button){ + display: block; + grid-column: 2 / 3; + background: #000000; + width: 100%; + height: max-content; + border: 0; + border-radius: 0; + :global(.vtex-button__label){ + font-size: 0; + padding: 0; + padding-top: 0 !important; + padding-bottom: 0 !important; + &::after{ + content: "ok"; + padding: 14px; + min-height: 21px; + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #FFFFFF; + } + } + } + :global(.vtex-input){ + grid-column: 1 / 2; + :global(.vtex-input-prefix__group){ + border: 1px solid #CCCCCC; + height: 49px; + max-width: 100%; + border-radius: 0; + :global(.vtex-address-form-4-x-input){ + color: #AFAFAF; + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + padding: 16.5px 16px; + } + } + :global(.vtex-input__label){ + font-size: 0; + width:max-content; + &::after{ + content: "CALCULAR FRETE:"; + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + } + :global(.vtex-address-form__postalCode-forgottenURL){ + width: max-content; + position: absolute; + grid-column: 3 / 4; + right: 0; + bottom: 25%; + left: 0; + margin-left: 32px; + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + text-decoration-line:underline; + @media screen and (max-width: 1024px){ + margin-left: 0; + grid-column:1 / 4; + left: auto; + bottom: 0; + } + } +} +.shippingTable{ + border: 0; + width: max-content; + .shippingTableHead{ + display: table-row-group; + vertical-align: middle; + text-align: center; + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + .shippingTableRow{ + width: 100%; + .shippingTableHeadDeliveryName,.shippingTableHeadDeliveryEstimate,.shippingTableHeadDeliveryPrice{ + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 400; + text-transform: uppercase; + padding-bottom: 15px; + } + } + } + .shippingTableBody{ + .shippingTableRow{ + .shippingTableCell{ + padding-bottom: 15px; + } + .shippingTableCellDeliveryName{ + .shippingTableLabel{ + .shippingTableRadioBtn{ + display: none; + } + } + } + .shippingTableCell,.shippingTableLabel,.currencyContainer{ + font-size: 12px; + line-height: 16px; + color: #AFAFAF; + text-align: start; + font-family: 'Open Sans',sans-serif; + font-style: normal; + font-weight: 400; + } + } + } +}