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(prateleira):prateleira de produtos finalizada

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-06 21:35:24 -03:00
parent 4799a97d36
commit e4582300d1
8 changed files with 276 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
react/components/Html/styles.css
View File

@ -54,10 +54,24 @@
color: #000000;
border-bottom: 1px solid #000000;
}
:global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
margin-bottom: 20px;
}
.html--pdp-productMain :global(.vtex-store-components-3-x-container){
max-width: 100%;
}
:global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel){
background: #000000;
}
:global(.vtex-slider-layout-0-x-paginationDotsContainer--pdp-carrousel){
align-items: center;
}
:global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel--isActive){
min-width: 17px;
min-height: 17px;
border: 0.5px solid black;
background: #ffffff;
}
@media screen and (max-width: 375px){
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){
min-width: 100% !important;
@ -77,7 +91,6 @@
}
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImagesContainer){
width: auto;
}
.html--pdp-departamens div ul{
flex-direction: column;

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

@ -6,6 +6,17 @@
"html#carousel"
]
},
"html#prateleira": {
"props": {
"testId": "vtex-product-sumary"
},
"children": [
"product-summary-image#shelfpdp",
"product-summary-name",
"product-list-price#summary",
"product-selling-price#summary"
]
},
"html#carousel": {
"children": ["flex-layout.row#shelfpdp"]
},
@ -31,7 +42,7 @@
},
"infinite": true,
"fullWidth": true,
"blockClass": "pdp"
"blockClass": "pdp-carrousel"
}
},
@ -40,16 +51,44 @@
"stack-layout#pdp",
"product-summary-name",
"product-list-price#summary",
"product-installments#summary",
"flex-layout.row#selling-price-savings"
"product-selling-price#summarypdp",
"flex-layout.row#selling-price-savingspdp"
]
},
"flex-layout.row#selling-price-savingspdp": {
"props": {
"blockClass": "pdp-price",
"colGap": 2,
"preserveLayoutOnMobile": true,
"preventHorizontalStretch": true,
"marginBottom": 4
},
"children": [
"product-selling-price#summary",
"product-price-savings#summary"
]
},
"product-summary-name": {
"props": {
"blockClass": "pdp-name"
}
},
"stack-layout#pdp": {
"children": [
"product-summary-image#shelf",
"product-summary-image#shelfpdp",
"modal-trigger#quickview" // Check quickview.jsonc
]
},
"product-summary-image#shelfpdp": {
"props": {
"blockClass": "pdp-imgpdp",
"showBadge": false,
"aspectRatio": "1:1",
"maxHeight": 334.4
}
},
"html#breadcrumb": {
"props": {
"tag": "section",
@ -91,9 +130,9 @@
},
"children": ["product-images#description", "product-description"]
},
"product-description":{
"props":{
"collapseContent":false
"product-description": {
"props": {
"collapseContent": false
}
},
"condition-layout.product#availability": {
@ -194,7 +233,7 @@
},
"product-images#description": {
"props": {
"maxHeight":872,
"maxHeight": 872,
"testid": "product-images",
"aspectRatio": {
"desktop": "1:1",
@ -235,7 +274,12 @@
"message": "{installmentsNumber} de {installmentValue} sem juros"
}
},
"product-selling-price#summarypdp": {
"props": {
"blockClass": "desconto",
"message": "de {sellingPriceWithTax} por"
}
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3,

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

@ -141,3 +141,36 @@
align-items: end;
flex-direction: column-reverse;
}
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) {
top: 33%;
}
@media screen and (max-width: 1024px) {
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) {
max-width: 11.2px;
max-height: 29.6px;
top: 25%;
padding: 0;
}
}
@media screen and (max-width: 1024px) {
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-slide--pdp-carrousel) {
width: 4.9344% !important;
height: max-content;
min-height: max-content;
max-width: 274px;
}
}
@media screen and (max-width: 1024px) {
.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel) {
height: 100%;
max-height: 392px;
}
}
.flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) {
max-width: 100%;
}
.flexRow--pdp-price .flexRowContent--pdp-price {
justify-content: center;
}

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

@ -108,3 +108,48 @@
.installments .installmentsNumber::after {
content: "x";
}
.sellingPriceValue--summary-pdp {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: #000000;
}
@media screen and (max-width: 1024px) {
.sellingPriceValue--summary-pdp {
font-size: 18px;
line-height: 25px;
}
}
.sellingPrice--desconto {
display: flex;
justify-content: center;
gap: 5px;
text-decoration-line: line-through;
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
color: #BABABA;
margin-bottom: 8px;
}
@media screen and (max-width: 1024px) {
.sellingPrice--desconto {
font-size: 12px;
line-height: 16px;
}
}
.sellingPrice--desconto .sellingPriceValue--desconto {
font-size: 14px;
line-height: 19px;
}
@media screen and (max-width: 1024px) {
.sellingPrice--desconto .sellingPriceValue--desconto {
font-size: 12px;
line-height: 16px;
}
}

30
styles/css/vtex.product-summary.css
View File

@ -55,3 +55,33 @@
.nameContainer .productNameContainer {
text-align: center;
}
@media screen and (max-width: 1024px) {
.nameContainer .productNameContainer--pdp-name {
max-height: 80px;
}
}
@media screen and (min-width: 1920px) {
.image--pdp-imgpdp {
min-width: 334.4px;
}
}
.nameContainer--pdp-name {
justify-content: center;
}
.productBrand--pdp-name {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
}
@media screen and (max-width: 1024px) {
.productBrand--pdp-name {
font-size: 14px;
line-height: 19px;
}
}

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

@ -133,5 +133,42 @@
align-items: end;
flex-direction: column-reverse;
}
.flexRowContent--pdp-carrousel{
:global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel){
top: 33%;
@media screen and (max-width: 1024px){
max-width: 11.2px;
max-height: 29.6px;
top: 25%;
padding: 0;
}
}
:global(.vtex-slider-layout-0-x-slide--pdp-carrousel){
@media screen and (max-width: 1024px){
width: 4.9344% !important;
height: max-content;
min-height: max-content;
max-width: 274px;
}
}
:global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
@media screen and (max-width: 1024px){
height: 100%;
max-height: 392px;
}
}
}
.flexRow--pdp-carrousel{
:global(.vtex-store-components-3-x-container){
max-width: 100%;
}
@media screen and (max-width: 1024px){
}
}
.flexRow--pdp-price{
.flexRowContent--pdp-price{
justify-content: center;
}
}

26
styles/sass/pages/product/vtex.product-summary.scss
View File

@ -46,4 +46,30 @@
.productNameContainer{
text-align: center;
}
.productNameContainer--pdp-name{
@media screen and (max-width: 1024px){
max-height: 80px;
}
}
}
.image--pdp-imgpdp{
@media screen and (min-width: 1920px){
min-width: 334.4px;
}
}
.nameContainer--pdp-name{
justify-content: center;
}
.productBrand--pdp-name{
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
@media screen and (max-width: 1024px){
font-size: 14px;
line-height: 19px;
}
}

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

@ -102,3 +102,40 @@
}
}
}
.sellingPriceValue--summary-pdp{
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: #000000;
@media screen and (max-width: 1024px){
font-size: 18px;
line-height: 25px;
}
}
.sellingPrice--desconto{
display: flex;
justify-content: center;
gap: 5px;
text-decoration-line: line-through;
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
color: #BABABA;
margin-bottom: 8px;
@media screen and (max-width: 1024px){
font-size: 12px;
line-height: 16px;
}
.sellingPriceValue--desconto{
font-size: 14px;
line-height: 19px;
@media screen and (max-width: 1024px){
font-size: 12px;
line-height: 16px;
}
}
}