forked from M3-Academy/challenge-vtex-io
feat: adiciona descrição produto 1440px
This commit is contained in:
parent
f92e47f569
commit
c05964b4b9
@ -16,3 +16,7 @@
|
|||||||
border: none;
|
border: none;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[class*="html--descriptionText"] {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|||||||
@ -3,9 +3,9 @@ import { useProduct } from "vtex.product-context";
|
|||||||
import styles from "./styles.module.css";
|
import styles from "./styles.module.css";
|
||||||
|
|
||||||
const PixPrice = () => {
|
const PixPrice = () => {
|
||||||
const inputCep = document.querySelectorAll(".vtex-address-form-4-x-input");
|
// const inputCep = document.querySelectorAll(".vtex-address-form-4-x-input");
|
||||||
|
|
||||||
console.log(inputCep);
|
// console.log(inputCep);
|
||||||
|
|
||||||
// .placeholder = "Type name here..";
|
// .placeholder = "Type name here..";
|
||||||
|
|
||||||
|
|||||||
110
store/blocks/pdp/product-description.jsonc
Normal file
110
store/blocks/pdp/product-description.jsonc
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
{
|
||||||
|
"tab-layout#productPage": {
|
||||||
|
"children": ["tab-list#description", "tab-content#description"],
|
||||||
|
"props": {
|
||||||
|
"blockClass": "description",
|
||||||
|
"defaultActiveTabId": "description1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list#description": {
|
||||||
|
"children": [
|
||||||
|
"tab-list.item#description1",
|
||||||
|
"tab-list.item#description2",
|
||||||
|
"tab-list.item#description3",
|
||||||
|
"tab-list.item#description4",
|
||||||
|
"tab-list.item#description5"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"tab-list.item#description1": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "description1",
|
||||||
|
"label": "Descrição",
|
||||||
|
"defaultActiveTab": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#description2": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "description2",
|
||||||
|
"label": "Descrição",
|
||||||
|
"defaultActiveTab": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#description3": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "description3",
|
||||||
|
"label": "Descrição",
|
||||||
|
"defaultActiveTab": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#description4": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "description4",
|
||||||
|
"label": "Descrição",
|
||||||
|
"defaultActiveTab": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-list.item#description5": {
|
||||||
|
"props": {
|
||||||
|
"tabId": "description5",
|
||||||
|
"label": "Descrição",
|
||||||
|
"defaultActiveTab": true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content#description": {
|
||||||
|
"children": [
|
||||||
|
"tab-content.item#description1",
|
||||||
|
"tab-content.item#description2",
|
||||||
|
"tab-content.item#description3",
|
||||||
|
"tab-content.item#description4",
|
||||||
|
"tab-content.item#description5"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"tab-content.item#description1": {
|
||||||
|
"children": ["html#descriptionImage", "html#descriptionText"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "description1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content.item#description2": {
|
||||||
|
"children": ["html#descriptionImage", "html#descriptionText"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "description2"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content.item#description3": {
|
||||||
|
"children": ["html#descriptionImage", "html#descriptionText"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "description3"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content.item#description4": {
|
||||||
|
"children": ["html#descriptionImage", "html#descriptionText"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "description4"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"tab-content.item#description5": {
|
||||||
|
"children": ["html#descriptionImage", "html#descriptionText"],
|
||||||
|
"props": {
|
||||||
|
"tabId": "description5"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"html#descriptionImage": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "descriptionImage"
|
||||||
|
},
|
||||||
|
"children": ["product-images#description"]
|
||||||
|
},
|
||||||
|
"html#descriptionText": {
|
||||||
|
"props": {
|
||||||
|
"blockClass": "descriptionText"
|
||||||
|
},
|
||||||
|
"children": ["product-description"]
|
||||||
|
},
|
||||||
|
"product-images#description": {
|
||||||
|
"props": {
|
||||||
|
"displayMode": "first-image",
|
||||||
|
"zoomMode": "disabled"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -3,9 +3,10 @@
|
|||||||
"children": [
|
"children": [
|
||||||
"html#breadcrumb",
|
"html#breadcrumb",
|
||||||
"flex-layout.row#product-container",
|
"flex-layout.row#product-container",
|
||||||
"flex-layout.row#description",
|
// "flex-layout.row#description",
|
||||||
"flex-layout.row#specifications-title",
|
"tab-layout#productPage",
|
||||||
"product-specification-group#table",
|
// "flex-layout.row#specifications-title",
|
||||||
|
// "product-specification-group#table",
|
||||||
"shelf.relatedProducts",
|
"shelf.relatedProducts",
|
||||||
"product-questions-and-answers"
|
"product-questions-and-answers"
|
||||||
]
|
]
|
||||||
|
|||||||
57
styles/css/vtex.tab-layout.css
Normal file
57
styles/css/vtex.tab-layout.css
Normal file
@ -0,0 +1,57 @@
|
|||||||
|
/*
|
||||||
|
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%27");
|
||||||
|
/* Grid breakpoints */
|
||||||
|
.container--description {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentItem {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 32px;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
border-bottom: 1px solid #bfbfbf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItem {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItem :global(.vtex-button) {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
color: #bfbfbf;
|
||||||
|
text-transform: capitalize;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItemActive :global(.vtex-button) {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
color: #292929;
|
||||||
|
border-bottom: 2px solid #292929;
|
||||||
|
border-radius: 0;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
47
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
47
styles/sass/pages/product/vtex.tab-layout.scss
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
.container--description {
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contentItem {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 32px;
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listContainer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-evenly;
|
||||||
|
border-bottom: 1px solid $color-gray10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItem {
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItem :global(.vtex-button) {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
color: $color-gray10;
|
||||||
|
text-transform: capitalize;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.listItemActive :global(.vtex-button) {
|
||||||
|
border: none;
|
||||||
|
background: transparent;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
line-height: 38px;
|
||||||
|
color: $color-black;
|
||||||
|
border-bottom: 2px solid $color-black;
|
||||||
|
border-radius: 0;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
@ -13,6 +13,7 @@ $color-gray6: #cccccc;
|
|||||||
$color-gray7: #929292;
|
$color-gray7: #929292;
|
||||||
$color-gray8: #575757;
|
$color-gray8: #575757;
|
||||||
$color-gray9: #afafaf;
|
$color-gray9: #afafaf;
|
||||||
|
$color-gray10: #bfbfbf;
|
||||||
|
|
||||||
$color-blue: #4267b2;
|
$color-blue: #4267b2;
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user