feat(product): adicionando e estilizando input e button de add to cart
product
This commit is contained in:
parent
2019e4d202
commit
03d086ab4f
@ -1,41 +1,53 @@
|
||||
import React, { ReactNode } from "react";
|
||||
import { useCssHandles } from "vtex.css-handles";
|
||||
import "./style.css";
|
||||
|
||||
const CSS_HANDLES = ["html"] as const;
|
||||
|
||||
type HtmlProps = {
|
||||
children?: ReactNode,
|
||||
/**
|
||||
* Qual tag Html que deseja que seja usar
|
||||
*
|
||||
* @default div
|
||||
*/
|
||||
tag?: keyof React.ReactHTML
|
||||
/**
|
||||
* Classes CSS extras que deseja adicionar.
|
||||
* Feito para uso de [classes do tachyons](https://tachyons.io/)
|
||||
*/
|
||||
tachyonsClasses?: string
|
||||
/**
|
||||
* Se caso quiser usar esse componente
|
||||
* para adicinar um texto simples
|
||||
*/
|
||||
text?: string
|
||||
/**
|
||||
* Tag ID para
|
||||
*/
|
||||
testId?: string
|
||||
}
|
||||
|
||||
export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => {
|
||||
const { handles } = useCssHandles(CSS_HANDLES);
|
||||
|
||||
const props = {
|
||||
className: `${handles.html} ${classes}`,
|
||||
"data-testid": testId
|
||||
};
|
||||
const Children = <>{children}{text}</>;
|
||||
const Element = React.createElement(tag, props, Children);
|
||||
|
||||
return <>{Element}</>;
|
||||
children?: ReactNode;
|
||||
/**
|
||||
* Qual tag Html que deseja que seja usar
|
||||
*
|
||||
* @default div
|
||||
*/
|
||||
tag?: keyof React.ReactHTML;
|
||||
/**
|
||||
* Classes CSS extras que deseja adicionar.
|
||||
* Feito para uso de [classes do tachyons](https://tachyons.io/)
|
||||
*/
|
||||
tachyonsClasses?: string;
|
||||
/**
|
||||
* Se caso quiser usar esse componente
|
||||
* para adicinar um texto simples
|
||||
*/
|
||||
text?: string;
|
||||
/**
|
||||
* Tag ID para
|
||||
*/
|
||||
testId?: string;
|
||||
};
|
||||
|
||||
export const Html = ({
|
||||
children = null,
|
||||
tag = "div",
|
||||
text = "",
|
||||
tachyonsClasses: classes = "",
|
||||
testId,
|
||||
}: HtmlProps) => {
|
||||
const { handles } = useCssHandles(CSS_HANDLES);
|
||||
|
||||
const props = {
|
||||
className: `${handles.html} ${classes}`,
|
||||
"data-testid": testId,
|
||||
};
|
||||
const Children = (
|
||||
<>
|
||||
{children}
|
||||
{text}
|
||||
</>
|
||||
);
|
||||
const Element = React.createElement(tag, props, Children);
|
||||
|
||||
return <>{Element}</>;
|
||||
};
|
||||
|
8
react/components/Html/style.css
Normal file
8
react/components/Html/style.css
Normal file
@ -0,0 +1,8 @@
|
||||
|
||||
[class*="html--product-quantity"] {
|
||||
height: 100%;
|
||||
}
|
||||
[class*="html--buy-button "] {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
@ -115,11 +115,11 @@
|
||||
"installment-component",
|
||||
"html#pix-component",
|
||||
// "product-separator", //linha que separa preço de skus
|
||||
"sku-selector",
|
||||
"product-quantity",
|
||||
"product-assembly-options",
|
||||
"product-gifts",
|
||||
"flex-layout.row#buy-button",
|
||||
"html#sku-selector",
|
||||
"flex-layout.row#quantity-and-button",
|
||||
// "product-assembly-options",
|
||||
// "product-gifts",
|
||||
// "flex-layout.row#buy-button",
|
||||
"availability-subscriber",
|
||||
"shipping-simulator",
|
||||
"share#default"
|
||||
@ -133,12 +133,18 @@
|
||||
"children": ["vtex.store-components:product-name"]
|
||||
},
|
||||
|
||||
"html#sku-selector": {
|
||||
"props": {
|
||||
"testId": "sku-selector"
|
||||
},
|
||||
"children": ["sku-selector"]
|
||||
},
|
||||
|
||||
"sku-selector": {
|
||||
"props": {
|
||||
"variationsSpacing": 3,
|
||||
"showValueNameForImageVariation": true,
|
||||
"blockClass": "sku-product"
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
@ -150,14 +156,40 @@
|
||||
"children": ["pix-component"]
|
||||
},
|
||||
|
||||
"html#product-quantity": {
|
||||
"props": {
|
||||
"blockClass": "product-quantity",
|
||||
"tag": "section",
|
||||
"testId": "product-quantity"
|
||||
},
|
||||
"children": ["product-quantity"]
|
||||
},
|
||||
|
||||
"html#button-addCart": {
|
||||
"props": {
|
||||
"tag": "section",
|
||||
"testId": "add-to-cart-button",
|
||||
"blockClass": "buy-button"
|
||||
},
|
||||
"children": ["flex-layout.row#buy-button"]
|
||||
},
|
||||
|
||||
"flex-layout.row#buy-button": {
|
||||
"props": {
|
||||
"marginTop": 4,
|
||||
"marginBottom": 7
|
||||
"blockClass": "buy-button",
|
||||
"width": "100%"
|
||||
},
|
||||
"children": ["add-to-cart-button"]
|
||||
},
|
||||
|
||||
"flex-layout.row#quantity-and-button": {
|
||||
"props":{
|
||||
"tag": "section",
|
||||
"blockClass": "quantityButton"
|
||||
},
|
||||
"children": ["html#product-quantity","html#button-addCart"]
|
||||
},
|
||||
|
||||
"flex-layout.row#product-availability": {
|
||||
"props": {
|
||||
"colGap": 7,
|
||||
|
@ -1,3 +1,4 @@
|
||||
@charset "UTF-8";
|
||||
/*
|
||||
0 - 600PX: Phone
|
||||
600 - 900px: Table portrait
|
||||
@ -109,7 +110,7 @@
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
|
||||
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
.flexRowContent--product__image {
|
||||
flex-direction: column;
|
||||
}
|
||||
@ -118,7 +119,7 @@
|
||||
padding-right: 16px;
|
||||
margin-right: 16px;
|
||||
}
|
||||
@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
|
||||
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
|
||||
.flexRowContent--product__image .stretchChildrenWidth {
|
||||
width: 100% !important;
|
||||
padding-right: 0;
|
||||
@ -134,4 +135,50 @@
|
||||
height: 34px;
|
||||
padding: 0 !important;
|
||||
margin: 0 0 8px 0 !important;
|
||||
}
|
||||
|
||||
.flexRow--quantityButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
height: 49px;
|
||||
}
|
||||
@media (min-width: 280px) and (max-width: 768px) {
|
||||
.flexRow--quantityButton {
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
row-gap: 10px;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.flexRow--quantityButton .flexRowContent--quantityButton .stretchChildrenWidth {
|
||||
width: 100% !important;
|
||||
}
|
||||
.flexRow--quantityButton .flexRowContent--quantityButton .stretchChildrenWidth:first-child {
|
||||
width: 128px !important;
|
||||
padding: 0;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
.flexRow--quantityButton .flexRow--buy-button .flexRowContent--buy-button .stretchChildrenWidth {
|
||||
width: 100% !important;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 49px;
|
||||
}
|
||||
.flexRow--quantityButton .flexRow--buy-button .flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-button) {
|
||||
background: #000;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
.flexRow--quantityButton .flexRow--buy-button .flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-add-to-cart-button-0-x-buttonText) {
|
||||
font-size: 0;
|
||||
}
|
||||
.flexRow--quantityButton .flexRow--buy-button .flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-add-to-cart-button-0-x-buttonText)::after {
|
||||
content: "ADICIONAR À SACOLA";
|
||||
font-family: "Open Sans";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: #fff;
|
||||
}
|
59
styles/css/vtex.product-quantity.css
Normal file
59
styles/css/vtex.product-quantity.css
Normal file
@ -0,0 +1,59 @@
|
||||
/*
|
||||
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 */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
|
||||
/* Grid breakpoints */
|
||||
.quantitySelectorContainer {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.quantitySelectorContainer .quantitySelectorTitle {
|
||||
display: none;
|
||||
}
|
||||
.quantitySelectorContainer .quantitySelectorStepper {
|
||||
height: 49px;
|
||||
width: 128px;
|
||||
}
|
||||
@media (min-width: 280px) and (max-width: 768px) {
|
||||
.quantitySelectorContainer .quantitySelectorStepper {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-container) {
|
||||
border: 1px solid #CCCCCC;
|
||||
height: 49px;
|
||||
width: 100%;
|
||||
padding: 13.5px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__input) {
|
||||
height: 100%;
|
||||
border: none;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
color: #929292;
|
||||
}
|
||||
.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button), .quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) {
|
||||
border: none;
|
||||
font-family: "Open Sans", sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
color: #000;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
width: auto !important;
|
||||
}
|
@ -97,7 +97,7 @@
|
||||
.skuSelectorContainer--sku-product {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-top: 16px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
.skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
|
||||
margin: 0;
|
||||
|
@ -128,3 +128,57 @@
|
||||
padding: 0 !important;
|
||||
margin: 0 0 8px 0 !important;
|
||||
}
|
||||
|
||||
.flexRow--quantityButton {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
height: 49px;
|
||||
|
||||
@media #{$mq-mobile} {
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start !important;
|
||||
row-gap: 10px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.flexRowContent--quantityButton .stretchChildrenWidth{
|
||||
&:first-child {
|
||||
width: 128px !important;
|
||||
padding: 0;
|
||||
margin: 0 10px 0 0;
|
||||
}
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
|
||||
.flexRow--buy-button .flexRowContent--buy-button{
|
||||
|
||||
.stretchChildrenWidth {
|
||||
width: 100% !important;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 49px;
|
||||
|
||||
:global(.vtex-button) {
|
||||
background: $color-black0;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
}
|
||||
:global(.vtex-add-to-cart-button-0-x-buttonText) {
|
||||
font-size: 0;
|
||||
|
||||
&::after {
|
||||
content: "ADICIONAR À SACOLA";
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
color: $color-white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
54
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
54
styles/sass/pages/product/vtex.product-quantity.scss
Normal file
@ -0,0 +1,54 @@
|
||||
.quantitySelectorContainer {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
.quantitySelectorTitle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.quantitySelectorStepper{
|
||||
height: 49px;
|
||||
width: 128px;
|
||||
|
||||
@media #{$mq-mobile} {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
:global(.vtex-numeric-stepper-container) {
|
||||
border: 1px solid #CCCCCC;
|
||||
height: 49px;
|
||||
width: 100%;
|
||||
padding: 13.5px 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
:global(.vtex-numeric-stepper__input) {
|
||||
height: 100%;
|
||||
border: none;
|
||||
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
color: $color-gray6;
|
||||
}
|
||||
:global(.vtex-numeric-stepper__plus-button), :global(.vtex-numeric-stepper__minus-button){
|
||||
border: none;
|
||||
font-family: $font-family;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
color: $color-black0;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
width: auto!important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
@ -82,7 +82,7 @@
|
||||
.skuSelectorContainer--sku-product {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-top: 16px;
|
||||
margin: 16px 0;
|
||||
|
||||
.skuSelectorSubcontainer--tamanho {
|
||||
|
||||
|
@ -41,6 +41,6 @@ $z-index: (
|
||||
) !default;
|
||||
|
||||
//media-queries
|
||||
$mq-desktop: "(min-width: 1025px) and (max-width: 2499px)";
|
||||
$mq-tablet: "(min-width: 491px) and (max-width: 1024px)";
|
||||
$mq-mobile: "(min-width: 280px) and (max-width: 490px)";
|
||||
$mq-desktop: "(min-width: 1025px) and (max-width: 2560px)";
|
||||
$mq-tablet: "(min-width: 769px) and (max-width: 1024px)";
|
||||
$mq-mobile: "(min-width: 280px) and (max-width: 768px)";
|
||||
|
Loading…
Reference in New Issue
Block a user