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

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

@ -17,10 +17,10 @@ const Pix = () => {
<div className='pix_wrapper'>
<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 className='pix_wrapper-price'>
<p className='pix_wrapper-price'>
R$ {formattedNumber}
</span>
<span className='pix_wrapper-Discount'> {desconto} % de desconto</span>
</p>
<p className='pix_wrapper-Discount'> {desconto} % de desconto</p>
</span>
</div>
)

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

@ -3,6 +3,15 @@ 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(

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

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

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

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

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

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