EleonoraOtz/challenge-vtex-io-eleonora-otz
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Cria bloco de Newsletter

Browse Source
This commit is contained in:
Eleonora Otz de Mendonça Soares 2023-01-28 12:31:26 -03:00
parent d4f6624c34
commit 5252930d8d
12 changed files with 338 additions and 123 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
manifest.json
View File

@ -65,7 +65,8 @@
"vtex.tab-layout": "0.x",
"vtex.condition-layout": "2.x",
"vtex.css-handles": "1.x",
"vtex.product-context": "0.x"
"vtex.product-context": "0.x",
"vtex.store-newsletter": "1.x"
},
"$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

2
react/Example.tsx
View File

@ -1,3 +1,3 @@
import Example from "./components/Example/ProductContext";
import Example from "./components/Example/Example";
export default Example;

80
react/components/Html/index.tsx
View File

@ -1,41 +1,53 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
import "./styles.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}</>;
};

12
react/components/Html/styles.css Normal file
View File

@ -0,0 +1,12 @@
[class*="html--buy-button"] {
display: flex;
gap: 10px;
margin-bottom: 5px;
}
[class*="html--buy-button"] :global(.vtex-button) {
height: 49px;
background: black;
border: none;
border-radius: 0;
}

5
store/blocks/home/home.jsonc
View File

@ -2,8 +2,9 @@
"store.home": {
"blocks": [
"list-context.image-list#demo",
"example-component", /* You can make references to blocks defined in other files.
* For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
"example-component"
/* You can make references to blocks defined in other files.
* For example, `flex-layout.row#deals` is defined in the `deals.json` file. */,
"flex-layout.row#deals",
"__fold__",
"rich-text#shelf-title",

12
store/blocks/pdp/product-assembly.jsonc
View File

@ -1,10 +1,10 @@
{
"sticky-layout#buy-button": {
"props": {
"position": "bottom"
},
"children": ["flex-layout.row#buy-button"]
},
// "sticky-layout#buy-button": {
// "props": {
// "position": "bottom"
// },
// "children": ["flex-layout.row#buy-button"]
// },
"product-assembly-options": {
"children": [
"flex-layout.row#product-assembly-options",

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

@ -7,7 +7,8 @@
"flex-layout.row#specifications-title",
"product-specification-group#table",
"shelf.relatedProducts",
"product-questions-and-answers"
"product-questions-and-answers",
"newsletter"
]
},
"html#breadcrumb": {
@ -109,7 +110,8 @@
"flex-layout.row#selling-price",
"product-installments",
"sku-selector",
"flex-layout.row#buy-button",
// "flex-layout.row#buy-button",
"html#buy-button",
"product-gifts",
"availability-subscriber",
"shipping-simulator"
@ -131,15 +133,30 @@
}
},
"flex-layout.row#buy-button": {
"product-installments": {
"props": {
"markers": ["discount"],
"message": "<discount>{installmentsNumber} x</discount> de {installmentValue} sem juros",
"installmentsCriteria": "max-quantity-without-interest"
}
},
"html#buy-button": {
"props": {
"marginTop": 4,
"marginBottom": 7,
"blockClass": "buy-button"
},
"children": ["product-quantity#size", "add-to-cart-button"]
},
// "flex-layout.row#buy-button": {
// "props": {
// "marginTop": 4,
// "marginBottom": 7,
// "blockClass": "buy-button"
// },
// "children": ["product-quantity#size", "add-to-cart-button"]
// },
"flex-layout.row#product-availability": {
"props": {
"colGap": 7,
@ -178,5 +195,13 @@
"width": "28%",
"showLabel": false
}
},
"newsletter": {
"props": {
"label": "Assine nossa newsletter \n Receba ofertas e novidades por e-mail",
"placeholder": "Digite seu e-mail",
"submit": "ENVIAR"
}
}
}

24
styles/css/vtex.product-price.css
View File

@ -52,31 +52,15 @@
}
.installments {
font-size: 0;
}
.installments .installmentsNumber,
.installments .installmentValue {
font-weight: 700;
font-size: 16px;
line-height: 22px;
font-weight: 400;
color: #929292;
margin-bottom: 16px;
}
.installments .installmentsNumber {
font-size: 0 !important;
}
.installments .installmentsNumber::before {
content: "36 x";
font-size: 16px;
}
.installments .installmentsNumber::after {
content: " de ";
font-weight: 400;
font-size: 16px;
}
.installments .installmentValue::after {
content: " sem juros";
font-weight: 400;
.installments .installments-discount,
.installments .installmentValue {
font-weight: 700;
}
.savings--summaryPercentage {

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

@ -8,7 +8,20 @@
/* Media Query M3 */
/* Grid breakpoints */
.newsletter {
background: red;
display: block;
background: #000000;
}
.newsletter :global(.vtex-input-prefix__group) {
border: none;
}
.newsletter .label {
color: #fff;
font-weight: 400;
font-size: 18px;
line-height: 25px;
}
.newsletter .button-container :global(.vtex-button__label) {
background-color: transparent;
}
.container {
@ -186,11 +199,13 @@
.shippingContainer :global(.vtex-button) {
font-size: 0;
position: relative;
top: 25px;
right: 148px;
width: 53px;
height: 53px;
top: 27px;
right: 147px;
width: 49px;
height: 49px;
margin-top: 0;
border: none;
border-radius: 0;
background-color: #000000;
cursor: pointer;
}
@ -220,4 +235,77 @@
:global(.vtex-button__label) {
height: fit-content;
}
.shippingTable {
display: flex;
flex-direction: column;
border: none;
}
.shippingTable .shippingTableHead {
display: flex;
flex-direction: row;
}
.shippingTable .shippingTableHead .shippingTableHeadDeliveryName,
.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate,
.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice {
padding: 0;
}
.shippingTable .shippingTableHead .shippingTableHeadDeliveryName {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
text-transform: uppercase;
min-width: 140px;
text-align: left;
}
.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate {
font-size: 0;
min-width: 140px;
text-align: left;
}
.shippingTable .shippingTableHead .shippingTableHeadDeliveryEstimate::after {
content: "FRETE";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice {
font-size: 0;
min-width: 140px;
text-align: left;
}
.shippingTable .shippingTableHead .shippingTableHeadDeliveryPrice::after {
content: "PRAZO";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #202020;
}
.shippingTable .shippingTableBody .shippingTableRow {
display: flex;
flex-direction: row;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
display: flex;
order: 3;
}
.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate .shippingTableCellDeliveryPrice {
display: flex;
order: 2;
}
.shippingTable .shippingTableBody .shippingTableCell {
padding: 0;
display: flex;
color: #AFAFAF;
font-weight: 400;
font-size: 12px;
line-height: 16px;
min-width: 140px;
padding-top: 15px;
}
.shippingTable .shippingTableRadioBtn {
display: none;
}

9
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -100,17 +100,8 @@
.stretchChildrenWidth {
margin: 0;
// display: flex;
// align-items: center;
// justify-content: center;
}
// .input-button {
// display: flex;
// align-items: center;
// justify-content: center;
// }
.flexRowContent--buy-button {
height: 49px;
display: flex;

59
styles/sass/pages/product/vtex.product-price.scss
View File

@ -17,17 +17,6 @@
margin: 0;
}
// .installments {
// color: $gray-500;
// margin-bottom: 16px;
// }
// .sellingPriceValue--summary {
// font-size: 1.25rem;
// font-weight: 600;
// color: $black;
// }
.savings--summary {
background: #8bc34a;
border-radius: 1000px;
@ -62,38 +51,38 @@
}
.installments {
font-size: 0;
font-size: 16px;
line-height: 22px;
font-weight: 400;
color: $gray-500;
margin-bottom: 16px;
.installmentsNumber,
.installments-discount,
.installmentValue {
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: $gray-500;
margin-bottom: 16px;
}
.installmentsNumber {
font-size: 0 !important;
// .installmentsNumber {
// font-size: 0 !important;
&::before {
content: "36 x";
font-size: 16px;
}
// &::before {
// content: "36 x";
// font-size: 16px;
// }
&::after {
content: " de ";
font-weight: 400;
font-size: 16px;
}
}
// &::after {
// content: " de ";
// font-weight: 400;
// font-size: 16px;
// }
// }
.installmentValue {
&::after {
content: " sem juros";
font-weight: 400;
}
}
// .installmentValue {
// &::after {
// content: " sem juros";
// font-weight: 400;
// }
// }
}
.savings--summaryPercentage {

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

@ -1,5 +1,27 @@
.newsletter {
background: red;
display: block;
background: $black;
:global(.vtex-input-prefix__group) {
border: none;
// background: $black;
}
.label {
color: $white;
font-weight: 400;
// font-size: 24px;
// line-height: 38px;
font-size: 18px;
line-height: 25px;
}
.button-container {
:global(.vtex-button__label) {
background-color: transparent;
}
}
}
.container {
@ -208,11 +230,13 @@
:global(.vtex-button) {
font-size: 0;
position: relative;
top: 25px;
right: 148px;
width: 53px;
height: 53px;
top: 27px;
right: 147px;
width: 49px;
height: 49px;
margin-top: 0;
border: none;
border-radius: 0;
background-color: $black;
cursor: pointer;
@ -248,3 +272,91 @@
:global(.vtex-button__label) {
height: fit-content;
}
.shippingTable {
display: flex;
flex-direction: column;
border: none;
.shippingTableHead {
display: flex;
flex-direction: row;
.shippingTableHeadDeliveryName,
.shippingTableHeadDeliveryEstimate,
.shippingTableHeadDeliveryPrice {
padding: 0;
}
.shippingTableHeadDeliveryName {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $gray-700;
text-transform: uppercase;
min-width: 140px;
text-align: left;
}
.shippingTableHeadDeliveryEstimate {
font-size: 0;
min-width: 140px;
text-align: left;
&::after {
content: "FRETE";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $gray-700;
// margin-right: 40px;
}
}
.shippingTableHeadDeliveryPrice {
font-size: 0;
min-width: 140px;
text-align: left;
&::after {
content: "PRAZO";
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $gray-700;
}
}
}
.shippingTableBody {
.shippingTableRow {
display: flex;
flex-direction: row;
.shippingTableCellDeliveryEstimate {
display: flex;
order: 3;
.shippingTableCellDeliveryPrice {
display: flex;
order: 2;
}
}
}
.shippingTableCell {
padding: 0;
display: flex;
color: $gray-400;
font-weight: 400;
font-size: 12px;
line-height: 16px;
min-width: 140px;
padding-top: 15px;
}
}
.shippingTableRadioBtn {
display: none;
}
}