Amandaalmeida/challenge-vtex-io-amanda-almeida
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(pix/prateleira): Adiciona css na prateleira, e começo da criação do componente pix

Browse Source
This commit is contained in:
amanda almeida 2023-01-31 22:16:13 -03:00
parent a22ddfe487
commit cf963f53de
17 changed files with 433 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
react/Pix.tsx Normal file
View File

@ -0,0 +1,2 @@
import Pix from "./components/pix";
export default Pix;

3
react/Placeholder.js Normal file
View File

@ -0,0 +1,3 @@
import Placeholder from "./components/placeholder";
export default Placeholder;

3
react/Placeholder.tsx
View File

@ -1,3 +0,0 @@
import { Placeholder } from "./components/placeholder";
export default Placeholder;

19
react/components/pix/ValuePix.tsx Normal file
View File

@ -0,0 +1,19 @@
import { useProduct } from "vtex.product-context";
const Pix = () => {
const productContextValue = useProduct();
console.log(productContextValue);
const price = productContextValue?.product?.priceRange.listPrice.highPrice;
console.log(price);
if (price !== undefined) {
const pix = (price / 100) * 10;
console.log(pix, "valor lido");
const valuePix = price - pix;
console.log(valuePix);
return valuePix;
} else {
return "valor não encontrado";
}
};
export default Pix;

8
react/components/pix/index.tsx Normal file
View File

@ -0,0 +1,8 @@
import React from "react";
import Pix from "./ValuePix";
const ValuePix = () => {
return <p>R$ {Pix}</p>;
};
export default ValuePix;

11
react/components/placeholder/index.js Normal file
View File

@ -0,0 +1,11 @@
const Placeholder = () => {
const placeholderCep = document.querySelector(".vtex-address-form-4-x-input");
if (placeholderCep) {
return (placeholderCep.placeholder = "Digite seu CEP");
} else {
return "";
}
};
export default Placeholder;

8
react/components/placeholder/index.tsx
View File

@ -1,8 +0,0 @@
const Placeholder = () => {
const placeholderCep = ((document.getElementsByClassName(
"vtex-address-form-4-x-input"
)[0] as HTMLInputElement).placeholder = "Digite seu CEP");
return placeholderCep;
};
export { Placeholder };

4
react/tsconfig.json
View File

@ -11,6 +11,8 @@
"./typings/*.d.ts",
"./**/*.tsx",
"./**/*.ts",
"components/placeholder/index.jsx"
"components/placeholder/index.js",
"Placeholder.js",
"components/placeholder/index.js"
]
}

72
store/blocks/pdp/product.jsonc
View File

@ -92,6 +92,7 @@
"product-rating-summary",
"product-selling-price",
"product-installments",
"pix",
"html#sku-selector",
"product-gifts",
"html#buy-button",
@ -166,6 +167,7 @@
"html#product-availability": {
"props": {
"blockClass": "product-main",
"colGap": 7,
"marginTop": 4,
"marginBottom": 7,
@ -182,8 +184,8 @@
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"sku-selector",
"flex-layout.row#availability"
"flex-layout.row#availability",
"sku-selector"
]
},
"flex-layout.row#availability": {
@ -192,72 +194,10 @@
},
"children": ["availability-subscriber"]
},
"rich-text#prateleira": {
"props": {
"text": "Você também pode gostar:",
"blockClass": "title-prateleira"
}
},
"html#product-summary.shelf": {
"availability-subscriber": {
"props": {
"testId": "vtex-product-summary",
"blockClass": "produto-prateleira"
},
"children": ["product-summary-image", "product-summary-name", "html#price"]
},
"html#price": {
"props": {
"blockClass": "price"
},
"children": [
"product-list-price#prateleira",
"product-selling-price#prateleira"
]
},
"product-list-price#prateleira": {
"props": {
"blockClass": "prateleira",
"message": "de {listPriceValue} por "
}
},
"product-selling-price#prateleira": {
"props": {
"blockClass": "prateleira"
}
},
"product-summary.shelf#slider": {
"props": {
"blockClass": "produto-prateleira"
},
"children": ["html#product-summary.shelf"]
},
"list-context.product-list#prateleira": {
"blocks": ["product-summary.shelf#slider"],
"children": ["slider-layout#prateleira"]
},
"html#list-context.product-list#prateleira": {
"props": {
"testId": "product-summary-list",
"blockClass": "prateleira"
},
"children": ["rich-text#prateleira", "list-context.product-list#prateleira"]
},
"slider-layout#prateleira": {
"props": {
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 2
},
"infinite": true,
"blockClass": "prateleira"
"blockClass": "message-availability"
}
}
}

70
store/blocks/pdp/slider-layout.jsonc Normal file
View File

@ -0,0 +1,70 @@
{
"rich-text#prateleira": {
"props": {
"text": "Você também pode gostar:",
"blockClass": "title-prateleira"
}
},
"html#product-summary.shelf": {
"props": {
"testId": "vtex-product-summary",
"blockClass": "produto-prateleira"
},
"children": ["product-summary-image", "product-summary-name", "html#price"]
},
"html#price": {
"props": {
"blockClass": "price"
},
"children": [
"product-list-price#prateleira",
"product-selling-price#prateleira"
]
},
"product-list-price#prateleira": {
"props": {
"blockClass": "prateleira",
"message": "de {listPriceValue} por "
}
},
"product-selling-price#prateleira": {
"props": {
"blockClass": "prateleira"
}
},
"product-summary.shelf#slider": {
"props": {
"blockClass": "produto-prateleira"
},
"children": ["html#product-summary.shelf"]
},
"list-context.product-list#prateleira": {
"blocks": ["product-summary.shelf#slider"],
"children": ["slider-layout#prateleira"]
},
"html#list-context.product-list#prateleira": {
"props": {
"testId": "product-summary-list",
"blockClass": "prateleira"
},
"children": ["rich-text#prateleira", "list-context.product-list#prateleira"]
},
"slider-layout#prateleira": {
"props": {
"itemsPerPage": {
"desktop": 4,
"tablet": 3,
"phone": 2
},
"infinite": true,
"blockClass": "prateleira"
}
}
}

3
store/interfaces.json
View File

@ -8,5 +8,8 @@
},
"placeholder": {
"component": "Placeholder"
},
"pix": {
"component": "Pix"
}
}

11
styles/css/vtex.product-summary.css
View File

@ -21,8 +21,8 @@
align-items: center;
justify-content: center;
width: 100%;
max-width: 314px;
height: 314.4px;
max-width: 334.4px;
height: 334.4px;
background: #EDEDED;
}
.container--produto-prateleira .nameContainer {
@ -40,4 +40,11 @@
}
.container--produto-prateleira .priceContainer {
padding: 0 0 32px;
}
@media screen and (max-width: 1024px) {
.container--produto-prateleira .imageContainer {
max-width: 317.87px;
height: 317.87px;
}
}

32
styles/css/vtex.slider-layout.css
View File

@ -11,11 +11,14 @@
background-color: transparent;
justify-content: center;
}
.sliderLayoutContainer--prateleira .sliderTrack--prateleira {
gap: 16px;
}
.sliderLayoutContainer--prateleira .sliderTrackContainer--prateleira {
width: 95.96%;
}
.sliderLayoutContainer--prateleira .slide--prateleira {
margin: 0 16px 0 0;
margin: 0;
}
.sliderLayoutContainer--prateleira .sliderArrows--prateleira {
padding: 0;
@ -23,9 +26,36 @@
}
.sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira {
left: -12px;
width: 11.2px;
height: 29.6px;
}
.sliderLayoutContainer--prateleira .sliderLeftArrow--prateleira::after {
content: "";
position: absolute;
padding: 10px;
left: 1px;
box-shadow: 2px -2px 0 0px #000 inset;
border: solid transparent;
border-width: 0 0 1px 1px;
transform: rotate(45deg);
}
.sliderLayoutContainer--prateleira .caretIcon {
display: none;
}
.sliderLayoutContainer--prateleira .sliderRightArrow--prateleira {
right: -12px;
width: 11.2px;
height: 29.6px;
}
.sliderLayoutContainer--prateleira .sliderRightArrow--prateleira::after {
content: "";
position: absolute;
padding: 10px;
right: 1px;
box-shadow: 2px -2px 0 0px #000 inset;
border: solid transparent;
border-width: 0 0 1px 1px;
transform: rotate(-135deg);
}
.sliderLayoutContainer--prateleira .paginationDotsContainer {
align-items: center;

96
styles/css/vtex.store-components.css
View File

@ -1,3 +1,4 @@
@charset "UTF-8";
/*
0 - 600PX: Phone
600 - 900px: Table portrait
@ -203,6 +204,17 @@
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
width: 0;
}
.shippingContainer :global(.vtex-address-form-4-x-input) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
}
.shippingContainer :global(.vtex-address-form-4-x-input)::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #AFAFAF;
}
.shippingContainer :global(.vtex-button) {
width: 49px;
height: 49px;
@ -314,6 +326,74 @@
color: #929292;
}
.subscriberContainer .content {
flex-wrap: wrap;
justify-content: start;
margin-top: 16px;
}
.subscriberContainer .title {
font-size: 0;
}
.subscriberContainer .title::after {
content: "Produto indisponível";
font-weight: 700;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #868686;
}
.subscriberContainer .subscribeLabel {
font-size: 0;
}
.subscriberContainer .subscribeLabel::after {
content: "Deseja saber quando estiver disponível?";
font-weight: 400;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #868686;
}
.subscriberContainer .input {
width: 195.5px;
height: 40px;
margin: 0;
}
.subscriberContainer .inputName {
margin-right: 8px;
}
.subscriberContainer :global(.vtex-input-prefix__group) {
border: 1px solid #989898;
border-radius: 0;
}
.subscriberContainer :global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
.subscriberContainer :global(.vtex-button) {
width: 399px;
height: 49px;
margin-top: 15px;
border: 0;
background: #000000;
}
.subscriberContainer :global(.vtex-button__label) {
font-size: 0;
width: 100%;
}
.subscriberContainer :global(.vtex-button__label)::after {
content: "AVISE-ME";
font-weight: 600;
font-size: 18px;
line-height: 25px;
display: flex;
align-items: center;
color: #FFFFFF;
}
@media screen and (max-width: 1024px) {
.productImageTag--main {
max-height: 994px !important;
@ -321,7 +401,7 @@
.productNameContainer {
text-align: start;
}
.imageElement {
.productImagesContainer--description {
width: 100%;
max-height: 944px;
}
@ -332,6 +412,20 @@
padding-bottom: 16px;
border-bottom: 1px solid #B9B9B9;
}
.subscriberContainer .content {
max-width: 100%;
display: flex;
}
.subscriberContainer .submit {
width: 100%;
}
.subscriberContainer .input {
width: 49.3%;
max-width: 378.5px;
}
.subscriberContainer :global(.vtex-button) {
width: 100%;
}
}
@media screen and (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode) {

14
styles/sass/pages/product/vtex.product-summary.scss
View File

@ -14,8 +14,8 @@
align-items: center;
justify-content: center;
width: 100%;
max-width: 314px;
height: 314.4px;
max-width: 334.4px;
height: 334.4px;
background: #EDEDED;
}
@ -39,3 +39,13 @@
padding: 0 0 32px;
}
}
@media screen and (max-width: 1024px) {
.container--produto-prateleira {
.imageContainer {
max-width: 317.87px;
height: 317.87px;
}
}
}

36
styles/sass/pages/product/vtex.slider-layout.scss
View File

@ -2,12 +2,16 @@
background-color: transparent;
justify-content: center;
.sliderTrack--prateleira {
gap: 16px;
}
.sliderTrackContainer--prateleira {
width: 95.96%;
}
.slide--prateleira {
margin: 0 16px 0 0;
margin: 0;
}
.sliderArrows--prateleira {
@ -17,10 +21,40 @@
.sliderLeftArrow--prateleira {
left: -12px;
width: 11.2px;
height: 29.6px;
&::after {
content: "";
position: absolute;
padding: 10px;
left: 1px;
box-shadow: 2px -2px 0 0px #000 inset;
border: solid transparent;
border-width: 0 0 1px 1px;
transform: rotate(45deg);
}
}
.caretIcon {
display: none;
}
.sliderRightArrow--prateleira {
right: -12px;
width: 11.2px;
height: 29.6px;
&::after {
content: "";
position: absolute;
padding: 10px;
right: 1px;
box-shadow: 2px -2px 0 0px #000 inset;
border: solid transparent;
border-width: 0 0 1px 1px;
transform: rotate(-135deg);
}
}
.paginationDotsContainer {

127
styles/sass/pages/product/vtex.store-components.scss
View File

@ -219,6 +219,20 @@
}
:global(.vtex-address-form-4-x-input) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
&::placeholder {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #AFAFAF;
}
}
:global(.vtex-button) {
width: 49px;
height: 49px;
@ -353,6 +367,97 @@
color: #929292;
}
.subscriberContainer {
.content {
flex-wrap: wrap;
justify-content: start;
margin-top: 16px;
}
.title {
font-size: 0;
&::after {
content: "Produto indisponível";
font-weight: 700;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #868686;
}
}
.subscribeLabel {
font-size: 0;
&::after {
content: "Deseja saber quando estiver disponível?";
font-weight: 400;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
color: #868686;
}
}
.input {
width: 195.5px;
height: 40px;
margin: 0;
}
.inputName {
margin-right: 8px;
}
:global(.vtex-input-prefix__group) {
border: 1px solid #989898;
border-radius: 0;
}
:global(.vtex-styleguide-9-x-input) {
font-weight: 400;
font-size: 12px;
line-height: 16px;
color: #989898;
}
:global(.vtex-button) {
width: 399px;
height: 49px;
margin-top: 15px;
border: 0;
background: #000000;
}
:global(.vtex-button__label) {
font-size: 0;
width: 100%;
&::after {
content: "AVISE-ME";
font-weight: 600;
font-size: 18px;
line-height: 25px;
display: flex;
align-items: center;
color: #FFFFFF;
}
}
}
@media screen and (min-width: 1920px) {}
@ -366,7 +471,7 @@
text-align: start;
}
.imageElement {
.productImagesContainer--description {
width: 100%;
max-height: 944px;
}
@ -379,6 +484,26 @@
padding-bottom: 16px;
border-bottom: 1px solid #B9B9B9;
}
.subscriberContainer {
.content {
max-width: 100%;
display: flex;
}
.submit {
width: 100%;
}
.input {
width: 49.3%;
max-width: 378.5px;
}
:global(.vtex-button) {
width: 100%;
}
}
}
@media screen and (max-width: 768px) {