From ca3384208d20ad8b86d62b5d07a2617f2f77a531 Mon Sep 17 00:00:00 2001 From: ManuelaLuanaSchumackerTavares Date: Fri, 10 Feb 2023 17:34:32 -0300 Subject: [PATCH] feat(pdp): torna prateleira estilizada como no figma --- react/components/Html/styles.css | 63 +++++++++++- react/components/Pix/Pix.tsx | 11 ++- react/components/Pix/styles.css | 3 + store/blocks/pdp/product.jsonc | 98 ++++++++----------- store/blocks/product-price.jsonc | 9 +- .../product-summary/product-summary.jsonc | 16 ++- 6 files changed, 120 insertions(+), 80 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 7901383..43246f9 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -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; +} diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index f072fe5..bdeab4f 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -13,9 +13,10 @@ export default function Pix({ discount = 10 }: { discount: number }) { console.log(productPriceDiscount?.product?.priceRange?.sellingPrice); return ( -
+
Pix
- +

R$ {priceFinal.replace(".", ",")} - - +

+

{discount}% de desconto - +

); diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css index 44d4a26..c1a132f 100644 --- a/react/components/Pix/styles.css +++ b/react/components/Pix/styles.css @@ -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; } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 27b0a9d..41bada0 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -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": { diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..bdc77b4 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -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"] } } diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..e33db97 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -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" } }