diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index da001bc..9d35e26 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -38,12 +38,12 @@
color: #929292;
white-space: nowrap;
}
-.html--pdp-productMain{
+.html--pdp-productMain,.html--availability{
padding-right: 2.778%;
padding-left: 2.778%;
display: flex;
}
-.html--StackLayout,.html--pdp-InfoBuy{
+.html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{
width: 50%;
}
@@ -54,8 +54,8 @@
margin-bottom: 16px;
margin-top: 16px;
}
-.html--pdp-productMain :global(.vtex-button){
- display: none;
+.html--pdp-productMain :global(.vtex-button),.html--availability :global(.vtex-button){
+ display: block;
}
.html--buy-button :global(.vtex-button){
display: block;
@@ -75,7 +75,7 @@
max-width: 766px;
width: 80.126%;
}
- .html--pdp-productMain{
+ .html--pdp-productMain,.html--availability{
padding-right: 12.5393%;
padding-left: 12.5393%;
margin: 0;
@@ -123,7 +123,7 @@
:global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
margin-bottom: 20px;
}
-.html--pdp-productMain :global(.vtex-store-components-3-x-container){
+.html--pdp-productMain :global(.vtex-store-components-3-x-container),.html--availability :global(.vtex-store-components-3-x-container){
max-width: 100%;
}
:global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel){
@@ -160,11 +160,11 @@
padding-top: 12px !important;
padding-bottom: 12px !important;
}
- .html--pdp-productMain{
+ .html--pdp-productMain,.html--availability{
flex-direction: column;
align-items: center;
}
- .html--StackLayout,.html--pdp-InfoBuy{
+ .html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{
width: 89.23%;
}
.html--pdp-descriptions :global(.vtex-store-components-3-x-container){
diff --git a/react/components/ProductContext/Pix.tsx b/react/components/ProductContext/Pix.tsx
index 4a09b0d..4b8c073 100644
--- a/react/components/ProductContext/Pix.tsx
+++ b/react/components/ProductContext/Pix.tsx
@@ -1,7 +1,14 @@
-import React from 'react';
+import React, { useRef, useEffect } from 'react';
import { useProduct } from 'vtex.product-context';
-const Pix = () => {
+const Pix: React.FC = () => {
+ const buttonRef = useRef(null);
+ useEffect(() => {
+ if (buttonRef.current) {
+ buttonRef.current.innerHTML = 'Novo texto';
+ buttonRef.current.setAttribute('placeholder', 'Novo placeholder');
+ }
+ }, []);
const { product } = useProduct()
let pixprice = product?.priceRange.sellingPrice.lowPrice
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index d2df9f1..700f7d8 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -239,7 +239,7 @@
}
],
"Then": "html#product-main",
- "Else": "flex-layout.row#product-availability"
+ "Else": "html#product-availability"
}
},
@@ -428,28 +428,23 @@
}
},
- "flex-layout.row#product-availability": {
+ "html#product-availability": {
"props": {
- "colGap": 7,
- "marginTop": 4,
- "marginBottom": 7,
- "paddingTop": 7
+ "blockClass": "availability"
},
"children": [
"html#stack",
- "flex-layout.col#right-col-availability"
+ "html#right-col-availability"
]
},
- "flex-layout.col#right-col-availability": {
+ "html#right-col-availability": {
"props": {
- "preventVerticalStretch": true,
- "rowGap": 0,
"blockClass": "info-availability"
},
"children": [
"flex-layout.row#product-name",
- "sku-selector",
- "flex-layout.row#availability"
+ "flex-layout.row#availability",
+ "sku-selector"
]
},
"flex-layout.row#availability": {
@@ -459,6 +454,12 @@
"children": ["availability-subscriber"]
},
+ "availability-subscriber":{
+ "props": {
+ "blockClass": "message-availability"
+ }
+ },
+
"share#default": {
"props": {
"social": {
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index d413635..02713df 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@@ -200,4 +201,29 @@
font-weight: 700;
font-size: 25px;
line-height: 38px;
+}
+
+.flexRowContent--message-availability :global(.vtex-store-components-3-x-title) {
+ font-size: 0;
+}
+.flexRowContent--message-availability :global(.vtex-store-components-3-x-title)::after {
+ content: "Produto indisponível";
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 900;
+ font-size: 14px;
+ line-height: 19px;
+ color: #868686;
+}
+.flexRowContent--message-availability :global(.vtex-store-components-3-x-subscribeLabel) {
+ font-size: 0;
+}
+.flexRowContent--message-availability :global(.vtex-store-components-3-x-subscribeLabel)::after {
+ content: "Deseja saber quando estiver disponível?";
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ color: #868686;
}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index aba5c15..8f3d246 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -241,4 +241,57 @@
font-size: 14px !important;
line-height: 19px !important;
}
+}
+
+.form {
+ width: max-content;
+}
+.form .content {
+ width: 65.532%;
+ height: 108px;
+ display: grid;
+ justify-items: center;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: 1fr 1fr;
+ gap: 8px;
+}
+.form .content .inputName, .form .content .inputEmail {
+ width: 100%;
+ height: 40px;
+ min-width: 150px;
+ margin-right: 0;
+ margin-bottom: 7px;
+}
+.form .submit {
+ width: 100%;
+ justify-content: center;
+ grid-column: span 2;
+ grid-row: 2;
+}
+.form .submit :global(.vtex-button) {
+ width: 100%;
+ background: #000000;
+ width: 308px;
+ height: 49px;
+}
+.form .submit :global(.vtex-button) :global(.vtex-button__label) {
+ font-size: 0;
+}
+.form .submit :global(.vtex-button) :global(.vtex-button__label)::after {
+ content: "AVISE-ME";
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 25px;
+ color: #FFFFFF;
+}
+.form :global(.vtex-styleguide-9-x-input) {
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 28px;
+ padding: 14px 14px 16px;
+ color: #989898;
}
\ 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 f1e0d8e..5a75976 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -194,4 +194,29 @@
line-height: 38px;
}
}
-
+.flexRowContent--message-availability{
+ :global(.vtex-store-components-3-x-title){
+ font-size: 0;
+ &::after{
+ content: "Produto indisponível";
+ font-family: 'Open Sans',sans-serif;
+ font-style: normal;
+ font-weight: 900;
+ font-size: 14px;
+ line-height: 19px;
+ color: #868686;
+ }
+ }
+ :global(.vtex-store-components-3-x-subscribeLabel){
+ font-size: 0;
+ &::after{
+ content: "Deseja saber quando estiver disponível?";
+ font-family: 'Open Sans',sans-serif;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 14px;
+ line-height: 19px;
+ color: #868686;
+ }
+ }
+}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 3d1bab5..f4a374e 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -216,4 +216,57 @@
}
}
+.form{
+ width: max-content;
+ .content{
+ width: 65.532%;
+ height: 108px;
+ display: grid;
+ justify-items: center;
+ grid-template-columns: repeat(2, 1fr);
+ grid-template-rows: 1fr 1fr;
+ gap: 8px;
+ .inputName,.inputEmail{
+ width: 100%;
+ height: 40px;
+ min-width: 150px;
+ margin-right: 0;
+ margin-bottom: 7px;
+ }
+ }
+ .submit{
+ width: 100%;
+ justify-content: center;
+ grid-column: span 2;
+ grid-row: 2;
+ :global(.vtex-button){
+ width: 100%;
+ background: #000000;
+ width: 308px;
+ height: 49px;
+ :global(.vtex-button__label){
+ font-size: 0;
+ &::after{
+ content: "AVISE-ME";
+ font-family: 'Open Sans',sans-serif;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 18px;
+ line-height: 25px;
+ color: #FFFFFF;
+ }
+ }
+ }
+ }
+ :global(.vtex-styleguide-9-x-input ){
+ font-family: 'Open Sans',sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 28px;
+ padding: 14px 14px 16px;
+ color: #989898;
+ }
+}
+