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

Merge pull request 'feature/testId' (#16) from feature/testId into development

Browse Source 
Reviewed-on: #16
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2023-02-09 02:28:48 +00:00
commit 55207b3546
8 changed files with 113 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
react/components/Html/styles.css
View File

@ -107,3 +107,5 @@ max-width:314.4px;
display: flex;
flex-direction: column;
}
[class*="html--m3-add-to-cart-button "]{
width: 100%; }

2
react/components/Pix/Pix.css
View File

@ -30,6 +30,7 @@ font-style: normal;
font-weight: 700;
font-size: 18px;
line-height: 25px;
margin: 0;
/* identical to box height */
@ -41,6 +42,7 @@ font-style: normal;
font-weight: 300;
font-size: 13px;
line-height: 18px;
margin: 0;
/* identical to box height */

4
react/components/Pix/Pix.tsx
View File

@ -37,8 +37,8 @@ const Pix = () => {
<img src={pixImg} alt="Imagem de pix" className={handles.handles.pixImage} />
</div>
<div className={handles.handles.pixResult}>
<span className={handles.handles.pixResultValue}> R$ {strResult}</span>
<span className={handles.handles.pixResultPercent}>10 % de desconto</span>
<p className={handles.handles.pixResultValue}> R$ {strResult}</p>
<p className={handles.handles.pixResultPercent}>10 % de desconto</p>
</div>
</div >
);

11
store/blocks/pdp/product-shelf-related.jsonc
View File

@ -4,10 +4,7 @@
"blockClass": "m3-shelf-retaletd"
},
"blocks": ["product-summary.shelf#m3-shelf-retaletd-content"],
"children": [
"rich-text#m3-shelf-related-title",
"slider-layout#m3-carousel-products"
]
"children": ["rich-text#m3-shelf-related-title", "html#slider-layout"]
},
"product-summary.shelf#m3-shelf-retaletd-content": {
"props": {
@ -33,6 +30,12 @@
"message": "de {listPriceValue} por"
}
},
"html#slider-layout": {
"props": {
"testId": "product-summary-list"
},
"children": ["slider-layout#m3-carousel-products"]
},
"slider-layout#m3-carousel-products": {
"props": {
"blockClass": "m3-carousel-products",

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

@ -3,7 +3,7 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"tab-layout#tab-product",
"html#tab-layout",
"list-context.product-list#m3-shelf-retaletd",
"newsletter#m3-newsletter",
"product-questions-and-answers"
@ -55,7 +55,7 @@
"blockClass": "product"
},
"children": [
"flex-layout.row#product-image",
"html#product-images",
"product-bookmark",
"product-specification-badges"
]
@ -76,6 +76,12 @@
"rowGap": 0
}
},
"html#product-images": {
"props": {
"testId": "product-images"
},
"children": ["flex-layout.row#product-image"]
},
"flex-layout.row#product-image": {
"children": ["product-images"]
},
@ -100,14 +106,13 @@
"rowGap": 0
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"html#product-name",
"html#product-identifier.product",
"product-rating-summary",
"flex-layout.row#selling-price",
"product-installments#parcelas",
"m3-pix",
"sku-selector",
"product-assembly-options",
"html#selling-price",
"html#product-installments",
"html#m3-pix",
"html#sku-selector",
"product-gifts",
"html#buy-button",
"availability-subscriber",
@ -115,6 +120,26 @@
]
},
"html#product-identifier.product": {
"props": { "testId": "product-code" },
"children": ["product-identifier.product"]
},
"html#selling-price": {
"props": { "testId": "product-price" },
"children": ["flex-layout.row#selling-price"]
},
"html#m3-pix": {
"props": {
"testId": "pix-price"
},
"children": ["m3-pix"]
},
"html#product-installments": {
"props": {
"testId": "product-installments"
},
"children": ["product-installments#parcelas"]
},
"product-installments#parcelas": {
"props": {
"blockClass": "desconto",
@ -123,13 +148,24 @@
"message": "{installmentsNumber} <x>x</x> de {installmentValue} sem juros"
}
},
"html#product-name": {
"props": {
"testId": "product-name"
},
"children": ["flex-layout.row#product-name"]
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
},
"children": ["vtex.store-components:product-name"]
},
"html#sku-selector": {
"props": {
"testId": "sku-selector"
},
"children": ["sku-selector"]
},
"sku-selector": {
"props": {
"variationsSpacing": 3,
@ -143,12 +179,19 @@
"marginBottom": 7,
"paddingRight": 0
},
"children": ["html#sizeQuantity", "add-to-cart-button"]
"children": ["html#product-quantity", "html#add-to-cart-button"]
},
"html#sizeQuantity": {
"html#add-to-cart-button": {
"props": {
"blockClass": "m3-add-to-cart-button",
"testId": "add-to-cart-button"
},
"children": ["add-to-cart-button"]
},
"html#product-quantity": {
"props": {
"blockClass": "quantity",
"testid": "product-quantity"
"testId": "product-quantity"
},
"children": ["product-quantity#size"]
},
@ -182,17 +225,12 @@
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"html#product-identifier.product",
"flex-layout.row#availability",
"sku-selector"
]
},
// "flex-layout.row#identifieAndName": {
// "props": {
// "blockClass": "identifieAndName"
// },
// "children": ["flex-layout.row#product-name", "product-identifier.product"]
// },
"flex-layout.row#availability": {
"props": {
"blockClass": "message-availability"
@ -203,7 +241,7 @@
"props": {
"blockClass": "m3-shipping-simulator"
},
"children": ["rich-text", "shipping-simulator"]
"children": ["rich-text", "html#shipping-simulator"]
},
"rich-text": {
"props": {
@ -212,6 +250,12 @@
"text": "Calcular o frete"
}
},
"html#shipping-simulator": {
"props": {
"testId": "shipping-simulator"
},
"children": ["shipping-simulator"]
},
"share#default": {
"props": {

8
store/blocks/pdp/tab-layout-product.jsonc
View File

@ -1,4 +1,11 @@
{
"html#tab-layout": {
"props": {
"testId": "product-description"
},
"children": ["tab-layout#tab-product"]
},
"tab-layout#tab-product": {
"children": ["tab-list#tab-product", "tab-content#tab-product"],
"props": {
@ -101,6 +108,7 @@
},
"children": ["product-images#imageDescription", "product-description"]
},
"product-description": {
"props": {
"collapseContent": false

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

@ -133,8 +133,9 @@
.shippingContainer :global(.vtex-address-form__postalCode) {
display: flex;
}
@media (max-width: 1024px) {
@media (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode) {
width: 100%;
flex-direction: column;
}
}
@ -158,6 +159,14 @@
position: initial;
}
}
@media (max-width: 768px) {
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
position: absolute;
right: 0;
bottom: 0;
left: auto;
}
}
.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
display: none;
}
@ -170,6 +179,11 @@
max-width: 231px;
height: 49px;
}
@media (max-width: 768px) {
.shippingContainer :global(.vtex-input-prefix__group) {
max-width: none;
}
}
.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input),
.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
font-family: "Open Sans";

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

@ -142,7 +142,8 @@
:global(.vtex-address-form__postalCode) {
display: flex;
@media (max-width:1024px) {
@media (max-width:768px) {
width: 100%;
flex-direction: column;
}
@ -166,6 +167,13 @@
position: initial;
}
@media (max-width:768px) {
position: absolute;
right: 0;
bottom: 0;
left: auto;
}
:global(.vtex__icon-external-link) {
display: none;
}
@ -182,6 +190,9 @@
max-width: 231px;
height: 49px;
@media (max-width:768px) {
max-width: none;
}
:global(.vtex-address-form-4-x-input),