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): Cria prateleira de produtos relacionados e cria o esboço do componente custom Pix

Browse Source
This commit is contained in:
Rhayllon Daudt 2023-02-10 06:05:16 -03:00
parent 2877374d0e
commit 329456e670
21 changed files with 306 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
react/Pix.tsx Normal file
View File

@ -0,0 +1,3 @@
import Pix from "./components/Pix/Pix";
export default Pix;

13
react/components/Pix/Pix.tsx Normal file
View File

@ -0,0 +1,13 @@
import React from 'react'
import { useProduct } from 'vtex.product-context'
const Pix = () => {
const product = useProduct()
// console.log(product)
var pixValue = product?.product?.priceRange?.sellingPrice?.lowPrice;
return (
<div>{pixValue}</div>
)
}
export default Pix

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

@ -6,8 +6,8 @@
"tab-layout#descriptionLayout",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
// "shelf.relatedProducts",
"list-context.product-list#demo1",
"rich-text#otherProductTitle",
"list-context.product-list#prateleira",
"product-questions-and-answers"
]
},
@ -29,50 +29,67 @@
}
},
"product-summary.shelf#demo1": {
"rich-text#otherProductTitle": {
"props": {
"text": "### Você também pode gostar:",
"textAlignment": "CENTER",
"textPosition": "CENTER",
"blockClass": "otherProdcutTitle"
}
},
"product-summary.shelf#prateleira": {
"props": {
"blockClass": "prateleiraShelf"
},
"children": [
"product-summary-name",
"product-summary-description",
"product-summary-image",
"product-summary-price",
"product-summary-sku-selector",
"product-summary-buy-button"
"product-summary-image#prateleiraImg",
"product-summary-name#prateleira",
"product-list-price#prateleira",
"product-selling-price#prateleira"
]
},
"slider-layout#demo-products": {
"product-summary-image#prateleiraImg": {
"props": {
"blockClass": "prateleiraImg"
}
},
"product-summary-name#prateleira": {
"props": {
"blockClass": "prateleiraProductName"
}
},
"product-list-price#prateleira": {
"props": {
"blockClass": "prateleira"
}
},
"product-selling-price#prateleira": {
"props": {
"blockClass": "prateleira"
}
},
"slider-layout#prateleiraSlider": {
"props": {
"itemsPerPage": {
"desktop": 3,
"tablet": 1,
"phone": 1
"desktop": 4,
"tablet": 3,
"phone": 2
},
"infinite": true,
"showNavigationArrows": "desktopOnly",
"blockClass": "carousel"
"blockClass": "prateleiraSlider"
}
// "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"]
"list-context.product-list#prateleira": {
"blocks": ["product-summary.shelf#prateleira"],
"children": ["slider-layout#prateleiraSlider"]
},
"flex-layout.col#description": {
@ -321,7 +338,9 @@
"product-rating-summary",
"product-identifier.product#identifierMain",
"flex-layout.row#selling-price",
"product-installments",
"html#productInstallments",
"example-component",
"pix",
"product-separator",
"sku-selector#inverseOrder",
"html#wrapperQuantity",
@ -330,6 +349,13 @@
]
},
"html#productInstallments": {
"props": {
"testId": "product-installments"
},
"children": ["product-installments"]
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3

5
store/interfaces.json
View File

@ -2,6 +2,11 @@
"example-component": {
"component": "Example"
},
"pix": {
"component": "Pix"
},
"html": {
"component": "html",
"composition": "children"

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

@ -22,7 +22,7 @@
height: 49px;
}
.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-button) {
background-color: #292929;
background-color: #000000;
color: #fff;
font-style: normal;
font-weight: 400;

99
styles/css/vtex.product-price.css
View File

@ -1,79 +1,28 @@
.listPrice {
color: #727273;
margin-bottom: .25rem;
font-size: 1rem;
/*
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 */
.listPrice--prateleira {
padding: 0 16px 8px 16px;
margin: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #bababa;
}
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
}
.sellingPriceValue {
font-size: 2.25rem;
.sellingPrice--prateleira--hasListPrice {
padding: 0 16px;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
}
.installments {
color: #727273;
margin-bottom: 1rem;
}
.savings {
font-weight: 500;
color: #79B03A;
}
.sellingPriceValue--summary {
font-size: 1.25rem;
font-weight: 600;
color: #2E2E2E;
}
.savings--summary {
background: #8BC34A;
border-radius: 1000px;
align-items: center;
display: flex;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
}
.savings-discount--summary {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.listPrice--summary {
margin-bottom: 0.25rem;
font-size: .875rem;
}
.installments--summary {
margin-bottom: 2rem;
font-size: 0.875rem;
}
.savings--summaryPercentage {
background: #0f3e99;
border-radius: 1000px;
align-items: center;
display: flex;
}
.savingsPercentage--summaryPercentage {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
font-size: 24px;
line-height: 33px;
}

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

@ -21,12 +21,12 @@
border-left: 0;
border-radius: 0;
width: 2.5em !important;
color: black;
color: #000000;
}
.quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__minus-button) {
border: 1px solid #CCCCCC;
border-right: 0;
border-radius: 0;
width: 2.5em !important;
color: black;
color: #000000;
}

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

@ -1,42 +1,42 @@
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
border-radius: 50%;
/*
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 */
.containerNormal--prateleiraShelf {
max-width: 315px !important;
}
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
opacity: 0;
transition: opacity 200ms ease-in-out;
.element--prateleiraShelf {
outline: 0;
}
.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
opacity: 1;
.nameContainer--prateleiraProductName {
padding: 16px 16px 8px 16px;
}
@media screen and (max-width: 40em) {
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
display: none;
}
}
.nameContainer {
justify-content: start;
padding-top: 1rem;
padding-bottom: 1rem;
}
.brandName {
font-weight: 600;
.nameContainer--prateleiraProductName .brandName--prateleiraProductName {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
color: #2E2E2E;
}
.container {
text-align: start;
}
.imageContainer {
line-height: 25px;
text-align: center;
color: #000000;
}
.image {
border-radius: 0.25rem;
.imageWrapper--prateleiraImg,
.imageContainer--prateleiraImg,
.image--prateleiraImg {
min-height: 314px;
}
@media screen and (max-width: 1280px) {
.imageWrapper--prateleiraImg,
.imageContainer--prateleiraImg,
.image--prateleiraImg {
min-height: 285px;
}
}

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

@ -7,3 +7,10 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.heading--otherProdcutTitle {
margin: 16px 0 24px 0;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
}

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

@ -1,31 +1,47 @@
.sliderLayoutContainer {
justify-content: center;
/*
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 */
.sliderLayoutContainer--prateleiraSlider {
width: 90.63%;
margin: 0 auto 101px auto;
}
.sliderLayoutContainer--carousel {
background-color: #F0F0F0;
min-height: 450px;
.sliderArrows--prateleiraSlider {
margin: 0;
padding: 0;
}
.sliderTrackContainer {
max-width: 100%;
.sliderRightArrow--prateleiraSlider {
right: -2.53%;
}
.paginationDotsContainer {
margin-top: .5rem;
margin-bottom: .5rem;
.sliderLeftArrow--prateleiraSlider {
left: -2.53%;
}
.layoutContainer--shelf {
margin-top: 20px;
margin-bottom: 20px;
max-width: 96rem;
min-height: 550px;
.paginationDotsContainer--prateleiraSlider {
bottom: -32px;
align-items: center;
}
.paginationDotsContainer--prateleiraSlider .paginationDot--prateleiraSlider {
height: 10px !important;
width: 10px !important;
background-color: #000000;
margin: 0 6px;
}
.paginationDotsContainer--prateleiraSlider .paginationDot--prateleiraSlider--isActive {
height: 17px !important;
width: 17px !important;
background-color: #fff !important;
border: 0.5px solid #000000;
}
.slide--shelf {
margin-bottom: 25px;
padding-left: .5rem;
padding-right: .5rem;
min-height: 550px;
.slide--prateleiraSlider {
padding: 0 8px;
}

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

@ -55,6 +55,9 @@
padding-top: 16.1px;
text-decoration: underline;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
color: black;
}
.shippingContainer :global(.vtex__icon-external-link) {
display: none;
}
@ -65,7 +68,7 @@
position: relative;
right: 129px;
margin-top: 24px;
background-color: #292929;
background-color: #000000;
font-size: 0;
border: none;
border-radius: 0;

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

@ -8,7 +8,8 @@
/* Media Query M3 */
/* Grid breakpoints */
.container--descriptionLayout {
margin: 0 40px;
width: 94.44%;
margin: 0 auto;
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper {
justify-content: space-between;
@ -36,9 +37,9 @@
}
.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button) {
background-color: #fff;
color: #292929;
color: #000000;
border: 0;
border-bottom: 2px solid #292929;
border-bottom: 2px solid #000000;
border-radius: 0;
font-style: normal;
font-weight: 400;

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

@ -12,7 +12,7 @@
height: 49px;
:global(.vtex-button){
background-color: $color-black;
background-color: $color-black2;
color: $color-white;
font-style: normal;
font-weight: 400;

18
styles/sass/pages/product/vtex.product-price.scss Normal file
View File

@ -0,0 +1,18 @@
.listPrice--prateleira{
padding: 0 16px 8px 16px;
margin: 0;
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray9;
}
.sellingPrice--prateleira--hasListPrice{
padding: 0 16px;
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
}

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

@ -12,13 +12,13 @@
border-left: 0;
border-radius: 0;
width: 2.5em !important;
color: black;
color: $color-black2;
}
:global(.vtex-numeric-stepper__minus-button){
border: 1px solid #CCCCCC;
border-right: 0;
border-radius: 0;
width: 2.5em !important;
color: black;
color: $color-black2;
}
}

37
styles/sass/pages/product/vtex.product-summary.scss Normal file
View File

@ -0,0 +1,37 @@
.containerNormal--prateleiraShelf{
max-width: 315px !important;
}
.element--prateleiraShelf{
outline: 0;
}
.nameContainer--prateleiraProductName{
padding: 16px 16px 8px 16px;
.brandName--prateleiraProductName{
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
text-align: center;
color: $color-black2;
}
// .nameWrapper--prateleiraProductName{
// min-height: 50px;
// }
}
.imageWrapper--prateleiraImg,
.imageContainer--prateleiraImg,
.image--prateleiraImg{
min-height: 314px;
@media screen and (min-width: 2500px) {
}
@media screen and (max-width: 1024px) {
}
@media screen and (max-width: 1280px) {
min-height: 285px;
}
}

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

@ -0,0 +1,7 @@
.heading--otherProdcutTitle{
margin: 16px 0 24px 0;
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
}

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

@ -0,0 +1,35 @@
.sliderLayoutContainer--prateleiraSlider{
width: 90.63%;
margin: 0 auto 101px auto;
}
.sliderArrows--prateleiraSlider{
margin: 0;
padding: 0;
}
.sliderRightArrow--prateleiraSlider{
right: -2.53%;
}
.sliderLeftArrow--prateleiraSlider{
left: -2.53%;
}
.paginationDotsContainer--prateleiraSlider{
bottom: -32px;
align-items: center;
.paginationDot--prateleiraSlider{
height: 10px !important;
width: 10px !important;
background-color: $color-black2;
margin: 0 6px;
&--isActive{
height: 17px !important;
width: 17px !important;
background-color: $color-white !important;
border: 0.5px solid $color-black2;
}
}
}
.slide--prateleiraSlider{
padding: 0 8px;
}

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

@ -46,6 +46,10 @@
padding-top: 16.1px;
text-decoration: underline;
:last-child{
color: black;
}
}
:global(.vtex__icon-external-link){
display: none;
@ -58,7 +62,7 @@
position: relative;
right: 129px;
margin-top: 24px;
background-color: $color-black;
background-color: $color-black2;
font-size: 0;
border: none;
border-radius: 0;

7
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -1,5 +1,6 @@
.container--descriptionLayout{
margin: 0 40px;
width: 94.44%;
margin: 0 auto;
.listContainer--descriptionButtonWrapper{
justify-content: space-between;
@ -26,9 +27,9 @@
margin-top: 2px;
:global(.vtex-button){
background-color: $color-white;
color: $color-black;
color: $color-black2;
border: 0;
border-bottom: 2px solid $color-black;
border-bottom: 2px solid $color-black2;
border-radius: 0;
font-style: normal;
font-weight: 400;

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

@ -1,4 +1,5 @@
$color-black: #292929;
$color-black2: #000000;
$color-white: #fff;
@ -10,6 +11,7 @@ $color-gray5: #e5e5e5;
$color-gray6: #B9B9B9;
$color-gray7: #CCCCCC;
$color-gray8: #bfbfbf;
$color-gray9: #bababa;
$color-blue: #4267b2;