Gustavo_Rallenson_Goncalves_Da_Silva/challenge-vtex-io-Gustavo-Rallenson
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(pdp):add testId

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-10 04:38:46 -03:00
parent f124af7627
commit eea7362153
5 changed files with 101 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
docs/Todo.md
View File

@ -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}

8
react/components/Html/styles.css
View File

@ -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%;

4
react/components/ProductContext/cep.tsx
View File

@ -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);
}

104
store/blocks/pdp/product.jsonc
View File

@ -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"
]

8
store/blocks/product-price.jsonc
View File

@ -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"