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

Merge branch 'feature/prateleira' into desenvolvimento

Browse Source
This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-06 21:47:44 -03:00
commit 133ce31d4a
16 changed files with 511 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,10 @@
/* [class*=html--pdp-breadcrumb]{
background: blue;
} */
/* .html {
background-color: red;
}
.html--pdp-breadcrumb {
background-color: green;
} */
.html--pdp-section_descriptions{
display: flex;
flex-direction: column;
gap: 32;
gap: 32px;
padding: 0px 40px 0px 40px;
}
.html--pdp-section_descriptions :global(.vtex-flex-layout-0-x-flexRowContent){
@ -20,6 +13,15 @@
.html--pdp-descriptions{
display: flex;
}
.html--pdp-descriptions :global(.vtex-flex-layout-0-x-flexRow){
width: 100%;
}
.html--pdp-descriptions :global(.vtex-store-components-3-x-container){
max-width: 100%;
}
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
padding-left: 28px;
}
.html--pdp-departamens{
background: transparent;
margin-top: 32px;
@ -36,6 +38,7 @@
list-style: none;
margin: 0;
}
.html--pdp-departamens div ul li button{
outline: none;
border: none;
@ -51,3 +54,56 @@
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;
max-height: 100% !important;
}
}
@media screen and (max-width: 1024px) {
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){
min-width: 296px;
}
.html--pdp-descriptions :global(.vtex-flex-layout-0-x-flexRowContent){
flex-direction: column;
}
.html--pdp-descriptions :global(.vtex-flex-layout-0-x-stretchChildrenWidth){
align-items: center;
width: 100% !important;
}
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImagesContainer){
width: auto;
}
.html--pdp-departamens div ul{
flex-direction: column;
justify-content: end;
padding: 0;
}
.html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
padding-left: 0px;
}
.html--pdp-departamens div ul li :global(button.open){
border-bottom: none;
}
.html--pdp-departamens ul{
border-top: 1px solid rgba(185, 185, 185, 1);
}
}

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

@ -1,11 +1,94 @@
{
"store.product": {
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"html#departaments"
"html#departaments",
"flex-layout.row#specifications-title",
"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"]
},
"flex-layout.row#shelfpdp": {
"props": {
"blockClass": "pdp-carrousel"
},
"children": ["list-context.product-list#pdp"]
},
"list-context.product-list#pdp": {
"blocks": ["product-summary.shelf#Pdp"],
"children": ["slider-layout#demo-products#pdp"],
"props": {
"orderBy": "OrderByTopSaleDESC"
}
},
"slider-layout#demo-products#pdp": {
"props": {
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 2
},
"infinite": true,
"fullWidth": true,
"blockClass": "pdp-carrousel"
}
},
"product-summary.shelf#Pdp": {
"children": [
"stack-layout#pdp",
"product-summary-name",
"product-list-price#summary",
"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#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",
@ -34,16 +117,23 @@
"flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"]
},
"rich-text#specifications": {
"props": {
"text": "##### Product Specifications"
"text": "##### Você também pode gostar:",
"blockClass": "pdp-specifications"
}
},
"flex-layout.row#description": {
"props": {
"width": "50%"
"width": "66%"
},
"children": ["product-images#description","product-description"]
"children": ["product-images#description", "product-description"]
},
"product-description": {
"props": {
"collapseContent": false
}
},
"condition-layout.product#availability": {
"props": {
@ -52,10 +142,19 @@
"subject": "isProductAvailable"
}
],
"Then": "flex-layout.row#product-main",
"Then": "html#product-main",
"Else": "flex-layout.row#product-availability"
}
},
"html#product-main": {
"props": {
"tag": "div",
"testId": "Product-Images",
"blockClass": "pdp-productMain"
},
"children": ["flex-layout.row#product-main"]
},
"flex-layout.row#product-main": {
"props": {
"colGap": 7,
@ -94,28 +193,28 @@
"testId": "description",
"blockClass": "pdp-section_descriptions"
},
"children": ["html#Sections","html#description"]
"children": ["html#Sections", "html#description"]
},
"html#description": {
"props": {
"tag": "div",
"testId": "description",
"blockClass": "pdp-descriptions"
},
"children": [
"flex-layout.row#description"
]
"children": ["flex-layout.row#description"]
},
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"rowGap": 10,
"width":"46%",
"width": "50%",
"blockClass": "StackLayout",
"htmlId":"teste"
"htmlId": "teste"
}
},
"flex-layout.row#product-image": {
"children": ["product-images"]
},
@ -134,6 +233,7 @@
},
"product-images#description": {
"props": {
"maxHeight": 872,
"testid": "product-images",
"aspectRatio": {
"desktop": "1:1",
@ -143,7 +243,7 @@
"showPaginationDots": false,
"thumbnailVisibility": "hiden",
"displayMode": "first-image",
"zoomMode":"disabled"
"zoomMode": "disabled"
}
},
"flex-layout.col#right-col": {
@ -174,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,

2
styles/css/vtex.breadcrumb.css
View File

@ -13,7 +13,7 @@
margin-right: auto;
max-width: 96rem;
}
@media screen and (max-width: 64.0625em) {
@media screen and (max-width: 1024px) {
.container {
padding: 0 0 0 10.67%;
}

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

@ -29,13 +29,13 @@
max-width: 526px;
}
@media screen and (min-width: 40em) {
@media screen and (min-width: 1024px) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 1rem;
}
}
@media screen and (min-width: 80rem) {
@media screen and (min-width: 1280px) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
@ -140,4 +140,37 @@
.flexRowContent--title {
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

@ -107,4 +107,49 @@
}
.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;
}
}

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

@ -20,7 +20,7 @@
opacity: 1;
}
@media screen and (max-width: 40em) {
@media screen and (max-width: 1024px) {
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
display: none;
}
@ -54,4 +54,34 @@
}
.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;
}
}

13
styles/css/vtex.rich-text.css
View File

@ -6,4 +6,15 @@
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
/* Grid breakpoints */
.container--pdp-specifications {
justify-content: center;
}
.container--pdp-specifications .wrapper--pdp-specifications .heading {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #575757;
}

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

@ -90,19 +90,19 @@
.carouselContainer .productImage {
max-width: 85.238%;
}
@media screen and (min-width: 156.25em) {
@media screen and (min-width: 1920px) {
.carouselContainer .productImage {
min-width: 904px;
max-width: 100%;
}
}
@media screen and (max-width: 64.0625em) {
@media screen and (max-width: 1024px) {
.carouselContainer .productImage {
min-width: 296px;
max-width: 100%;
}
}
@media screen and (max-width: 23.375em) {
@media screen and (max-width: 375px) {
.carouselContainer .productImage {
min-width: 0;
max-width: 100%;
@ -127,7 +127,7 @@
background: white;
margin-right: 1em;
}
@media screen and (max-width: 64.0625em) {
@media screen and (max-width: 1024px) {
.carouselGaleryThumbs .productImagesThumb {
width: 30% !important;
}
@ -142,7 +142,7 @@
border-radius: 8px;
min-height: 5.54em;
}
@media screen and (max-width: 64.0625em) {
@media screen and (max-width: 1024px) {
.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
min-height: 4.9em;
}
@ -150,4 +150,43 @@
.carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
border-radius: 8px;
width: 90px;
}
.productDescriptionContainer .productDescriptionTitle {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
}
@media screen and (min-width: 1920px) {
.productDescriptionContainer .productDescriptionTitle {
font-size: 32px;
}
}
@media screen and (max-width: 1024px) {
.productDescriptionContainer .productDescriptionTitle {
font-size: 20px !important;
}
}
.productDescriptionContainer .content {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
@media screen and (min-width: 1920px) {
.productDescriptionContainer .content {
font-size: 18px;
line-height: 25px;
}
}
@media screen and (max-width: 1024px) {
.productDescriptionContainer .content {
font-size: 14px !important;
line-height: 19px !important;
}
}

2
styles/css/vtex.store-video.css
View File

@ -4,7 +4,7 @@
margin-top: 2%;
}
@media only screen and (min-width: 640px) {
@media only screen and (min-width: 280px) {
.videoContainer {
height: 700px;
}

2
styles/sass/pages/product/vtex.breadcrumb.scss
View File

@ -3,7 +3,7 @@
margin-left: auto;
margin-right: auto;
max-width: 96rem;
@media screen and (max-width: 64.0625em){
@media screen and (max-width: 1024px){
padding: 0 0 0 10.67%;
}
.term,.termArrow{

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

@ -18,14 +18,14 @@
}
}
}
@media screen and (min-width: 40em) {
@media screen and (min-width: 1024px) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 1rem;
}
}
@media screen and (min-width: 80rem) {
@media screen and (min-width: 1280px) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
@ -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;
}
}

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

@ -11,7 +11,7 @@
opacity: 1;
}
@media screen and (max-width: 40em) {
@media screen and (max-width: 1024px) {
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
display: none;
}
@ -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;
}
}

15
styles/sass/pages/product/vtex.rich-text.scss
View File

@ -0,0 +1,15 @@
.container{
&--pdp-specifications{
justify-content: center;
.wrapper--pdp-specifications{
.heading{
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #575757;
}
}
}
}

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

@ -90,15 +90,15 @@
padding: 0 40px 0;
.productImage{
max-width:85.238%;
@media screen and (min-width: 156.25em){
@media screen and (min-width: 1920px){
min-width: 904px;
max-width:100%;
}
@media screen and (max-width: 64.0625em){
@media screen and (max-width: 1024px){
min-width: 296px;
max-width:100%;
}
@media screen and (max-width: 23.375em){
@media screen and (max-width: 375px){
min-width: 0;
max-width:100%;
}
@ -120,7 +120,7 @@
width: max-content !important;
background:white;
margin-right: 1em;
@media screen and (max-width: 64.0625em){
@media screen and (max-width: 1024px){
width: 30% !important;
}
.figure{
@ -130,7 +130,7 @@
.thumbImg{
border-radius: 8px;
min-height: 5.54em;
@media screen and (max-width: 64.0625em){
@media screen and (max-width: 1024px){
min-height: 4.9em;
}
}
@ -142,4 +142,36 @@
}
}
}
.productDescriptionContainer{
.productDescriptionTitle{
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
@media screen and (min-width: 1920px){
font-size: 32px;
}
@media screen and (max-width: 1024px){
font-size: 20px !important;
}
}
.content{
font-family: 'Open Sans',sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
@media screen and (min-width: 1920px){
font-size: 18px;
line-height: 25px;
}
@media screen and (max-width: 1024px){
font-size: 14px !important;
line-height: 19px !important;
}
}
}

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;
}
}
}

4
styles/sass/utils/_mixin.scss
View File

@ -24,7 +24,7 @@
} //375px
}
@if $breakpoint == phone {
@media only screen and (max-width: 37.5em) {
@media only screen and (max-width:1024px) {
@content;
} //600px
}
@ -39,7 +39,7 @@
} //1200px
}
@if $breakpoint == big-desktop {
@media only screen and (min-width: 112.5em) {
@media only screen and (min-width: 1900px) {
@content;
} //1800px
}