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(sku-seletor):concertando skuSelectorName

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-10 06:37:31 -03:00
parent 4fc60e5fd6
commit ba3ac378f9
6 changed files with 57 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,7 +20,10 @@
display: flex; display: flex;
flex-direction: column; 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-family: 'Open Sans',sans-serif;
font-style: normal; font-style: normal;
font-weight: 700; font-weight: 700;
@ -29,7 +32,7 @@
color: rgba(0, 0, 0, 0.58); color: rgba(0, 0, 0, 0.58);
white-space: nowrap; 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-family: 'Open Sans',sans-serif;
font-style: normal; font-style: normal;
font-weight: 300; font-weight: 300;

6
react/components/ProductContext/Pix.tsx
View File

@ -17,10 +17,10 @@ const Pix = () => {
<div className='pix_wrapper'> <div className='pix_wrapper'>
<img className='pix_wrapper-img' src="https://agenciamagma.vteximg.com.br/arquivos/ids/166877/pixrallenson.sv" alt="Logo do Pix" /> <img className='pix_wrapper-img' src="https://agenciamagma.vteximg.com.br/arquivos/ids/166877/pixrallenson.sv" alt="Logo do Pix" />
<span datatype='span_wrapper'> <span datatype='span_wrapper'>
<span className='pix_wrapper-price'> <p className='pix_wrapper-price'>
R$ {formattedNumber} R$ {formattedNumber}
</span> </p>
<span className='pix_wrapper-Discount'> {desconto} % de desconto</span> <p className='pix_wrapper-Discount'> {desconto} % de desconto</p>
</span> </span>
</div> </div>
) )

9
react/components/ProductContext/Placeholder.tsx
View File

@ -3,6 +3,15 @@ import React from 'react';
const Placeholder = () => { const Placeholder = () => {
if (typeof document !== "undefined") { if (typeof document !== "undefined") {
const Placeholder = document.querySelector(".vtex-address-form-4-x-input") 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") Placeholder?.setAttribute("Placeholder","Digite seu CEP")
} }
return( return(

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

@ -10,20 +10,20 @@
"html#carousel" "html#carousel"
] ]
}, },
"html#Pix":{ "html#Pix": {
"props": { "props": {
"testId": "pix-price", "testId": "pix-price",
"blockClass": "pdp-pixPrice" "blockClass": "pdp-pixPrice"
}, },
"children": ["Pix"] "children": ["Pix"]
}, },
"html#Placeholder":{ "html#Placeholder": {
"children": ["Placeholder"] "children": ["Placeholder"]
}, },
"html#CEP":{ "html#CEP": {
"children": ["CEP"] "children": ["CEP"]
}, },
"html#tab-layout":{ "html#tab-layout": {
"props": { "props": {
"testId": "tab-layout" "testId": "tab-layout"
}, },
@ -133,13 +133,14 @@
}, },
"html#prateleira": { "html#prateleira": {
"props": { "props": {
"testId": "vtex-product-sumary" "testId": "vtex-product-summary"
}, },
"children": [ "children": [
"product-summary-image#shelfpdp", "stack-layout#pdp",
"product-summary-name", "product-summary-name",
"product-list-price#summary", "product-list-price#summary",
"product-selling-price#summarypdp" "html#selling-price",
"flex-layout.row#selling-price-savingspdp"
] ]
}, },
"html#carousel": { "html#carousel": {
@ -162,9 +163,7 @@
"props": { "props": {
"testId": "product-summary-list" "testId": "product-summary-list"
}, },
"children": [ "children": ["slider-layout#demo-products#pdp"]
"slider-layout#demo-products#pdp"
]
}, },
"slider-layout#demo-products#pdp": { "slider-layout#demo-products#pdp": {
"props": { "props": {
@ -178,14 +177,9 @@
"blockClass": "pdp-carrousel" "blockClass": "pdp-carrousel"
} }
}, },
"product-summary.shelf#Pdp": { "product-summary.shelf#Pdp": {
"children": [ "children": [
"stack-layout#pdp", "html#prateleira"
"product-summary-name",
"product-list-price#summary",
"html#selling-price",
"flex-layout.row#selling-price-savingspdp"
] ]
}, },
@ -198,7 +192,7 @@
"marginBottom": 4 "marginBottom": 4
}, },
"children": [ "children": [
"product-selling-price#summarypdp", "product-selling-price#summary",
"product-price-savings#summary" "product-price-savings#summary"
] ]
}, },
@ -231,8 +225,6 @@
"children": ["breadcrumb"] "children": ["breadcrumb"]
}, },
"flex-layout.row#specifications-title": { "flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"] "children": ["rich-text#specifications"]
}, },
@ -272,7 +264,7 @@
"testId": "Product-Images", "testId": "Product-Images",
"blockClass": "pdp-productMain" "blockClass": "pdp-productMain"
}, },
"children": ["html#stack", "html#right-col"] "children": ["html#stack", "html#right-col"]
}, },
"flex-layout.row#product-main": { "flex-layout.row#product-main": {
"props": { "props": {
@ -283,8 +275,8 @@
"marginBottom": 0, "marginBottom": 0,
"paddingTop": 0, "paddingTop": 0,
"paddingBottom": 0, "paddingBottom": 0,
"paddingright":0, "paddingright": 0,
"paddingleft":0 "paddingleft": 0
} }
}, },
@ -330,12 +322,13 @@
"children": ["stack-layout"], "children": ["stack-layout"],
"props": { "props": {
"width": "50%", "width": "50%",
"blockClass": "StackLayout" "blockClass": "StackLayout",
"testId": "product-images"
} }
}, },
"flex-layout.row#product-image": { "flex-layout.row#product-image": {
"props":{ "props": {
"blockClass": "product-image" "blockClass": "product-image"
}, },
"children": ["product-images"] "children": ["product-images"]
@ -389,28 +382,28 @@
"share#default" "share#default"
] ]
}, },
"html#shipping-simulator":{ "html#shipping-simulator": {
"props":{ "props": {
"testId": "shipping-simulator" "testId": "shipping-simulator"
}, },
"children": ["shipping-simulator"] "children": ["shipping-simulator"]
}, },
"html#product-installments":{ "html#product-installments": {
"props":{ "props": {
"testId": "product-installments" "testId": "product-installments"
}, },
"children": ["product-installments"] "children": ["product-installments"]
}, },
"product-installments": { "product-installments": {
"props": { "props": {
"message": "{installmentsNumber} de {installmentValue} sem juros" "message": "{installmentsNumber} de {installmentValue} sem juros"
} }
}, },
"html#selling-price":{ "html#selling-price": {
"props":{ "props": {
"testId": "product-price" "testId": "product-price"
}, },
"children": ["product-selling-price#summarypdp"] "children": ["product-selling-price#summarypdp"]
}, },
@ -432,10 +425,7 @@
"marginBottom": 3, "marginBottom": 3,
"blockClass": "title" "blockClass": "title"
}, },
"children": [ "children": ["html#código", "vtex.store-components:product-name"]
"html#código",
"vtex.store-components:product-name"
]
}, },
"html#código": { "html#código": {
"props": { "props": {
@ -502,10 +492,7 @@
"props": { "props": {
"blockClass": "availability" "blockClass": "availability"
}, },
"children": [ "children": ["html#stack", "html#right-col-availability"]
"html#stack",
"html#right-col-availability"
]
}, },
"html#right-col-availability": { "html#right-col-availability": {
"props": { "props": {
@ -524,7 +511,7 @@
"children": ["availability-subscriber"] "children": ["availability-subscriber"]
}, },
"availability-subscriber":{ "availability-subscriber": {
"props": { "props": {
"blockClass": "message-availability" "blockClass": "message-availability"
} }

24
styles/css/vtex.store-components.css
View File

@ -63,22 +63,16 @@
left: 0; left: 0;
right: 0; right: 0;
} }
.skuSelectorContainer .skuSelectorName {
text-transform: uppercase;
font-family: "Open Sans", sans-serif;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor { .skuSelectorContainer .skuSelectorSubcontainer--cor {
height: 75px; height: 75px;
} }
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList { .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList {
height: 48px; 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 { .skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
width: 40px; width: 40px;
height: 40px; height: 40px;
@ -91,16 +85,6 @@
width: 40px; width: 40px;
height: 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 { .skuSelectorContainer .skuSelectorInternalBox {
border: 2px solid #B9B9B9; border: 2px solid #B9B9B9;
} }

28
styles/sass/pages/product/vtex.store-components.scss
View File

@ -50,24 +50,16 @@
left: 0; left: 0;
right: 0; right: 0;
} }
.skuSelectorName{
text-transform: uppercase;
font-family: 'Open Sans',sans-serif;
}
.skuSelectorSubcontainer-{ .skuSelectorSubcontainer-{
&-cor{ &-cor{
height: 75px; height: 75px;
.skuSelectorOptionsList{ .skuSelectorOptionsList{
height: 48px; height: 48px;
} }
.skuSelectorTextContainer{
.skuSelectorName{
text-transform: uppercase;
font-family: 'Open Sans',sans-serif;
&::after{
content: "ES:";
}
&::before{
content: "OUTRAS ";
}
}
}
} }
&-tamanho{ &-tamanho{
.frameAround{ .frameAround{
@ -82,18 +74,6 @@
width: 40px; width: 40px;
height: 40px; height: 40px;
} }
.skuSelectorTextContainer{
.skuSelectorName{
text-transform: uppercase;
font-family: 'Open Sans',sans-serif;
&::after{
content: "S:";
}
&::before{
content: "OUTROS ";
}
}
}
} }
} }