feat(product): adicionando e estilizando input e button de add to cart

product
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2023-01-26 13:15:59 -03:00
parent 2019e4d202
commit 03d086ab4f
10 changed files with 315 additions and 49 deletions

View File

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

View File

@ -0,0 +1,8 @@
[class*="html--product-quantity"] {
height: 100%;
}
[class*="html--buy-button "] {
height: 100%;
width: 100%;
}

View File

@ -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,

View File

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

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

View File

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

View File

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

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

View File

@ -82,7 +82,7 @@
.skuSelectorContainer--sku-product {
display: flex;
flex-direction: column-reverse;
margin-top: 16px;
margin: 16px 0;
.skuSelectorSubcontainer--tamanho {

View File

@ -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)";