SavioCarvalhoMoraes/challenge-vtex-io-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request 'development' (#9) from development into feature/productDescription

Browse Source 
Reviewed-on: #9
This commit is contained in:
Savio Carvalho Moraes 2023-02-09 12:26:03 +00:00
commit e95117aafb
27 changed files with 644 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
.vscode/settings.json vendored
View File

@ -164,5 +164,14 @@
}
}
}
]
],
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/Thumbs.db": false
},
"explorerExclude.backup": {}
}

3
react/PaymentPix.tsx Normal file
View File

@ -0,0 +1,3 @@
import { PaymentPix } from "./components/PaymentPix/PaymentPix";
export default PaymentPix;

3
react/ProductDescription.tsx
View File

@ -1,3 +0,0 @@
import { ProductDescription } from "./components/ProductDescription/ProductDescription";
export default ProductDescription;

32
react/components/PaymentPix/PaymentPix.tsx Normal file
View File

@ -0,0 +1,32 @@
import React from "react";
import { useProduct } from "vtex.product-context";
import styles from "./styles.css";
const PaymentPix = () => {
const product = useProduct();
const pricePix = (
(product?.product?.priceRange.sellingPrice.highPrice || 0.0) * 0.9
).toFixed(2);
const imagePix =
"https://agenciamagma.vtexassets.com/arquivos/imgPix-savio-carvalho.png";
const convertPrice = pricePix.toString().replace(".", ",");
return (
<div className={styles.paymentPixWrapper}>
<img
className={styles.paymentPixImg}
src={imagePix}
alt="Imagem do Pix"
/>
<div className={styles.paymentPixText}>
<p className={styles.paymentPixValue}>R$ {convertPrice}</p>
<p className={styles.paymentPixDiscount}>10% de desconto</p>
</div>
</div>
);
};
export { PaymentPix };

38
react/components/PaymentPix/styles.css Normal file
View File

@ -0,0 +1,38 @@
.paymentPixWrapper {
display: flex;
flex-direction: row;
margin-top: 8px;
margin-bottom: 16px;
height: 39px;
gap: 26px;
align-items: center;
}
.paymentPixImg {
display: flex;
width: 66px;
height: 24px;
align-items: center;
}
.paymentPixText {
display: flex;
flex-direction: column;
}
.paymentPixValue {
margin: 0;
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
color: rgba(0, 0, 0, 0.58);
}
.paymentPixDiscount {
margin: 0;
color: #929292;
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 13px;
line-height: 18px;
}

7
react/components/ProductDescription/ProductDescription.tsx
View File

@ -1,7 +0,0 @@
import React from "react";
const ProductDescription = () => {
return <div>Oaswq</div>;
};
export { ProductDescription };

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

@ -6,6 +6,8 @@
"flex-layout.row#description",
"flex-layout.row#specifications-title",
"tab-layout#product",
"list-context.product-list#shelf",
"newsletter",
"product-questions-and-answers"
]
},
@ -77,7 +79,7 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "60%",
"width": "50%",
"rowGap": 0
}
},
@ -86,12 +88,15 @@
},
"product-images": {
"props": {
"thumbnailsOrientation": "horizontal",
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
"phone": "auto"
},
"displayThumbnailsArrows": false,
"displayMode": "list"
"showPaginationDots": false,
"showNavigationArrows": false
}
},
"product-images#descricao": {
@ -111,22 +116,27 @@
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"product-rating-summary",
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments",
"product-separator",
"product-identifier.product",
"product-paymentPix-component",
"sku-selector",
"product-quantity",
"flex-layout.row#cart",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
"availability-subscriber",
"shipping-simulator"
]
},
"flex-layout.row#cart": {
"props": {
"blockClass": "cart"
},
"children": ["product-quantity", "flex-layout.row#buy-button"]
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
@ -143,9 +153,10 @@
"flex-layout.row#buy-button": {
"props": {
"marginTop": 4,
"marginBottom": 7
"width": "80%",
"blockClass": "buyButton"
},
"children": ["add-to-cart-button"]
},
@ -218,5 +229,25 @@
"props": {
"tabId": "product2"
}
},
"list-context.product-list#shelf": {
"blocks": ["product-summary.shelf#shelf"],
"children": ["slider-layout#shelf-products"]
},
"product-summary.shelf#shelf": {
"children": ["product-summary-image#shelf", "product-summary-price"]
},
"slider-layout#shelf-products": {
"props": {
"itemsPerPage": {
"desktop": 4,
"tablet": 1,
"phone": 1
},
"infinite": true,
"showNavigationArrows": "desktopOnly",
"blockClass": "carousel"
},
"children": []
}
}

30
store/blocks/product-summary/product-summary-list.jsonc
View File

@ -9,14 +9,10 @@
]
},
"responsive-layout.desktop#productSummaryList": {
"children": [
"flex-layout.row#summaryListDesktop"
]
"children": ["flex-layout.row#summaryListDesktop"]
},
"responsive-layout.mobile#productSummaryList": {
"children": [
"flex-layout.row#summaryListMobile"
]
"children": ["flex-layout.row#summaryListMobile"]
},
"product-price-savings#summaryPercentage": {
"props": {
@ -36,7 +32,7 @@
]
},
"flex-layout.row#summaryListDesktop": {
"props":{
"props": {
"fullWidth": true,
"colSizing": "auto",
"blockClass": "summaryListDesktop"
@ -69,9 +65,7 @@
]
},
"flex-layout.row#productSpecifications": {
"children": [
"product-specification-group#summary"
]
"children": ["product-specification-group#summary"]
},
"product-summary-name#summaryListDesktop": {
"props": {
@ -100,18 +94,13 @@
"colSizing": "auto",
"colGap": 5
},
"children": [
"add-to-cart-button",
"flex-layout.row#buyNowButton"
]
"children": ["add-to-cart-button", "flex-layout.row#buyNowButton"]
},
"flex-layout.row#buyNowButton": {
"props": {
"blockClass": "buyNowButton"
},
"children": [
"add-to-cart-button#buyNow"
]
"children": ["add-to-cart-button#buyNow"]
},
"add-to-cart-button#buyNow": {
@ -123,10 +112,7 @@
}
},
"flex-layout.col#priceSummaryListDesktop": {
"children": [
"product-selling-price#summary",
"product-list-price#summary"
]
"children": ["product-selling-price#summary", "product-list-price#summary"]
},
"stack-layout#summaryListDesktop": {
"children": [
@ -144,7 +130,7 @@
}
},
"flex-layout.row#summaryListMobile": {
"props":{
"props": {
"preserveLayoutOnMobile": true,
"colSizing": "auto",
"blockClass": "summaryListMobile",

4
store/blocks/product-summary/product-summary.jsonc
View File

@ -81,9 +81,7 @@
},
"product-price-savings#summary": {
"props": {
"markers": [
"discount"
],
"markers": ["discount"],
"blockClass": "summary"
}
}

4
store/interfaces.json
View File

@ -6,7 +6,7 @@
"component": "html",
"composition": "children"
},
"product-description-component": {
"component": "ProductDescription"
"product-paymentPix-component": {
"component": "PaymentPix"
}
}

0
styles/configs/font-faces.css Normal file
View File

1
styles/css/agenciamagma.store-theme.css
View File

@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */
.html {
background-color: red;

10
styles/css/vtex.add-to-cart-button.css Normal file
View File

@ -0,0 +1,10 @@
/*
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;500;600;700&display=swap");
/* Grid breakpoints */

13
styles/css/vtex.address-form.css Normal file
View File

@ -0,0 +1,13 @@
/*
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;500;600;700&display=swap");
/* Grid breakpoints */
.input::placeholder {
content: "Digite seu CEP";
}

1
styles/css/vtex.breadcrumb.css
View File

@ -6,6 +6,7 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */
.homeIcon {
display: none;

122
styles/css/vtex.flex-layout.css
View File

@ -1,98 +1,32 @@
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.5rem;
}
@media screen and (min-width: 40em) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 1rem;
}
}
@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 {
@charset "UTF-8";
/*
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;500;600;700&display=swap");
/* Grid breakpoints */
.flexRowContent--cart {
display: flex;
max-height: 100%;
align-items: center;
justify-content: center;
margin-bottom: 25px;
}
.flexColChild--quickviewDetails:first-child {
overflow-y: auto;
height: 66% !important;
overflow-x: hidden;
.flexRowContent--cart .flexRow--buyButton :global(.vtex-button) {
background-color: black;
}
.flexColChild--quickviewDetails:last-child {
height: 34% !important;
}
.flexRow--addToCartRow {
padding-bottom: 1rem;
.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label) {
font-size: 0;
}
.flexRowContent--cart .flexRow--buyButton :global(.vtex-button__label)::after {
content: "adicionar à sacola";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #ffffff;
}

31
styles/css/vtex.product-identifier.css
View File

@ -1,3 +1,32 @@
/*
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;500;600;700&display=swap");
/* Grid breakpoints */
.product-identifier--productReference {
margin-bottom: 1rem;
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
.product-identifier__label {
display: none;
}
.product-identifier__separator {
display: none;
}
.product-identifier__value {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}

30
styles/css/vtex.product-quantity.css Normal file
View File

@ -0,0 +1,30 @@
/*
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;500;600;700&display=swap");
/* Grid breakpoints */
.quantitySelectorTitle {
display: none;
}
.quantitySelectorStepper {
background-color: white;
}
:global(.vtex-numeric-stepper__input) {
border-right: none;
border-left: none;
}
:global(.vtex-numeric-stepper__minus-button) {
background-color: white;
}
.quantitySelectorStepper {
border: none;
}

1
styles/css/vtex.rich-text.css
View File

@ -6,4 +6,5 @@
1800px + : Big desktop
*/
/* Media Query M3 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */

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

@ -6,4 +6,155 @@
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
/* Grid breakpoints */
.container {
max-width: 100%;
margin: 0 0 0 0 !important;
}
.productImageTag {
max-height: none !important;
}
.thumbImg {
width: 86%;
margin: 0;
}
.productImagesThumb {
height: auto !important;
}
.productBrand {
display: flex;
justify-content: flex-end;
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
}
.skuSelectorContainer .valueWrapper .skuSelectorItemTextValue {
margin-right: 5px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName {
font-size: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after {
content: "OUTRAS CORES";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
border-radius: 30px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue,
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
border-radius: 21px;
}
.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName {
font-size: 0;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
content: "OUTROS TAMANHOS:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
width: 40px;
height: 40px;
top: 0;
left: 0;
right: 0;
border-radius: 30px;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
width: 40px;
height: 40px;
border-radius: 30px;
padding: 0;
margin: auto;
}
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
padding: 0;
margin: auto;
}
.shippingContainer :global(.vtex-button) {
width: 49px;
height: 49px;
background-color: black;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
content: "Ok";
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #ffffff;
}
.shippingContainer :global(.vtex-input) :global(.vtex-input__label) {
font-size: 0;
}
.shippingContainer :global(.vtex-input) :global(.vtex-input__label)::after {
content: "CALCULAR FRETE:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.shippingContainer {
display: flex;
}
.shippingContainer :global(.vtex-input-prefix__group) {
height: 49px;
}
.shippingContainer :global(.vtex-button) {
position: relative;
right: 127px;
top: 27px;
width: 49px;
height: 49px;
}
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
position: relative;
left: 70px;
top: 8px;
}

0
styles/sass/pages/product/vtex.add-to-cart-button.scss Normal file
View File

5
styles/sass/pages/product/vtex.address-form.scss Normal file
View File

@ -0,0 +1,5 @@
.input {
&::placeholder {
content: "Digite seu CEP";
}
}

23
styles/sass/pages/product/vtex.flex-layout.scss Normal file
View File

@ -0,0 +1,23 @@
.flexRowContent--cart {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 25px;
.flexRow--buyButton {
:global(.vtex-button) {
background-color: black;
}
:global(.vtex-button__label) {
font-size: 0;
&::after {
content: "adicionar à sacola";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
line-height: 25px;
color: #ffffff;
}
}
}
}

19
styles/sass/pages/product/vtex.product-identifier.scss Normal file
View File

@ -0,0 +1,19 @@
.product-identifier--productReference {
display: flex;
justify-content: flex-end;
margin-top: 8px;
}
.product-identifier__label {
display: none;
}
.product-identifier__separator {
display: none;
}
.product-identifier__value {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}

20
styles/sass/pages/product/vtex.product-quantity.scss Normal file
View File

@ -0,0 +1,20 @@
.quantitySelectorTitle {
display: none;
}
.quantitySelectorStepper {
background-color: white;
}
:global(.vtex-numeric-stepper__input) {
border-right: none;
border-left: none;
}
:global(.vtex-numeric-stepper__minus-button) {
background-color: white;
}
.quantitySelectorStepper {
border: none;
}

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

@ -0,0 +1,161 @@
.container {
max-width: 100%;
margin: 0 0 0 0 !important;
}
.productImageTag {
max-height: none !important;
}
.thumbImg {
width: 86%;
margin: 0;
}
.productImagesThumb {
height: auto !important;
}
.productBrand {
display: flex;
justify-content: flex-end;
font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
line-height: 34px;
}
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
.valueWrapper .skuSelectorItemTextValue {
margin-right: 5px;
}
.skuSelectorSubcontainer--cor {
.skuSelectorName {
font-size: 0;
&::after {
content: "OUTRAS CORES";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
.frameAround {
border-radius: 30px;
}
.skuSelectorItemImageValue,
.skuSelectorInternalBox {
border-radius: 21px;
}
.skuSelectorSelectorImageValue {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
text-transform: uppercase;
}
}
.skuSelectorSubcontainer--tamanho {
.skuSelectorName {
font-size: 0;
&::after {
content: "OUTROS TAMANHOS:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
.frameAround {
width: 40px;
height: 40px;
top: 0;
left: 0;
right: 0;
border-radius: 30px;
}
.skuSelectorInternalBox {
width: 40px;
height: 40px;
border-radius: 30px;
padding: 0;
margin: auto;
}
.skuSelectorItemTextValue {
padding: 0;
margin: auto;
}
}
}
.shippingContainer {
:global(.vtex-button) {
width: 49px;
height: 49px;
background-color: black;
:global(.vtex-button__label) {
font-size: 0;
&::after {
content: "Ok";
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
color: #ffffff;
}
}
}
}
.shippingContainer {
:global(.vtex-input) {
:global(.vtex-input__label) {
font-size: 0;
&::after {
content: "CALCULAR FRETE:";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
}
}
}
.shippingContainer {
display: flex;
:global(.vtex-input-prefix__group) {
height: 49px;
}
:global(.vtex-button) {
position: relative;
right: 127px;
top: 27px;
width: 49px;
height: 49px;
}
:global(.vtex-address-form__postalCode) {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
:global(.vtex-address-form__postalCode-forgottenURL) {
position: relative;
left: 70px;
top: 8px;
}
}

24
styles/sass/utils/_vars.scss
View File

@ -1,3 +1,5 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
$color-black: #292929;
$color-white: #fff;
@ -14,18 +16,18 @@ $color-green: #4caf50;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
) !default;
$z-index: (
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25,
) !default;