From eea7362153cda78f70fb5e0d48754cae62edaa4d Mon Sep 17 00:00:00 2001 From: Rallenson Date: Fri, 10 Feb 2023 04:38:46 -0300 Subject: [PATCH] feat(pdp):add testId --- docs/Todo.md | 12 +-- react/components/Html/styles.css | 8 +- react/components/ProductContext/cep.tsx | 4 - store/blocks/pdp/product.jsonc | 104 +++++++++++++++++++----- store/blocks/product-price.jsonc | 8 +- 5 files changed, 101 insertions(+), 35 deletions(-) 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/components/Html/styles.css b/react/components/Html/styles.css index 02be6fa..38702cf 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -46,7 +46,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; @@ -61,7 +63,7 @@ display: block; background: black; height: 49px; - max-width: 77.354%; + max-width: 97.05%; border: 1px solid black; } .html--pdp-section_descriptions{ @@ -73,7 +75,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%; diff --git a/react/components/ProductContext/cep.tsx b/react/components/ProductContext/cep.tsx index 9180ec9..1dc2e4b 100644 --- a/react/components/ProductContext/cep.tsx +++ b/react/components/ProductContext/cep.tsx @@ -9,9 +9,6 @@ const CEP = () => { 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'); - - console.log(trRow) - console.log(tdEstimate) if(tdEstimate){ tdEstimate.forEach((row) => { if(row.parentNode){ @@ -41,7 +38,6 @@ const CEP = () => { } if (typeof document !== "undefined") { const btnCep = document.querySelector(".vtex-store-components-3-x-shippingContainer .vtex-button"); - console.log(btnCep) if (btnCep) { btnCep.addEventListener('click', handleButtonClick); } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 816e7b7..3f23c42 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -2,8 +2,8 @@ "store.product": { "children": [ "html#Placeholder", - "html#breadcrumb", "html#CEP", + "html#breadcrumb", "condition-layout.product#availability", "html#departaments", "flex-layout.row#specifications-title", @@ -12,6 +12,7 @@ }, "html#Pix":{ "props": { + "testId": "pix-price", "blockClass": "pdp-pixPrice" }, "children": ["Pix"] @@ -22,6 +23,12 @@ "html#CEP":{ "children": ["CEP"] }, + "html#tab-layout":{ + "props": { + "testId": "tab-layout" + }, + "children": ["tab-layout#pdp"] + }, "tab-layout#pdp": { "children": [ "tab-list#pdp", @@ -132,7 +139,7 @@ "product-summary-image#shelfpdp", "product-summary-name", "product-list-price#summary", - "product-selling-price#summary" + "product-selling-price#summarypdp" ] }, "html#carousel": { @@ -146,11 +153,19 @@ }, "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": { @@ -169,7 +184,7 @@ "stack-layout#pdp", "product-summary-name", "product-list-price#summary", - "product-selling-price#summarypdp", + "html#selling-price", "flex-layout.row#selling-price-savingspdp" ] }, @@ -183,7 +198,7 @@ "marginBottom": 4 }, "children": [ - "product-selling-price#summary", + "product-selling-price#summarypdp", "product-price-savings#summary" ] }, @@ -299,7 +314,7 @@ "testId": "product-description", "blockClass": "pdp-section_descriptions" }, - "children": ["tab-layout#pdp"] + "children": ["html#tab-layout"] }, "html#description": { @@ -359,52 +374,86 @@ "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", + "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, @@ -413,7 +462,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": { @@ -421,7 +470,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": { @@ -430,7 +485,14 @@ "size": "regular" } }, - "add-to-cart-button": { + "html#add-to-cart-button#pdp": { + "props": { + "blockClass": "card-button", + "testId": "add-to-cart-button#pdp" + }, + "children": ["add-to-cart-button#pdp"] + }, + "add-to-cart-button#pdp": { "props": { "text": "ADICIONAR À SACOLA" } @@ -450,7 +512,7 @@ "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", + "html#product-name", "flex-layout.row#availability", "sku-selector" ] 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"