diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index 0c91295..b9e444d 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -8,5 +8,19 @@
[class*="html--pdp-breadcrumb"] {
background-color: #fff;
}
+[class*="html--quantidadeEBuy"] {
+ display: flex;
+ gap: 10px;
+}
+@media (max-width: 1024px) {
+ [class*="html--quantidadeEBuy"] {
+ display: flex;
+ flex-direction:column;
+ gap: 10px;
+ }
+}
+[class*=""] {
+
+}
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 683a37d..88dfd3e 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -133,22 +133,41 @@
// "product-gifts",
// "flex-layout.row#buy-button",
// "availability-subscriber"
+ "rich-text#titleCep",
"shipping-simulator"
// "share#default"
]
},
+ "shipping-simulator":{
+ "props":{
+ "blockClass":"divCep"
+ // "placeholder": "Digite seu CEP"
+ }
+ },
+ "rich-text#titleCep": {
+ "props": {
+ "blockClass": "titleCep",
+ "text": "CALCULAR FRETE:"
+ }
+ },
"html#quantidadeEButtonCustom":{
"props": {
"blockClass": "quantidadeEBuy"
},
"children": ["product-quantity","flex-layout.row#buy-button"]
},
+ "product-quantity":{
+ "props":{
+ "blockClass":"divQuantidade",
+ "size":"regular"
+ }
+ },
"product-installments#custom":{
"props":{
"blockClass":"divParcelamente",
"markers": ["discount"],
- "message": " {installmentsNumber}x de {installmentValue} sem juros ",
+ "message": " {installmentsNumber}x de {installmentValue} sem juros ",
"installmentsCriteria":"max-quantity-without-interest"
}
},
@@ -177,6 +196,7 @@
"flex-layout.row#buy-button": {
"props": {
+ "blockClass":"divButtonBuy",
"marginTop": 4,
"marginBottom": 7
},
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..c7ab2c3
--- /dev/null
+++ b/styles/css/vtex.add-to-cart-button.css
@@ -0,0 +1,21 @@
+@charset "UTF-8";
+/*
+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 */
+.buttonDataContainer {
+ font-size: 0;
+}
+.buttonDataContainer .buttonText::after {
+ content: "ADICIONAR À SACOLA";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 25px;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index e3abf1f..d4ec5a4 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -69,4 +69,12 @@
.flexCol--divImgDescription {
margin-right: 0px;
}
+}
+
+.flexRow--divButtonBuy {
+ text-align: center;
+ width: 100%;
+}
+.flexRow--divButtonBuy :global(.vtex-button) {
+ background-color: black;
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
index 30969cd..ba64241 100644
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@@ -27,6 +27,9 @@
.installments--divParcelamente .installmentsNumber--divParcelamente {
font-weight: 700;
}
+.installments--divParcelamente .installments-discount--divParcelamente {
+ font-weight: 700;
+}
.installments--divParcelamente .currencyContainer--divParcelamente {
font-weight: 700;
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
new file mode 100644
index 0000000..e0f5ca1
--- /dev/null
+++ b/styles/css/vtex.product-quantity.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 */
+.quantitySelectorContainer .quantitySelectorTitle {
+ display: none;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index 8640de2..fcb5349 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -35,4 +35,13 @@
.container--tituloSlick .paragraph--tituloSlick {
font-size: 20px;
}
+}
+
+.wrapper--titleCep {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 07123bf..d40e551 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -221,4 +221,63 @@
width: 48px;
border-radius: 50%;
transform: rotate(-90deg);
+}
+
+.shippingContainer {
+ display: flex;
+ position: relative;
+ width: 409px;
+ height: 49px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+ display: flex;
+ padding: 0%;
+ margin: 0%;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
+ width: 280px;
+ height: 49px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) {
+ display: none;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
+ border: 1px solid #cccccc;
+ border-radius: 0px;
+ height: 49px;
+ border-right: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ display: flex;
+ align-items: center;
+ text-decoration-line: underline;
+ color: #000000;
+ position: absolute;
+ right: -57px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
+ display: none;
+}
+.shippingContainer :global(.vtex-button) {
+ font-size: 0;
+ background: black;
+ width: 49px;
+ height: 49px;
+ border: 0;
+ border-radius: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
+ content: "Ok";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ color: #ffffff;
+ padding: 0;
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss
new file mode 100644
index 0000000..654b70a
--- /dev/null
+++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss
@@ -0,0 +1,12 @@
+.buttonDataContainer {
+ font-size: 0;
+ .buttonText::after {
+ content: "ADICIONAR À SACOLA";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 25px;
+ // color: #ffffff;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 69dff67..a269dcb 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -56,3 +56,10 @@
}
}
+.flexRow--divButtonBuy{
+ text-align: center;
+ width: 100%;
+ :global(.vtex-button){
+ background-color: black;
+ }
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss
index fcc8ea1..8bc93f6 100644
--- a/styles/sass/pages/product/vtex.product-price.scss
+++ b/styles/sass/pages/product/vtex.product-price.scss
@@ -13,10 +13,13 @@
font-weight: 400;
font-size: 16px;
line-height: 22px;
- color: #929292;
+ color: #929292;
.installmentsNumber--divParcelamente{
font-weight: 700;
}
+ .installments-discount--divParcelamente{
+ font-weight: 700;
+ }
.currencyContainer--divParcelamente{
font-weight: 700;
}
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
new file mode 100644
index 0000000..e726a89
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -0,0 +1,13 @@
+.quantitySelectorContainer{
+ // width: 128px;
+ // height: 49px;
+ .quantitySelectorTitle{
+ display: none;
+ }
+ // .quantitySelectorStepper{
+ // width: 100%;
+ // .vtex-numeric-stepper-container{
+ // width: 100%;
+ // }
+ // }
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index b7c96c2..989740b 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@@ -21,3 +21,11 @@
}
}
}
+.wrapper--titleCep {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index dc041bd..a9ee1dd 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -203,3 +203,62 @@
transform: rotate(-90deg);
}
}
+
+.shippingContainer {
+ display: flex;
+ position: relative;
+ width: 409px;
+ height: 49px;
+ :global(.vtex-address-form__postalCode) {
+ display: flex;
+ padding: 0%;
+ margin: 0%;
+ :global(.vtex-input) {
+ width: 280px;
+ height: 49px;
+ :global(.vtex-input__label) {
+ display: none;
+ }
+ :global(.vtex-input-prefix__group) {
+ border: 1px solid #cccccc;
+ border-radius: 0px;
+ height: 49px;
+ border-right: 0;
+ }
+ }
+ :global(.vtex-address-form__postalCode-forgottenURL) {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ display: flex;
+ align-items: center;
+ text-decoration-line: underline;
+ color: #000000;
+ position: absolute;
+ right: -57px;
+ :global(.vtex__icon-external-link) {
+ display: none;
+ }
+ }
+ }
+ :global(.vtex-button) {
+ font-size: 0;
+ background: black;
+ width: 49px;
+ height: 49px;
+ border: 0;
+ border-radius: 0;
+ :global(.vtex-button__label)::after {
+ content: "Ok";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ color: #ffffff;
+ padding: 0;
+ }
+ }
+}
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index f71d816..5618622 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -57,4 +57,4 @@
padding-right: 0px;
}
}
-}
+}
\ No newline at end of file