BernardoWaldhelm/challenge-vtex-io-bernardo-waldhelm
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/challenge #2

Merged
BernardoWaldhelm merged 6 commits from feature/challenge into master 2023-02-08 18:54:25 +00:00
Conversation 0 Commits 6 Files Changed 13 +210 -194
13 changed files with 210 additions and 194 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
react/Installment.tsx
View File

@ -1,2 +0,0 @@
import Installment from "./components/Installment/index";
export default Installment;

13
react/components/Html/style.css
View File

@ -10,3 +10,16 @@
[class*="html--cep"] {
margin: 16px 0;
}
[class*="agenciamagma-store-theme-5-x-html--pix-component" ]{
margin: 0;
padding: 0;
}
[class*="agenciamagma-store-theme-5-x-html--slider-product" ]{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}

15
react/components/Installment/Installment.module.css
View File

@ -1,15 +0,0 @@
.installment-product {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
margin: 0;
padding: 0;
height: 22px;
color: #929292;
}
.installment-product__strong {
font-weight: 700;
}

33
react/components/Installment/index.tsx
View File

@ -1,33 +0,0 @@
import React from "react";
import { useProduct } from "vtex.product-context";
import styles from "./Installment.module.css";
const Installment = () => {
const skuProduct = useProduct();
console.log(skuProduct);
const productInstallment: any = {
numberOfInstallment:
skuProduct?.selectedItem?.sellers[0].commertialOffer.Installments[3]
.NumberOfInstallments,
value:
skuProduct?.selectedItem?.sellers[0].commertialOffer.Installments[3]
.Value,
};
return (
<p className={styles["installment-product"]}>
<span className={styles["installment-product__strong"]}>
{productInstallment.numberOfInstallment}x{" "}
</span>
de
<span className={styles["installment-product__strong"]}>
{""} R${" "}
{productInstallment.value?.toFixed(2).toString().replace(".", ",")}{" "}
</span>
sem juros
</p>
);
};
export default Installment;

4
react/components/PixDiscount/index.tsx
View File

@ -23,9 +23,9 @@ const PixDiscount = () => {
className={styles["pixContainer__img"]}
/>
<div className={styles["pixContainer__discount"]}>
<span className={styles["pixContainer__priceFinal"]}>
<p className={styles["pixContainer__priceFinal"]}>
R$&nbsp;{pixPrice?.toFixed(2).toString().replace(".", ",")}
</span>
</p>
<span className={styles["pixContainer__discount__value"]}>
10% de desconto
</span>

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

@ -4,7 +4,7 @@
"html#breadcrumb",
"placeholder-component",
"condition-layout.product#availability",
"tab-layout#description",
"html#product-description",
// "flex-layout.row#specifications-title",
// "product-specification-group#table",
// "shelf.relatedProducts",
@ -87,12 +87,12 @@
"blockClass": "product-skus"
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"html#flex-layout.row#product-name",
"html#codigo",
// "product-rating-summary", // avaliações
// "flex-layout.row#list-price-savings", preço com promoção vindo vtex
"flex-layout.row#selling-price",
"installment-component",
"html#selling-price",
"html#installment-component",
"html#pix-component",
// "product-separator", //linha que separa preço de skus
"html#sku-selector",
@ -106,13 +106,29 @@
]
},
"flex-layout.row#product-name": {
"html#flex-layout.row#product-name": {
"props": {
"blockClass": "product__name"
"blockClass": "product__name",
"testId": "product-name"
},
"children": ["vtex.store-components:product-name"]
},
"html#codigo": {
"props": {
"testId": "product-code"
},
"children": ["product-identifier.product"]
},
"html#selling-price": {
"props": {
"testId": "product-price",
"tag": "span"
},
"children": ["flex-layout.row#selling-price"]
},
"html#sku-selector": {
"props": {
"testId": "sku-selector"
@ -128,10 +144,31 @@
}
},
"html#installment-component": {
"props": {
"tag": "span",
"testId": "product-installments"
},
"children": ["product-installments#installment"]
},
"product-installments#installment": {
"props": {
"markers": ["portion", "portion2"],
"installmentOptionsFilter": {
"paymentSystemName": "Mastercard",
"installmentsQuantity": 4
},
"message": "{installmentsNumber}x <portion>de</portion> {installmentValue} <portion2>sem juros</portion2>",
"blockClas": "installment"
}
},
"html#pix-component": {
"props": {
"tag": "section",
"testId": "pix-price"
"testId": "pix-price",
"blockClass": "pix-component"
},
"children": ["pix-component"]
},
@ -179,12 +216,6 @@
},
"flex-layout.row#product-availability": {
"props": {
"colGap": 7,
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7
},
"children": [
"flex-layout.col#stack",
"flex-layout.col#right-col-availability"
@ -198,7 +229,7 @@
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"html#codigo",
"flex-layout.row#availability",
"sku-selector"
]

3
store/blocks/pdp/product__carousel.jsonc
View File

@ -27,7 +27,8 @@
"product-summary-image#slider-images",
"product-summary-name",
// "product-summary-space",
"product-summary-price"
"product-list-price",
"product-selling-price"
]
},

8
store/blocks/pdp/product__description.jsonc
View File

@ -12,6 +12,14 @@
"blockClass": "image-description"
}
},
"html#product-description": {
"props": {
"testId": "product-description"
},
"children": ["tab-layout#description"]
},
"tab-layout#description": {
"children": ["tab-list#description", "tab-content#description"],
"props": {

3
store/interfaces.json
View File

@ -6,9 +6,6 @@
"component": "html",
"composition": "children"
},
"installment-component": {
"component": "Installment"
},
"pix-component": {
"component": "PixDiscount"
},

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

@ -14,4 +14,19 @@
font-size: 25px;
line-height: 38px;
color: #000;
}
.installments {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 22px;
margin: 0;
padding: 0;
height: 22px;
color: #929292;
}
.installments .installments-portion, .installments .installments-portion2 {
font-weight: 400;
}

40
styles/css/vtex.product-summary.css
View File

@ -40,11 +40,14 @@
line-height: 19px;
}
}
.containerNormal .clearLink .element .priceContainer {
.containerNormal .clearLink .element .listPrice {
padding: 0;
margin: 0;
}
.containerNormal .clearLink .element .priceContainer .listPriceContainer {
.containerNormal .clearLink .element .listPrice .installmentContainer {
display: none;
}
.containerNormal :global(.vtex-product-price-1-x-listPriceValue) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
@ -57,24 +60,21 @@
margin-bottom: 8px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.containerNormal .clearLink .element .priceContainer .listPriceContainer {
.containerNormal :global(.vtex-product-price-1-x-listPriceValue) {
font-size: 12px;
line-height: 15px;
}
}
.containerNormal .clearLink .element .priceContainer .listPriceContainer .listPriceLabel {
display: none;
}
.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer {
.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer) {
font-size: 14px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer {
.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer) {
font-size: 12px;
line-height: 16px;
}
}
.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::before {
.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::before {
content: "de ";
font-family: "Open Sans", sans-serif;
font-style: normal;
@ -84,12 +84,12 @@
text-align: center;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::before {
.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::before {
font-size: 12px;
line-height: 15px;
}
}
.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::after {
.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::after {
content: " por";
font-family: "Open Sans", sans-serif;
font-style: normal;
@ -99,12 +99,12 @@
text-align: center;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::after {
.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::after {
font-size: 12px;
line-height: 15px;
}
}
.containerNormal .clearLink .element .priceContainer .sellingPriceContainer {
.containerNormal :global(.vtex-product-price-1-x-sellingPrice) {
padding: 0;
margin: 0;
height: 33px;
@ -117,28 +117,22 @@
color: #000;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.containerNormal .clearLink .element .priceContainer .sellingPriceContainer {
.containerNormal :global(.vtex-product-price-1-x-sellingPrice) {
font-size: 18px;
line-height: 25px;
}
}
.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .currencyContainer {
.containerNormal :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-currencyContainer) {
font-size: 24px;
line-height: 33px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .currencyContainer {
.containerNormal :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-currencyContainer) {
font-size: 18px;
line-height: 25px;
}
}
.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .sellingPriceLabel {
display: none;
}
.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .sellingPriceValue {
.containerNormal :global(.vtex-product-price-1-x-sellingPrice) .sellingPriceValue {
padding: 0;
margin: 0;
}
.containerNormal .clearLink .element .priceContainer .installmentContainer {
display: none;
}

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

@ -5,3 +5,20 @@
line-height: 38px;
color: $color-black0;
}
.installments {
font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 22px;
margin: 0;
padding: 0;
height: 22px;
color: #929292;
.installments-portion, .installments-portion2 {
font-weight: 400;
}
}

190
styles/sass/pages/product/vtexProduct/vtex.product-summary.scss
View File

@ -33,109 +33,10 @@
}
}
.priceContainer {
.listPrice {
padding: 0;
margin: 0;
.listPriceContainer {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
text-decoration-line: line-through;
color: #BABABA;
padding: 0;
margin-bottom: 8px;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 12px;
line-height: 15px;
}
.listPriceLabel {
display: none;
}
.currencyContainer {
font-size: 14px;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 12px;
line-height: 16px;
}
&::before {
content: "de ";
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 12px;
line-height: 15px;
}
}
&::after {
content: " por";
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 12px;
line-height: 15px;
}
}
}
}
.sellingPriceContainer {
padding: 0;
margin: 0;
height: 33px;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: $color-black0;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 18px;
line-height: 25px;
}
.currencyContainer {
font-size: 24px;
line-height: 33px;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 18px;
line-height: 25px;
}
}
.sellingPriceLabel {
display: none;
}
.sellingPriceValue {
padding: 0;
margin: 0;
}
}
.installmentContainer {
display: none;
}
@ -143,4 +44,93 @@
}
}
:global(.vtex-product-price-1-x-listPriceValue) {
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
text-decoration-line: line-through;
color: #BABABA;
padding: 0;
margin-bottom: 8px;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 12px;
line-height: 15px;
}
:global(.vtex-product-price-1-x-currencyContainer) {
font-size: 14px;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 12px;
line-height: 16px;
}
&::before {
content: "de ";
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 12px;
line-height: 15px;
}
}
&::after {
content: " por";
font-family: $font-family;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: center;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 12px;
line-height: 15px;
}
}
}
}
:global(.vtex-product-price-1-x-sellingPrice) {
padding: 0;
margin: 0;
height: 33px;
font-family: $font-family;
font-style: normal;
font-weight: 700;
font-size: 24px;
line-height: 33px;
text-align: center;
color: $color-black0;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 18px;
line-height: 25px;
}
:global(.vtex-product-price-1-x-currencyContainer) {
font-size: 24px;
line-height: 33px;
@media #{$mq-tablet}, #{$mq-mobile} {
font-size: 18px;
line-height: 25px;
}
}
.sellingPriceValue {
padding: 0;
margin: 0;
}
}
}