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

feat: adiciona descrição produto 1440px #12

Merged
Rafael_Sampaio_de_Oliveira merged 1 commits from feature/adiciona-descricao-produto-1440px into development 2023-01-30 00:04:19 +00:00
Conversation 0 Commits 1 Files Changed 7 +225 -5
7 changed files with 225 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c05964b4b9 - Show all commits

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

@ -16,3 +16,7 @@
border: none;
border-radius: 0;
}
[class*="html--descriptionText"] {
width: 50%;
}

4
react/components/PixPrice/PixPrice.tsx
View File

@ -3,9 +3,9 @@ import { useProduct } from "vtex.product-context";
import styles from "./styles.module.css";
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..";

110
store/blocks/pdp/product-description.jsonc Normal file
View 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"
}
}
}

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

@ -3,9 +3,10 @@
"children": [
"html#breadcrumb",
"flex-layout.row#product-container",
"flex-layout.row#description",
"flex-layout.row#specifications-title",
"product-specification-group#table",
// "flex-layout.row#description",
"tab-layout#productPage",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
"shelf.relatedProducts",
"product-questions-and-answers"
]

57
styles/css/vtex.tab-layout.css Normal file
View 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
View 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;
}

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

@ -13,6 +13,7 @@ $color-gray6: #cccccc;
$color-gray7: #929292;
$color-gray8: #575757;
$color-gray9: #afafaf;
$color-gray10: #bfbfbf;
$color-blue: #4267b2;