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

Feat(Pdp): Adiciona fonte, cria descrição do produto e cria a base da prateleira de produtos

Browse Source
This commit is contained in:
Rhayllon Daudt 2023-02-09 08:14:34 -03:00
parent 7ab2ffd812
commit 2877374d0e
17 changed files with 372 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/fonts/OpenSans-Bold.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/OpenSans-ExtraBold.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/OpenSans-Light.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/OpenSans-Medium.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/OpenSans-Regular.ttf Normal file
View File

Binary file not shown.

BIN
assets/fonts/OpenSans-SemiBold.ttf Normal file
View File

Binary file not shown.

3
store/blocks/minicart.jsonc
View File

@ -9,7 +9,8 @@
"props": {
"addToCartFeedback": "customEvent",
"customPixelEventId": "add-to-cart-button",
"text": "Adicionar à sacola"
"text": "Adicionar à sacola",
"blockClass": "addSacola"
}
},

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

@ -3,14 +3,15 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
// "flex-layout.row#description",
"tab-layout#AA323",
"tab-layout#descriptionLayout",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
"shelf.relatedProducts",
// "shelf.relatedProducts",
"list-context.product-list#demo1",
"product-questions-and-answers"
]
},
"html#breadcrumb": {
"props": {
"tag": "section",
@ -27,12 +28,72 @@
"text": "##### Product Specifications"
}
},
"flex-layout.row#description": {
"props": {
"marginBottom": 7
},
"children": ["product-description"]
"product-summary.shelf#demo1": {
"children": [
"product-summary-name",
"product-summary-description",
"product-summary-image",
"product-summary-price",
"product-summary-sku-selector",
"product-summary-buy-button"
]
},
"slider-layout#demo-products": {
"props": {
"itemsPerPage": {
"desktop": 3,
"tablet": 1,
"phone": 1
},
"infinite": true,
"showNavigationArrows": "desktopOnly",
"blockClass": "carousel"
}
// "children": ["rich-text#1AA", "rich-text#2AA", "rich-text#3AA"]
},
// "rich-text#1AA": {
// "props": {
// "text": "ADADADAD"
// }
// },
// "rich-text#2AA": {
// "props": {
// "text": "FGFGFGFG"
// }
// },
// "rich-text#3AA": {
// "props": {
// "text": "GHGHGHGHHGH"
// }
// },
"list-context.product-list#demo1": {
"blocks": ["product-summary.shelf#demo1"],
"children": ["slider-layout#demo-products"]
},
"flex-layout.col#description": {
"props": {
"preventVerticalStretch": true
},
"children": ["product-description#1", "product-description#2"]
},
"product-description#1": {
"props": {
"blockClass": "descriptioncontent1"
}
},
"product-description#2": {
"props": {
"blockClass": "descriptioncontent2",
"showTitle": false
}
},
"condition-layout.product#availability": {
"props": {
"conditions": [
@ -58,22 +119,10 @@
},
"flex-layout.row#descriptionRow": {
"props": {
// "colGap": 7,
// "rowGap": 7,
// "marginTop": 4,
// "marginBottom": 7,
// "paddingTop": 7,
// "paddingBottom": 7,
"blockClass": "descriptionRow"
"blockClass": "descriptionRow",
"colGap": 7
},
"children": ["image#example111", "flex-layout.row#description"]
},
"image#example111": {
"props": {
"src": "https://storecomponents.vteximg.com.br/arquivos/box.png",
"maxHeight": 100
}
"children": ["product-images#descriptionImg", "flex-layout.col#description"]
},
"stack-layout": {
@ -102,47 +151,86 @@
}
},
"tab-layout#AA323": {
"tab-layout#descriptionLayout": {
"props": {
"blockClass": "descriptionLayout"
},
"children": [
"tab-list#AA555",
"tab-content#AA555"
"tab-list#descriptionButtonWrapper",
"tab-content#descriptionContentWrapper"
]
},
"tab-list#AA555": {
"tab-list#descriptionButtonWrapper": {
"props": {
"blockClass": "descriptionButtonWrapper"
},
"children": [
"tab-list.item#1",
"tab-list.item#2"
"tab-list.item#2",
"tab-list.item#3",
"tab-list.item#4",
"tab-list.item#5"
]
},
"tab-content#AA555": {
"tab-content#descriptionContentWrapper": {
"props": {
"blockClass": "descriptionContentWrapper"
},
"children": [
"tab-content.item#1",
"tab-content.item#2"
"tab-content.item#2",
"tab-content.item#3",
"tab-content.item#4",
"tab-content.item#5"
]
},
"tab-list.item#1": {
"props": {
"tabId": "majorAppliances",
"label": "Major Appliances",
"tabId": "description1",
"label": "Descrição",
"blockClass": "descriptionButton",
"defaultActiveTab": true
}
},
"tab-list.item#2": {
"props": {
"tabId": "electronics",
"label": "Electronics"
"tabId": "description2",
"blockClass": "descriptionButton",
"label": "Descrição"
}
},
"tab-list.item#3": {
"props": {
"tabId": "description3",
"blockClass": "descriptionButton",
"label": "Descrição"
}
},
"tab-list.item#4": {
"props": {
"tabId": "description4",
"blockClass": "descriptionButton",
"label": "Descrição"
}
},
"tab-list.item#5": {
"props": {
"tabId": "description5",
"blockClass": "descriptionButton",
"label": "Descrição"
}
},
"tab-content.item#1": {
"children": [
"rich-text#1"
"flex-layout.row#descriptionRow"
],
"props": {
"tabId": "majorAppliances"
"tabId": "description1",
"blockClass": "descriptionContent"
}
},
"tab-content.item#2": {
@ -150,22 +238,43 @@
"flex-layout.row#descriptionRow"
],
"props": {
"tabId": "electronics"
"tabId": "description2",
"blockClass": "descriptionContent"
}
},
"rich-text#1": {
"tab-content.item#3": {
"children": [
"flex-layout.row#descriptionRow"
],
"props": {
"text": "Texto para Major Appliances",
"textPosition": "CENTER",
"font": "t-heading-3"
"tabId": "description3",
"blockClass": "descriptionContent"
}
},
"rich-text#2": {
"tab-content.item#4": {
"children": [
"flex-layout.row#descriptionRow"
],
"props": {
"text": "Texto para Electronics",
"textPosition": "CENTER",
"font": "t-heading-3"
"tabId": "description4",
"blockClass": "descriptionContent"
}
},
"tab-content.item#5": {
"children": [
"flex-layout.row#descriptionRow"
],
"props": {
"tabId": "description5",
"blockClass": "descriptionContent"
}
},
"product-images#descriptionImg": {
"props": {
"displayMode": "first-image",
"maxHeight": 632,
"blockClass": "descriptionImg",
"width": "49%"
}
},
@ -186,9 +295,9 @@
}
},
"flex-layout.row#product-image": {
"children": ["product-images"]
"children": ["product-images#imgsMain"]
},
"product-images": {
"product-images#imgsMain": {
"props": {
"aspectRatio": {
"desktop": "auto",
@ -198,6 +307,7 @@
"showPaginationDots": false,
"thumbnailsOrientation": "horizontal",
"thumbnailMaxHeight": 90,
"blockClass": "ImgsMain",
"maxHeight": 664
}
},

31
styles/configs/font-faces.css Normal file
View File

@ -0,0 +1,31 @@
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-Light.ttf);
font-weight: 300;
}
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-Regular.ttf);
font-weight: 400;
}
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-Medium.ttf);
font-weight: 500;
}
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-SemiBold.ttf);
font-weight: 600;
}
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-Bold.ttf);
font-weight: 700;
}
@font-face {
font-family: "Open Sans";
src: url(assets/fonts/OpenSans-ExtraBold.ttf);
font-weight: 800;
}

24
styles/configs/style.json
View File

@ -253,84 +253,84 @@
"measure": [30, 34, 20],
"styles": {
"heading-1": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "700",
"fontSize": "3rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-2": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "700",
"fontSize": "2.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-3": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "700",
"fontSize": "1.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-4": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.5rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-5": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"heading-6": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1.25rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"body": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "1rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"small": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "0.875rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"mini": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "normal",
"fontSize": "0.75rem",
"textTransform": "initial",
"letterSpacing": "0"
},
"action": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "500",
"fontSize": "1rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--small": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "500",
"fontSize": "0.875rem",
"textTransform": "uppercase",
"letterSpacing": "0"
},
"action--large": {
"fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
"fontWeight": "500",
"fontSize": "1.25rem",
"textTransform": "uppercase",

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

@ -20,4 +20,15 @@
.flexRow--buyButton .flexRowContent--buyButton {
margin: 0;
height: 49px;
}
.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-button) {
background-color: #292929;
color: #fff;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
border: none;
border-radius: 0;
height: 48px;
}

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

@ -11,7 +11,7 @@
background: red;
}
.productImageTag--main {
.productImageTag--ImgsMain--main {
object-fit: unset !important;
}
@ -53,6 +53,7 @@
left: 150px;
align-items: center;
padding-top: 16.1px;
text-decoration: underline;
}
.shippingContainer :global(.vtex__icon-external-link) {
display: none;
@ -64,7 +65,7 @@
position: relative;
right: 129px;
margin-top: 24px;
background-color: black;
background-color: #292929;
font-size: 0;
border: none;
border-radius: 0;
@ -74,5 +75,25 @@
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: white;
color: #fff;
}
.productDescriptionContainer--descriptioncontent1 {
margin-bottom: 16px;
}
.productDescriptionTitle--descriptioncontent1 {
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
margin-bottom: 8px;
}
.content--descriptioncontent1,
.content--descriptioncontent2 {
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}

51
styles/css/vtex.tab-layout.css Normal file
View File

@ -0,0 +1,51 @@
/*
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 */
.container--descriptionLayout {
margin: 0 40px;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper {
justify-content: space-between;
border-bottom: 1px solid #B9B9B9;
padding: 0 64px;
margin-bottom: 32px;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton {
margin: 0;
padding: 0;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button) {
color: #bfbfbf;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button__label) {
padding: 0 16px !important;
text-transform: capitalize;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton {
margin-top: 2px;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button) {
background-color: #fff;
color: #292929;
border: 0;
border-bottom: 2px solid #292929;
border-radius: 0;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button__label) {
padding: 0 16px !important;
text-transform: capitalize;
}

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

@ -10,6 +10,18 @@
.flexRowContent--buyButton{
margin: 0;
height: 49px;
:global(.vtex-button){
background-color: $color-black;
color: $color-white;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
border: none;
border-radius: 0;
height: 48px;
}
}
}

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

@ -2,7 +2,7 @@
background: red;
}
.productImageTag--main{
.productImageTag--ImgsMain--main{
object-fit: unset !important;
}
@ -35,7 +35,7 @@
}
:global(.vtex-input-prefix__group){
height: 49px;
border: 1px solid #CCCCCC;
border: 1px solid $color-gray7;
border-radius: 0;
}
:global(.vtex-address-form__postalCode-forgottenURL){
@ -44,6 +44,7 @@
left: 150px;
align-items: center;
padding-top: 16.1px;
text-decoration: underline;
}
:global(.vtex__icon-external-link){
@ -57,7 +58,7 @@
position: relative;
right: 129px;
margin-top: 24px;
background-color: black;
background-color: $color-black;
font-size: 0;
border: none;
border-radius: 0;
@ -67,7 +68,26 @@
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: white;
color: $color-white;
}
}
}
.productDescriptionContainer--descriptioncontent1{
margin-bottom: 16px;
}
.productDescriptionTitle--descriptioncontent1{
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
margin-bottom: 8px;
}
.content--descriptioncontent1,
.content--descriptioncontent2{
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
}

44
styles/sass/pages/product/vtex.tab-layout.scss Normal file
View File

@ -0,0 +1,44 @@
.container--descriptionLayout{
margin: 0 40px;
.listContainer--descriptionButtonWrapper{
justify-content: space-between;
border-bottom: 1px solid $color-gray6;
padding: 0 64px;
margin-bottom: 32px;
.listItem--descriptionButton{
margin: 0;
padding: 0;
:global(.vtex-button){
color: $color-gray8;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
:global(.vtex-button__label){
padding: 0 16px !important;
text-transform: capitalize;
}
}
.listItemActive--descriptionButton{
margin-top: 2px;
:global(.vtex-button){
background-color: $color-white;
color: $color-black;
border: 0;
border-bottom: 2px solid $color-black;
border-radius: 0;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
}
:global(.vtex-button__label){
padding: 0 16px !important;
text-transform: capitalize;
}
}
}
}

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

@ -7,6 +7,9 @@ $color-gray2: #7d7d7d;
$color-gray3: #f0f0f0;
$color-gray4: #c4c4c4;
$color-gray5: #e5e5e5;
$color-gray6: #B9B9B9;
$color-gray7: #CCCCCC;
$color-gray8: #bfbfbf;
$color-blue: #4267b2;