diff --git a/react/components/Html/style.css b/react/components/Html/style.css
index c5b98db..6a029ae 100644
--- a/react/components/Html/style.css
+++ b/react/components/Html/style.css
@@ -6,3 +6,7 @@
height: 100%;
width: 100%;
}
+
+[class*="html--cep"] {
+ margin: 16px 0;
+}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index b39ecb2..27c5ec7 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -121,7 +121,7 @@
// "product-gifts",
// "flex-layout.row#buy-button",
"availability-subscriber",
- "shipping-simulator",
+ "html#shipping-simulator",
"share#default"
]
},
@@ -190,6 +190,13 @@
"children": ["html#product-quantity","html#button-addCart"]
},
+ "html#shipping-simulator": {
+ "props":{
+ "blockClass": "cep"
+ },
+ "children": ["shipping-simulator"]
+ },
+
"flex-layout.row#product-availability": {
"props": {
"colGap": 7,
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index b2c6c03..e244435 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -17,7 +17,7 @@
line-height: 19px;
color: #929292;
}
-@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
+@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.container {
padding: 16px 40px;
}
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index d616226..c648446 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -181,4 +181,18 @@
font-size: 18px;
line-height: 25px;
color: #fff;
+}
+
+.flexRow--cep {
+ margin: 16px 0;
+ width: 409px;
+}
+@media (min-width: 280px) and (max-width: 768px) {
+ .flexRow--cep {
+ width: 100%;
+ }
+}
+.flexRow--cep .flexRowContent--cep .stretchChildrenWidth {
+ padding: 0;
+ margin: 0;
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css
index e217fcc..f150433 100644
--- a/styles/css/vtex.product-identifier.css
+++ b/styles/css/vtex.product-identifier.css
@@ -14,7 +14,7 @@
justify-content: end;
margin-bottom: 24px;
}
-@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.product-identifier--productReference {
justify-content: flex-start;
padding-top: 8px;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index d95f08d..6b929b7 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -13,7 +13,7 @@
margin: 0;
max-width: 100%;
}
-@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
+@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.container {
padding: 16px 40px;
}
@@ -32,17 +32,17 @@
max-height: 904px !important;
cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default;
}
-@media (min-width: 1025px) and (max-width: 2499px) {
+@media (min-width: 1025px) and (max-width: 2560px) {
.productImageTag--main, .videoContainer {
max-height: 664px !important;
}
}
-@media (min-width: 491px) and (max-width: 1024px) {
+@media (min-width: 769px) and (max-width: 1024px) {
.productImageTag--main, .videoContainer {
max-height: 944px !important;
}
}
-@media (min-width: 280px) and (max-width: 490px) {
+@media (min-width: 280px) and (max-width: 768px) {
.productImageTag--main, .videoContainer {
max-height: 296px !important;
}
@@ -51,7 +51,7 @@
.carouselGaleryThumbs {
margin-top: 0;
}
-@media (min-width: 280px) and (max-width: 490px), (min-width: 491px) and (max-width: 1024px) {
+@media (min-width: 280px) and (max-width: 768px), (min-width: 769px) and (max-width: 1024px) {
.carouselGaleryThumbs {
display: block !important;
}
@@ -63,7 +63,7 @@
border-radius: 8px;
max-width: calc(100% - 16px);
}
-@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
+@media (min-width: 1025px) and (max-width: 2560px), (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.carouselGaleryThumbs .productImagesThumb {
width: 90px !important;
height: 90px !important;
@@ -87,7 +87,7 @@
line-height: 34px;
color: #575757;
}
-@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.productNameContainer--quickview {
justify-content: flex-start;
margin-top: 32px;
@@ -248,4 +248,95 @@
}
.skuSelectorContainer--sku-product .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorItemTextValue {
color: #000;
+}
+
+.shippingContainer {
+ display: flex;
+ align-items: flex-end;
+ width: 409px;
+ position: relative;
+}
+@media (min-width: 280px) and (max-width: 768px) {
+ .shippingContainer {
+ width: 296px;
+ }
+}
+.shippingContainer :global(.vtex-input__label) {
+ font-size: 0;
+ margin-bottom: 8px;
+}
+.shippingContainer :global(.vtex-input__label)::after {
+ 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) {
+ padding: 0;
+}
+.shippingContainer :global(.vtex-input-prefix__group) {
+ width: 250px;
+ height: 49px;
+ border: none;
+ border-radius: 0;
+}
+.shippingContainer :global(.vtex-address-form-4-x-input) {
+ width: 250px;
+ height: 49px;
+ padding: 16px;
+ border: 1px solid #CCC;
+ border-radius: 0;
+}
+.shippingContainer :global(.vtex-input__suffix) {
+ display: none;
+}
+.shippingContainer :global(.vtex-button) {
+ background-color: #000;
+ border: none;
+ border-radius: 0;
+ width: 49px;
+ height: 49px;
+}
+.shippingContainer :global(.vtex-button__label) {
+ font-size: 0;
+}
+.shippingContainer :global(.vtex-button__label)::after {
+ content: "OK";
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ color: #fff;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+ position: absolute;
+ left: 312px;
+ bottom: 18px;
+ padding: 0;
+}
+@media (min-width: 280px) and (max-width: 768px) {
+ .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+ left: 200px;
+ bottom: -24px;
+ }
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ display: flex;
+ align-items: center;
+ text-decoration-line: underline;
+ color: #000;
+ padding: 0;
+ margin: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
+ display: none;
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index fee8b2a..c422b59 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -180,5 +180,20 @@
}
}
}
-
+}
+
+.flexRow--cep {
+ margin: 16px 0;
+ width: 409px;
+
+ @media #{$mq-mobile} {
+ width: 100%;
+ }
+
+ .flexRowContent--cep {
+ .stretchChildrenWidth {
+ padding: 0;
+ margin: 0;
+ }
+ }
}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 9c5c8bf..395e4b5 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -272,3 +272,105 @@
}
}
+.shippingContainer {
+ display: flex;
+ align-items: flex-end;
+ width: 409px;
+ position: relative;
+
+ @media #{$mq-mobile}{
+ width: 296px;
+ }
+
+ :global(.vtex-input__label) {
+ font-size: 0;
+ margin-bottom: 8px;
+
+ &::after {
+ content: "CALCULAR FRETE:";
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-gray6;
+ }
+
+ }
+
+ :global(.vtex-address-form__postalCode){
+ padding: 0;
+ }
+
+ :global(.vtex-input-prefix__group) {
+ width: 250px;
+ height: 49px;
+ border: none;
+ border-radius: 0;
+ }
+
+ :global(.vtex-address-form-4-x-input){
+ width: 250px;
+ height: 49px;
+ padding: 16px;
+ border: 1px solid #CCC;
+ border-radius: 0;
+ }
+
+ :global(.vtex-input__suffix) {
+ display: none;
+ }
+
+ :global(.vtex-button) {
+ background-color: $color-black0;
+ border: none;
+ border-radius: 0;
+ width: 49px;
+ height: 49px;
+ }
+
+ :global(.vtex-button__label){
+ font-size: 0;
+ &::after{
+ content: ("OK");
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ color: $color-white;
+ }
+ }
+
+ :global(.vtex-address-form__postalCode-forgottenURL) {
+ position: absolute;
+ // width: 100%;
+ left: 312px;
+ bottom: 18px;
+ // transform: translate(0, -50%);
+ padding: 0;
+
+ @media #{$mq-mobile}{
+ left: 200px;
+ bottom: -24px;
+ }
+
+ :last-child{
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ display: flex;
+ align-items: center;
+ text-decoration-line: underline;
+ color: $color-black0;
+ padding: 0;
+ margin: 0;
+ }
+
+ :global(.vtex__icon-external-link) {
+ display: none;
+ }
+ }
+}