diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index b692894..35387d7 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -64,7 +64,7 @@ const Pix = () => { }, [productContext?.selectedItem]); return ( -
+
{ />
- +

{(pixValue / 100).toLocaleString("pt-br", { style: "currency", currency: "BRL", })} - - {discountValue} +

+

{discountValue}

); diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 72d7f9b..94cde86 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -1,10 +1,10 @@ { "store.product": { "children": [ - "html#breadcrumb", + "html#breadcontainer", //"example-component", "condition-layout.product#availability", - "tab-layout", + "html#product-description", //"flex-layout.row#specifications-title", //"product-specification-group#table", "flex-layout.row#shelf-row" @@ -33,10 +33,17 @@ }, "list-context.product-list": { - "children": ["slider-layout#shelf-prod"], + "children": ["html#slider"], "blocks": ["product-summary.shelf"] }, + "html#slider": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#shelf-prod"] + }, + "slider-layout#shelf-prod": { "props": { "itemsPerPage": { @@ -47,12 +54,11 @@ "infinite": true, "showNavigationArrows": "always", "showPaginationDots": "always", - "blockClass": "slide-shelf", - "colGap": 16 + "blockClass": "slide-shelf" } }, - "html#breadcrumb": { + "html#breadcontainer": { "props": { "tag": "section", "testId": "breadcrumbs", @@ -121,8 +127,9 @@ } }, "flex-layout.row#product-image": { - "children": ["product-images"] + "children": ["html#imagens"] }, + "product-images": { "props": { "aspectRatio": { @@ -136,14 +143,29 @@ } }, + "html#imagens": { + "props": { + "testId": "product-images" + }, + "children": ["product-images"] + }, + "product-installments": { "props": { "blockClass": "sellingInfo" } }, - "flex-layout.row#selling-prices": { + "html#product-installments": { "props": { + "testId": "product-installments" + }, + "children": ["product-installments"] + }, + + "html#selling-price": { + "props": { + "testId": "product-price", "blockClass": "sellingPrice" }, "children": ["product-selling-price"] @@ -156,28 +178,49 @@ "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", + "html#product-name", + "html#codigo", //"availability-subscriber", //"product-assembly-options", "product-rating-summary", //"flex-layout.row#list-price-savings", - "flex-layout.row#selling-prices", - "product-installments", - "pix-component", + "html#selling-price", + "html#product-installments", + "html#pixzap", //"product-separator", - "sku-selector", - //"product-quantity", + "html#sku-selector", //"product-gifts", "flex-layout.row#buy-button", - "shipping-simulator", + "html#shipping-simulator", "placeholder-component" //"share#default" ] }, - "flex-layout.row#product-name": { + "html#shipping-simulator": { "props": { + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + + "html#pixzap": { + "props": { + "testId": "pix-price" + }, + "children": ["pix-component"] + }, + + "html#codigo": { + "props": { + "testId": "product-code" + }, + "children": ["product-identifier.product"] + }, + + "html#product-name": { + "props": { + "testId": "product-name", "marginBottom": 3, "blockClass": "productName" }, @@ -192,6 +235,13 @@ } }, + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, + "product-quantity": { "props": { "size": "large", @@ -199,22 +249,36 @@ } }, + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["product-quantity"] + }, + "flex-layout.row#buy-button": { "props": { "marginTop": 4, "marginBottom": 7, "blockClass": "quantityAndBuy" }, - "children": ["product-quantity", "add-to-cart-button"] + "children": ["html#product-quantity", "html#add-to-cart-button"] }, - "add-to-cart-button": { + "add-to-cart-button#addSacola": { "props": { "blockClass": "addToCartButton", "text": "ADICIONAR À SACOLA" } }, + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button" + }, + "children": ["add-to-cart-button#addSacola"] + }, + "flex-layout.row#product-availability": { "props": { "blockClass": "productPanel" @@ -231,10 +295,10 @@ "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", + "html#product-name", + "html#codigo", "flex-layout.row#availability", - "sku-selector" + "html#sku-selector" ] }, "flex-layout.row#availability": { @@ -330,6 +394,13 @@ } }, + "html#product-description": { + "props": { + "testId": "product-description" + }, + "children": ["tab-layout"] + }, + "tab-content.item#1": { "children": ["product-images#2", "product-description"], "props": { diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index 54c378d..7efa965 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -1,5 +1,12 @@ { "product-summary.shelf": { + "children": ["html#prateleira"] + }, + + "html#prateleira": { + "props": { + "testId": "vtex-product-summary" + }, "children": [ "stack-layout#prodsum", "product-summary-name", @@ -12,6 +19,7 @@ //"add-to-cart-button" ] }, + "flex-layout.col#productRating": { "props": { "blockClass": "productRating" diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 1bf58dc..7952978 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -12,6 +12,16 @@ justify-content: center; margin: 0 0 32px; } +@media only screen and (max-width: 1024px) { + .container--shelf-title { + margin: 0 0 24px; + } +} +@media only screen and (max-width: 767px) { + .container--shelf-title { + margin: 0 0 16px; + } +} .container--shelf-title .headingLevel3 { font-weight: 400; font-size: 20px; diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index b60c0c6..77be60c 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -2,6 +2,14 @@ justify-content: center; margin: 0 0 32px; + @include mq(lg, max) { + margin: 0 0 24px; + } + + @include mq(md, max) { + margin: 0 0 16px; + } + .headingLevel3 { font-weight: 400; font-size: 20px;