feat(pdp): cria componente de pix editavel #5

Merged
ManuelaLuanaSchumackerTavares merged 1 commits from feature/pix-component into develop 2023-02-10 14:19:27 +00:00
8 changed files with 344 additions and 59 deletions

1
react/Pix.tsx Normal file
View File

@ -0,0 +1 @@
export { default } from "./components/Pix/Pix";

View File

@ -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;
} */

View 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",
},
},
};

View 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;
}

View File

@ -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,

View File

@ -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",

View File

@ -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

View File

@ -5,5 +5,8 @@
"html": {
"component": "html",
"composition": "children"
},
"pix-component": {
"component": "Pix"
}
}