EleonoraOtz/challenge-vtex-io-eleonora-otz
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Estiliza container de skus

Browse Source
This commit is contained in:
Eleonora Otz de Mendonça Soares 2023-01-24 23:22:27 -03:00
parent 2cc75c71ac
commit 892cd902e9
11 changed files with 328 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -105,20 +105,17 @@
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"product-rating-summary",
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
"product-separator",
"product-identifier.product",
"sku-selector",
"product-quantity",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
"availability-subscriber",
"shipping-simulator",
"share#default"
"shipping-simulator"
]
},
@ -132,7 +129,8 @@
"sku-selector": {
"props": {
"variationsSpacing": 3,
"showValueNameForImageVariation": true
"showValueNameForImageVariation": true,
"blockClass": "size-sku"
}
},
@ -174,16 +172,5 @@
"blockClass": "message-availability"
},
"children": ["availability-subscriber"]
},
"share#default": {
"props": {
"social": {
"Facebook": true,
"WhatsApp": true,
"Twitter": false,
"Pinterest": true
}
}
}
}

28
store/blocks/product-summary/quickview.json
View File

@ -1,9 +1,6 @@
{
"modal-trigger#quickview": {
"children": [
"icon-expand",
"modal-layout#quickview"
],
"children": ["icon-expand", "modal-layout#quickview"],
"props": {
"blockClass": "quickview"
}
@ -63,9 +60,7 @@
},
"flex-layout.col#quickview-product-quantity": {
"children": [
"product-summary-quantity#quickview"
]
"children": ["product-summary-quantity#quickview"]
},
"product-summary-quantity#quickview": {
"props": {
@ -74,18 +69,14 @@
}
},
"flex-layout.col#quickview-add-to-card-button": {
"children": [
"add-to-cart-button"
],
"children": ["add-to-cart-button"],
"props": {
"width": "grow"
}
},
"flex-layout.row#quickview-actions-2": {
"children": [
"link.product#button-pdp"
]
"children": ["link.product#button-pdp"]
},
"link.product#button-pdp": {
"props": {
@ -107,15 +98,10 @@
}
},
"flex-layout.col#quickview-images": {
"children": [
"product-images#quickview"
]
"children": ["product-images#quickview"]
},
"flex-layout.col#quickview-product-details": {
"children": [
"modal-content#quickview",
"modal-actions#quickview"
],
"children": ["modal-content#quickview", "modal-actions#quickview"],
"props": {
"preventVerticalStretch": true,
"blockClass": "quickviewDetails"
@ -134,7 +120,7 @@
"blockClass": "quickview"
}
},
"product-images#quickview" : {
"product-images#quickview": {
"props": {
"blockClass": "quickview",
"showNavigationArrows": true

15
styles/configs/font-faces.css
View File

@ -1,5 +1,18 @@
@font-face {
font-family: "Roboto";
font-family: "Open Sans";
src: url("assets/fonts/OpenSans-Regular.ttf");
font-weight: 400;
}
@font-face {
font-family: "Open Sans";
src: url("assets/fonts/OpenSans-Light.ttf");
font-weight: 300;
}
@font-face {
font-family: "Open Sans";
src: url("assets/fonts/OpenSans-Bold.ttf");
font-weight: 700;
}

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

@ -95,7 +95,7 @@
max-height: 100%;
}
.flexColChild--quickviewDetails:first-child {
.flexRowContent .flexColChild--quickviewDetails:first-child {
overflow-y: auto;
height: 66% !important;
overflow-x: hidden;

26
styles/css/vtex.product-identifier.css
View File

@ -1,3 +1,27 @@
.product-identifier--productReference {
/*
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 */
/* .product-identifier--productReference {
margin-bottom: 1rem;
} */
.product-identifier__label {
display: none;
}
.product-identifier__separator {
display: none;
}
.product-identifier__value {
display: flex;
justify-content: end;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: right;
color: rgba(146, 146, 146, 0.48);
}

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

@ -11,29 +11,17 @@
display: none;
}
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
}
.sellingPriceValue {
font-size: 2.25rem;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
margin: 0;
}
.installments {
color: #727273;
margin-bottom: 1rem;
}
.savings {
display: none;
}
.sellingPriceValue--summary {
font-size: 1.25rem;
font-weight: 600;
color: #2e2e2e;
color: #929292;
margin-bottom: 16px;
}
.savings--summary {
@ -68,6 +56,16 @@
font-size: 0.875rem;
}
.installments {
font-size: 16px;
line-height: 22px;
color: #929292;
}
.installments .installmentsNumber,
.installments .installmentValue {
font-weight: 700;
}
.savings--summaryPercentage {
background: #0f3e99;
border-radius: 1000px;

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

@ -21,6 +21,14 @@
}
}
.productNameContainer--quickview {
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
color: #575757;
}
.productImageTag--main {
max-height: max-content !important;
max-width: 664px;
@ -49,4 +57,86 @@
.productImagesThumb {
max-width: 90px;
margin-right: 16px;
}
.skuSelectorContainer {
display: flex;
flex-direction: column;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor {
order: 2;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround,
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue,
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
border-radius: 50%;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
border-color: #000000;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
font-size: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
content: "OUTRAS CORES";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: gray;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue {
display: none;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
order: 1;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
padding: 0;
margin: auto;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround,
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
border-radius: 50%;
width: 40px;
height: 40px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
border-color: #000000;
top: -2px;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross {
top: 4px;
right: 6px;
bottom: 0px;
z-index: 2;
width: 29px;
height: 29px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
font-size: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
content: "OUTROS TAMANHOS:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorSelectorImageValue {
display: none;
}
.skuSelectorItem--size-sku--selected .skuSelectorItemTextValue--size-sku {
color: #000000;
}
.skuSelectorItemTextValue {
color: rgba(185, 185, 185, 0.6);
}

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

@ -89,6 +89,13 @@
max-height: 100%;
}
// .flexColChild:first-child {
// display: flex;
// align-self: flex-end;
// }
.flexRowContent
.flexColChild--quickviewDetails:first-child {
overflow-y: auto;
height: 66% !important;

29
styles/sass/pages/product/vtex.product-identifier.scss Normal file
View File

@ -0,0 +1,29 @@
/* .product-identifier--productReference {
margin-bottom: 1rem;
} */
// .info-availability {
// display: flex;
// align-self: flex-end;
// }
.product-identifier {
&__label {
display: none;
}
&__separator {
display: none;
}
&__value {
display: flex;
justify-content: end;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: right;
color: rgba(146, 146, 146, 0.48);
}
}

41
styles/sass/pages/product/vtex.product-price.scss
View File

@ -5,30 +5,28 @@
// font-size: 1rem;
}
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
}
// .sellingPrice {
// margin: 0;
// }
.sellingPriceValue {
font-size: 2.25rem;
font-weight: 700;
font-size: 25px;
line-height: 38px;
color: $black;
margin: 0;
}
.installments {
color: #727273;
margin-bottom: 1rem;
color: $gray-500;
margin-bottom: 16px;
}
.savings {
display: none;
}
.sellingPriceValue--summary {
font-size: 1.25rem;
font-weight: 600;
color: #2e2e2e;
}
// .sellingPriceValue--summary {
// font-size: 1.25rem;
// font-weight: 600;
// color: $black;
// }
.savings--summary {
background: #8bc34a;
@ -63,6 +61,17 @@ display: none;
font-size: 0.875rem;
}
.installments {
font-size: 16px;
line-height: 22px;
color: $gray-500;
.installmentsNumber,
.installmentValue {
font-weight: 700;
}
}
.savings--summaryPercentage {
background: #0f3e99;
border-radius: 1000px;

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

@ -23,6 +23,14 @@
// width: 664px !important;
// }
.productNameContainer--quickview {
font-weight: 300;
font-size: 20px;
line-height: 34px;
text-align: right;
color: $gray-600;
}
.productImageTag--main {
max-height: max-content !important;
max-width: 664px;
@ -52,3 +60,105 @@
max-width: 90px;
margin-right: 16px;
}
.skuSelectorContainer {
display: flex;
flex-direction: column;
.skuSelectorSubcontainer--cor {
order: 2;
.frameAround,
.skuSelectorItemImageValue,
.skuSelectorInternalBox {
border-radius: 50%;
}
.frameAround {
border-color: $black;
}
.skuSelectorTextContainer {
.skuSelectorName {
font-size: 0;
&::after {
content: "OUTRAS CORES";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: gray;
}
}
.skuSelectorSelectorImageValue {
display: none;
}
}
}
.skuSelectorSubcontainer--tamanho {
order: 1;
.skuSelectorItemTextValue{
padding: 0;
margin: auto;
font-weight: 400;
font-size: 14px;
line-height: 19px;
}
.frameAround,
.skuSelectorInternalBox {
border-radius: 50%;
width: 40px;
height: 40px;
}
.frameAround {
border-color: $black;
top: -2px;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
}
.diagonalCross {
top: 4px;
right: 6px;
bottom: 0px;
z-index: 2;
width: 29px;
height: 29px;
}
.skuSelectorTextContainer {
.skuSelectorName {
font-size: 0;
&::after {
content: "OUTROS TAMANHOS:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $gray-500;
}
}
.skuSelectorSelectorImageValue {
display: none;
}
}
}
}
.skuSelectorItem--size-sku--selected {
.skuSelectorItemTextValue--size-sku {
color: $black;
}
}
.skuSelectorItemTextValue {
color: rgba(185, 185, 185, 0.6);
}