diff --git a/manifest.json b/manifest.json
index a2cde0d..defccae 100644
--- a/manifest.json
+++ b/manifest.json
@@ -65,7 +65,8 @@
"vtex.tab-layout": "0.x",
"vtex.condition-layout": "2.x",
"vtex.css-handles": "1.x",
- "vtex.product-context": "0.x"
+ "vtex.product-context": "0.x",
+ "vtex.address-form": "4.x"
},
"$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}
diff --git a/react/components/Example/Example.tsx b/react/components/Example/Example.tsx
index c9b846d..4f8cf1d 100644
--- a/react/components/Example/Example.tsx
+++ b/react/components/Example/Example.tsx
@@ -7,6 +7,8 @@ const Pix = () => {
const productContext = useProduct()
+ const total = (valuePix * 0.1 - valuePix / 100) / 10
+
const objectPass = [
{
id: productContext?.selectedItem?.itemId,
@@ -55,7 +57,7 @@ const Pix = () => {
- {(valuePix / 100).toLocaleString('pt-br', {
+ {total.toLocaleString('pt-br', {
style: 'currency',
currency: 'BRL',
})}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index c7a10c2..0ddefda 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -119,11 +119,18 @@
// "product-gifts",
// "flex-layout.row#buy-button",
"availability-subscriber",
- "shipping-simulator",
- "share#default"
+ "html#shipping-simulator"
+ // "share#default"
]
},
+ "html#shipping-simulator": {
+ "props": {
+ "testId": "shipping-simulator",
+ "blockClass": "shipping-simulator"
+ },
+ "children": ["shipping-simulator"]
+ },
"html#quantity-wrapper": {
"props": {
"tag": "section",
diff --git a/styles/configs/style.json b/styles/configs/style.json
index 1ea854a..7274b7b 100644
--- a/styles/configs/style.json
+++ b/styles/configs/style.json
@@ -110,7 +110,7 @@
"text": {
"action-primary": "#0F3E99",
"action-secondary": "#eef3f7",
- "link": "#0F3E99",
+ "link": "#000000",
"emphasis": "#f71963",
"disabled": "#979899",
"success": "#8bc34a",
diff --git a/styles/css/vtex.address-form.css b/styles/css/vtex.address-form.css
new file mode 100644
index 0000000..d573100
--- /dev/null
+++ b/styles/css/vtex.address-form.css
@@ -0,0 +1,13 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+.input {
+ height: 49px;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 17bb0f0..7fb0d81 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -58,4 +58,10 @@
.container .termArrow,
.container .term {
display: none;
+}
+
+@media screen and (min-width: 1920px) {
+ .container {
+ padding-left: 360px;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index fcf781e..5ae922a 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -10,6 +10,8 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
.flexRowContent {
position: relative;
+ padding: 0;
+ margin: 0;
}
.flexRowContent--container-compra {
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index f29b7d5..bdd5989 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -10,15 +10,16 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
.container {
padding: 0 40px;
+ max-width: initial;
}
.container .productImagesThumb {
padding-right: 16px;
}
.container .productImagesGallerySlide {
- width: 664px !important;
+ width: 100% !important;
}
.container .carouselGaleryCursor {
- width: 664px;
+ width: 100%;
}
.container .carouselGaleryThumbs {
margin-top: 16px;
@@ -109,4 +110,138 @@
}
.container .diagonalCross {
transform: rotate(90deg);
+}
+
+.shippingContainer {
+ display: flex;
+ align-items: center;
+ position: relative;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+ padding-bottom: 26px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+ position: absolute;
+ left: 344px;
+ top: 50%;
+ transform: translateY(-50%);
+ padding: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL):last-child {
+ text-decoration: underline;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: #000000 !important;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL):last-child :global(.vtex__icon-external-link) {
+ display: none;
+}
+
+.shippingContainer :global(.vtex-input__label) {
+ font-size: 0;
+}
+.shippingContainer :global(.vtex-input__label)::after {
+ content: "CALCULAR FRETE:";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+}
+
+.shippingContainer :global(.vtex-input-prefix__group) {
+ height: 49px;
+ padding-right: 21px;
+}
+.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) {
+ display: none;
+}
+
+.shippingContainer :global(.vtex-input__error) {
+ position: absolute;
+ top: 70px;
+}
+
+.shippingContainer :global(.vtex-button) {
+ width: 49px;
+ height: 49px;
+ background-color: #000000;
+ border: none;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
+ font-size: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
+ content: "OK";
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ color: #fff;
+}
+
+.shippingTable {
+ border: none;
+ padding: 0;
+ margin-top: -10px;
+ width: fit-content;
+}
+.shippingTable .shippingTableHead {
+ display: table-row;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName,
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice,
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
+ text-align: left;
+ font-weight: 400;
+ font-size: 0;
+ line-height: 19px;
+ color: #202020;
+ min-width: 112px;
+ padding: 0;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName::after {
+ font-size: 14px;
+ content: "ENTREGA";
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate::before {
+ font-size: 14px;
+ content: "FRETE";
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before {
+ font-size: 14px;
+ content: "PRAZO";
+}
+.shippingTable .shippingTableBody .shippingTableRow {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-template-rows: 1;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
+ grid-area: 1/3/1/3;
+}
+.shippingTable .shippingTableBody .shippingTableCell {
+ width: 112px;
+ padding: 0 0 15px 0;
+}
+.shippingTable .shippingTableCellDeliveryName {
+ padding-left: 0;
+}
+.shippingTable .shippingTableRadioBtn {
+ display: none;
+}
+.shippingTable .shippingTableCell,
+.shippingTable .shippingTableLabel,
+.shippingTable .currencyContainer {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: #afafaf;
+ padding-left: 0;
+}
+
+@media screen and (min-width: 1920px) {
+ .container {
+ padding: 0 360px;
+ }
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.address-form.scss b/styles/sass/pages/product/vtex.address-form.scss
new file mode 100644
index 0000000..b4b0b87
--- /dev/null
+++ b/styles/sass/pages/product/vtex.address-form.scss
@@ -0,0 +1,3 @@
+.input {
+ height: 49px;
+}
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index c86c701..a86c40d 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -58,3 +58,9 @@
display: none;
}
}
+
+@media screen and (min-width: 1920px) {
+ .container {
+ padding-left: 360px;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 2000478..fa1c1e7 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -1,5 +1,7 @@
.flexRowContent {
position: relative;
+ padding: 0;
+ margin: 0;
}
.flexRowContent--container-compra {
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index dd72024..0048980 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -3,17 +3,18 @@
// }
.container {
padding: 0 40px;
+ max-width: initial;
.productImagesThumb {
padding-right: 16px;
}
.productImagesGallerySlide {
- width: 664px !important;
+ width: 100% !important;
}
.carouselGaleryCursor {
- width: 664px;
+ width: 100%;
}
.carouselGaleryThumbs {
@@ -129,3 +130,165 @@
transform: rotate(90deg);
}
}
+
+//Entrega
+
+.shippingContainer {
+ display: flex;
+ align-items: center;
+ position: relative;
+ :global(.vtex-address-form__postalCode) {
+ padding-bottom: 26px;
+ :global(.vtex-address-form__postalCode-forgottenURL) {
+ position: absolute;
+ left: 344px;
+ top: 50%;
+ transform: translateY(-50%);
+ padding: 0;
+
+ &:last-child {
+ text-decoration: underline;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: $color-black2 !important;
+ :global(.vtex__icon-external-link) {
+ display: none;
+ }
+ }
+ }
+ }
+}
+
+.shippingContainer {
+ :global(.vtex-input__label) {
+ font-size: 0;
+ &::after {
+ content: 'CALCULAR FRETE:';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-gray7;
+ }
+ }
+}
+
+.shippingContainer {
+ :global(.vtex-input-prefix__group) {
+ height: 49px;
+ padding-right: 21px;
+ :global(.vtex-input__suffix) {
+ display: none;
+ }
+ }
+}
+
+.shippingContainer {
+ :global(.vtex-input__error) {
+ position: absolute;
+ top: 70px;
+ }
+}
+
+.shippingContainer {
+ :global(.vtex-button) {
+ width: 49px;
+ height: 49px;
+ background-color: $color-black2;
+ border: none;
+ :global(.vtex-button__label) {
+ font-size: 0;
+ &::after {
+ content: 'OK';
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-white;
+ }
+ }
+ }
+}
+
+.shippingTable {
+ border: none;
+ padding: 0;
+ margin-top: -10px;
+ width: fit-content;
+ .shippingTableHead {
+ display: table-row;
+
+ .shippingTableRow {
+ .shippingTableHeadDeliveryName,
+ .shippingTableHeadDeliveryPrice,
+ .shippingTableHeadDeliveryEstimate {
+ text-align: left;
+ font-weight: 400;
+ font-size: 0;
+ line-height: 19px;
+ color: $color-black3;
+ min-width: 112px;
+ padding: 0;
+ }
+ .shippingTableHeadDeliveryName {
+ &::after {
+ font-size: 14px;
+ content: 'ENTREGA';
+ }
+ }
+ .shippingTableHeadDeliveryEstimate {
+ &::before {
+ font-size: 14px;
+ content: 'FRETE';
+ }
+ }
+ .shippingTableHeadDeliveryPrice {
+ &::before {
+ font-size: 14px;
+ content: 'PRAZO';
+ }
+ }
+ }
+ }
+
+ .shippingTableBody {
+ .shippingTableRow {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ grid-template-rows: 1;
+
+ .shippingTableCellDeliveryEstimate {
+ grid-area: 1 / 3 / 1 / 3;
+ }
+ }
+
+ .shippingTableCell {
+ width: 112px;
+ padding: 0 0 15px 0;
+ }
+ }
+
+ .shippingTableCellDeliveryName {
+ padding-left: 0;
+ }
+
+ .shippingTableRadioBtn {
+ display: none;
+ }
+
+ .shippingTableCell,
+ .shippingTableLabel,
+ .currencyContainer {
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ color: $color-gray9;
+ padding-left: 0;
+ }
+}
+
+@media screen and (min-width: 1920px) {
+ .container {
+ padding: 0 360px;
+ }
+}
diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss
index 97bd214..db9992f 100644
--- a/styles/sass/utils/_vars.scss
+++ b/styles/sass/utils/_vars.scss
@@ -1,5 +1,6 @@
$color-black: #292929;
$color-black2: #000000;
+$color-black3: #202020;
$color-white: #fff;
@@ -37,4 +38,4 @@ $z-index: (
//Fonts
-@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');