diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index a8c7935..b775543 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -107,3 +107,5 @@ max-width:314.4px; display: flex; flex-direction: column; } + [class*="html--m3-add-to-cart-button "]{ + width: 100%; } diff --git a/react/components/Pix/Pix.css b/react/components/Pix/Pix.css index 986bdb1..6c16d76 100644 --- a/react/components/Pix/Pix.css +++ b/react/components/Pix/Pix.css @@ -30,6 +30,7 @@ font-style: normal; font-weight: 700; font-size: 18px; line-height: 25px; +margin: 0; /* identical to box height */ @@ -41,6 +42,7 @@ font-style: normal; font-weight: 300; font-size: 13px; line-height: 18px; +margin: 0; /* identical to box height */ diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index c945149..457849c 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -37,8 +37,8 @@ const Pix = () => { Imagem de pix
- R$ {strResult} - 10 % de desconto +

R$ {strResult}

+

10 % de desconto

); diff --git a/store/blocks/pdp/product-shelf-related.jsonc b/store/blocks/pdp/product-shelf-related.jsonc index b018e80..b2d4e7d 100644 --- a/store/blocks/pdp/product-shelf-related.jsonc +++ b/store/blocks/pdp/product-shelf-related.jsonc @@ -4,10 +4,7 @@ "blockClass": "m3-shelf-retaletd" }, "blocks": ["product-summary.shelf#m3-shelf-retaletd-content"], - "children": [ - "rich-text#m3-shelf-related-title", - "slider-layout#m3-carousel-products" - ] + "children": ["rich-text#m3-shelf-related-title", "html#slider-layout"] }, "product-summary.shelf#m3-shelf-retaletd-content": { "props": { @@ -33,6 +30,12 @@ "message": "de {listPriceValue} por" } }, + "html#slider-layout": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#m3-carousel-products"] + }, "slider-layout#m3-carousel-products": { "props": { "blockClass": "m3-carousel-products", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index aa03d67..99c7f96 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#tab-product", + "html#tab-layout", "list-context.product-list#m3-shelf-retaletd", "newsletter#m3-newsletter", "product-questions-and-answers" @@ -55,7 +55,7 @@ "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#product-images", "product-bookmark", "product-specification-badges" ] @@ -76,6 +76,12 @@ "rowGap": 0 } }, + "html#product-images": { + "props": { + "testId": "product-images" + }, + "children": ["flex-layout.row#product-image"] + }, "flex-layout.row#product-image": { "children": ["product-images"] }, @@ -100,14 +106,13 @@ "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", + "html#product-name", + "html#product-identifier.product", "product-rating-summary", - "flex-layout.row#selling-price", - "product-installments#parcelas", - "m3-pix", - "sku-selector", - "product-assembly-options", + "html#selling-price", + "html#product-installments", + "html#m3-pix", + "html#sku-selector", "product-gifts", "html#buy-button", "availability-subscriber", @@ -115,6 +120,26 @@ ] }, + "html#product-identifier.product": { + "props": { "testId": "product-code" }, + "children": ["product-identifier.product"] + }, + "html#selling-price": { + "props": { "testId": "product-price" }, + "children": ["flex-layout.row#selling-price"] + }, + "html#m3-pix": { + "props": { + "testId": "pix-price" + }, + "children": ["m3-pix"] + }, + "html#product-installments": { + "props": { + "testId": "product-installments" + }, + "children": ["product-installments#parcelas"] + }, "product-installments#parcelas": { "props": { "blockClass": "desconto", @@ -123,13 +148,24 @@ "message": "{installmentsNumber} x de {installmentValue} sem juros" } }, + "html#product-name": { + "props": { + "testId": "product-name" + }, + "children": ["flex-layout.row#product-name"] + }, "flex-layout.row#product-name": { "props": { "marginBottom": 3 }, "children": ["vtex.store-components:product-name"] }, - + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, "sku-selector": { "props": { "variationsSpacing": 3, @@ -143,12 +179,19 @@ "marginBottom": 7, "paddingRight": 0 }, - "children": ["html#sizeQuantity", "add-to-cart-button"] + "children": ["html#product-quantity", "html#add-to-cart-button"] }, - "html#sizeQuantity": { + "html#add-to-cart-button": { + "props": { + "blockClass": "m3-add-to-cart-button", + "testId": "add-to-cart-button" + }, + "children": ["add-to-cart-button"] + }, + "html#product-quantity": { "props": { "blockClass": "quantity", - "testid": "product-quantity" + "testId": "product-quantity" }, "children": ["product-quantity#size"] }, @@ -182,17 +225,12 @@ }, "children": [ "flex-layout.row#product-name", - "product-identifier.product", + "html#product-identifier.product", "flex-layout.row#availability", "sku-selector" ] }, - // "flex-layout.row#identifieAndName": { - // "props": { - // "blockClass": "identifieAndName" - // }, - // "children": ["flex-layout.row#product-name", "product-identifier.product"] - // }, + "flex-layout.row#availability": { "props": { "blockClass": "message-availability" @@ -203,7 +241,7 @@ "props": { "blockClass": "m3-shipping-simulator" }, - "children": ["rich-text", "shipping-simulator"] + "children": ["rich-text", "html#shipping-simulator"] }, "rich-text": { "props": { @@ -212,6 +250,12 @@ "text": "Calcular o frete" } }, + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, "share#default": { "props": { diff --git a/store/blocks/pdp/tab-layout-product.jsonc b/store/blocks/pdp/tab-layout-product.jsonc index 0ed0ac0..3ca723e 100644 --- a/store/blocks/pdp/tab-layout-product.jsonc +++ b/store/blocks/pdp/tab-layout-product.jsonc @@ -1,4 +1,11 @@ { + "html#tab-layout": { + "props": { + "testId": "product-description" + }, + "children": ["tab-layout#tab-product"] + }, + "tab-layout#tab-product": { "children": ["tab-list#tab-product", "tab-content#tab-product"], "props": { @@ -101,6 +108,7 @@ }, "children": ["product-images#imageDescription", "product-description"] }, + "product-description": { "props": { "collapseContent": false diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index e25f4d9..058e6ec 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -133,8 +133,9 @@ .shippingContainer :global(.vtex-address-form__postalCode) { display: flex; } -@media (max-width: 1024px) { +@media (max-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode) { + width: 100%; flex-direction: column; } } @@ -158,6 +159,14 @@ position: initial; } } +@media (max-width: 768px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + right: 0; + bottom: 0; + left: auto; + } +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) { display: none; } @@ -170,6 +179,11 @@ max-width: 231px; height: 49px; } +@media (max-width: 768px) { + .shippingContainer :global(.vtex-input-prefix__group) { + max-width: none; + } +} .shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input), .shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder { font-family: "Open Sans"; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 977a478..002a4cc 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -142,7 +142,8 @@ :global(.vtex-address-form__postalCode) { display: flex; - @media (max-width:1024px) { + @media (max-width:768px) { + width: 100%; flex-direction: column; } @@ -166,6 +167,13 @@ position: initial; } + @media (max-width:768px) { + position: absolute; + right: 0; + bottom: 0; + left: auto; + } + :global(.vtex__icon-external-link) { display: none; } @@ -182,6 +190,9 @@ max-width: 231px; height: 49px; + @media (max-width:768px) { + max-width: none; + } :global(.vtex-address-form-4-x-input),