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 (
+ <>
-
+
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%;
+}