forked from M3-Academy/challenge-vtex-io
feat(pdp): cria componente de pix editavel
This commit is contained in:
parent
1b0f94a4c8
commit
de26868370
1
react/Pix.tsx
Normal file
1
react/Pix.tsx
Normal file
@ -0,0 +1 @@
|
||||
export { default } from "./components/Pix/Pix";
|
||||
@ -105,7 +105,7 @@
|
||||
[class*="skuSelectorNameContainer"]
|
||||
[class*="skuSelectorTextContainer"]
|
||||
[class*="skuSelectorName"]::after {
|
||||
content: "OUTROS TAMANHOS:";
|
||||
content: "OUTRAS CORES:";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
@ -116,9 +116,33 @@
|
||||
[class*="skuSelectorNameContainer"]
|
||||
[class*="skuSelectorTextContainer "]
|
||||
[class*="skuSelectorName"]::after {
|
||||
content: "OUTRAS CORES:";
|
||||
content: "OUTROS TAMANHOS:";
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 19px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[class*="wrapper--shelfTitle"] {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
[class*="shelfTitle"] [class*="t-heading-4"] {
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 38px;
|
||||
color: #575757 !important;
|
||||
margin: 16px 0 32px 0;
|
||||
}
|
||||
|
||||
[class*="paginationDotsContainer"] {
|
||||
bottom: -32px;
|
||||
}
|
||||
|
||||
/* [class*="headingLevel4--shelfTitle"] [class*="c-on-base"] {
|
||||
color: #575757 !important;
|
||||
} */
|
||||
|
||||
45
react/components/Pix/Pix.tsx
Normal file
45
react/components/Pix/Pix.tsx
Normal file
@ -0,0 +1,45 @@
|
||||
import React from "react";
|
||||
import { useProduct } from "vtex.product-context";
|
||||
import "../Pix/styles.css";
|
||||
|
||||
export default function Pix({ discount = 10 }: { discount: number }) {
|
||||
const productPriceDiscount = useProduct();
|
||||
const productPrice =
|
||||
productPriceDiscount?.product?.priceRange?.sellingPrice?.lowPrice;
|
||||
const priceFinal = Math.abs(
|
||||
Number(productPrice) * (discount / 100) - Number(productPrice)
|
||||
).toFixed(2);
|
||||
|
||||
console.log(productPriceDiscount?.product?.priceRange?.sellingPrice);
|
||||
|
||||
return (
|
||||
<div className={"PixBlock__container"}>
|
||||
<figure className={"PixBlock__figure"}>
|
||||
<img
|
||||
className={"PixBlock__imgPix"}
|
||||
src="https://agenciamagma.vteximg.com.br/arquivos/pix-manuelaluana.png"
|
||||
alt="Pix"
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<div className={"PixBlock__pricePix"}>
|
||||
<span className={"PixBlock__priceNew"}>
|
||||
R$ {priceFinal.replace(".", ",")}
|
||||
</span>
|
||||
<span className={"PixBlock__priceDiscount"}>
|
||||
{discount}% de desconto
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Pix.schema = {
|
||||
title: "Pix discount",
|
||||
type: "object",
|
||||
properties: {
|
||||
discount: {
|
||||
type: "number",
|
||||
},
|
||||
},
|
||||
};
|
||||
43
react/components/Pix/styles.css
Normal file
43
react/components/Pix/styles.css
Normal file
@ -0,0 +1,43 @@
|
||||
[class*="__container"] {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
[class*="__figure"] {
|
||||
display: flex;
|
||||
align-self: center;
|
||||
margin: 0;
|
||||
margin-right: 26.21px;
|
||||
}
|
||||
|
||||
[class*="__imgPix"] {
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
max-width: fit-content;
|
||||
/* width: auto; */
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
[class*="__pricePix"] {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
[class*="__priceNew"] {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: rgba(0, 0, 0, 0.58);
|
||||
}
|
||||
|
||||
[class*="__priceDiscount"] {
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
line-height: 18px;
|
||||
color: #929292;
|
||||
}
|
||||
@ -2,16 +2,33 @@
|
||||
"store.product": {
|
||||
"children": [
|
||||
"html#breadcrumb",
|
||||
// "html#imagens",
|
||||
// "html#product-name",
|
||||
// "html#codigo",
|
||||
// "html#selling-price",
|
||||
// "html#product-installments",
|
||||
// "html#pixzap",
|
||||
// "html#sku-selector",
|
||||
// "html#product-quantity",
|
||||
// "html#add-to-cart-button",
|
||||
// "html#shipping-simulator",
|
||||
// "html#product-description",
|
||||
// "html#slider",
|
||||
// "html#prateleira",
|
||||
|
||||
"condition-layout.product#availability",
|
||||
"flex-layout.row#description",
|
||||
"flex-layout.row#specifications-title",
|
||||
"product-specification-group#table",
|
||||
// "flex-layout.row#specifications-title",
|
||||
// "product-specification-group#table",
|
||||
"tab-layout#pdp-descriptions",
|
||||
"flex-layout.row#shelf-title",
|
||||
"flex-layout.row#shelf-product-page",
|
||||
// "html#product-summary",
|
||||
// "shelf.relatedProducts",
|
||||
"product-questions-and-answers"
|
||||
]
|
||||
},
|
||||
|
||||
"html#breadcrumb": {
|
||||
"props": {
|
||||
"tag": "section",
|
||||
@ -20,6 +37,92 @@
|
||||
},
|
||||
"children": ["breadcrumb"]
|
||||
},
|
||||
"html#imagens": {
|
||||
"props": {
|
||||
"testId": "product-images"
|
||||
},
|
||||
"children": ["product-images"]
|
||||
},
|
||||
"html#product-name": {
|
||||
"props": {
|
||||
"testId": "product-name"
|
||||
},
|
||||
"children": ["vtex.store-components:product-name"]
|
||||
},
|
||||
"html#codigo": {
|
||||
"props": {
|
||||
"testid": "product-code",
|
||||
"blockClass": "codigo"
|
||||
},
|
||||
"children": ["product-identifier.product"]
|
||||
},
|
||||
"html#selling-price": {
|
||||
"props": {
|
||||
"testid": "product-price"
|
||||
},
|
||||
"children": ["product-selling-price"]
|
||||
},
|
||||
"html#product-installments": {
|
||||
"props": {
|
||||
"testid": "product-installments"
|
||||
},
|
||||
"children": ["product-installments"]
|
||||
},
|
||||
"html#pixzap": {
|
||||
"props": {
|
||||
"testid": "pix-price",
|
||||
"blockClass": "pix"
|
||||
},
|
||||
"children": ["pix-component"]
|
||||
},
|
||||
"html#sku-selector": {
|
||||
"props": {
|
||||
"testid": "sku-selector"
|
||||
},
|
||||
"children": ["sku-selector"]
|
||||
},
|
||||
"html#product-quantity": {
|
||||
"props": {
|
||||
"testid": "product-quantity"
|
||||
},
|
||||
"children": ["product-quantity"]
|
||||
},
|
||||
"html#add-to-cart-button": {
|
||||
"props": {
|
||||
"testid": "add-to-cart-button"
|
||||
},
|
||||
"children": ["add-to-cart-button"]
|
||||
},
|
||||
"html#shipping-simulator": {
|
||||
"props": {
|
||||
"testid": "shipping-simulator"
|
||||
},
|
||||
"children": ["shipping-simulator"]
|
||||
},
|
||||
"html#product-description": {
|
||||
"props": {
|
||||
"testid": "product-description"
|
||||
},
|
||||
"children": ["tab-layout"]
|
||||
},
|
||||
"html#slider": {
|
||||
"props": {
|
||||
"testid": "product-summary-list"
|
||||
},
|
||||
"children": ["slider-layout#prateleira"]
|
||||
},
|
||||
"html#prateleira": {
|
||||
"props": {
|
||||
"testid": "vtex-product-summary"
|
||||
},
|
||||
"children": [
|
||||
"product-summary-name",
|
||||
"product-summary-image#shelf",
|
||||
"product-list-price#summary",
|
||||
"product-selling-price#summary"
|
||||
]
|
||||
},
|
||||
|
||||
"flex-layout.row#specifications-title": {
|
||||
"children": ["rich-text#specifications"]
|
||||
},
|
||||
@ -28,6 +131,16 @@
|
||||
"text": "##### Product Specifications"
|
||||
}
|
||||
},
|
||||
|
||||
"flex-layout.row#shelf-title": {
|
||||
"children": ["rich-text#shelfTitle"]
|
||||
},
|
||||
"rich-text#shelfTitle": {
|
||||
"props": {
|
||||
"text": "#### Você também pode gostar:",
|
||||
"blockClass": "shelfTitle"
|
||||
}
|
||||
},
|
||||
"flex-layout.row#description": {
|
||||
"props": {
|
||||
"marginBottom": 7
|
||||
@ -92,8 +205,9 @@
|
||||
"showPaginationDots": false,
|
||||
"showNavigationArrows": false,
|
||||
"aspectRatio": {
|
||||
"desktop": "auto",
|
||||
"phone": "16:9"
|
||||
"desktop": "1:1",
|
||||
"phone": "1:1"
|
||||
// "phone": "16:9"
|
||||
},
|
||||
"maxHeight": "unset",
|
||||
"thumbnailsOrientation": "horizontal",
|
||||
@ -112,15 +226,16 @@
|
||||
// "flex-layout.row#list-price-savings",
|
||||
"flex-layout.row#selling-price",
|
||||
"product-installments",
|
||||
"product-separator",
|
||||
"pix-component",
|
||||
// "product-separator",
|
||||
"sku-selector",
|
||||
"product-quantity",
|
||||
"product-assembly-options",
|
||||
"product-gifts",
|
||||
"flex-layout.row#buy-button",
|
||||
"availability-subscriber",
|
||||
"shipping-simulator",
|
||||
"share#default"
|
||||
"shipping-simulator"
|
||||
// "share#default"
|
||||
]
|
||||
},
|
||||
|
||||
@ -189,13 +304,93 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// "tab-layout#home":
|
||||
// "children": [
|
||||
// "tab-list#home",
|
||||
// "tab-content#home"
|
||||
// ],
|
||||
// "props": {
|
||||
// "blockClass": "home",
|
||||
// "defaultActiveTabId": "home1"
|
||||
// }
|
||||
// },
|
||||
|
||||
"flex-layout.row#product-image-description": {
|
||||
"children": ["product-images#description-image"]
|
||||
},
|
||||
|
||||
"flex-layout.row#product-image-description2": {
|
||||
"children": ["product-images#description-image"]
|
||||
},
|
||||
|
||||
"product-images#description-image": {
|
||||
"props": {
|
||||
"aspectRatio": {
|
||||
"desktop": "1:1",
|
||||
"phone": "1:1"
|
||||
},
|
||||
"thumbnailVisibility": "hidden",
|
||||
"showNavigationArrows": false,
|
||||
"showPaginationDots": false
|
||||
}
|
||||
},
|
||||
|
||||
"tab-layout#pdp-descriptions": {
|
||||
"props": {
|
||||
"blockClass": "pdp-descriptions",
|
||||
"defaultActiveTabId": "pdp-descriptions1"
|
||||
},
|
||||
"children": ["tab-list#pdp-descriptions", "tab-content#pdp-descripitions"]
|
||||
},
|
||||
|
||||
"tab-list#pdp-descriptions": {
|
||||
"children": [
|
||||
"tab-list.item#pdp-descripitions1",
|
||||
"tab-list.item#pdp-descripitions2"
|
||||
]
|
||||
},
|
||||
"tab-list.item#pdp-descripitions1": {
|
||||
"props": {
|
||||
"tabId": "pdp-descriptions1",
|
||||
"label": "Descrição",
|
||||
"defaultActiveTab": true
|
||||
}
|
||||
},
|
||||
"tab-list.item#pdp-descripitions2": {
|
||||
"props": {
|
||||
"tabId": "pdp-descriptions2",
|
||||
"label": "Descrição"
|
||||
}
|
||||
},
|
||||
|
||||
"tab-content#pdp-descripitions": {
|
||||
"children": [
|
||||
"tab-content.item#pdp-descriptions1",
|
||||
"tab-content.item#pdp-descripitions2"
|
||||
]
|
||||
},
|
||||
|
||||
"tab-content.item#pdp-descriptions1": {
|
||||
"children": ["flex-layout.row#product-image-description"],
|
||||
"props": {
|
||||
"tabId": "pdp-descriptions1"
|
||||
}
|
||||
},
|
||||
"tab-content.item#pdp-descripitions2": {
|
||||
"children": ["flex-layout.row#product-image-description2"],
|
||||
"props": {
|
||||
"tabId": "pdp-descripitions2"
|
||||
}
|
||||
},
|
||||
|
||||
"flex-layout.row#shelf-product-page": {
|
||||
"children": ["list-context.product-list#product-shelf"]
|
||||
},
|
||||
|
||||
"list-context.product-list#product-shelf": {
|
||||
"blocks": ["product-summary.shelf"],
|
||||
"children": ["slider-layout#text-test"]
|
||||
"children": ["slider-layout#prateleira"]
|
||||
},
|
||||
|
||||
"product-summary.shelf#teste": {
|
||||
@ -207,15 +402,17 @@
|
||||
},
|
||||
"children": [
|
||||
"product-summary-name",
|
||||
"product-summary-description",
|
||||
"product-summary-image",
|
||||
"product-summary-price",
|
||||
"product-summary-sku-selector",
|
||||
"product-summary-buy-button"
|
||||
"product-summary-image#shelf",
|
||||
"product-list-price#summary",
|
||||
"product-selling-price#summary"
|
||||
// "product-summary-price",
|
||||
// "product-summary-description",
|
||||
// "product-summary-sku-selector",
|
||||
// "product-summary-buy-button"
|
||||
]
|
||||
},
|
||||
|
||||
"slider-layout#text-test": {
|
||||
"slider-layout#prateleira": {
|
||||
"props": {
|
||||
"itemsPerPage": {
|
||||
"desktop": 4,
|
||||
|
||||
@ -9,14 +9,10 @@
|
||||
]
|
||||
},
|
||||
"responsive-layout.desktop#productSummaryList": {
|
||||
"children": [
|
||||
"flex-layout.row#summaryListDesktop"
|
||||
]
|
||||
"children": ["flex-layout.row#summaryListDesktop"]
|
||||
},
|
||||
"responsive-layout.mobile#productSummaryList": {
|
||||
"children": [
|
||||
"flex-layout.row#summaryListMobile"
|
||||
]
|
||||
"children": ["flex-layout.row#summaryListMobile"]
|
||||
},
|
||||
"product-price-savings#summaryPercentage": {
|
||||
"props": {
|
||||
@ -36,7 +32,7 @@
|
||||
]
|
||||
},
|
||||
"flex-layout.row#summaryListDesktop": {
|
||||
"props":{
|
||||
"props": {
|
||||
"fullWidth": true,
|
||||
"colSizing": "auto",
|
||||
"blockClass": "summaryListDesktop"
|
||||
@ -69,9 +65,7 @@
|
||||
]
|
||||
},
|
||||
"flex-layout.row#productSpecifications": {
|
||||
"children": [
|
||||
"product-specification-group#summary"
|
||||
]
|
||||
"children": ["product-specification-group#summary"]
|
||||
},
|
||||
"product-summary-name#summaryListDesktop": {
|
||||
"props": {
|
||||
@ -100,18 +94,13 @@
|
||||
"colSizing": "auto",
|
||||
"colGap": 5
|
||||
},
|
||||
"children": [
|
||||
"add-to-cart-button",
|
||||
"flex-layout.row#buyNowButton"
|
||||
]
|
||||
"children": ["add-to-cart-button", "flex-layout.row#buyNowButton"]
|
||||
},
|
||||
"flex-layout.row#buyNowButton": {
|
||||
"props": {
|
||||
"blockClass": "buyNowButton"
|
||||
},
|
||||
"children": [
|
||||
"add-to-cart-button#buyNow"
|
||||
]
|
||||
"children": ["add-to-cart-button#buyNow"]
|
||||
},
|
||||
|
||||
"add-to-cart-button#buyNow": {
|
||||
@ -123,10 +112,7 @@
|
||||
}
|
||||
},
|
||||
"flex-layout.col#priceSummaryListDesktop": {
|
||||
"children": [
|
||||
"product-selling-price#summary",
|
||||
"product-list-price#summary"
|
||||
]
|
||||
"children": ["product-selling-price#summary", "product-list-price#summary"]
|
||||
},
|
||||
"stack-layout#summaryListDesktop": {
|
||||
"children": [
|
||||
@ -144,7 +130,7 @@
|
||||
}
|
||||
},
|
||||
"flex-layout.row#summaryListMobile": {
|
||||
"props":{
|
||||
"props": {
|
||||
"preserveLayoutOnMobile": true,
|
||||
"colSizing": "auto",
|
||||
"blockClass": "summaryListMobile",
|
||||
|
||||
@ -1,9 +1,6 @@
|
||||
{
|
||||
"modal-trigger#quickview": {
|
||||
"children": [
|
||||
"icon-expand",
|
||||
"modal-layout#quickview"
|
||||
],
|
||||
"children": ["icon-expand", "modal-layout#quickview"],
|
||||
"props": {
|
||||
"blockClass": "quickview"
|
||||
}
|
||||
@ -63,9 +60,7 @@
|
||||
},
|
||||
|
||||
"flex-layout.col#quickview-product-quantity": {
|
||||
"children": [
|
||||
"product-summary-quantity#quickview"
|
||||
]
|
||||
"children": ["product-summary-quantity#quickview"]
|
||||
},
|
||||
"product-summary-quantity#quickview": {
|
||||
"props": {
|
||||
@ -74,18 +69,14 @@
|
||||
}
|
||||
},
|
||||
"flex-layout.col#quickview-add-to-card-button": {
|
||||
"children": [
|
||||
"add-to-cart-button"
|
||||
],
|
||||
"children": ["add-to-cart-button"],
|
||||
"props": {
|
||||
"width": "grow"
|
||||
}
|
||||
},
|
||||
|
||||
"flex-layout.row#quickview-actions-2": {
|
||||
"children": [
|
||||
"link.product#button-pdp"
|
||||
]
|
||||
"children": ["link.product#button-pdp"]
|
||||
},
|
||||
"link.product#button-pdp": {
|
||||
"props": {
|
||||
@ -107,15 +98,10 @@
|
||||
}
|
||||
},
|
||||
"flex-layout.col#quickview-images": {
|
||||
"children": [
|
||||
"product-images#quickview"
|
||||
]
|
||||
"children": ["product-images#quickview"]
|
||||
},
|
||||
"flex-layout.col#quickview-product-details": {
|
||||
"children": [
|
||||
"modal-content#quickview",
|
||||
"modal-actions#quickview"
|
||||
],
|
||||
"children": ["modal-content#quickview", "modal-actions#quickview"],
|
||||
"props": {
|
||||
"preventVerticalStretch": true,
|
||||
"blockClass": "quickviewDetails"
|
||||
@ -134,7 +120,7 @@
|
||||
"blockClass": "quickview"
|
||||
}
|
||||
},
|
||||
"product-images#quickview" : {
|
||||
"product-images#quickview": {
|
||||
"props": {
|
||||
"blockClass": "quickview",
|
||||
"showNavigationArrows": true
|
||||
|
||||
@ -5,5 +5,8 @@
|
||||
"html": {
|
||||
"component": "html",
|
||||
"composition": "children"
|
||||
},
|
||||
"pix-component": {
|
||||
"component": "Pix"
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user