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

feat(dados_de_compra):titulo && cart btn estilizados

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-02 22:47:13 -03:00
parent feadf14905
commit 3eb41bad16
9 changed files with 122 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -80,8 +80,8 @@
},
"product-images": {
"props": {
"testid": "product-images",
"aspectRatio": {
"testid": "product-images",
"aspectRatio": {
"desktop": "auto",
"phone": "auto"
},
@ -98,7 +98,6 @@
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"product-rating-summary",
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
@ -118,19 +117,24 @@
}
},
"product-identifier.product": {
"props": {
"label": "hide" //'default' | 'custom' | 'hide'
}
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
"marginBottom": 3,
"blockClass": "title"
},
"children": ["vtex.store-components:product-name"]
"children": [
"product-identifier.product",
"vtex.store-components:product-name"
]
},
"product-identifier.product": {
"props": {
"label": "hide", //'default' | 'custom' | 'hide'
"blockClass": "sku"
}
},
"sku-selector": {
"props": {
"variationsSpacing": 3,
@ -142,11 +146,17 @@
"props": {
"marginTop": 4,
"marginBottom": 7,
"blockClass":"buy-button"
"blockClass": "buy-button"
},
"children": ["product-quantity","add-to-cart-button"]
"children": ["product-quantity", "add-to-cart-button"]
},
"product-quantity": {
"props": {
"width": "20%",
"showLabel": false,
"size": "regular"
}
},
"add-to-cart-button": {
"props": {
"text": "ADICIONAR À SACOLA"

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

@ -21,13 +21,12 @@
}
.flexRowContent--buy-button .stretchChildrenWidth {
padding: 0;
width: max-content !important;
justify-content: flex-start;
}
.flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-button) {
background: black;
height: 49px;
width: 100%;
min-width: 534px;
max-width: 526px;
}
@media screen and (min-width: 40em) {
@ -137,3 +136,8 @@
:global(.vtex-shelf-1-x-slide) .flexRowContent--m3-shelf-price-selling-savings {
justify-content: center;
}
.flexRowContent--title {
align-items: end;
flex-direction: column-reverse;
}

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

@ -1,3 +1,15 @@
/*
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;
display: block;
text-align: end;
margin-top: 8px;
padding-right: 8px;
}

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

@ -7,6 +7,31 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.quantitySelectorTitle {
display: none;
.quantitySelectorStepper {
border: 1px solid #CCCCCC;
width: max-content;
min-width: 83.86%;
padding: 3.5px 0;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) {
border: none;
max-width: 28px;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button) {
border: none;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button__text) {
color: #000;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button__text) {
color: #000;
}
.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button) {
border: none;
background: #fff;
}
.quantitySelectorContainer {
justify-content: center;
align-items: center;
}

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

@ -7,6 +7,10 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.productNameContainer--quickview {
padding-right: 40px !important;
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
@ -77,7 +81,6 @@
font-weight: 300;
font-size: 20px;
line-height: 34px;
padding-right: 20px;
color: #575757;
}

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

@ -9,12 +9,11 @@
gap: 10px;
.stretchChildrenWidth{
padding: 0;
width: max-content !important;
justify-content: flex-start;
:global(.vtex-button){
background: black;
height: 49px;
width: 100%;
min-width: 534px;
max-width: 526px;
}
}
}
@ -130,5 +129,9 @@
justify-content: center;
}
}
.flexRowContent--title{
align-items: end;
flex-direction: column-reverse;
}

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

@ -0,0 +1,8 @@
.product-identifier{
&--productReference{
display: block;
text-align: end;
margin-top: 8px;
padding-right: 8px;
}
}

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

@ -1,3 +1,31 @@
.quantitySelectorTitle{
display: none;
.quantitySelectorStepper{
border: 1px solid #CCCCCC;
width: max-content;
min-width: 83.86%;
padding: 3.5px 0;
:global(.vtex-numeric-stepper-wrapper){
:global(.vtex-numeric-stepper-container){
:global(.vtex-numeric-stepper__input){
border: none;
max-width: 28px;
}
:global(.vtex-numeric-stepper__plus-button){
border: none;
}
:global(.vtex-numeric-stepper__plus-button__text){
color: #000;
}
:global(.vtex-numeric-stepper__minus-button__text){
color: #000;
}
:global(.vtex-numeric-stepper__minus-button){
border: none;
background: #fff;
}
}
}
}
.quantitySelectorContainer{
justify-content: center;
align-items: center;
}

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

@ -1,6 +1,6 @@
.container{
}
.productNameContainer--quickview{
padding-right: 40px !important;
}
.skuSelectorContainer{
display: flex;
flex-direction: column-reverse;
@ -84,7 +84,6 @@
font-weight: 300;
font-size: 20px;
line-height: 34px;
padding-right: 20px;
color: #575757;
}
.carouselContainer{