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

feature/challenge-vtex-io #1

Merged
LeonardoPereiraRocha merged 11 commits from feature/challenge-vtex-io into master 2023-02-06 22:40:11 +00:00
Conversation 0 Commits 11 Files Changed 21 +579 -44
21 changed files with 579 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/img-sapato.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 664 KiB

2
manifest.json
View File

@ -15,7 +15,7 @@
"postreleasy": "vtex publish --verbose" "postreleasy": "vtex publish --verbose"
}, },
"dependencies": { "dependencies": {
"agenciamagma.store-theme": "5.x", "vtex.store-newsletter": "1.x",
"vtex.store": "2.x", "vtex.store": "2.x",
"vtex.store-header": "2.x", "vtex.store-header": "2.x",
"vtex.product-summary": "2.x", "vtex.product-summary": "2.x",

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

@ -1,5 +1,6 @@
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;

2
react/components/Html/readme.md
View File

@ -46,7 +46,7 @@ Basicamente esse componente
<div class="vtex-flex-layout-0-x-flexRow"> <div class="vtex-flex-layout-0-x-flexRow">
<section class="vtex-store-components ph3 ph5-m ph2-xl mw9 center"> <section class="vtex-store-components ph3 ph5-m ph2-xl mw9 center">
<div class="vtex-flex-layout-0-x-flexRowContent pr7"> <div class="vtex-flex-layout-0-x-flexRowContent pr7">
<div class="stretchChildrenWidth flex pr7 items-stretch" style="width: 50%;"> <div class="stretchChildrenWidth flex pr7 items-stretch" style="width: 44%;">
{children} {children}
</div> </div>
</div> </div>

257
react/components/Html/styles.css Normal file
View File

@ -0,0 +1,257 @@
[class*="productImageTag--main"] {
max-width: 80.25%;
object-fit: none;
}
[class*="flexRow--button-cart"] :global(.vtex-button) {
background-color: black;
border-color: black;
width: 97.952%;
height: 49px;
}
[class*="numeric-stepper__minus-button__text"] {
position: absolute !important;
left: 50%;
top: 85%;
transform: translate(-50%, -50%);
}
[class*="numeric-stepper__plus-button__text"] {
position: absolute !important;
left: 50%;
top: 85%;
transform: translate(-50%, -50%);
}
[class*="numeric-stepper__minus-button"] {
height: 49px;
position: relative;
}
[class*="numeric-stepper__input"] {
height: 49px;
position: relative;
}
[class*="numeric-stepper__plus-button"] {
height: 49px;
position: relative;
}
[class*="skuSelectorInternalBox"] {
border-radius: 24px;
position: relative;
width: 40px;
height: 46px;
}
[class*="frameAround"] {
border-radius: 24px;
width: 48px;
height: 48px;
border-color: black;
}
[class*="skuSelectorItemTextValue"] {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
[class*="installments--m3-custom-installments"] {
font-family: "Open Sans";
font-style: normal;
font-weight: 700;
font-size: 16px;
line-height: 22px;
color: #929292;
}
[class*="productNameContainer"] {
text-align: end;
}
[class*="shippingContainer"] :global(.vtex-button) {
background-color: black;
color: white;
font-size: 0;
width: 49px;
height: 49px;
background-color: black;
color: white;
font-size: 0;
position: relative;
width: 49px;
height: 49px;
left: 45.5%;
bottom: 110px;
}
[class*="shippingContainer"] :global(.vtex-button::after) {
content: "OK";
font-family: "Open Sans";
font-style: normal;
font-weight: 600;
font-size: 14px;
line-height: 19px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 30%;
left: 23%;
}
[class*="shippingContainer"] :global(.vtex-input-prefix__group) {
width: 45.532%;
height: 49px;
}
[class*="vtex-address-form__postalCode-forgottenURL"] {
position: relative;
color: black;
bottom: 44px;
left: 52%;
margin-left: 32px;
}
[class*="productDescriptionTitle"] {
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
}
[class*="productDescriptionContainer"] {
margin-left: 32px;
}
[class*="productDescriptionContainer"]:global(.content) {
width: 632px;
height: 66px;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: #929292;
}
[class*="listContainer"] {
justify-content: space-between;
color: black;
background-color: transparent;
border-bottom: 1px solid #bfbfbf;
margin-bottom: 25px;
}
[class*="listContainer"] :global(.vtex-button__label) {
text-transform: capitalize;
padding: 0;
margin: 0;
}
[class*="listContainer"] :global(.vtex-button__label):hover {
background-color: transparent;
}
[class*="listItemActive"] :global(.vtex-button) {
color: black !important;
background-color: transparent;
border: none;
border-bottom: 1px solid black;
border-radius: 0;
padding: 0;
margin: 0;
}
[class*="listItem"] :global(.vtex-button) {
color: #bfbfbf;
border-radius: 0;
}
[class*="listItem"] :global(.vtex-button):hover {
background-color: transparent;
border: none;
border-bottom: 1px solid black;
}
[class*="listItemActive"] {
color: black;
}
[class*="pv2"] {
padding-top: 0;
padding-bottom: 0;
}
[class*="ma2"] {
margin-top: 0;
margin-bottom: 0;
}
[class*="listItemActive"] :global(.vtex-button:hover) {
background-color: transparent;
border: none;
}
[class*="listContainer"] :global(.vtex-button__label:hover) {
color: black;
background-color: transparent;
border: none;
}
[class*="imageNormal"] {
max-width: 434.4px;
max-height: 434.4px;
}
[class*="newsletter"] {
color: white;
}
[id*="newsletter-input"] {
color: white;
background: black;
border: none;
}
[class*="t-heading-3"] {
content: "Teste \n teste 2";
margin-bottom: 57px;
font-size: 0;
}
[class*="t-heading-3"]::after {
content: "Assine nossa newsletter";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
position: relative;
bottom: 47px;
}
[class*="textNewsletter"] {
color: white;
position: relative;
top: 38px;
}
[class*="newsletter"]:global(.vtex-input-prefix__group) {
border: none;
border-bottom: 1px solid white;
border-radius: 0;
}
[class*="buttonContainer"] :global(.vtex-button) {
border: none;
border-bottom: 2px solid white;
background-color: black;
border-radius: 0;
position: relative;
right: 12px;
}

3
store/blocks/minicart.jsonc
View File

@ -2,7 +2,8 @@
"add-to-cart-button": { "add-to-cart-button": {
"props": { "props": {
"addToCartFeedback": "customEvent", "addToCartFeedback": "customEvent",
"customPixelEventId": "add-to-cart-button" "customPixelEventId": "add-to-cart-button",
"blockClass": "button-add"
} }
}, },

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

@ -3,13 +3,51 @@
"children": [ "children": [
"html#breadcrumb", "html#breadcrumb",
"condition-layout.product#availability", "condition-layout.product#availability",
"flex-layout.row#description", "tab-layout#home",
"flex-layout.row#specifications-title", "rich-text#textproducts",
"product-specification-group#table", "list-context.product-list#demo1",
"shelf.relatedProducts", "rich-text#textnewsletter",
"newsletter",
"product-questions-and-answers" "product-questions-and-answers"
] ]
}, },
"newsletter": {
"props": {
"text": "Você também pode gostar:"
}
},
"rich-text#textnewsletter": {
"props": {
"textAlignment": "CENTER",
"textPosition": "CENTER",
"text": "Receba ofertas e novidades por e-mail",
"id": "textNewsletter",
"blockClass": "textNewsletter"
}
},
"rich-text#textproducts": {
"props": {
"textAlignment": "CENTER",
"textPosition": "CENTER",
"text": "Você também pode gostar:"
}
},
"product-summary.shelf#demo1": {
"children": [
"product-summary-image",
"product-summary-name",
"product-summary-price"
]
},
"list-context.product-list#demo1": {
"blocks": ["product-summary.shelf#demo1"],
"children": ["slider-layout#demo-products"]
},
"html#breadcrumb": { "html#breadcrumb": {
"props": { "props": {
"tag": "section", "tag": "section",
@ -30,7 +68,7 @@
"props": { "props": {
"marginBottom": 7 "marginBottom": 7
}, },
"children": ["product-description"] "children": ["image#tab", "product-description"]
}, },
"condition-layout.product#availability": { "condition-layout.product#availability": {
"props": { "props": {
@ -45,8 +83,6 @@
}, },
"flex-layout.row#product-main": { "flex-layout.row#product-main": {
"props": { "props": {
"colGap": 7,
"rowGap": 7,
"marginTop": 4, "marginTop": 4,
"marginBottom": 7, "marginBottom": 7,
"paddingTop": 7, "paddingTop": 7,
@ -78,15 +114,20 @@
"flex-layout.col#stack": { "flex-layout.col#stack": {
"children": ["stack-layout"], "children": ["stack-layout"],
"props": { "props": {
"width": "60%",
"rowGap": 0 "rowGap": 0
} }
}, },
"flex-layout.row#product-image": { "flex-layout.row#product-image": {
"children": ["product-images"] "props": {},
"children": ["html#product-images"]
}, },
"product-images": { "product-images": {
"props": { "props": {
"width": "40%",
"contentType": "images",
"showNavigationArrows": false,
"showPaginationDots": false,
"thumbnailsOrientation": "horizontal",
"aspectRatio": { "aspectRatio": {
"desktop": "auto", "desktop": "auto",
"phone": "16:9" "phone": "16:9"
@ -94,30 +135,147 @@
"displayThumbnailsArrows": true "displayThumbnailsArrows": true
} }
}, },
"html#product-images": {
"props": {
"thumbnailsOrientation": "horizontal",
"tag": "section",
"infinite": "true",
"preventHorizontalStretch": "true",
"verticalAlign": "bottom",
"testId": "product-images"
},
"children": ["product-images"]
},
"flex-layout.col#right-col": { "flex-layout.col#right-col": {
"props": { "props": {
"width": "60%",
"preventVerticalStretch": true, "preventVerticalStretch": true,
"rowGap": 0 "rowGap": 0
}, },
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#product-name",
"product-identifier.product",
"product-rating-summary", "product-rating-summary",
"flex-layout.row#list-price-savings", "flex-layout.row#list-price-savings",
"flex-layout.row#selling-price", "flex-layout.row#selling-price",
"product-installments", "product-installments#m3-academy",
"product-separator",
"product-identifier.product",
"sku-selector", "sku-selector",
"product-quantity",
"product-assembly-options",
"product-gifts", "product-gifts",
"flex-layout.row#buy-button", "flex-layout.row#buy-button",
"availability-subscriber", "availability-subscriber",
"shipping-simulator", "shipping-simulator"
"share#default"
] ]
}, },
"image#tab": {
"props": {
"src": "assets/img-sapato.png"
}
},
"tab-layout#home": {
"children": ["tab-list#home", "tab-content#home"],
"props": {
"blockClass": "home",
"defaultActiveTabId": "home1"
}
},
"tab-list#home": {
"children": [
"tab-list.item#home1",
"tab-list.item#home2",
"tab-list.item#home3",
"tab-list.item#home4",
"tab-list.item#home5"
]
},
"tab-list.item#home1": {
"props": {
"tabId": "home1",
"label": "Descrição",
"defaultActiveTab": true
}
},
"tab-list.item#home2": {
"props": {
"tabId": "home2",
"label": "Descrição"
}
},
"tab-list.item#home3": {
"props": {
"tabId": "home3",
"label": "Descrição"
}
},
"tab-list.item#home4": {
"props": {
"tabId": "home4",
"label": "Descrição"
}
},
"tab-list.item#home5": {
"props": {
"tabId": "home5",
"label": "Descrição"
}
},
"tab-content#home": {
"children": [
"tab-content.item#home1",
"tab-content.item#home2",
"tab-content.item#home3",
"tab-content.item#home4",
"tab-content.item#home5"
]
},
"tab-content.item#home1": {
"children": ["flex-layout.row#description"],
"props": {
"tabId": "home1"
}
},
"tab-content.item#home2": {
"children": ["flex-layout.row#description"],
"props": {
"tabId": "home2"
}
},
"tab-content.item#home3": {
"children": ["flex-layout.row#description"],
"props": {
"tabId": "home3"
}
},
"tab-content.item#home4": {
"children": ["flex-layout.row#description"],
"props": {
"tabId": "home4"
}
},
"tab-content.item#home5": {
"children": ["flex-layout.row#description"],
"props": {
"tabId": "home5"
}
},
"product-installments#m3-academy": {
"props": {
"installmentsCriteria": "max-quantity-without-interest",
"markers": ["discount", "vezes"],
"blockClass": "m3-custom-installments",
"message": "{installmentsNumber}<vezes>x</vezes> de {installmentValue} <discount>sem juros</discount>"
}
},
"flex-layout.row#product-name": { "flex-layout.row#product-name": {
"props": { "props": {
"marginBottom": 3 "marginBottom": 3
@ -134,8 +292,21 @@
"flex-layout.row#buy-button": { "flex-layout.row#buy-button": {
"props": { "props": {
"paddingTop": 0,
"marginTop": 4, "marginTop": 4,
"marginBottom": 7 "marginBottom": 7,
"blockClass": "button-cart"
},
"children": ["product-quantity", "html#add-to-cart-button"]
},
"product-quantity": {
"props": { "width": "25%" }
},
"html#add-to-cart-button": {
"props": {
"testId": "add-to-cart-button"
}, },
"children": ["add-to-cart-button"] "children": ["add-to-cart-button"]
}, },

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

@ -7,10 +7,9 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.html { /*.html {
background-color: red; background-color: red;
} }*/
/*.html--pdp-breadcrumb {
.html--pdp-breadcrumb {
background-color: green; background-color: green;
} }*/

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

@ -0,0 +1,9 @@
/*
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 */
/* Grid breakpoints */

52
styles/css/vtex.breadcrumb.css Normal file
View File

@ -0,0 +1,52 @@
.homeIcon {
visibility: hidden;
}
.arrow--1 {
visibility: hidden;
content: "";
}
.arrow--1::after {
visibility: visible;
content: "Home";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
}
.link--2 {
visibility: hidden;
content: "";
}
.link--2::after {
visibility: visible;
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
content: "Sapatos";
}
.term {
visibility: hidden;
}
.term::after {
visibility: visible;
content: "Sandálias";
font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: #929292;
position: relative;
right: 230px;
}

0
styles/css/vtex.condition-layout.css Normal file
View File

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

@ -43,7 +43,7 @@
} }
.flexRow--deals { .flexRow--deals {
background-color: #0F3E99; background-color: #0f3e99;
padding: 14px 0px; padding: 14px 0px;
} }
@ -70,6 +70,10 @@
align-items: flex-end; align-items: flex-end;
} }
.pr7.items-stretch.vtex-flex-layout-0-x-stretchChildrenWidth.flex {
width: 40%;
}
.flexCol--orderByMobileCol { .flexCol--orderByMobileCol {
width: 42%; width: 42%;
} }

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

@ -1,3 +1,29 @@
.product-identifier--productReference { .product-identifier--productReference {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.product-identifier__label,
.product-identifier__separator {
display: none;
}
.product-identifier__value {
text-align: right;
position: absolute;
right: 0;
margin-right: 40px;
}
.product-identifier--productReference {
position: relative;
font-family: "Open Sans";
text-align: right;
display: flex;
align-self: flex-end;
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 19px;
text-align: right;
color: rgba(146, 146, 146, 0.48);
}

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

@ -1,6 +1,6 @@
.listPrice { .listPrice {
color: #727273; color: #727273;
margin-bottom: .25rem; margin-bottom: 0.25rem;
font-size: 1rem; font-size: 1rem;
} }
@ -10,8 +10,12 @@
} }
.sellingPriceValue { .sellingPriceValue {
font-size: 2.25rem; font-family: "Open Sans";
font-style: normal;
font-weight: 700; font-weight: 700;
font-size: 25px;
line-height: 38px;
color: #000000;
} }
.installments { .installments {
@ -20,18 +24,19 @@
} }
.savings { .savings {
display: none;
font-weight: 500; font-weight: 500;
color: #79B03A; color: #79b03a;
} }
.sellingPriceValue--summary { .sellingPriceValue--summary {
font-size: 1.25rem; font-size: 1.25rem;
font-weight: 600; font-weight: 600;
color: #2E2E2E; color: #2e2e2e;
} }
.savings--summary { .savings--summary {
background: #8BC34A; background: #8bc34a;
border-radius: 1000px; border-radius: 1000px;
align-items: center; align-items: center;
display: flex; display: flex;
@ -41,21 +46,24 @@
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
vertical-align: baseline; vertical-align: baseline;
color: #FFFFFF; color: #ffffff;
}
.listPrice {
display: none;
} }
.savings-discount--summary { .savings-discount--summary {
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
vertical-align: baseline; vertical-align: baseline;
color: #FFFFFF; color: #ffffff;
padding-left: 0.5rem; padding-left: 0.5rem;
padding-right: 0.5rem; padding-right: 0.5rem;
} }
.listPrice--summary { .listPrice--summary {
margin-bottom: 0.25rem; margin-bottom: 0.25rem;
font-size: .875rem; font-size: 0.875rem;
} }
.installments--summary { .installments--summary {
@ -74,6 +82,6 @@
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
vertical-align: baseline; vertical-align: baseline;
color: #FFFFFF; color: #ffffff;
padding: 0.25rem 0.5rem 0.25rem 0.5rem; padding: 0.25rem 0.5rem 0.25rem 0.5rem;
} }

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

@ -0,0 +1,4 @@
.quantitySelectorTitle {
display: none;
}

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

@ -8,5 +8,5 @@
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.newsletter { .newsletter {
background: red; background: black;
} }

4
styles/css/vtex.styleguide.css Normal file
View File

@ -0,0 +1,4 @@
.hideDecorators {
border-left: none;
border-right: none;
}

0
styles/css/vtex.tab-layout.css Normal file
View File

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

@ -1,8 +1,7 @@
.html { /*.html {
background-color: red; background-color: red;
} }*/
.html--pdp-breadcrumb { /*.html--pdp-breadcrumb {
background-color: green; background-color: green;
} }*/

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

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

@ -1,3 +1,3 @@
.newsletter{ .newsletter {
background: red; background: black;
} }