AdilsonFernandoNevesOrnellas/challenge-vtex-io-Adilson-Fernando-Neves-Ornellas
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: preço,tamanho e cores feito

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2023-01-26 18:21:01 -03:00
parent 407e3fc366
commit aea8e6e88a
14 changed files with 318 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,3 +8,5 @@
[class*="html--pdp-breadcrumb"] {
background-color: #fff;
}

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

@ -121,22 +121,37 @@
"children": [
"flex-layout.row#product-name",
"flex-layout.row#product-modelo",
"product-rating-summary",
// "product-rating-summary",
"flex-layout.row#selling-price",
"flex-layout.row#list-price-savings",
"product-installments",
// "product-separator",
// "flex-layout.row#list-price-savings",
"product-installments#custom",
"sku-selector",
"product-quantity",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
"availability-subscriber",
"shipping-simulator",
"share#default"
"html#quantidadeEButtonCustom",
// "product-separator",
// "product-quantity",
// "product-assembly-options",
// "product-gifts",
// "flex-layout.row#buy-button",
// "availability-subscriber"
"shipping-simulator"
// "share#default"
]
},
"html#quantidadeEButtonCustom":{
"props": {
"blockClass": "quantidadeEBuy"
},
"children": ["product-quantity","flex-layout.row#buy-button"]
},
"product-installments#custom":{
"props":{
"blockClass":"divParcelamente",
"markers": ["discount"],
"message": " {installmentsNumber}x de {installmentValue} <discount> sem juros </discount> ",
"installmentsCriteria":"max-quantity-without-interest"
}
},
"flex-layout.row#product-modelo": {
"props": {
"blockClass": "divNomeProductModelo"
@ -154,6 +169,7 @@
"sku-selector": {
"props": {
"blockClass":"divSku",
"variationsSpacing": 3,
"showValueNameForImageVariation": true
}

4
styles/css/vtex.flex-layout.css
View File

@ -23,6 +23,10 @@
}
}
.flexRowContent {
margin: 0;
}
.flexRowContent--divProduct {
margin-top: 16px;
padding: 0px;

99
styles/css/vtex.product-price.css
View File

@ -1,79 +1,32 @@
.listPrice {
color: #727273;
margin-bottom: .25rem;
font-size: 1rem;
/*
0 - 600PX: Phone
600 - 900px: Table portrait
900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.sellingPrice--hasListPrice {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
}
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
.installments--divParcelamente {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.sellingPriceValue {
font-size: 2.25rem;
.installments--divParcelamente .installmentsNumber--divParcelamente {
font-weight: 700;
}
.installments {
color: #727273;
margin-bottom: 1rem;
}
.savings {
font-weight: 500;
color: #79B03A;
}
.sellingPriceValue--summary {
font-size: 1.25rem;
font-weight: 600;
color: #2E2E2E;
}
.savings--summary {
background: #8BC34A;
border-radius: 1000px;
align-items: center;
display: flex;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
}
.savings-discount--summary {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.listPrice--summary {
margin-bottom: 0.25rem;
font-size: .875rem;
}
.installments--summary {
margin-bottom: 2rem;
font-size: 0.875rem;
}
.savings--summaryPercentage {
background: #0f3e99;
border-radius: 1000px;
align-items: center;
display: flex;
}
.savingsPercentage--summaryPercentage {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
.installments--divParcelamente .currencyContainer--divParcelamente {
font-weight: 700;
}

1
styles/css/vtex.rich-text.css
View File

@ -10,6 +10,7 @@
.container--tituloSlick {
height: 40px;
margin-bottom: 32px;
margin-top: 16px;
}
@media (min-width: 1024px) {
.container--tituloSlick {

9
styles/css/vtex.slider-layout.css
View File

@ -11,6 +11,7 @@
background-color: #fff;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 105px;
}
.sliderTrackContainer--carousel .sliderTrack--carousel {
gap: 16px;
@ -32,6 +33,10 @@
height: 402.2px;
}
}
.sliderTrackContainer--carousel .paginationDotsContainer--carousel {
margin-bottom: 105px;
.paginationDotsContainer--carousel .paginationDot--carousel {
background-color: black;
}
.paginationDotsContainer--carousel .paginationDot--carousel--isActive {
background-color: white;
border: 0.5px solid #000000;
}

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

@ -117,3 +117,108 @@
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.skuSelectorContainer--divSku {
display: flex;
flex-direction: column;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor {
order: 2;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorName {
font-size: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
line-height: 19px;
color: #929292;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorName::after {
display: block;
content: "OUTROS CORES:";
font-size: 14px;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku {
width: 48px;
height: 48px;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku .frameAround--divSku {
border-radius: 50%;
width: 48px;
height: 48px;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku .skuSelectorInternalBox--divSku {
border-radius: 50%;
width: 48px;
height: 48px;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .skuSelectorItemTextValue--divSku {
padding: 0 !important;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .absolute {
height: 48px;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorNameSeparator {
display: none;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue {
display: none;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho {
order: 1;
height: 67px;
margin-bottom: 10px !important;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorName {
font-size: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
line-height: 19px;
color: #929292;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
display: block;
content: "OUTROS TAMANHOS:";
font-size: 14px;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku {
width: 40px;
height: 40px;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .frameAround--divSku {
border-radius: 50%;
width: 40px;
height: 40px;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .skuSelectorInternalBox--divSku {
border-radius: 50%;
width: 40px;
height: 40px;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .skuSelectorItemTextValue--divSku {
padding: 0 !important;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .absolute {
height: 40px;
}
.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .diagonalCross--divSku {
height: 40px;
width: 40px;
border-radius: 50%;
transform: rotate(-90deg);
}
.skuSelectorContainer--divSku .diagonalCross--divSku {
height: 48px;
width: 48px;
border-radius: 50%;
transform: rotate(-90deg);
}

1
styles/css/vtex.tab-layout.css
View File

@ -36,6 +36,7 @@
font-size: 18px;
line-height: 38px;
color: #bfbfbf;
text-transform: capitalize;
}
@media (max-width: 1024px) {
.container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button__label) {

3
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -12,6 +12,9 @@
flex-direction: column;
}
}
.flexRowContent{
margin: 0;
}
.flexRowContent--divProduct {
margin-top: 16px;

23
styles/sass/pages/product/vtex.product-price.scss Normal file
View File

@ -0,0 +1,23 @@
.sellingPrice--hasListPrice {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
}
.installments--divParcelamente {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
.installmentsNumber--divParcelamente{
font-weight: 700;
}
.currencyContainer--divParcelamente{
font-weight: 700;
}
}

1
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -1,6 +1,7 @@
.container--tituloSlick {
height: 40px;
margin-bottom: 32px;
margin-top: 16px;
@media (min-width: 1024px) {
margin-bottom: 24px;
}

15
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -2,6 +2,7 @@
background-color: $color-white;
margin-left: 40px;
margin-right: 40px;
margin-bottom: 105px;
.sliderTrack--carousel {
gap: 16px;
}
@ -27,11 +28,13 @@
}
}
.paginationDotsContainer--carousel {
margin-bottom: 105px;
.paginationDot--carousel {
}
.paginationDot--carousel--isActive {
}
}
.paginationDotsContainer--carousel {
.paginationDot--carousel {
background-color: black;
}
.paginationDot--carousel--isActive {
background-color: white;
border: 0.5px solid #000000;
}
}

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

@ -94,7 +94,112 @@
}
}
.listPrice{
.listPrice {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.skuSelectorContainer--divSku {
display: flex;
flex-direction: column;
.skuSelectorSubcontainer--cor {
order: 2;
.skuSelectorName {
font-size: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
line-height: 19px;
color: #929292;
&::after {
display: block;
content: "OUTROS CORES:";
font-size: 14px;
}
}
.skuSelectorItem--divSku {
width: 48px;
height: 48px;
.frameAround--divSku {
border-radius: 50%;
width: 48px;
height: 48px;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.skuSelectorInternalBox--divSku {
border-radius: 50%;
width: 48px;
height: 48px;
.skuSelectorItemTextValue--divSku {
padding: 0 !important;
}
.absolute {
height: 48px;
}
}
}
.skuSelectorNameSeparator {
display: none;
}
.skuSelectorSelectorImageValue {
display: none;
}
}
.skuSelectorSubcontainer--tamanho {
order: 1;
height: 67px;
margin-bottom: 10px !important;
.skuSelectorName {
font-size: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
line-height: 19px;
color: #929292;
&::after {
display: block;
content: "OUTROS TAMANHOS:";
font-size: 14px;
}
}
.skuSelectorItem--divSku {
width: 40px;
height: 40px;
.frameAround--divSku {
border-radius: 50%;
width: 40px;
height: 40px;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.skuSelectorInternalBox--divSku {
border-radius: 50%;
width: 40px;
height: 40px;
.skuSelectorItemTextValue--divSku {
padding: 0 !important;
}
.absolute {
height: 40px;
}
}
.diagonalCross--divSku {
height: 40px;
width: 40px;
border-radius: 50%;
transform: rotate(-90deg);
}
}
}
.diagonalCross--divSku {
height: 48px;
width: 48px;
border-radius: 50%;
transform: rotate(-90deg);
}
}

1
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -22,6 +22,7 @@
font-size: 18px;
line-height: 38px;
color: #bfbfbf;
text-transform: capitalize;
}
:global(.vtex-button__label) {
@media (max-width: 1024px) {