FilipeQuintanilha/challenge-vtex-io-Filipe-Quintanilha
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(selling-price e sku-selectors): Ajusta o selling-price e os sku-selectors

Browse Source
This commit is contained in:
Filipe Quintanilha Evangelista 2023-01-24 21:36:12 -03:00
parent 3055e413a1
commit 3141f4b9d5
11 changed files with 270 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -109,7 +109,7 @@
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
"product-separator",
// "product-separator",
"product-identifier.product",
"sku-selector",
"product-quantity",

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

@ -4,11 +4,10 @@
"colGap": 2,
"preserveLayoutOnMobile": true,
"preventHorizontalStretch": true,
"marginBottom": 4
"marginBottom": 4,
"blockClass": "preco"
},
"children": [
"product-selling-price"
]
"children": ["product-selling-price"]
},
"flex-layout.row#list-price-savings": {
@ -19,9 +18,6 @@
"marginBottom": 2,
"marginTop": 5
},
"children": [
"product-list-price",
"product-price-savings"
]
"children": ["product-list-price", "product-price-savings"]
}
}

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

24
styles/configs/style.json
View File

@ -255,84 +255,84 @@
"measure": [30, 34, 20],
"styles": {
"heading-1": {
"fontFamily": "Open Sans",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "700",
"fontSize": "3rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-2": {
"fontFamily": "Open Sans",
"fontFamily": "'Open Sans', sans-serif",
"fontWeight": "700",
"fontSize": "2.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-3": {
"fontFamily": "Open Sans",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "700",
"fontSize": "1.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-4": {
"fontFamily": "Open Sans",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1.5rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-5": {
"fontFamily": "Open Sans",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-6": {
"fontFamily": "Open Sans",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"body": {
"fontFamily": "Open Sans",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "1rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"small": {
"fontFamily": "Open Sans",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "0.875rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"mini": {
"fontFamily": "Open Sans",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "normal",
"fontSize": "0.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"action": {
"fontFamily": "Open Sans",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "500",
"fontSize": "1rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--small": {
"fontFamily": "Open Sans",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "500",
"fontSize": "0.875rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--large": {
"fontFamily": "Open Sans",
"fontFamily": "Open Sans, sans-serif",
"fontWeight": "500",
"fontSize": "1.25rem",
"textTransform": "uppercase",

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

@ -7,6 +7,11 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
.flexRowContent {
position: relative;
}
.flexRowContent--preco {
margin: 0;
}

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

@ -7,7 +7,42 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
.savings,
.listPrice {
display: none;
}
.sellingPrice {
font-weight: 700;
font-size: 25px;
line-height: 38px;
}
.installments {
font-size: 0;
}
.installmentsNumber {
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.installmentsNumber::after {
content: " x ";
}
.installmentValue .currencyContainer {
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.installmentValue .currencyContainer::before {
content: "de ";
font-weight: 400;
}
.installmentValue .currencyContainer::after {
content: " sem juros ";
font-weight: 400;
}

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

@ -7,12 +7,16 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
.container {
padding: 0 40px;
}
.container .productImagesThumb {
padding-right: 16px;
}
.container .productImageTag {
object-fit: fill !important;
}
.container .productNameContainer {
text-align: right;
font-weight: 300;
@ -20,4 +24,70 @@
line-height: 34px;
color: #575757;
margin-bottom: 31px;
}
.container .skuSelectorSubcontainer {
margin-bottom: 10px;
}
.container .skuSelectorNameContainer {
margin: 0;
}
.container .skuSelectorTextContainer {
font-size: 0;
margin-bottom: 8px;
}
.container .skuSelectorTextContainer .skuSelectorName {
font-size: 0;
}
.container .skuSelectorTextContainer .skuSelectorName:last-child::before {
content: "OUTROS TAMANHOS:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.container .skuSelectorTextContainer .skuSelectorName::before {
content: "OUTRAS CORES";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.container .skuSelectorTextContainer .skuSelectorSelectorImageValue {
font-size: 0;
}
.container .skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
}
.container .skuSelectorItem {
width: 40px;
height: 40px;
margin-right: 16px;
}
.container .frameAround {
border-radius: 24px;
border: 1px solid #989898;
}
.container .skuSelectorItem--selected .frameAround {
border-radius: 24px;
border: 2px solid #000000;
}
.container .skuSelectorItem--selected .skuSelectorItemTextValue {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #000000;
}
.container .skuSelectorInternalBox {
border: none;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.container .skuSelectorItemTextValue {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}

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

@ -1,3 +1,7 @@
.flexRowContent {
position: relative;
}
.flexRowContent--preco {
margin: 0;
}

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

@ -2,3 +2,42 @@
.listPrice {
display: none;
}
.sellingPrice {
font-weight: 700;
font-size: 25px;
line-height: 38px;
}
.installments {
font-size: 0;
&Number {
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: $color-gray7;
&::after {
content: " x ";
}
}
}
.installmentValue {
.currencyContainer {
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: $color-gray7;
&::before {
content: "de ";
font-weight: 400;
}
&::after {
content: " sem juros ";
font-weight: 400;
}
}
}

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

@ -8,6 +8,10 @@
padding-right: 16px;
}
.productImageTag {
object-fit: fill !important;
}
.productNameContainer {
text-align: right;
font-weight: 300;
@ -16,4 +20,87 @@
color: $color-gray6;
margin-bottom: 31px;
}
.skuSelectorSubcontainer {
margin-bottom: 10px;
}
.skuSelectorNameContainer {
margin: 0;
}
.skuSelectorTextContainer {
font-size: 0;
margin-bottom: 8px;
.skuSelectorName {
font-size: 0;
&:last-child {
&::before {
content: "OUTROS TAMANHOS:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray7;
}
}
&::before {
content: "OUTRAS CORES";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray7;
}
}
.skuSelectorSelectorImageValue {
font-size: 0;
}
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
}
.skuSelectorItem {
width: 40px;
height: 40px;
margin-right: 16px;
}
.frameAround {
border-radius: 24px;
border: 1px solid $color-gray8;
}
.skuSelectorItem--selected {
.frameAround {
border-radius: 24px;
border: 2px solid $color-black2;
}
.skuSelectorItemTextValue {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-black2;
}
}
.skuSelectorInternalBox {
border: none;
border-radius: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.skuSelectorItemTextValue {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
}

6
styles/sass/utils/_vars.scss
View File

@ -1,4 +1,5 @@
$color-black: #292929;
$color-black2: #000000;
$color-white: #fff;
@ -9,6 +10,7 @@ $color-gray4: #c4c4c4;
$color-gray5: #e5e5e5;
$color-gray6: #575757;
$color-gray7: #929292;
$color-gray8: #989898;
$color-blue: #4267b2;
@ -31,3 +33,7 @@ $z-index: (
level4: 20,
level5: 25,
) !default;
//Fonts
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");