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

Merge pull request 'develop' (#8) from develop into feature/mobile

Browse Source 
Reviewed-on: #8
This commit is contained in:
Victor Cardoso de Souza 2023-02-09 19:28:08 +00:00
commit 39256b8f61
9 changed files with 130 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
react/components/Example/paymentWithPix.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import {useProduct} from 'vtex.product-context';
import styles from "./styles.css"
import styles from "./styles.css";
const paymentWithPix =() => {
@ -13,8 +13,8 @@ let imagePix = "https://agenciamagma.vtexassets.com/arquivos/pix-image-victor_so
<div className={styles.wrapperPix}>
<img className={styles.wrapperPixImage}src={imagePix} alt="Imagem do icone do pix" />
<div className={styles.wrapperPrices}>
<h3 className={styles.wrapperTitle}>{(product?.product?.priceRange.sellingPrice.highPrice || 0) * (0.9)}</h3>
<h3 className={styles.wrapperSubtitle}>R$ 10 % de desconto</h3>
<p className={styles.wrapperTitle}>{(product?.product?.priceRange.sellingPrice.highPrice || 0) * (0.9)}</p>
<p className={styles.wrapperSubtitle}>R$ 10 % de desconto</p>
</div>
</div>

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

@ -3,7 +3,7 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"tab-layout#home",
"html#product-description",
// "product-specification-group#table",
// "shelf.relatedProducts",
"rich-text#1",
@ -62,7 +62,8 @@
"blockClass": "product"
},
"children": [
"flex-layout.row#product-image",
//este cara foi trocado por html#imagens
"html#imagens",
"product-bookmark",
"product-specification-badges"
]
@ -88,6 +89,13 @@
"flex-layout.row#product-image": {
"children": ["product-images"]
},
"html#imagens":{
"props":{
"testId": "product-images"
},
"children": ["product-images"]
},
"product-images": {
"props": {
"aspectRatio": {
@ -109,25 +117,32 @@
"blockClass":"right-col"
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"html#product-name",
"html#codigo",
"product-rating-summary",
"flex-layout.row#selling-price",
"product-installments",
"example-component",
"html#product-installments",
// "html#pixzap",
// "product-separator",
// "product-identifier.product",
"sku-selector",
"flex-layout.row#box-buy",
"html#sku-selector",
"html#box-buy",
"product-assembly-options",
"product-gifts",
// "flex-layout.row#buy-button",
"availability-subscriber",
"shipping-simulator",
"html#shipping-simulator",
"share#default"
]
},
//criando este bloco e trocando na chamada acima
"html#product-name": {
"props": {
"testId": "product-name"
},
"children": ["vtex.store-components:product-name"]
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
@ -141,12 +156,12 @@
"showValueNameForImageVariation": true
}
},
//////////////////////////////////////////////////////////////////////
"flex-layout.row#buy-button": {
"props": {
"marginTop": 4,
"marginBottom": 7,
"blockClass":"m3-buyButton"
"marginBottom": 7
},
"children": ["add-to-cart-button"]
},
@ -275,21 +290,37 @@
}
},
"flex-layout.row#box-buy" : {
"html#box-buy" : {
"props":{
"blockClass": "box-buy"
},
"children":[ "product-quantity#1","flex-layout.col#button-2"]
"children":[ "html#product-quantity", "html#add-to-cart-button"]
},
"flex-layout.col#button-2":{
"children": ["flex-layout.row#buy-button"]
},
// "flex-layout.col#button-2":{
// "children": ["flex-layout.row#buy-button"]
// },
"html#add-to-cart-button": {
"props":{
"testId": "add-to-cart-button",
"blockClass": "m3-buyButton"
},
"children":["add-to-cart-button"]
},
"html#product-quantity": {
"props":{
"testId": "product-quantity"
},
"children":["product-quantity#1"]
},
"product-quantity#1":{
"props":{
"width":"25%",
"size":"large"
"size":"large",
"snowLabel": false
}
},
@ -297,13 +328,11 @@
"list-context.product-list#demo1": {
"blocks": ["product-summary.shelf#demo1"],
"children": ["slider-layout#demo-products"]
"children": ["html#slider"]
},
"product-summary.shelf#demo1": {
"children": [
"product-summary-image",
"product-summary-name",
"product-summary-price"
"html#prateleira"
]
},
@ -318,13 +347,74 @@
"showNavigationArrows": "desktopOnly",
"blockClass": "carousel"
}
// "children": ["rich-text#1"]
},
},
"rich-text#1": {
"props": {
"text": "Você também pode gostar:"
}
},
//blocos htmls
"html#codigo": {
//não rodou
"props":{
"testId": "product-code",
"blockClass": "codigo"
},
"children":["product-identifier.product"]
},
"html#selling-price": {
"props":{
"testId": "product-price"
},
"children":["product-selling-price"]
},
"html#product-installments": {
"props":{
"testId": "product-installments"
},
"children":["product-installments"]
},
// "html#pixzap": {
// "props":{
// "testId": "pix-price"
// },
// "children":["paymentWithPix"]
// },
"html#sku-selector": {
"props":{
"testId": "sku-selector"
},
"children":["sku-selector"]
},
"html#shipping-simulator": {
"props":{
"testId": "shipping-simulator"
},
"children":["shipping-simulator"]
},
"html#product-description": {
"props":{
"testId": "product-description"
},
"children":["tab-layout#home"]
},
"html#slider": {
"props":{
"testId": "product-summary-list"
},
"children":["slider-layout#demo-products"]
},
"html#prateleira": {
"props":{
"testId": "vtex-product-summary"
},
"children":[
"product-summary-image",
"product-summary-name",
"product-list-price",
"product-selling-price"]
}
}

2
store/blocks/product-price.jsonc
View File

@ -7,7 +7,7 @@
"marginBottom": 4
},
"children": [
"product-selling-price"
"html#selling-price"
]
},

2
store/blocks/product-summary/quickview.json
View File

@ -38,7 +38,7 @@
"children": [
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
"product-installments"
"html#product-installments"
]
},
"modal-actions#quickview": {

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

@ -242,4 +242,5 @@
.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
padding: 0;
margin: auto;
margin: auto;
}

5
styles/css/vtex.tab-layout.css
View File

@ -19,8 +19,9 @@
.listContainer {
display: flex;
justify-content: start;
justify-content: space-between;
padding-left: 104px;
padding-right: 104px;
border-bottom: 1px solid #B9B9B9;
}
@ -32,6 +33,7 @@
border-top: none;
border-left: none;
border-right: none;
border-radius: 0;
}
.listItem :global(.vtex-button) :global(.vtex-button__label) {
font-family: "Open Sans";
@ -42,4 +44,5 @@
color: #000000;
background-color: white;
padding: 0 16px;
text-transform: initial;
}

1
styles/sass/pages/product/agenciamagma.store-theme.scss
View File

@ -6,3 +6,4 @@
background-color: green;
}

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

@ -35,3 +35,4 @@
height: 49px;
}
}

5
styles/sass/pages/product/vtex.tab-layout.scss
View File

@ -10,8 +10,9 @@
.listContainer {
display: flex;
justify-content: start;
justify-content: space-between;
padding-left: 104px;
padding-right: 104px;
border-bottom: 1px solid #B9B9B9;
}
@ -22,6 +23,7 @@
border-top: none;
border-left: none;
border-right: none;
border-radius: 0;
:global(.vtex-button__label ) {
font-family: 'Open Sans';
font-style: normal;
@ -31,6 +33,7 @@
color: #000000;
background-color: white;
padding: 0 16px;
text-transform: initial;
}
}
}