SavioCarvalhoMoraes/challenge-vtex-io-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'development' (#18) from development into feature/productPurchase

Browse Source 
Reviewed-on: #18
This commit is contained in:
Savio Carvalho Moraes 2023-02-09 19:52:55 +00:00
commit 35b8f303a9
11 changed files with 473 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,7 +9,10 @@
"list-context.product-list#shelf",
"newsletter",
"product-questions-and-answers"
]
],
"props": {
"blockClass": "productAll"
}
},
"html#breadcrumb": {
"props": {
@ -126,7 +129,6 @@
"flex-layout.row#cart",
"product-assembly-options",
"product-gifts",
"availability-subscriber",
"shipping-simulator"
]
@ -135,7 +137,7 @@
"props": {
"blockClass": "cart"
},
"children": ["product-quantity", "flex-layout.row#buy-button"]
"children": ["product-quantity#qtd", "flex-layout.row#buy-button"]
},
"flex-layout.row#product-name": {
"props": {
@ -150,11 +152,20 @@
"showValueNameForImageVariation": true
}
},
"product-quantity#qtd": {
"props": {
"width": "25%",
"size": "regular",
"blockClass": "buyQtd"
}
//"children": ["product-quantity"]
},
"flex-layout.row#buy-button": {
"props": {
"width": "80%",
"blockClass": "buyButton"
"blockClass": "buyButton",
"marginTop": "4",
"marginBottom": "7",
"paddingRight": "0"
},
"children": ["add-to-cart-button"]
@ -200,7 +211,13 @@
}
},
"tab-list#product": {
"children": ["tab-list.item#product1", "tab-list.item#product2"]
"children": [
"tab-list.item#product1",
"tab-list.item#product2",
"tab-list.item#product3",
"tab-list.item#product4",
"tab-list.item#product5"
]
},
"tab-list.item#product1": {
"props": {
@ -215,8 +232,32 @@
"label": "Descrição"
}
},
"tab-list.item#product3": {
"props": {
"tabId": "product3",
"label": "Descrição"
}
},
"tab-list.item#product4": {
"props": {
"tabId": "product4",
"label": "Descrição"
}
},
"tab-list.item#product5": {
"props": {
"tabId": "product5",
"label": "Descrição"
}
},
"tab-content#product": {
"children": ["tab-content.item#product1", "tab-content.item#product2"]
"children": [
"tab-content.item#product1",
"tab-content.item#product2",
"tab-content.item#product3",
"tab-content.item#product4",
"tab-content.item#product5"
]
},
"tab-content.item#product1": {
"children": ["product-images#descricao", "product-description"],
@ -225,17 +266,47 @@
}
},
"tab-content.item#product2": {
"children": ["product-description"],
"children": ["product-images#descricao", "product-description"],
"props": {
"tabId": "product2"
}
},
"tab-content.item#product3": {
"children": ["product-images#descricao", "product-description"],
"props": {
"tabId": "product3"
}
},
"tab-content.item#product4": {
"children": ["product-images#descricao", "product-description"],
"props": {
"tabId": "product4"
}
},
"tab-content.item#product5": {
"children": ["product-images#descricao", "product-description"],
"props": {
"tabId": "product5"
}
},
"list-context.product-list#shelf": {
"blocks": ["product-summary.shelf#shelf"],
"children": ["slider-layout#shelf-products"]
"children": ["rich-text#shelf", "slider-layout#shelf-products"]
},
"rich-text#shelf": {
"props": {
"textAlignment": "CENTER",
"textPosition": "CENTER",
"text": "Você também pode gostar: ",
"blockClass": "shelfTitle"
}
},
"product-summary.shelf#shelf": {
"children": ["product-summary-image#shelf", "product-summary-price"]
"children": [
"product-summary-image#shelf",
"product-summary-name",
"product-summary-price"
]
},
"slider-layout#shelf-products": {
"props": {

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

@ -8,10 +8,27 @@
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */
.homeIcon {
.container {
margin-left: 40px;
}
.container .homeIcon {
display: none;
}
.homeLink::after {
.container .Link,
.container .term {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.container .homeLink::after {
content: "Home";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}

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

@ -7,4 +7,12 @@
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */
/* Grid breakpoints */
.container--shelfTitle {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #575757;
}

49
styles/css/vtex.slider-layout.css
View File

@ -1,31 +1,22 @@
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */
/*.sliderLayoutContainer {
margin: 0 40px 0 40px;
.sliderRightArrow {
right: 100px;
}
}*/
.sliderLayoutContainer {
width: 95%;
padding: 0 16px 0 16px;
display: flex;
justify-content: center;
}
.sliderLayoutContainer--carousel {
background-color: #F0F0F0;
min-height: 450px;
}
.sliderTrackContainer {
max-width: 100%;
}
.paginationDotsContainer {
margin-top: .5rem;
margin-bottom: .5rem;
}
.layoutContainer--shelf {
margin-top: 20px;
margin-bottom: 20px;
max-width: 96rem;
min-height: 550px;
}
.slide--shelf {
margin-bottom: 25px;
padding-left: .5rem;
padding-right: .5rem;
min-height: 550px;
}
}

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

@ -157,4 +157,93 @@
position: relative;
left: 70px;
top: 8px;
}
.productDescriptionContainer .productDescriptionTitle {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
}
.productDescriptionContainer .productDescriptionText {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
.newsletter {
margin-top: 64px;
}
.newsletter .container {
display: flex;
height: 175px;
padding: 0 0 0 0;
background: black;
align-items: center;
justify-content: center;
}
.newsletter .container .label {
display: flex;
flex-direction: column;
font-size: 0;
}
.newsletter .container .label::before {
content: "Assine nossa Newsletter";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #ffffff;
}
.newsletter .container .label::after {
content: "Receba ofertas e novidades por e-mail";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #929292;
}
.newsletter .container :global(.vtex-input-prefix__group) {
display: flex;
justify-content: center;
width: 774px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #929292;
}
.newsletter .container :global(.vtex-styleguide-9-x-input) {
background: transparent;
padding: 0 0 0 0;
}
.newsletter .container :global(.vtex-button) {
position: relative;
left: 145px;
background: transparent;
border: none;
border-radius: 0;
border-bottom: 3px solid #bfbfbf;
}
.newsletter .container :global(.vtex-button):hover {
border-bottom: 5px solid #bfbfbf;
}
.newsletter .container :global(.vtex-button) :global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-align: center;
color: #ffffff;
border: 1px solid #000000;
text-transform: uppercase;
}

62
styles/css/vtex.tab-layout.css
View File

@ -1,4 +1,64 @@
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */
.container {
margin-bottom: 16px;
}
.listContainer {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #b9b9b9;
margin-bottom: 32px;
}
.listContainer .listItem {
padding: 0;
margin: 0;
}
.listContainer .listItem :global(.vtex-button) {
background: white;
border: none;
border-radius: 0;
}
.listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
display: flex;
align-items: center;
text-align: center;
color: #bfbfbf;
text-transform: initial;
}
.listContainer .listItemActive :global(.vtex-button) {
background: white;
border-bottom: 2px solid #000000;
border-radius: 0;
}
.listContainer .listItemActive :global(.vtex-button) :global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
display: flex;
align-items: center;
text-align: center;
color: #000000;
text-transform: initial;
}
.contentItem {
display: flex;
flex-direction: row;
}
gap: 32px;
}

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

@ -1,8 +1,26 @@
.homeIcon {
display: none;
}
.homeLink {
&::after {
content: "Home";
.container {
margin-left: 40px;
.homeIcon {
display: none;
}
.Link,
.term {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.homeLink {
&::after {
content: "Home";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
}

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

@ -0,0 +1,9 @@
.container--shelfTitle {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
color: #575757;
}

12
styles/sass/pages/product/vtex.slider-layout.scss Normal file
View File

@ -0,0 +1,12 @@
/*.sliderLayoutContainer {
margin: 0 40px 0 40px;
.sliderRightArrow {
right: 100px;
}
}*/
.sliderLayoutContainer {
width: 95%;
padding: 0 16px 0 16px;
display: flex;
justify-content: center;
}

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

@ -159,3 +159,96 @@
top: 8px;
}
}
//Estilização da descrição do produto
.productDescriptionContainer {
.productDescriptionTitle {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 32px;
color: #575757;
}
.productDescriptionText {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
}
.newsletter {
margin-top: 64px;
.container {
display: flex;
height: 175px;
padding: 0 0 0 0;
background: black;
align-items: center;
justify-content: center;
.label {
display: flex;
flex-direction: column;
font-size: 0;
&::before {
content: "Assine nossa Newsletter";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
color: #ffffff;
}
&::after {
content: "Receba ofertas e novidades por e-mail";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: #929292;
}
}
:global(.vtex-input-prefix__group) {
display: flex;
justify-content: center;
width: 774px;
border-top: none;
border-right: none;
border-left: none;
border-bottom: 1px solid #929292;
}
:global(.vtex-styleguide-9-x-input) {
background: transparent;
padding: 0 0 0 0;
}
:global(.vtex-button) {
position: relative;
left: 145px;
background: transparent;
border: none;
border-radius: 0;
border-bottom: 3px solid #bfbfbf;
&:hover {
border-bottom: 5px solid #bfbfbf;
}
:global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 14px;
line-height: 19px;
text-align: center;
color: #ffffff;
border: 1px solid #000000;
text-transform: uppercase;
}
}
}
}

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

@ -0,0 +1,54 @@
.container {
margin-bottom: 16px;
}
.listContainer {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #b9b9b9;
margin-bottom: 32px;
.listItem {
padding: 0;
margin: 0;
:global(.vtex-button) {
background: white;
border: none;
border-radius: 0;
:global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
display: flex;
align-items: center;
text-align: center;
color: #bfbfbf;
text-transform: initial;
}
}
}
.listItemActive {
:global(.vtex-button) {
background: white;
border-bottom: 2px solid #000000;
border-radius: 0;
:global(.vtex-button__label) {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 38px;
display: flex;
align-items: center;
text-align: center;
color: #000000;
text-transform: initial;
}
}
}
}
.contentItem {
display: flex;
flex-direction: row;
gap: 32px;
}