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

feature/product-page #2

Merged
cainamilech merged 2 commits from feature/product-page into master 2023-02-06 19:36:23 +00:00
Conversation 0 Commits 2 Files Changed 9 +132 -10
9 changed files with 132 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
react/components/Pix/Pix.module.css
View File

@ -3,6 +3,7 @@
gap: 26px;
align-items: center;
margin-top: 8px;
width: 197px;
}
.image {

5
store/blocks/pdp/product-tablayout.jsonc
View File

@ -1,4 +1,9 @@
{
"html#tab-layout": {
"props": { "testId": "product-description" },
"children": ["tab-layout#details"]
},
"tab-layout#details": {
"children": ["tab-list#details", "tab-content#details"],
"props": {

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

@ -3,7 +3,7 @@
"children": [
"html#breadcontainer",
"condition-layout.product#availability",
"tab-layout#details",
"html#tab-layout",
"list-context.product-list#prateleira",
"newsletter"
]
@ -60,6 +60,7 @@
},
"children": ["breadcrumb#pdp"]
},
"flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"]
},
@ -68,6 +69,7 @@
"text": "##### Product Specifications"
}
},
"product-description": {
"props": {
"marginBottom": 7,
@ -151,19 +153,33 @@
"rowGap": 0
},
"children": [
"flex-layout.row#product-name",
"html#product-name",
"html#codigo",
"product-rating-summary",
"flex-layout.row#selling-price",
"product-installments",
"html#selling-price",
"html#installments",
"html#pix",
"html#skus",
"html#qtd-btn",
"availability-subscriber",
"shipping-simulator"
"html#shipping-simulator"
]
},
"html#installments": {
"props": {
"testId": "product-installments"
},
"children": ["product-installments"]
},
"html#selling-price": {
"props": {
"testId": "product-price"
},
"children": ["flex-layout.row#selling-price"]
},
"product-installments": {
"props": {
"installmentsCriteria": "max-quantity-without-interest",
@ -172,6 +188,13 @@
}
},
"html#product-name": {
"props": {
"testId": "product-name"
},
"children": ["flex-layout.row#product-name"]
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3,
@ -182,6 +205,7 @@
"html#codigo": {
"props": {
"testId": "product-code",
"blockClass": "codigo"
},
"children": ["product-identifier.product"]
@ -291,5 +315,11 @@
"props": {
"blockClass": "frete"
}
},
"html#shipping-simulator": {
"props": {
"testId": "shipping-simulator"
},
"children": ["shipping-simulator"]
}
}

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

@ -28,3 +28,7 @@
.spacer {
display: none;
}
.element {
padding: 0;
}

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

@ -9,7 +9,17 @@
/* Grid breakpoints */
.container--title-prateleira {
margin-top: 16px;
margin-bottom: 12px;
margin-bottom: 32px;
}
@media screen and (max-width: 1024px) {
.container--title-prateleira {
margin-bottom: 24px;
}
}
@media screen and (max-width: 768px) {
.container--title-prateleira {
margin-bottom: 16px;
}
}
.container--title-prateleira .paragraph--title-prateleira {
margin: 0;

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

@ -63,6 +63,11 @@
display: flex;
flex-direction: column-reverse;
margin-top: 16px;
margin-bottom: 16px;
}
.skuSelectorNameContainer {
margin: 0;
}
.frameAround--skus {
@ -70,9 +75,14 @@
}
.skuSelectorOptionsList {
margin-left: -5px;
display: flex;
margin-left: 0;
gap: 16px;
}
.skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
}
.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName {
font-size: 0;
}
@ -85,6 +95,10 @@
color: color-gray6;
}
.skuSelectorItem {
margin: 0;
}
.skuSelectorItemTextValue--skus {
font-weight: 400;
font-size: 14px;
@ -111,6 +125,9 @@
justify-content: center;
display: flex;
}
.skuSelectorItem--skus--selected .skuSelectorInternalBox--skus .diagonalCross--skus {
background-image: linear-gradient(to top right, transparent 44%, #000 48%, transparent 52%);
}
.skuSelectorItem--skus--selected .skuSelectorItemTextValue--skus {
font-weight: 400;
font-size: 14px;
@ -118,6 +135,9 @@
color: #000000;
}
.skuSelectorSubcontainer--cor {
margin: 0;
}
.skuSelectorSubcontainer--cor .skuSelectorName {
font-size: 0;
}
@ -146,6 +166,10 @@
height: 48px;
}
.skuSelectorItem--skus--selected .skuSelectorInternalBox--skus .diagonalCross--skus {
background-image: linear-gradient(to top right, transparent 44%, #000 48%, transparent 52%);
}
.diagonalCross--skus {
transform: rotate(80deg);
background-image: linear-gradient(to top right, transparent 44%, #d5d5d5 48%, transparent 52%);

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

@ -18,3 +18,7 @@
.spacer {
display: none;
}
.element {
padding: 0;
}

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

@ -1,6 +1,12 @@
.container--title-prateleira {
margin-top: 16px;
margin-bottom: 12px;
margin-bottom: 32px;
@media screen and (max-width: 1024px) {
margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
margin-bottom: 16px;
}
.paragraph--title-prateleira {
margin: 0;

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

@ -55,6 +55,11 @@
display: flex;
flex-direction: column-reverse;
margin-top: 16px;
margin-bottom: 16px;
}
.skuSelectorNameContainer {
margin: 0;
}
.frameAround--skus {
@ -62,10 +67,14 @@
}
.skuSelectorOptionsList {
margin-left: -5px;
display: flex;
margin-left: 0;
gap: 16px;
}
.skuSelectorSubcontainer--tamanho {
margin-bottom: 10px;
.skuSelectorNameContainer {
.skuSelectorTextContainer {
.skuSelectorName {
@ -84,6 +93,10 @@
}
}
.skuSelectorItem {
margin: 0;
}
.skuSelectorItemTextValue--skus {
font-weight: 400;
font-size: 14px;
@ -101,6 +114,7 @@
display: flex;
}
//SKU INDISPONIVEL SELECIONADO
.skuSelectorItem--skus--selected {
.skuSelectorInternalBox--skus {
border: 2px solid $color-black-100;
@ -110,6 +124,15 @@
align-items: center;
justify-content: center;
display: flex;
.diagonalCross--skus {
background-image: linear-gradient(
to top right,
transparent 44%,
#000 48%,
transparent 52%
);
}
}
.skuSelectorItemTextValue--skus {
@ -121,6 +144,8 @@
}
.skuSelectorSubcontainer--cor {
margin: 0;
.skuSelectorName {
font-size: 0;
@ -159,6 +184,20 @@
}
}
//SKU INDISPONIVEL SELECIONADO
.skuSelectorItem--skus--selected {
.skuSelectorInternalBox--skus {
.diagonalCross--skus {
background-image: linear-gradient(
to top right,
transparent 44%,
#000 48%,
transparent 52%
);
}
}
}
.diagonalCross--skus {
transform: rotate(80deg);
background-image: linear-gradient(
@ -178,7 +217,6 @@
}
//FRETE
.shippingContainer {
display: flex;
align-items: end;