From 798d6580ea73135f185f3454d01f7a913e725b26 Mon Sep 17 00:00:00 2001 From: carloswinter Date: Fri, 10 Feb 2023 14:36:56 -0300 Subject: [PATCH] feat(pix): adiciona bloco custom pix a pagina de produto --- react/Placeholder.tsx | 3 + react/components/Html/styles.css | 8 - react/components/Pix/Pix.tsx | 30 +- react/components/Pix/pixImg.svg | 38 --- react/components/Placeholder/Placeholder.tsx | 8 + store/blocks/pdp/product.jsonc | 132 ++++++-- store/interfaces.json | 3 + styles/css/agenciamagma.store-theme.css | 4 + styles/css/vtex.add-to-cart-button.css | 12 + styles/css/vtex.flex-layout.css | 28 ++ styles/css/vtex.product-price.css | 35 +++ styles/css/vtex.store-components.css | 184 ++++++++++++ .../product/agenciamagma.store-theme.scss | 6 + .../sass/pages/product/vtex.flex-layout.scss | 32 ++ .../pages/product/vtex.product-price.scss | 35 +++ .../pages/product/vtex.store-components.scss | 281 +++++++++++++++++- .../sass/pages/vtex.add-to-cart-button.scss | 3 + 17 files changed, 758 insertions(+), 84 deletions(-) create mode 100644 react/Placeholder.tsx delete mode 100644 react/components/Pix/pixImg.svg create mode 100644 react/components/Placeholder/Placeholder.tsx create mode 100644 styles/css/vtex.add-to-cart-button.css create mode 100644 styles/sass/pages/vtex.add-to-cart-button.scss diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx new file mode 100644 index 0000000..29393ed --- /dev/null +++ b/react/Placeholder.tsx @@ -0,0 +1,3 @@ +import Placeholder from "./components/Placeholder/Placeholder"; + +export default Placeholder; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 6c28f66..c2b8bc9 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,11 +1,3 @@ -/* :global(.agenciamagma-store-theme-5-x-html--cart-content) { - display: flex; - align-items: center; - justify-content: center; - column-gap: 10px; - margin-top: 8px; - margin-bottom: 16px; -} */ [class*="html--cart-content"] { display: flex; gap: 10px; diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index 91b958e..7c23a80 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -4,7 +4,6 @@ import styles from "./styles.css"; const Pix = () => { const product = useProduct(); - console.log(product); const pix = { pixValue: Number( @@ -13,26 +12,25 @@ const Pix = () => { ), }; - const priceTimes = - product?.selectedItem?.sellers[0].commertialOffer.Installments[3] - .NumberOfInstallments; - const valueTotal = product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value.toFixed( - 2 - ) - .toString() - .replace(".", ","); + // const priceTimes = + // product?.selectedItem?.sellers[0].commertialOffer.Installments[3] + // .NumberOfInstallments; + // const valueTotal = product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value.toFixed( + // 2 + // ) + // .toString() + // .replace(".", ","); const pixPrice = (pix.pixValue = pix.pixValue * 0.9) .toFixed(2) .toString() .replace(".", ","); - - return ( - <> - + /* {priceTimes} x de R$ {valueTotal} sem juros - + */ + return ( + <>
{ alt="Imagem Pix" />
-
+

R${pixPrice} 10% de desconto -

+

); diff --git a/react/components/Pix/pixImg.svg b/react/components/Pix/pixImg.svg deleted file mode 100644 index d5883d4..0000000 --- a/react/components/Pix/pixImg.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/react/components/Placeholder/Placeholder.tsx b/react/components/Placeholder/Placeholder.tsx new file mode 100644 index 0000000..fa66632 --- /dev/null +++ b/react/components/Placeholder/Placeholder.tsx @@ -0,0 +1,8 @@ +const Placeholder = () => { + if (typeof document !== "undefined") { + const m3Input = document.querySelector(".vtex-address-form-4-x-input"); + m3Input?.setAttribute("placeholder", "Digite seu CEP"); + } + return null; +}; +export default Placeholder; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 698200c..4e2ab78 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -15,18 +15,39 @@ }, "list-context.product-list#demo1": { "blocks": ["product-summary.shelf#demo1"], - "children": ["slider-layout#demo-products"] + "children": ["html#slider-layout"] }, + "product-summary.shelf#demo1": { "children": [ - "product-summary-name", - "product-summary-description", - "product-summary-image", - "product-summary-price", - "product-summary-sku-selector", - "product-summary-buy-button" + "html#sliderPrateleira" + // "product-summary-name", + // "product-summary-description", + // "product-summary-image", + // "product-summary-price", + // "product-summary-sku-selector", + // "product-summary-buy-button" ] }, + "html#sliderPrateleira": { + "props": { + "testId": "vtex-product-summary", + "blockClass": "Prateleira" + }, + "children": [ + "product-summary-image#shelf", + "product-summary-name", + "product-list-price#summary", + "product-selling-price#summary" + ] + }, + "html#slider-layout": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#demo-products"] + }, + "slider-layout#demo-products": { "props": { "itemsPerPage": { @@ -60,6 +81,12 @@ "props": { "marginBottom": 7 }, + "children": ["html#product-description"] + }, + "html#product-description": { + "props": { + "testId": "product-description" + }, "children": ["tab-layout#description"] }, "tab-layout#description": { @@ -174,12 +201,19 @@ } }, "flex-layout.row#product-image": { + "children": ["html#product-images"] + }, + "html#product-images": { + "props": { + "testId": "product-images" + }, "children": ["product-images"] }, "product-images": { "props": { "aspectRatio": { "desktop": "auto", + "testId": "", "phone": "16:9" }, "displayThumbnailsArrows": false, @@ -194,31 +228,93 @@ "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", + "html#product-name", + "html#codigo", "product-rating-summary", - "flex-layout.row#selling-price", + "html#selling-price", + // "flex-layout.row#selling-price", + "html#product-installments", "html#pix-component", - "sku-selector", + "html#sku-selector", + // "html#product-quantity", + // "html#add-to-cart-button", "html#cart-content", + "Placeholder", "product-assembly-options", "product-gifts", "availability-subscriber", - "shipping-simulator", - "share#default" + "html#shipping-simulator" ] }, + "html#product-name": { + "props": { + "marginBottom": 3, + "testId": "product-name", + "blockClass": "productName" + }, + "children": ["vtex.store-components:product-name"] + }, + "html#codigo": { + "props": { + "blockClass": "codigo", + "testId": "product-code" + }, + "children": ["product-identifier.product"] + }, + + "html#product-installments": { + "props": { + "testId": "product-installments" + }, + "children": ["product-installments"] + }, + + "html#selling-price": { + "props": { + "testId": "product-price" + }, + "children": ["flex-layout.row#selling-price"] + }, + "html#pix-component": { "props": { - "testId": "pix-price" + "testId": "pix-price", + "blockClass": "pix" }, "children": ["pix-component"] }, + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button", + "blockClass": "addButton" + }, + "children": ["flex-layout.row#buy-button"] + }, + + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": ["product-quantity"] + }, "html#cart-content": { "props": { "blockClass": "cart-content" }, - "children": ["product-quantity", "flex-layout.row#buy-button"] + "children": ["html#product-quantity", "html#add-to-cart-button"] + }, + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator", + "blockClass": "shippingSimulator" + }, + "children": ["shipping-simulator"] }, "flex-layout.row#product-name": { @@ -264,9 +360,9 @@ "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", - "sku-selector", + "html#product-name", + "html#codigo", + "html#sku-selector", "flex-layout.row#availability" ] }, diff --git a/store/interfaces.json b/store/interfaces.json index c55366c..9f8761b 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -8,5 +8,8 @@ "html": { "component": "html", "composition": "children" + }, + "Placeholder": { + "component": "Placeholder" } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 1e14a9b..9b94fb5 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -13,4 +13,8 @@ .html--pdp-breadcrumb { background-color: transparent; +} + +.html--addButton { + width: 100%; } \ No newline at end of file diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css new file mode 100644 index 0000000..c0b0c03 --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,12 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.addButton { + width: 100%; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 8f1fd90..fc38b19 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -8,6 +8,34 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +:global(.vtex-breadcrumb-1-x-container) { + padding: 0 40px; +} + +:global(.vtex-store-components-3-x-container) { + padding-left: 0px; + padding-right: 0px; +} +:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + padding-right: 0 !important; + overflow: hidden; +} +:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px 40px; + gap: 32px; + margin-top: 16px; + margin-bottom: 16px; +} +:global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) :global(.vtex-flex-layout-0-x-flexRow) :global(.vtex-flex-layout-0-x-flexRowContent) { + display: block; + padding: 0; + margin-top: 0; + margin-bottom: 0; +} + .flexRow--buyButton { width: 100%; } diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 8b81f8f..2adc8f8 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -17,4 +17,39 @@ .flexRowContent { margin: 0 !important; +} + +.listPriceValue { + text-decoration-line: line-through; + text-decoration-color: #bababa; +} +.listPriceValue::before { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + color: #bababa; + line-height: 19px; + content: "de"; + margin-right: 6px; +} +.listPriceValue::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + color: #bababa; + line-height: 19px; + content: "por"; + margin-left: 5px; +} +.listPriceValue .currencyCode, +.listPriceValue .currencyLiteral, +.listPriceValue .currencyInteger { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 863e33f..0b6435e 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -83,6 +83,20 @@ color: #575757; } +.productImageTag { + object-fit: unset !important; + max-height: 100% !important; + width: 100%; +} + +:global(.vtex-store-components-3-x-productImageTag--zoom) { + display: none; +} + +:global(.vtex-stack-layout-0-x-stackItem) { + min-height: unset; +} + .skuSelectorContainer { display: flex; flex-direction: column-reverse; @@ -223,4 +237,174 @@ font-size: 16px; line-height: 22px; color: #929292; +} + +.carouselGaleryThumbs { + margin-top: 16px; +} +.carouselGaleryThumbs :first-child { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 16px; +} +.carouselGaleryThumbs :first-child :first-child .productImagesThumb { + height: 90px !important; + width: 90px !important; + margin-bottom: 0; +} +.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 16px; +} +.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg { + height: 90px; + width: 90px; + border-radius: 8px; +} + +.shippingContainer { + display: flex; + margin: 0; + align-items: center; + position: relative; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { + display: flex; + flex-direction: column; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label)::before { + content: "CALCULAR FRETE:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { + width: 231px; + height: 49px; + margin: 0; + padding: 16.5px 0 16.5px 16px; + border: 1px solid #cccccc; + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + padding: 8px 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__error) { + position: absolute; + bottom: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + position: absolute; + padding: 0; + left: 312px; + top: 41.5px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + color: #000; +} +.shippingContainer :global(.vtex-button) { + display: flex; + width: 49px; + height: 49px; + margin-bottom: 5px; + background: #000; + border: 1px solid #000; + border-radius: 0; + cursor: pointer; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + padding: 0; + font-size: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::before { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #fff; +} + +.shippingTableHead { + display: block; +} +.shippingTableHead .shippingTableRow { + display: grid; + grid-template-columns: 78px 48px 136px; + grid-template-areas: "A B C"; + column-gap: 32px; +} +.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName, +.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate, +.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + padding: 0; +} +.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { + text-align: left; + grid-area: A; +} +.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + grid-area: C; + text-align: left; +} +.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + text-align: left; + grid-area: B; + font-size: 0; +} +.shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after { + content: "Valor"; + font-size: 14px; +} + +.shippingTableBody .shippingTableRow { + display: grid; + grid-template-columns: 78px 48px 136px; + grid-template-areas: "A B C"; + column-gap: 32px; + margin-top: 15px; +} +.shippingTableBody .shippingTableRow .shippingTableRadioBtn { + display: none; +} +.shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + grid-area: A; + text-transform: capitalize; +} +.shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + white-space: nowrap; + grid-area: C; +} +.shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { + grid-area: B; } \ 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 25facb9..ec47915 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -5,3 +5,9 @@ .html--pdp-breadcrumb { background-color: transparent; } +.html--addButton { + width: 100%; +} +// .html .html--cart-content { +// background-color: red; +// } diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 5127fa2..08c2005 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -2,6 +2,38 @@ // width: auto; // padding: 0 40px; // } +:global(.vtex-breadcrumb-1-x-container) { + padding: 0 40px; +} + +:global(.vtex-store-components-3-x-container) { + padding-left: 0px; + padding-right: 0px; + :global(.vtex-flex-layout-0-x-flexRowContent) { + :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + padding-right: 0 !important; + overflow: hidden; + } + } + + :global(.vtex-flex-layout-0-x-flexRowContent) { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px 40px; + gap: 32px; + margin-top: 16px; + margin-bottom: 16px; + :global(.vtex-flex-layout-0-x-flexRow) { + :global(.vtex-flex-layout-0-x-flexRowContent) { + display: block; + padding: 0; + margin-top: 0; + margin-bottom: 0; + } + } + } +} .flexRow--buyButton { width: 100%; .flexRowContent--buyButton { diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index cd26dd4..799797a 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -9,3 +9,38 @@ .flexRowContent { margin: 0 !important; } + +.listPriceValue { + text-decoration-line: line-through; + text-decoration-color: #bababa; + &::before { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + color: #bababa; + line-height: 19px; + content: "de"; + margin-right: 6px; + } + &::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + color: #bababa; + line-height: 19px; + content: "por"; + margin-left: 5px; + } + .currencyCode, + .currencyLiteral, + .currencyInteger { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index f5dc9e8..4bec0ab 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -81,11 +81,16 @@ color: #575757; } .productImageTag { - // width: 664px !important; - // height: 664px !important; - // max-height: none !important; + object-fit: unset !important; + max-height: 100% !important; + width: 100%; +} +:global(.vtex-store-components-3-x-productImageTag--zoom) { + display: none; +} +:global(.vtex-stack-layout-0-x-stackItem) { + min-height: unset; } - .productImagesThumb, .carouselThumbBorder, .figure, @@ -250,3 +255,271 @@ } } } +// .swiper-container-initialized { +// .swiper-wrapper { +.carouselGaleryThumbs { + margin-top: 16px; + :first-child { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 16px; + :first-child { + .productImagesThumb { + height: 90px !important; + width: 90px !important; + margin-bottom: 0; + .figure { + display: flex; + flex-direction: row; + align-items: flex-start; + padding: 0px; + gap: 16px; + .thumbImg { + height: 90px; + width: 90px; + border-radius: 8px; + } + } + } + } + } +} +.shippingContainer { + display: flex; + margin: 0; + align-items: center; + position: relative; + + :global(.vtex-address-form__postalCode) { + display: flex; + + :global(.vtex-input) { + display: flex; + flex-direction: column; + + :global(.vtex-input__label) { + font-size: 0; + } + + :global(.vtex-input__label)::before { + content: "CALCULAR FRETE:"; + + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + + :global(.vtex-input-prefix__group) { + width: 231px; + height: 49px; + margin: 0; + padding: 16.5px 0 16.5px 16px; + + border: 1px solid #cccccc; + border-radius: 0; + + :global(.vtex-address-form-4-x-input) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + padding: 8px 0; + } + } + :global(.vtex-input__error) { + position: absolute; + bottom: 0; + } + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + position: absolute; + padding: 0; + left: 312px; + top: 41.5px; + + :last-child { + color: #000; + } + } + } + + :global(.vtex-button) { + display: flex; + width: 49px; + height: 49px; + margin-bottom: 5px; + + background: #000; + border: 1px solid #000; + border-radius: 0; + + cursor: pointer; + + :global(.vtex-button__label) { + padding: 0; + font-size: 0; + } + + :global(.vtex-button__label)::before { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + + display: flex; + align-items: center; + + color: #fff; + } + } +} +// } +// } +// .shippingTable { +// display: flex; +// flex-direction: column; +// padding: 0; +// margin: 0; +// border: none; + +// .shippingTableHead { +// display: flex; +// .shippingTableRow { +// display: flex; +// gap: 62px; +// margin-bottom: 15px; + +// font-family: "Open Sans", sans-serif; +// font-style: normal; +// font-size: 14px; +// line-height: 19px; +// color: #202020; +// text-transform: uppercase; + +// .shippingTableHeadDeliveryEstimate { +// order: 2; +// font-weight: 400 !important; +// } +// .shippingTableHeadDeliveryPrice { +// font-size: 0; +// } +// .shippingTableHeadDeliveryPrice::before { +// content: "FRETE"; +// font-size: 14px; +// font-style: normal; +// font-weight: 400; +// line-height: 19px; +// } +// } +// } + +// .shippingTableBody { +// display: flex; +// flex-direction: column; +// gap: 15px; + +// .shippingTableRow { +// display: flex; + +// .shippingTableCell { +// font-family: "Open Sans", sans-serif; +// font-style: normal; +// font-weight: 400; +// font-size: 12px; +// line-height: 16px; +// align-items: center; +// color: #afafaf; +// // margin-bottom: 15px; +// } + +// .shippingTableCellDeliveryEstimate { +// order: 2; +// } +// .shippingTableCellDeliveryPrice { +// width: 108px; +// } +// .shippingTableCellDeliveryName { +// width: 95px; +// margin-right: 32px; +// padding: 0; + +// .shippingTableLabel { +// .shippingTableRadioBtn { +// display: none; +// } +// } +// } +// } +// } +// } +.shippingTableHead { + display: block; + .shippingTableRow { + display: grid; + grid-template-columns: 78px 48px 136px; + grid-template-areas: "A B C"; + column-gap: 32px; + .shippingTableHeadDeliveryName, + .shippingTableHeadDeliveryEstimate, + .shippingTableHeadDeliveryPrice { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + padding: 0; + } + .shippingTableHeadDeliveryName { + text-align: left; + grid-area: A; + } + .shippingTableHeadDeliveryEstimate { + grid-area: C; + text-align: left; + } + .shippingTableHeadDeliveryPrice { + text-align: left; + grid-area: B; + font-size: 0; + &::after { + content: "Valor"; + font-size: 14px; + } + } + } +} +.shippingTableBody { + .shippingTableRow { + display: grid; + grid-template-columns: 78px 48px 136px; + grid-template-areas: "A B C"; + column-gap: 32px; + margin-top: 15px; + .shippingTableRadioBtn { + display: none; + } + .shippingTableCellDeliveryName { + grid-area: A; + text-transform: capitalize; + } + .shippingTableCellDeliveryEstimate { + white-space: nowrap; + grid-area: C; + } + .shippingTableCellDeliveryPrice { + grid-area: B; + } + } +} diff --git a/styles/sass/pages/vtex.add-to-cart-button.scss b/styles/sass/pages/vtex.add-to-cart-button.scss new file mode 100644 index 0000000..9ed654f --- /dev/null +++ b/styles/sass/pages/vtex.add-to-cart-button.scss @@ -0,0 +1,3 @@ +.addButton { + width: 100%; +} -- 2.34.1