Merge branch 'feature/availability' into desenvolvimento

This commit is contained in:
Gustavo Rallenson Gonçalves Da Silva 2023-02-09 16:19:32 -03:00
commit a5fb8f9811
7 changed files with 188 additions and 23 deletions

View File

@ -38,12 +38,12 @@
color: #929292; color: #929292;
white-space: nowrap; white-space: nowrap;
} }
.html--pdp-productMain{ .html--pdp-productMain,.html--availability{
padding-right: 2.778%; padding-right: 2.778%;
padding-left: 2.778%; padding-left: 2.778%;
display: flex; display: flex;
} }
.html--StackLayout,.html--pdp-InfoBuy{ .html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{
width: 50%; width: 50%;
} }
@ -54,8 +54,8 @@
margin-bottom: 16px; margin-bottom: 16px;
margin-top: 16px; margin-top: 16px;
} }
.html--pdp-productMain :global(.vtex-button){ .html--pdp-productMain :global(.vtex-button),.html--availability :global(.vtex-button){
display: none; display: block;
} }
.html--buy-button :global(.vtex-button){ .html--buy-button :global(.vtex-button){
display: block; display: block;
@ -75,7 +75,7 @@
max-width: 766px; max-width: 766px;
width: 80.126%; width: 80.126%;
} }
.html--pdp-productMain{ .html--pdp-productMain,.html--availability{
padding-right: 12.5393%; padding-right: 12.5393%;
padding-left: 12.5393%; padding-left: 12.5393%;
margin: 0; margin: 0;
@ -123,7 +123,7 @@
:global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){ :global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
margin-bottom: 20px; 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%; max-width: 100%;
} }
:global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel){ :global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel){
@ -160,11 +160,11 @@
padding-top: 12px !important; padding-top: 12px !important;
padding-bottom: 12px !important; padding-bottom: 12px !important;
} }
.html--pdp-productMain{ .html--pdp-productMain,.html--availability{
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.html--StackLayout,.html--pdp-InfoBuy{ .html--StackLayout,.html--pdp-InfoBuy,.html--info-availability{
width: 89.23%; width: 89.23%;
} }
.html--pdp-descriptions :global(.vtex-store-components-3-x-container){ .html--pdp-descriptions :global(.vtex-store-components-3-x-container){

View File

@ -1,7 +1,14 @@
import React from 'react'; import React, { useRef, useEffect } from 'react';
import { useProduct } from 'vtex.product-context'; import { useProduct } from 'vtex.product-context';
const Pix = () => { const Pix: React.FC = () => {
const buttonRef = useRef<HTMLButtonElement>(null);
useEffect(() => {
if (buttonRef.current) {
buttonRef.current.innerHTML = 'Novo texto';
buttonRef.current.setAttribute('placeholder', 'Novo placeholder');
}
}, []);
const { product } = useProduct() const { product } = useProduct()
let pixprice = product?.priceRange.sellingPrice.lowPrice let pixprice = product?.priceRange.sellingPrice.lowPrice

View File

@ -239,7 +239,7 @@
} }
], ],
"Then": "html#product-main", "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": { "props": {
"colGap": 7, "blockClass": "availability"
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7
}, },
"children": [ "children": [
"html#stack", "html#stack",
"flex-layout.col#right-col-availability" "html#right-col-availability"
] ]
}, },
"flex-layout.col#right-col-availability": { "html#right-col-availability": {
"props": { "props": {
"preventVerticalStretch": true,
"rowGap": 0,
"blockClass": "info-availability" "blockClass": "info-availability"
}, },
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#product-name",
"sku-selector", "flex-layout.row#availability",
"flex-layout.row#availability" "sku-selector"
] ]
}, },
"flex-layout.row#availability": { "flex-layout.row#availability": {
@ -459,6 +454,12 @@
"children": ["availability-subscriber"] "children": ["availability-subscriber"]
}, },
"availability-subscriber":{
"props": {
"blockClass": "message-availability"
}
},
"share#default": { "share#default": {
"props": { "props": {
"social": { "social": {

View File

@ -1,3 +1,4 @@
@charset "UTF-8";
/* /*
0 - 600PX: Phone 0 - 600PX: Phone
600 - 900px: Table portrait 600 - 900px: Table portrait
@ -201,3 +202,28 @@
font-size: 25px; font-size: 25px;
line-height: 38px; 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;
}

View File

@ -242,3 +242,56 @@
line-height: 19px !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;
}

View File

@ -194,4 +194,29 @@
line-height: 38px; 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;
}
}
}

View File

@ -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;
}
}