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.tab-layout": "0.x",
"vtex.condition-layout": "2.x", "vtex.condition-layout": "2.x",
"vtex.css-handles": "1.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" "$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; export default Example;

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

@ -1,40 +1,52 @@
import React, { ReactNode } from "react"; import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles"; import { useCssHandles } from "vtex.css-handles";
import "./styles.css";
const CSS_HANDLES = ["html"] as const; const CSS_HANDLES = ["html"] as const;
type HtmlProps = { type HtmlProps = {
children?: ReactNode, children?: ReactNode;
/** /**
* Qual tag Html que deseja que seja usar * Qual tag Html que deseja que seja usar
* *
* @default div * @default div
*/ */
tag?: keyof React.ReactHTML tag?: keyof React.ReactHTML;
/** /**
* Classes CSS extras que deseja adicionar. * Classes CSS extras que deseja adicionar.
* Feito para uso de [classes do tachyons](https://tachyons.io/) * Feito para uso de [classes do tachyons](https://tachyons.io/)
*/ */
tachyonsClasses?: string tachyonsClasses?: string;
/** /**
* Se caso quiser usar esse componente * Se caso quiser usar esse componente
* para adicinar um texto simples * para adicinar um texto simples
*/ */
text?: string text?: string;
/** /**
* Tag ID para * Tag ID para
*/ */
testId?: string testId?: string;
} };
export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => { export const Html = ({
children = null,
tag = "div",
text = "",
tachyonsClasses: classes = "",
testId,
}: HtmlProps) => {
const { handles } = useCssHandles(CSS_HANDLES); const { handles } = useCssHandles(CSS_HANDLES);
const props = { const props = {
className: `${handles.html} ${classes}`, className: `${handles.html} ${classes}`,
"data-testid": testId "data-testid": testId,
}; };
const Children = <>{children}{text}</>; const Children = (
<>
{children}
{text}
</>
);
const Element = React.createElement(tag, props, Children); const Element = React.createElement(tag, props, Children);
return <>{Element}</>; 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": { "store.home": {
"blocks": [ "blocks": [
"list-context.image-list#demo", "list-context.image-list#demo",
"example-component", /* You can make references to blocks defined in other files. "example-component"
* For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ /* 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", "flex-layout.row#deals",
"__fold__", "__fold__",
"rich-text#shelf-title", "rich-text#shelf-title",

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

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

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

@ -7,7 +7,8 @@
"flex-layout.row#specifications-title", "flex-layout.row#specifications-title",
"product-specification-group#table", "product-specification-group#table",
"shelf.relatedProducts", "shelf.relatedProducts",
"product-questions-and-answers" "product-questions-and-answers",
"newsletter"
] ]
}, },
"html#breadcrumb": { "html#breadcrumb": {
@ -109,7 +110,8 @@
"flex-layout.row#selling-price", "flex-layout.row#selling-price",
"product-installments", "product-installments",
"sku-selector", "sku-selector",
"flex-layout.row#buy-button", // "flex-layout.row#buy-button",
"html#buy-button",
"product-gifts", "product-gifts",
"availability-subscriber", "availability-subscriber",
"shipping-simulator" "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": { "props": {
"marginTop": 4,
"marginBottom": 7,
"blockClass": "buy-button" "blockClass": "buy-button"
}, },
"children": ["product-quantity#size", "add-to-cart-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": { "flex-layout.row#product-availability": {
"props": { "props": {
"colGap": 7, "colGap": 7,
@ -178,5 +195,13 @@
"width": "28%", "width": "28%",
"showLabel": false "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 { .installments {
font-size: 0;
}
.installments .installmentsNumber,
.installments .installmentValue {
font-weight: 700;
font-size: 16px; font-size: 16px;
line-height: 22px; line-height: 22px;
font-weight: 400;
color: #929292; color: #929292;
margin-bottom: 16px; margin-bottom: 16px;
} }
.installments .installmentsNumber { .installments .installments-discount,
font-size: 0 !important; .installments .installmentValue {
} font-weight: 700;
.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;
} }
.savings--summaryPercentage { .savings--summaryPercentage {

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

@ -8,7 +8,20 @@
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.newsletter { .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 { .container {
@ -186,11 +199,13 @@
.shippingContainer :global(.vtex-button) { .shippingContainer :global(.vtex-button) {
font-size: 0; font-size: 0;
position: relative; position: relative;
top: 25px; top: 27px;
right: 148px; right: 147px;
width: 53px; width: 49px;
height: 53px; height: 49px;
margin-top: 0; margin-top: 0;
border: none;
border-radius: 0;
background-color: #000000; background-color: #000000;
cursor: pointer; cursor: pointer;
} }
@ -221,3 +236,76 @@
:global(.vtex-button__label) { :global(.vtex-button__label) {
height: fit-content; 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 { .stretchChildrenWidth {
margin: 0; margin: 0;
// display: flex;
// align-items: center;
// justify-content: center;
} }
// .input-button {
// display: flex;
// align-items: center;
// justify-content: center;
// }
.flexRowContent--buy-button { .flexRowContent--buy-button {
height: 49px; height: 49px;
display: flex; display: flex;

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

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

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

@ -1,5 +1,27 @@
.newsletter { .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 { .container {
@ -208,11 +230,13 @@
:global(.vtex-button) { :global(.vtex-button) {
font-size: 0; font-size: 0;
position: relative; position: relative;
top: 25px; top: 27px;
right: 148px; right: 147px;
width: 53px; width: 49px;
height: 53px; height: 49px;
margin-top: 0; margin-top: 0;
border: none;
border-radius: 0;
background-color: $black; background-color: $black;
cursor: pointer; cursor: pointer;
@ -248,3 +272,91 @@
:global(.vtex-button__label) { :global(.vtex-button__label) {
height: fit-content; 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;
}
}