diff --git a/react/components/Example/paymentWithPix.tsx b/react/components/Example/paymentWithPix.tsx index 1f3a82d..b458073 100644 --- a/react/components/Example/paymentWithPix.tsx +++ b/react/components/Example/paymentWithPix.tsx @@ -1,6 +1,6 @@ import React from 'react'; import {useProduct} from 'vtex.product-context'; -import styles from "./styles.css" +import styles from "./styles.css"; const paymentWithPix =() => { @@ -13,8 +13,8 @@ let imagePix = "https://agenciamagma.vtexassets.com/arquivos/pix-image-victor_so
Imagem do icone do pix
-

{(product?.product?.priceRange.sellingPrice.highPrice || 0) * (0.9)}

-

R$ 10 % de desconto

+

{(product?.product?.priceRange.sellingPrice.highPrice || 0) * (0.9)}

+

R$ 10 % de desconto

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0a2560e..2b33e0b 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,7 +3,7 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "tab-layout#home", + "html#product-description", // "product-specification-group#table", // "shelf.relatedProducts", "rich-text#1", @@ -62,7 +62,8 @@ "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + //este cara foi trocado por html#imagens + "html#imagens", "product-bookmark", "product-specification-badges" ] @@ -88,6 +89,13 @@ "flex-layout.row#product-image": { "children": ["product-images"] }, + + "html#imagens":{ + "props":{ + "testId": "product-images" + }, + "children": ["product-images"] + }, "product-images": { "props": { "aspectRatio": { @@ -109,25 +117,32 @@ "blockClass":"right-col" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", + "html#product-name", + "html#codigo", "product-rating-summary", "flex-layout.row#selling-price", - "product-installments", "example-component", + "html#product-installments", + // "html#pixzap", // "product-separator", // "product-identifier.product", - "sku-selector", - "flex-layout.row#box-buy", + "html#sku-selector", + "html#box-buy", "product-assembly-options", "product-gifts", // "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", + "html#shipping-simulator", "share#default" ] }, - + //criando este bloco e trocando na chamada acima + "html#product-name": { + "props": { + "testId": "product-name" + }, + "children": ["vtex.store-components:product-name"] + }, "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -141,12 +156,12 @@ "showValueNameForImageVariation": true } }, + ////////////////////////////////////////////////////////////////////// "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7, - "blockClass":"m3-buyButton" + "marginBottom": 7 }, "children": ["add-to-cart-button"] }, @@ -275,21 +290,37 @@ } }, -"flex-layout.row#box-buy" : { +"html#box-buy" : { "props":{ - "blockClass": "box-buy" }, - "children":[ "product-quantity#1","flex-layout.col#button-2"] + "children":[ "html#product-quantity", "html#add-to-cart-button"] }, -"flex-layout.col#button-2":{ - "children": ["flex-layout.row#buy-button"] -}, +// "flex-layout.col#button-2":{ +// "children": ["flex-layout.row#buy-button"] +// }, + + "html#add-to-cart-button": { + "props":{ + "testId": "add-to-cart-button", + "blockClass": "m3-buyButton" + }, + "children":["add-to-cart-button"] + }, + + "html#product-quantity": { + "props":{ + "testId": "product-quantity" + }, + "children":["product-quantity#1"] + }, + "product-quantity#1":{ "props":{ "width":"25%", - "size":"large" + "size":"large", + "snowLabel": false } }, @@ -297,13 +328,11 @@ "list-context.product-list#demo1": { "blocks": ["product-summary.shelf#demo1"], - "children": ["slider-layout#demo-products"] + "children": ["html#slider"] }, "product-summary.shelf#demo1": { "children": [ - "product-summary-image", - "product-summary-name", - "product-summary-price" + "html#prateleira" ] }, @@ -318,13 +347,74 @@ "showNavigationArrows": "desktopOnly", "blockClass": "carousel" } - // "children": ["rich-text#1"] - }, + }, "rich-text#1": { "props": { "text": "Você também pode gostar:" } + }, + + //blocos htmls + "html#codigo": { + //não rodou + "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" + // }, + // "children":["paymentWithPix"] + // }, + "html#sku-selector": { + "props":{ + "testId": "sku-selector" + }, + "children":["sku-selector"] + }, + "html#shipping-simulator": { + "props":{ + "testId": "shipping-simulator" + }, + "children":["shipping-simulator"] + }, + "html#product-description": { + "props":{ + "testId": "product-description" + }, + "children":["tab-layout#home"] + }, + "html#slider": { + "props":{ + "testId": "product-summary-list" + }, + "children":["slider-layout#demo-products"] + }, + "html#prateleira": { + "props":{ + "testId": "vtex-product-summary" + }, + "children":[ + "product-summary-image", + "product-summary-name", + "product-list-price", + "product-selling-price"] } } diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..6da9a9b 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -7,7 +7,7 @@ "marginBottom": 4 }, "children": [ - "product-selling-price" + "html#selling-price" ] }, diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 87cf119..29bf415 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -38,7 +38,7 @@ "children": [ "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", - "product-installments" + "html#product-installments" ] }, "modal-actions#quickview": { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 1d47629..d4939f1 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -242,4 +242,5 @@ .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { padding: 0; margin: auto; + margin: auto; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index cb68500..d26dd85 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -19,8 +19,9 @@ .listContainer { display: flex; - justify-content: start; + justify-content: space-between; padding-left: 104px; + padding-right: 104px; border-bottom: 1px solid #B9B9B9; } @@ -32,6 +33,7 @@ border-top: none; border-left: none; border-right: none; + border-radius: 0; } .listItem :global(.vtex-button) :global(.vtex-button__label) { font-family: "Open Sans"; @@ -42,4 +44,5 @@ color: #000000; background-color: white; padding: 0 16px; + text-transform: initial; } \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index ea7d5b9..1ea9174 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -6,3 +6,4 @@ background-color: green; } + diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 6aecaa1..3522b54 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -35,3 +35,4 @@ height: 49px; } } + diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index b3f21c7..d6db2b3 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -10,8 +10,9 @@ .listContainer { display: flex; - justify-content: start; + justify-content: space-between; padding-left: 104px; + padding-right: 104px; border-bottom: 1px solid #B9B9B9; } @@ -22,6 +23,7 @@ border-top: none; border-left: none; border-right: none; + border-radius: 0; :global(.vtex-button__label ) { font-family: 'Open Sans'; font-style: normal; @@ -31,6 +33,7 @@ color: #000000; background-color: white; padding: 0 16px; + text-transform: initial; } } }