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 botão de quantidade e de adicionar à sacola

Browse Source
This commit is contained in:
Eleonora Otz de Mendonça Soares 2023-01-25 21:55:10 -03:00
parent 892cd902e9
commit 34ca7b5142
15 changed files with 363 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
react/Example.tsx
View File

@ -1,3 +1,3 @@
import Example from "./components/Example/Example";
import Example from "./components/Example/ProductContext";
export default Example;

3
store/blocks/minicart.jsonc
View File

@ -2,7 +2,8 @@
"add-to-cart-button": {
"props": {
"addToCartFeedback": "customEvent",
"customPixelEventId": "add-to-cart-button"
"customPixelEventId": "add-to-cart-button",
"text": "ADICIONAR À SACOLA"
}
},

12
store/blocks/pdp/product-assembly.jsonc
View File

@ -32,17 +32,13 @@
"props": {
"verticalAlign": "middle"
},
"children": [
"assembly-option-item-quantity-selector"
]
"children": ["assembly-option-item-quantity-selector"]
},
"flex-layout.col#product-assembly-image": {
"props": {
"marginRight": 4
},
"children": [
"assembly-option-item-image"
]
"children": ["assembly-option-item-image"]
},
"flex-layout.col#product-assembly-middle": {
"props": {
@ -96,9 +92,7 @@
"horizontalAlign": "right",
"verticalAlign": "middle"
},
"children": [
"assembly-option-item-quantity-selector"
]
"children": ["assembly-option-item-quantity-selector"]
},
"assembly-option-item-customize#sec-level": {
"props": {

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

@ -106,14 +106,11 @@
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"product-rating-summary",
"flex-layout.row#selling-price",
"product-installments",
"sku-selector",
"product-quantity",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
"product-gifts",
"availability-subscriber",
"shipping-simulator"
]
@ -137,9 +134,10 @@
"flex-layout.row#buy-button": {
"props": {
"marginTop": 4,
"marginBottom": 7
"marginBottom": 7,
"blockClass": "buy-button"
},
"children": ["add-to-cart-button"]
"children": ["product-quantity#size", "add-to-cart-button"]
},
"flex-layout.row#product-availability": {
@ -172,5 +170,13 @@
"blockClass": "message-availability"
},
"children": ["availability-subscriber"]
},
"product-quantity#size": {
"props": {
"size": "large",
"width": "28%",
"showLabel": false
}
}
}

17
styles/css/vtex.add-to-cart-button.css Normal file
View File

@ -0,0 +1,17 @@
/*
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 */
.buttonText {
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #fff;
padding: 7px 0;
}

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

@ -55,7 +55,7 @@
}
.flexRow--deals {
background-color: #0F3E99;
background-color: #0f3e99;
padding: 14px 0px;
}
@ -95,7 +95,7 @@
max-height: 100%;
}
.flexRowContent .flexColChild--quickviewDetails:first-child {
.flexColChild--quickviewDetails:first-child {
overflow-y: auto;
height: 66% !important;
overflow-x: hidden;
@ -105,6 +105,18 @@
height: 34% !important;
}
.flexRow--addToCartRow {
padding-bottom: 1rem;
.stretchChildrenWidth {
margin: 0;
}
.flexRowContent--buy-button {
height: 49px;
display: flex;
justify-content: center;
}
.flexRowContent--buy-button :global(.vtex-button) {
background: #000000;
border: none;
border-radius: 0;
}

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

@ -19,11 +19,6 @@
margin: 0;
}
.installments {
color: #929292;
margin-bottom: 16px;
}
.savings--summary {
background: #8bc34a;
border-radius: 1000px;
@ -57,13 +52,31 @@
}
.installments {
font-size: 16px;
line-height: 22px;
color: #929292;
font-size: 0;
}
.installments .installmentsNumber,
.installments .installmentValue {
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
margin-bottom: 16px;
}
.installments .installmentsNumber {
font-size: 0 !important;
}
.installments .installmentsNumber::before {
content: "36 x";
font-size: 16px;
}
.installments .installmentsNumber::after {
content: " de ";
font-weight: 400;
font-size: 16px;
}
.installments .installmentValue::after {
content: " sem juros";
font-weight: 400;
}
.savings--summaryPercentage {

37
styles/css/vtex.product-quantity.css
View File

@ -7,6 +7,39 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.quantitySelectorTitle {
display: none;
:global(.vtex-numeric-stepper__minus-button),
:global(.vtex-numeric-stepper__plus-button) {
background-color: #fff;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #000000;
border-radius: 0;
}
:global(.vtex-numeric-stepper__minus-button) {
border-top: 1px;
border-left: 1px;
border-bottom: 1px;
border-style: solid;
border-color: #cccccc;
}
:global(.vtex-numeric-stepper__plus-button) {
border-top: 1px;
border-right: 1px;
border-bottom: 1px;
border-style: solid;
border-color: #cccccc;
}
:global(.vtex-numeric-stepper__input) {
border-top: 1px;
border-bottom: 1px;
border-style: solid;
border-right: none;
border-left: none;
border-color: #cccccc;
color: #929292;
outline: 0;
}

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

@ -74,6 +74,16 @@
.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
border-color: #000000;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .diagonalCross {
color: #d5d5d5;
top: 5px;
left: 6px;
bottom: 0px;
z-index: 2;
width: 28px;
height: 28px;
transform: rotateY(180deg);
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
font-size: 0;
}
@ -82,7 +92,7 @@
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: gray;
color: #929292;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue {
display: none;
@ -103,6 +113,9 @@
width: 40px;
height: 40px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
border-color: #989898;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
border-color: #000000;
top: -2px;
@ -112,12 +125,14 @@
z-index: 2;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross {
color: #d5d5d5;
top: 4px;
right: 6px;
left: 6px;
bottom: 0px;
z-index: 2;
width: 29px;
height: 29px;
width: 28px;
height: 28px;
transform: rotateY(180deg);
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
font-size: 0;
@ -140,3 +155,53 @@
.skuSelectorItemTextValue {
color: rgba(185, 185, 185, 0.6);
}
.skuSelectorItem {
margin: 0 16px 0 0;
}
.shippingContainer {
display: flex;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__label)::after {
content: "CALCULAR FRETE:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.shippingContainer :global(.vtex-button) {
font-size: 0;
position: relative;
top: -5px;
right: 148px;
width: 49px;
height: 49px;
margin-top: 27px;
background-color: #000000;
}
.shippingContainer :global(.vtex-button)::after {
content: "OK";
font-size: 14px;
line-height: 19px;
font-weight: 600;
color: white;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
position: relative;
left: 32px;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: #000000;
}
:global(.vtex-button__label) {
height: fit-content;
}

8
styles/sass/pages/product/vtex.add-to-cart-button.scss Normal file
View File

@ -0,0 +1,8 @@
.buttonText {
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: $white;
padding: 7px 0;
}

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

@ -32,7 +32,6 @@
background-color: #f0f0f0;
}
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
color: #ffffff;
font-size: 14px;
@ -49,7 +48,7 @@
}
.flexRow--deals {
background-color: #0F3E99;
background-color: #0f3e99;
padding: 14px 0px;
}
@ -89,13 +88,6 @@
max-height: 100%;
}
// .flexColChild:first-child {
// display: flex;
// align-self: flex-end;
// }
.flexRowContent
.flexColChild--quickviewDetails:first-child {
overflow-y: auto;
height: 66% !important;
@ -106,6 +98,27 @@
height: 34% !important;
}
.flexRow--addToCartRow {
padding-bottom: 1rem;
.stretchChildrenWidth {
margin: 0;
// display: flex;
// align-items: center;
// justify-content: center;
}
// .input-button {
// display: flex;
// align-items: center;
// justify-content: center;
// }
.flexRowContent--buy-button {
height: 49px;
display: flex;
justify-content: center;
}
.flexRowContent--buy-button :global(.vtex-button) {
background: $black;
border: none;
border-radius: 0;
}

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

@ -17,10 +17,10 @@
margin: 0;
}
.installments {
color: $gray-500;
margin-bottom: 16px;
}
// .installments {
// color: $gray-500;
// margin-bottom: 16px;
// }
// .sellingPriceValue--summary {
// font-size: 1.25rem;
@ -62,13 +62,37 @@
}
.installments {
font-size: 16px;
line-height: 22px;
color: $gray-500;
font-size: 0;
.installmentsNumber,
.installmentValue {
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: $gray-500;
margin-bottom: 16px;
}
.installmentsNumber {
font-size: 0 !important;
&::before {
content: "36 x";
font-size: 16px;
}
&::after {
content: " de ";
font-weight: 400;
font-size: 16px;
}
}
.installmentValue {
&::after {
content: " sem juros";
font-weight: 400;
}
}
}

37
styles/sass/pages/product/vtex.product-quantity.scss
View File

@ -1,3 +1,36 @@
.quantitySelectorTitle {
display: none;
:global(.vtex-numeric-stepper__minus-button),
:global(.vtex-numeric-stepper__plus-button) {
background-color: $white;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: $black;
border-radius: 0;
}
:global(.vtex-numeric-stepper__minus-button) {
border-top: 1px;
border-left: 1px;
border-bottom: 1px;
border-style: solid;
border-color: $gray-1000;
}
:global(.vtex-numeric-stepper__plus-button) {
border-top: 1px;
border-right: 1px;
border-bottom: 1px;
border-style: solid;
border-color: $gray-1000;
}
:global(.vtex-numeric-stepper__input) {
border-top: 1px;
border-bottom: 1px;
border-style: solid;
border-right: none;
border-left: none;
border-color: $gray-1000;
color: $gray-500;
outline: 0;
}

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

@ -11,18 +11,6 @@
}
}
// .stretchChildrenWidth {
// width: 664px;
// }
// .stackItem--product {
// width: 664px;
// }
// .productImagesGallerySlide {
// width: 664px !important;
// }
.productNameContainer--quickview {
font-weight: 300;
font-size: 20px;
@ -72,12 +60,29 @@
.skuSelectorItemImageValue,
.skuSelectorInternalBox {
border-radius: 50%;
// width: 48px;
// height: 48px;
}
// .skuSelectorInternalBox {
// border-color: $gray-800;
// }
.frameAround {
border-color: $black;
}
.diagonalCross {
color: $gray-900;
top: 5px;
left: 6px;
bottom: 0px;
z-index: 2;
width: 28px;
height: 28px;
transform: rotateY(180deg);
}
.skuSelectorTextContainer {
.skuSelectorName {
font-size: 0;
@ -87,7 +92,7 @@
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: gray;
color: $gray-500;
}
}
@ -115,6 +120,10 @@
height: 40px;
}
.skuSelectorInternalBox {
border-color: $gray-800;
}
.frameAround {
border-color: $black;
top: -2px;
@ -125,12 +134,14 @@
}
.diagonalCross {
color: $gray-900;
top: 4px;
right: 6px;
left: 6px;
bottom: 0px;
z-index: 2;
width: 29px;
height: 29px;
width: 28px;
height: 28px;
transform: rotateY(180deg);
}
.skuSelectorTextContainer {
@ -162,3 +173,60 @@
.skuSelectorItemTextValue {
color: rgba(185, 185, 185, 0.6);
}
.skuSelectorItem {
margin: 0 16px 0 0;
}
.shippingContainer {
display: flex;
:global(.vtex-address-form__postalCode) {
display: flex;
align-items: center;
:global(.vtex-input__label) {
font-size: 0;
&::after {
content: "CALCULAR FRETE:";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $gray-500;
}
}
}
:global(.vtex-button) {
font-size: 0;
position: relative;
top: -5px;
right: 148px;
width: 49px;
height: 49px;
margin-top: 27px;
background-color: $black;
&::after {
content: "OK";
font-size: 14px;
line-height: 19px;
font-weight: 600;
color: white;
}
}
:global(.vtex-address-form__postalCode-forgottenURL) {
position: relative;
left: 32px;
:last-child {
color: $black;
}
}
}
:global(.vtex-button__label) {
height: fit-content;
}

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

@ -9,6 +9,9 @@ $gray-400: #AFAFAF;
$gray-500: #929292;
$gray-600: #575757;
$gray-700: #202020;
$gray-800: #989898;
$gray-900: #d5d5d5;
$gray-1000: #cccccc;
$black: #000000;