diff --git a/react/Installments.tsx b/react/Installments.tsx
deleted file mode 100644
index 679a337..0000000
--- a/react/Installments.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-import Installments from "./components/Installments";
-
-export default Installments;
diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx
new file mode 100644
index 0000000..53ea3ff
--- /dev/null
+++ b/react/Placeholder.tsx
@@ -0,0 +1,3 @@
+import Placeholder from "./components/Placeholder/index";
+
+export default Placeholder;
diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index be5dd61..b3d9bbd 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -246,7 +246,7 @@
@media screen and (min-width: 1920px) {
[class*="html--pdp-breadcrumb"] {
- margin: 0 360px;
+ margin: 16px 360px;
}
[class*="html--product-main"] {
diff --git a/react/components/Installments/index.tsx b/react/components/Installments/index.tsx
deleted file mode 100644
index abe4a7e..0000000
--- a/react/components/Installments/index.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from "react";
-import { useProduct } from "vtex.product-context";
-import styles from "./styles.css";
-
-const Installments = () => {
- const product = useProduct();
- const installment = {
- numberOfInstallments:
- product?.selectedItem?.sellers[0].commertialOffer?.Installments[3]
- .NumberOfInstallments,
- value:
- product?.selectedItem?.sellers[0].commertialOffer?.Installments[3].Value,
- };
- return (
-
-
- {installment.numberOfInstallments} x{" "}
-
- de
-
- {" "}
- R$ {installment.value?.toFixed(2).toString().replace(".", ",")}
- {" "}
- sem juros
-
- );
-};
-
-export default Installments;
diff --git a/react/components/Installments/styles.css b/react/components/Installments/styles.css
deleted file mode 100644
index eb2a254..0000000
--- a/react/components/Installments/styles.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.parcelas {
- margin: 0;
- font-style: normal;
- font-weight: 400;
- font-size: 16px;
- line-height: 22px;
- color: #929292;
- margin-bottom: 8px;
-}
diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css
index 3b482f6..c87225f 100644
--- a/react/components/Pix/styles.css
+++ b/react/components/Pix/styles.css
@@ -1,7 +1,7 @@
.pixWrapper {
display: flex;
gap: 26px;
- margin-bottom: 16px;
+ margin:8px 0 16px;
align-items: center;
}
diff --git a/react/components/Placeholder/index.tsx b/react/components/Placeholder/index.tsx
new file mode 100644
index 0000000..53b6166
--- /dev/null
+++ b/react/components/Placeholder/index.tsx
@@ -0,0 +1,21 @@
+import React from "react";
+
+const Example = () => {
+ if (typeof document !== "undefined") {
+ const inputCEP = document.querySelector(".vtex-address-form-4-x-input");
+ const inputEmail = document.querySelector(".vtex-store-components-3-x-inputEmail");
+
+ if (inputCEP) {
+ inputCEP.setAttribute("placeholder", "Digite seu CEP");
+ }
+
+ if (inputEmail) {
+ console.log(inputEmail.children[0].children[0].children[0].setAttribute("placeholder", "E-mail"));
+
+ }
+ }
+
+ return <>;
+};
+
+export default Example;
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index a6d87b7..ba7e623 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -1,6 +1,7 @@
{
"store.product": {
"children": [
+ "placeholder",
"html#breadcrumb",
"condition-layout.product#availability",
"tab-layout#description",
@@ -57,7 +58,8 @@
},
"product-summary.shelf#related-product": {
- "children": [ "html#product-item"
+ "children": [
+ "html#product-item"
// "product-summary-image#related-product",
// "product-summary-name",
// "product-summary-price"
@@ -278,8 +280,8 @@
// "product-rating-summary",
// "flex-layout.row#list-price-savings",
"html#selling-price",
- // "product-installments",
- "installments",
+ "product-installments",
+ // "installments",
// "product-separator",
"html#pix",
"html#sku-selector",
@@ -294,6 +296,15 @@
]
},
+ "product-installments": {
+ "props": {
+ "markers": ["discount"],
+ "blockClass": "installments",
+ "message": "ou {installmentsNumber}x de R${installmentValue} sem juros",
+ "installmentsCriteria": "max-quantity-without-interest"
+ }
+ },
+
"html#sku-selector": {
"props": {
"blockClass": "sku-selector",
diff --git a/store/interfaces.json b/store/interfaces.json
index fed3088..720eebd 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -7,10 +7,11 @@
"composition": "children"
},
- "installments": {
- "component": "Installments"
+ "placeholder": {
+ "component": "Placeholder"
},
-
+
+
"pix": {
"component": "Pix"
}
diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
index 0307721..1f72c44 100644
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@@ -13,4 +13,16 @@
font-size: 25px;
line-height: 38px;
color: #000;
+}
+
+.installments {
+ margin: 0;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: #929292;
+}
+.installments .installments-discount {
+ 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
index c0b45bd..6b6c6cf 100644
--- a/styles/css/vtex.product-quantity.css
+++ b/styles/css/vtex.product-quantity.css
@@ -31,6 +31,9 @@
font-size: 16px;
line-height: 22px;
}
+.quantitySelectorContainer :global(.vtex-numeric-stepper__input):focus {
+ outline: none;
+}
.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button-container) {
justify-content: center;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 5980b80..6acb449 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -233,6 +233,14 @@
padding: 16.5px 16px;
margin: 0;
}
+.shippingContainer :global(.vtex-address-form-4-x-input)::placeholder {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ display: flex;
+ color: #afafaf;
+}
.shippingContainer :global(.vtex__icon-external-link) {
display: none;
diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss
index 063d5eb..9b9064b 100644
--- a/styles/sass/pages/product/vtex.product-price.scss
+++ b/styles/sass/pages/product/vtex.product-price.scss
@@ -7,5 +7,14 @@
}
.installments {
- // background: red;
+ margin: 0;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: #929292;
+
+ .installments-discount {
+ font-weight: 700;
+ }
}
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
index f51bd52..5200baf 100644
--- a/styles/sass/pages/product/vtex.product-quantity.scss
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -22,6 +22,10 @@
font-weight: 400;
font-size: 16px;
line-height: 22px;
+
+ &:focus {
+ outline: none;
+ }
}
.quantitySelectorContainer
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index e2a016f..644e5cf 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -278,6 +278,14 @@
.shippingContainer :global(.vtex-address-form-4-x-input) {
padding: 16.5px 16px;
margin: 0;
+ &::placeholder {
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ display: flex;
+ color: #afafaf;
+ }
}
.shippingContainer :global(.vtex__icon-external-link) {
display: none;