ManuelaLuanaSchumackerTavares/challenge-vtex-io-manuela-luana-schumacker-tavares
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'feat(pdp): torna prateleira estilizada como no figma' (#8) from feature/prateleira into develop

Browse Source 
Reviewed-on: #8
This commit is contained in:
Manuela Luana Schumacker Tavares 2023-02-10 20:35:35 +00:00
commit beaa0c45cf
6 changed files with 120 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -188,13 +188,13 @@
[class*="listItem--pdp-description-button"] [class*="c-on-action-primary"],
[class*="c-on-base--inverted"] {
color: black;
border-bottom: 5px solid black;
border-bottom: 1px solid black;
}
[class*="listItem--pdp-description-button"]
[class*="hover-c-on-action-primary"]:hover {
color: black;
border-bottom: 5px solid black;
border-bottom: 1px solid black;
}
[class*="listItem--pdp-description-button"] [class*="bg-action-primary"] {
@ -246,3 +246,62 @@
width: 17px !important;
height: 17px !important;
}
[class*="vtex-product-summary-2-x-element"] {
display: flex;
align-items: center;
text-align: center;
height: auto;
}
[class*="vtex-product-summary-2-x-element"] [class*="html--shelfItemBlock"] {
display: flex;
flex-direction: column;
text-align: center;
}
[class*="vtex-product-summary-2-x-element"]
[class*="html--shelfItemBlock"]
[class*="nameContainer"] {
justify-content: center;
}
[class*="vtex-product-summary-2-x-element"]
[class*="html--shelfItemBlock"]
[class*="brandName"] {
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: black;
}
[class*="listPriceValue--summary"]
[class*="currencyContainer--summary"]::before {
content: "de ";
text-decoration-line: line-through;
}
[class*="listPriceValue--summary"]
[class*="currencyContainer--summary"]::after {
content: " por";
text-decoration-line: line-through;
}
[class*="sellingPriceValue--summary"] [class*="currencyContainer--summary"] {
font-weight: 700;
font-size: 24px;
line-height: 33px;
color: #000000;
}
[class*="sliderLeftArrow"] {
left: -16px;
}
[class*="sliderRightArrow"] {
right: -16px;
}
[class*="quantitySelectorTitle"] {
font-size: 0;
}

11
react/components/Pix/Pix.tsx
View File

@ -13,9 +13,10 @@ export default function Pix({ discount = 10 }: { discount: number }) {
console.log(productPriceDiscount?.product?.priceRange?.sellingPrice);
return (
<div className={"PixBlock__container"}>
<div className={"PixBlock__container"} data-testid="pix-price">
<figure className={"PixBlock__figure"}>
<img
data-testid="pix-price"
className={"PixBlock__imgPix"}
src="https://agenciamagma.vteximg.com.br/arquivos/pix-manuelaluana.png"
alt="Pix"
@ -23,12 +24,12 @@ export default function Pix({ discount = 10 }: { discount: number }) {
</figure>
<div className={"PixBlock__pricePix"}>
<span className={"PixBlock__priceNew"}>
<p className={"PixBlock__priceNew"} data-testid="pix-price">
R$ {priceFinal.replace(".", ",")}
</span>
<span className={"PixBlock__priceDiscount"}>
</p>
<p className={"PixBlock__priceDiscount"} data-testid="pix-price">
{discount}% de desconto
</span>
</p>
</div>
</div>
);

3
react/components/Pix/styles.css
View File

@ -26,6 +26,7 @@
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 0;
}
[class*="__priceNew"] {
@ -33,6 +34,7 @@
font-size: 18px;
line-height: 25px;
color: rgba(0, 0, 0, 0.58);
margin: 0;
}
[class*="__priceDiscount"] {
@ -40,4 +42,5 @@
font-size: 13px;
line-height: 18px;
color: #929292;
margin: 0;
}

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

@ -2,26 +2,14 @@
"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#description",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
"tab-layout#pdp-descriptions",
"html#product-description",
// "tab-layout#pdp-descriptions",
"flex-layout.row#shelf-title",
// "list-context.product-list#product-shelf",
"flex-layout.row#shelf-product-page",
// "html#product-summary",
// "shelf.relatedProducts",
@ -39,6 +27,7 @@
},
"html#imagens": {
"props": {
"tag": "figure",
"testId": "product-images"
},
"children": ["product-images"]
@ -51,73 +40,76 @@
},
"html#codigo": {
"props": {
"testid": "product-code",
"testId": "product-code",
"blockClass": "codigo"
},
"children": ["product-identifier.product"]
},
"html#selling-price": {
"props": {
"testid": "product-price"
"testId": "product-price"
},
"children": ["product-selling-price"]
},
"html#product-installments": {
"props": {
"testid": "product-installments"
"tag": "span",
"testId": "product-installments",
"blockClass": "installments"
},
"children": ["product-installments"]
},
"html#pixzap": {
"props": {
"testid": "pix-price",
"testId": "pix-price",
"blockClass": "pix"
},
"children": ["pix-component"]
},
"html#sku-selector": {
"props": {
"testid": "sku-selector"
"testId": "sku-selector"
},
"children": ["sku-selector"]
},
"html#product-quantity": {
"props": {
"testid": "product-quantity"
"testId": "product-quantity"
},
"children": ["product-quantity"]
},
"html#add-to-cart-button": {
"props": {
"testid": "add-to-cart-button"
"testId": "add-to-cart-button"
},
"children": ["add-to-cart-button"]
},
"html#shipping-simulator": {
"props": {
"testid": "shipping-simulator"
"testId": "shipping-simulator"
},
"children": ["shipping-simulator"]
},
"html#product-description": {
"props": {
"testid": "product-description"
"testId": "product-description"
},
"children": ["tab-layout"]
"children": ["tab-layout#pdp-descriptions"]
},
"html#slider": {
"props": {
"testid": "product-summary-list"
"testId": "product-summary-list"
},
"children": ["slider-layout#prateleira"]
},
"html#prateleira": {
"props": {
"testid": "vtex-product-summary"
"testId": "vtex-product-summary",
"blockClass": "shelfItemBlock"
},
"children": [
"product-summary-name",
"product-summary-image#shelf",
"product-summary-name",
"product-list-price#summary",
"product-selling-price#summary"
]
@ -175,7 +167,8 @@
"blockClass": "product"
},
"children": [
"flex-layout.row#product-image",
"html#imagens",
// "flex-layout.row#product-image",
"product-bookmark",
"product-specification-badges"
]
@ -221,20 +214,26 @@
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"html#codigo",
// "product-identifier.product",
"product-rating-summary",
// "flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
"pix-component",
"html#product-installments",
// "product-installments",
"html#pixzap",
// "pix-component",
// "product-separator",
"sku-selector",
"product-quantity",
"html#sku-selector",
// "sku-selector",
"html#product-quantity",
// "product-quantity",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
"availability-subscriber",
"shipping-simulator"
"html#shipping-simulator"
// "shipping-simulator"
// "share#default"
]
},
@ -243,7 +242,7 @@
"props": {
"marginBottom": 3
},
"children": ["vtex.store-components:product-name"]
"children": ["html#product-name"]
},
"sku-selector": {
@ -260,7 +259,7 @@
"marginBottom": 7,
"blockClass": "buttonClicker"
},
"children": ["add-to-cart-button"]
"children": ["html#add-to-cart-button"]
},
"flex-layout.row#product-availability": {
@ -440,27 +439,12 @@
},
"list-context.product-list#product-shelf": {
"blocks": ["product-summary.shelf"],
"children": ["slider-layout#prateleira"]
"blocks": ["product-summary.shelf#summary-shelf"],
"children": ["html#slider"]
},
"product-summary.shelf#teste": {
"children": ["html#product-summary"]
},
"html#product-summary": {
"props": {
"testId": "vtex-product-summary"
},
"children": [
"product-summary-name",
"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"
]
"product-summary.shelf#summary-shelf": {
"children": ["html#prateleira"]
},
"slider-layout#prateleira": {

9
store/blocks/product-price.jsonc
View File

@ -6,9 +6,7 @@
"preventHorizontalStretch": true,
"marginBottom": 4
},
"children": [
"product-selling-price"
]
"children": ["html#selling-price"]
},
"flex-layout.row#list-price-savings": {
@ -19,9 +17,6 @@
"marginBottom": 2,
"marginTop": 5
},
"children": [
"product-list-price",
"product-price-savings"
]
"children": ["product-list-price", "product-price-savings"]
}
}

16
store/blocks/product-summary/product-summary.jsonc
View File

@ -3,12 +3,12 @@
"children": [
"stack-layout#prodsum",
"product-summary-name",
"flex-layout.col#productRating",
// "flex-layout.col#productRating",
"product-summary-space",
"product-list-price#summary",
"flex-layout.row#selling-price-savings",
"product-installments#summary",
"add-to-cart-button"
"flex-layout.row#selling-price-savings"
// "product-installments#summary"
// "add-to-cart-button"
]
},
"flex-layout.col#productRating": {
@ -65,8 +65,8 @@
"marginBottom": 4
},
"children": [
"product-selling-price#summary",
"product-price-savings#summary"
"product-selling-price#summary"
// "product-price-savings#summary"
]
},
"product-installments#summary": {
@ -81,9 +81,7 @@
},
"product-price-savings#summary": {
"props": {
"markers": [
"discount"
],
"markers": ["discount"],
"blockClass": "summary"
}
}