feat(pix): adiciona logica pix)
This commit is contained in:
parent
d7e6d87c0d
commit
990b517aeb
3
react/Pix.tsx
Normal file
3
react/Pix.tsx
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import Pix from "./components/Example/Pix";
|
||||||
|
|
||||||
|
export default Pix;
|
14
react/components/Pix/Pix.tsx
Normal file
14
react/components/Pix/Pix.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { useProduct } from "vtex.product-context";
|
||||||
|
// import styles from "./styles.css";
|
||||||
|
|
||||||
|
const Pix = () => {
|
||||||
|
const product = useProduct();
|
||||||
|
console.log(product);
|
||||||
|
|
||||||
|
return <span>Pixxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span>;
|
||||||
|
|
||||||
|
// return <button className={styles.PixButton}>Pix</button>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Pix;
|
5
react/components/Pix/styles.css
Normal file
5
react/components/Pix/styles.css
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
.PixButton {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
background: black;
|
||||||
|
}
|
7
react/index.d.ts
vendored
Normal file
7
react/index.d.ts
vendored
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
declare module "*.css" {
|
||||||
|
interface IClassNames {
|
||||||
|
[className: string]: string;
|
||||||
|
}
|
||||||
|
const classNames: IClassNames;
|
||||||
|
export = classNames;
|
||||||
|
}
|
@ -78,7 +78,7 @@
|
|||||||
"flex-layout.col#stack": {
|
"flex-layout.col#stack": {
|
||||||
"children": ["stack-layout"],
|
"children": ["stack-layout"],
|
||||||
"props": {
|
"props": {
|
||||||
"width": "60%",
|
"width": "50%",
|
||||||
"rowGap": 0
|
"rowGap": 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -108,6 +108,7 @@
|
|||||||
"flex-layout.row#list-price-savings",
|
"flex-layout.row#list-price-savings",
|
||||||
"flex-layout.row#selling-price",
|
"flex-layout.row#selling-price",
|
||||||
"product-installments",
|
"product-installments",
|
||||||
|
"html#pix-component",
|
||||||
"product-separator",
|
"product-separator",
|
||||||
"product-identifier.product",
|
"product-identifier.product",
|
||||||
"sku-selector",
|
"sku-selector",
|
||||||
@ -120,6 +121,12 @@
|
|||||||
"share#default"
|
"share#default"
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"html#pix-component": {
|
||||||
|
"props": {
|
||||||
|
"testId": "pix-price"
|
||||||
|
},
|
||||||
|
"children": ["pix-component"]
|
||||||
|
},
|
||||||
|
|
||||||
"flex-layout.row#product-name": {
|
"flex-layout.row#product-name": {
|
||||||
"props": {
|
"props": {
|
||||||
|
@ -2,6 +2,9 @@
|
|||||||
"example-component": {
|
"example-component": {
|
||||||
"component": "Example"
|
"component": "Example"
|
||||||
},
|
},
|
||||||
|
"pix-component": {
|
||||||
|
"component": "Pix"
|
||||||
|
},
|
||||||
"html": {
|
"html": {
|
||||||
"component": "html",
|
"component": "html",
|
||||||
"composition": "children"
|
"composition": "children"
|
||||||
|
@ -1,98 +1,9 @@
|
|||||||
.flexRowContent--menu-link,
|
/*
|
||||||
.flexRowContent--main-header {
|
0 - 600PX: Phone
|
||||||
padding: 0 0.5rem;
|
600 - 900px: Table portrait
|
||||||
}
|
900 - 1200px: Tablet landscape
|
||||||
|
[1200 - 1800] is where our nortal styles apply
|
||||||
@media screen and (min-width: 40em) {
|
1800px + : Big desktop
|
||||||
.flexRowContent--menu-link,
|
*/
|
||||||
.flexRowContent--main-header {
|
/* Media Query M3 */
|
||||||
padding: 0 1rem;
|
/* Grid breakpoints */
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (min-width: 80rem) {
|
|
||||||
.flexRowContent--menu-link,
|
|
||||||
.flexRowContent--main-header {
|
|
||||||
padding: 0 0.25rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRowContent--menu-link {
|
|
||||||
background-color: #03044e;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRowContent--main-header {
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRowContent--main-header-mobile {
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.625rem 0.5rem;
|
|
||||||
background-color: #f0f0f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
|
|
||||||
color: #727273;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRow--deals {
|
|
||||||
background-color: #0F3E99;
|
|
||||||
padding: 14px 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRow--deals .stretchChildrenWidth {
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRow--deals .flexCol {
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
padding-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexCol--filterCol {
|
|
||||||
max-width: 500px;
|
|
||||||
min-width: 230px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexCol--productCountCol {
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexCol--orderByCol {
|
|
||||||
align-items: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexCol--orderByMobileCol {
|
|
||||||
width: 42%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexCol--filterMobileCol {
|
|
||||||
width: 38%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRow--quickviewMainRow {
|
|
||||||
display: flex;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexColChild--quickviewDetails:first-child {
|
|
||||||
overflow-y: auto;
|
|
||||||
height: 66% !important;
|
|
||||||
overflow-x: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexColChild--quickviewDetails:last-child {
|
|
||||||
height: 34% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flexRow--addToCartRow {
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
16
styles/css/vtex.product-quantity.css
Normal file
16
styles/css/vtex.product-quantity.css
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
/*
|
||||||
|
0 - 600PX: Phone
|
||||||
|
600 - 900px: Table portrait
|
||||||
|
900 - 1200px: Tablet landscape
|
||||||
|
[1200 - 1800] is where our nortal styles apply
|
||||||
|
1800px + : Big desktop
|
||||||
|
*/
|
||||||
|
/* Media Query M3 */
|
||||||
|
/* Grid breakpoints */
|
||||||
|
.quantitySelectorContainer {
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
.quantitySelectorContainer .quantitySelectorStepper,
|
||||||
|
.quantitySelectorContainer .quantitySelectorTitle {
|
||||||
|
width: max-content;
|
||||||
|
}
|
@ -10,3 +10,17 @@
|
|||||||
.newsletter {
|
.newsletter {
|
||||||
background: red;
|
background: red;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.productImageTag {
|
||||||
|
width: 664px !important;
|
||||||
|
height: 664px !important;
|
||||||
|
max-height: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productImagesThumb,
|
||||||
|
.carouselThumbBorder,
|
||||||
|
.figure,
|
||||||
|
.thumbImg {
|
||||||
|
width: 90px !important;
|
||||||
|
height: 90px !important;
|
||||||
|
}
|
4
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
4
styles/sass/pages/product/vtex.flex-layout.scss
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
// .flexRow {
|
||||||
|
// width: auto;
|
||||||
|
// padding: 0 40px;
|
||||||
|
// }
|
8
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
8
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
.quantitySelectorContainer {
|
||||||
|
width: max-content;
|
||||||
|
|
||||||
|
.quantitySelectorStepper,
|
||||||
|
.quantitySelectorTitle {
|
||||||
|
width: max-content;
|
||||||
|
}
|
||||||
|
}
|
@ -1,3 +1,16 @@
|
|||||||
.newsletter {
|
.newsletter {
|
||||||
background: red;
|
background: red;
|
||||||
}
|
}
|
||||||
|
.productImageTag {
|
||||||
|
width: 664px !important;
|
||||||
|
height: 664px !important;
|
||||||
|
max-height: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.productImagesThumb,
|
||||||
|
.carouselThumbBorder,
|
||||||
|
.figure,
|
||||||
|
.thumbImg {
|
||||||
|
width: 90px !important;
|
||||||
|
height: 90px !important;
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user