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

feat: adiciona scss de quantity button, adicionar ao carrinho e calcular frete

Browse Source
This commit is contained in:
SamuelCondack 2023-01-31 17:39:32 -03:00
parent 8e5bed3e6d
commit 558dbe128b
8 changed files with 340 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
react/components/Html/style.css
View File

@ -1,3 +1,29 @@
[class*="html--pdp-breadcrumb"] {
margin-left: 40px;
}
[class*="html"] {
display: flex;
align-items: center;
gap: 10px;
}
[class*='html'] > [class*='button'] {
width: 100%;
height: 49px;
margin-right: 40px;
background: #000;
border: #000;
}
[class*="html"]>[class*='flexRow'] {
width: 100%;
height: 49px;
display: flex;
align-items: center;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #FFFFFF;
}

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

@ -10,9 +10,15 @@
"product-questions-and-answers"
]
},
"html#quantityAndButton": {
"children": [
"product-quantity",
"add-to-cart-button"
]
},
"Pix-academy": {
"props": {
"blockClass": "pix-wrapper"
"blockClass": "pix-wrapper"
}
},
"tab-layout#desc": {
@ -245,11 +251,9 @@
"Parcelamento",
"Pix-academy",
"sku-selector",
"product-separator",
"product-quantity",
"html#quantityAndButton",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
"availability-subscriber",
"shipping-simulator"
]

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

@ -7,7 +7,19 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.product-identifier--productReference {
.product-identifier {
display: flex;
justify-content: right;
justify-content: flex-end;
margin-right: 40px;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: right;
color: rgba(146, 146, 146, 0.48);
}
.product-identifier .product-identifier__label,
.product-identifier .product-identifier__separator {
display: none;
}

45
styles/css/vtex.product-quantity.css Normal file
View File

@ -0,0 +1,45 @@
/*
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 */
.quantitySelectorContainer {
margin: 0;
}
.quantitySelectorContainer .quantitySelectorTitle {
display: none;
}
.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) {
width: 128px;
border: solid 1px #ccc;
}
.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) {
height: 49px;
}
.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) :global(.vtex-numeric-stepper__plus-button) {
width: 100%;
height: 49px;
color: #000;
border: none;
background: #fff;
}
.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) {
width: 100%;
height: 49px;
border: none;
background: #fff;
}
.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) {
height: 49px;
}
.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) :global(.vtex-numeric-stepper__minus-button) {
width: 100%;
height: 49px;
color: #000;
border: none;
background: #fff;
}

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

@ -12,6 +12,11 @@
background: red;
}
.carouselGaleryThumbs {
width: 59.24%;
padding-left: 40px;
}
.productNameContainer {
display: flex;
justify-content: right;
@ -35,6 +40,18 @@
display: none;
}
.productBrand {
display: flex;
justify-content: flex-end;
margin-right: 37px;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
@ -66,4 +83,73 @@
.frameAround {
border-color: #000;
}
.shippingContainer {
display: flex;
margin: 0;
align-items: center;
position: relative;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
display: flex;
flex-direction: column;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label)::before {
content: "CALCULAR FRETE:";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
width: 231px;
height: 49px;
margin: 0;
padding: 16.5px 0 16.5px 16px;
border: 1px solid #cccccc;
border-radius: 0;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
display: flex;
position: absolute;
padding: 0;
left: 312px;
top: 41.5px;
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex-address-form__postalCode-forgottenURL):first-child {
color: #000;
}
.shippingContainer :global(.vtex-button) {
display: flex;
width: 49px;
height: 49px;
margin-bottom: 5px;
background: #000;
border: 1px solid #000;
border-radius: 0;
cursor: pointer;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
padding: 0;
font-size: 0;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::before {
content: "OK";
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #fff;
}

19
styles/sass/pages/product/vtex.product-identifier.scss
View File

@ -1,4 +1,19 @@
.product-identifier--productReference{
.product-identifier {
display: flex;
justify-content: right;
justify-content: flex-end;
margin-right: 40px;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: right;
color: rgba(146, 146, 146, 0.48);
.product-identifier__label,
.product-identifier__separator {
display: none;
}
}

42
styles/sass/pages/product/vtex.product-quantity.scss Normal file
View File

@ -0,0 +1,42 @@
.quantitySelectorContainer {
margin: 0;
.quantitySelectorTitle {
display: none;
}
:global(.vtex-numeric-stepper-wrapper) {
:global(.vtex-numeric-stepper-container) {
width: 128px;
border: solid 1px #ccc;
:global(.vtex-numeric-stepper__plus-button-container) {
height: 49px;
:global(.vtex-numeric-stepper__plus-button) {
width: 100%;
height: 49px;
color: #000;
border: none;
background: #fff;
}
}
:global(.vtex-numeric-stepper__input) {
width: 100%;
height: 49px;
border: none;
background: #fff;
}
:global(.vtex-numeric-stepper__minus-button-container) {
height: 49px;
:global(.vtex-numeric-stepper__minus-button) {
width: 100%;
height: 49px;
color: #000;
border: none;
background: #fff;
}
}
}
}
}

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

@ -3,6 +3,10 @@
.newsletter{
background: red;
}
.carouselGaleryThumbs {
width: 59.24%;
padding-left: 40px;
}
.productNameContainer{
display: flex;
justify-content: right;
@ -24,6 +28,19 @@
.pointerEventsNone{
display: none;
}
.productBrand {
display: flex;
justify-content: flex-end;
margin-right: 37px;
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
color: #575757;
}
.skuSelectorContainer{
display: flex;
flex-direction: column-reverse;
@ -59,3 +76,88 @@
.frameAround {
border-color: #000;
}
.shippingContainer {
display: flex;
margin: 0;
align-items: center;
position: relative;
:global(.vtex-address-form__postalCode) {
display: flex;
:global(.vtex-input) {
display: flex;
flex-direction: column;
:global(.vtex-input__label) {
font-size: 0;
}
:global(.vtex-input__label)::before {
content: 'CALCULAR FRETE:';
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
:global(.vtex-input-prefix__group) {
width: 231px;
height: 49px;
margin: 0;
padding: 16.5px 0 16.5px 16px;
border: 1px solid #cccccc;
border-radius: 0;
}
}
:global(.vtex-address-form__postalCode-forgottenURL) {
display: flex;
position: absolute;
padding: 0;
left: 312px;
top: 41.5px;
:global(.vtex-address-form__postalCode-forgottenURL):first-child {
color: #000;
}
}
}
:global(.vtex-button) {
display: flex;
width: 49px;
height: 49px;
margin-bottom: 5px;
background: #000;
border: 1px solid #000;
border-radius: 0;
cursor: pointer;
:global(.vtex-button__label) {
padding: 0;
font-size: 0;
}
:global(.vtex-button__label)::before {
content: 'OK';
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #fff;
}
}
}