Merge pull request 'feature/customPix' (#10) from feature/customPix into development

Reviewed-on: #10
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2023-02-09 02:18:04 +00:00
commit 3844df258f
8 changed files with 206 additions and 5 deletions

3
react/Pix.ts Normal file
View File

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

View File

@ -0,0 +1,99 @@
[class*="html--container__buyButton"] {
display: flex;
column-gap: 10px;
}
/* Tablet */
@media (max-width: 1024px) {
[class*="html--container__buyButton"] {
width: 100%;
max-width: 944px;
}
}
/* mobile */
@media (max-width: 767px) {
[class*="html--container__buyButton"] {
flex-direction: column;
}
}
[class*="html--container__buyButton"] :global(.vtex-button) {
background-color: #000;
border: none;
border-radius: 0;
width: 100%;
height: 49px;
max-width: 526px;
/* aqui é até 1440 */
}
@media (min-width: 1920px) {
[class*="html--container__buyButton"] :global(.vtex-button) {
min-width: 766px;
}
}
@media (min-width: 490px) {
[class*="html--container__buyButton"] :global(.vtex-button__label)::after {
max-width: none;
}
}
@media (min-width: 1023px) and (max-width: 1025px) {
[class*="html--container__buyButton"] :global(.vtex-button) {
min-width: 806px;
}
}
@media (max-width: 1440px) {
[class*="html--container__buyButton"] :global(.vtex-button) {
max-width: 806px;
}
}
[class*="html--container__buyButton"] :global(.vtex-button__label) {
font-size: 0;
}
[class*="html--container__buyButton"] :global(.vtex-button__label)::after {
content: "Adicionar à sacola";
text-transform: uppercase;
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
display: block;
}
@media (max-width: 767px) {
[class*="html--container__buyButton"] :global(.vtex-button__label)::after {
max-width: none;
max-width: 168px;
}
}
@media (min-width: 490px) {
[class*="html--container__buyButton"] :global(.vtex-button__label)::after {
max-width: none;
max-width: none;
}
}
@media (min-width:374px) and (max-width:376px) {
[class*="html--m3-html-product-sumary"] {
height: 254.8px!important;
}}
@media (max-width:1920px) {
[class*="html--m3-html-product-sumary"] {
height: unset;
width: unset;
max-width:314.4px;
/* max-height: 314.4px; */
}}
@media (min-width:768px) and (max-width:1024px) {
[class*="html--m3-html-product-sumary"] {
height: unset;
width: unset;
max-width: 291.2px;
}}

View File

@ -0,0 +1,49 @@
.pixWrapper {
display: flex;
width: 197px;
height: 39px;
justify-content: space-between;
align-items: center;
margin-top: 8px;
}
.pixWrapperImage {
width: 100%;
max-width: 66px;
height: 100%;
max-height: 24px;
}
.pixImage {
width: 100%;
height: 100%;
}
.pixResult {
display: flex;
flex-direction: column;
}
.pixResultValue{
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
/* identical to box height */
color: rgba(0, 0, 0, 0.58);
}
.pixResultPercent{
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
font-size: 13px;
line-height: 18px;
/* identical to box height */
color: #929292;
}

View File

@ -0,0 +1,46 @@
import React, { useEffect } from 'react';
import { useProduct } from 'vtex.product-context';
import { useCssHandles } from 'vtex.css-handles';
import "./Pix.css"
const Pix = () => {
useEffect(() => {
const m3Input = document.querySelector(".vtex-address-form-4-x-input");
m3Input?.setAttribute("placeholder", "Digite seu CEP");
});
const CSS_HANDLES = [
'pixWrapper',
'pixWrapperImage',
'pixImage',
'pixResult',
'pixResultValue',
'pixResultPercent'
];
const handles = useCssHandles(CSS_HANDLES);
const pixImg = "https://agenciamagma.vtexassets.com/arquivos/pix-emmanuelvitorpereiradejesus.svg";
const resultProductContext = useProduct();
const productSelling = Number(resultProductContext?.product?.priceRange?.sellingPrice?.lowPrice);
const disccount = (productSelling * 10) / 100;
const result = productSelling - disccount;
const strResult = result.toFixed(2).replace(".", ",");
return (
< div className={handles.handles.pixWrapper} >
<div className={handles.handles.pixWrapperImage}>
<img src={pixImg} alt="Imagem de pix" className={handles.handles.pixImage} />
</div>
<div className={handles.handles.pixResult}>
<span className={handles.handles.pixResultValue}> R$ {strResult}</span>
<span className={handles.handles.pixResultPercent}>10 % de desconto</span>
</div>
</div >
);
}
export default Pix;

View File

@ -102,7 +102,7 @@
"product-rating-summary", "product-rating-summary",
"flex-layout.row#selling-price", "flex-layout.row#selling-price",
"product-installments#parcelas", "product-installments#parcelas",
// "m3-pix", "m3-pix",
"sku-selector", "sku-selector",
"product-assembly-options", "product-assembly-options",
"product-gifts", "product-gifts",

View File

@ -5,5 +5,9 @@
"html": { "html": {
"component": "html", "component": "html",
"composition": "children" "composition": "children"
},
"m3-pix": {
"component": "Pix"
} }
} }

View File

@ -44,18 +44,18 @@
text-transform: capitalize; text-transform: capitalize;
} }
.container--tab-product .listContainer--m3-tab-list-product .listItem--m3-tab-list-item-product { .container--tab-product .listContainer--m3-tab-list-product .listItem--m3-tab-list-item-product {
background: #fff; background: #ffffff;
border: none !important; border: none !important;
width: 114px; width: 114px;
} }
.container--tab-product .listContainer--m3-tab-list-product .listItemActive--m3-tab-list-item-product, .container--tab-product .listContainer--m3-tab-list-product .listItemActive--m3-tab-list-item-product,
.container--tab-product .listContainer--m3-tab-list-product .listItemActive { .container--tab-product .listContainer--m3-tab-list-product .listItemActive {
background: #fff; background: #ffffff;
border: none !important; border: none !important;
} }
.container--tab-product .listContainer--m3-tab-list-product .listItemActive--m3-tab-list-item-product :global(.vtex-button), .container--tab-product .listContainer--m3-tab-list-product .listItemActive--m3-tab-list-item-product :global(.vtex-button),
.container--tab-product .listContainer--m3-tab-list-product .listItemActive :global(.vtex-button) { .container--tab-product .listContainer--m3-tab-list-product .listItemActive :global(.vtex-button) {
background-color: #fff; background-color: #ffffff;
border: none; border: none;
border-bottom: 2px solid #000000; border-bottom: 2px solid #000000;
border-radius: 0; border-radius: 0;

View File

@ -37,7 +37,7 @@
align-items: center; align-items: center;
text-align: center; text-align: center;
color: $COLOR-GRAY8; color: $color-gray8;
text-transform: capitalize; text-transform: capitalize;
} }
} }