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
21 changed files with 579 additions and 44 deletions

BIN
assets/img-sapato.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 664 KiB

View File

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

View File

@ -1,5 +1,6 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
import "./styles.css"
const CSS_HANDLES = ["html"] as const;

View File

@ -46,7 +46,7 @@ Basicamente esse componente
<div class="vtex-flex-layout-0-x-flexRow">
<section class="vtex-store-components ph3 ph5-m ph2-xl mw9 center">
<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}
</div>
</div>

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;
}

View File

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

View File

@ -3,13 +3,51 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"flex-layout.row#description",
"flex-layout.row#specifications-title",
"product-specification-group#table",
"shelf.relatedProducts",
"tab-layout#home",
"rich-text#textproducts",
"list-context.product-list#demo1",
"rich-text#textnewsletter",
"newsletter",
"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": {
"props": {
"tag": "section",
@ -30,7 +68,7 @@
"props": {
"marginBottom": 7
},
"children": ["product-description"]
"children": ["image#tab", "product-description"]
},
"condition-layout.product#availability": {
"props": {
@ -45,8 +83,6 @@
},
"flex-layout.row#product-main": {
"props": {
"colGap": 7,
"rowGap": 7,
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7,
@ -78,15 +114,20 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "60%",
"rowGap": 0
}
},
"flex-layout.row#product-image": {
"children": ["product-images"]
"props": {},
"children": ["html#product-images"]
},
"product-images": {
"props": {
"width": "40%",
"contentType": "images",
"showNavigationArrows": false,
"showPaginationDots": false,
"thumbnailsOrientation": "horizontal",
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
@ -94,30 +135,147 @@
"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": {
"props": {
"width": "60%",
"preventVerticalStretch": true,
"rowGap": 0
},
"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-installments#m3-academy",
"sku-selector",
"product-quantity",
"product-assembly-options",
"product-gifts",
"flex-layout.row#buy-button",
"availability-subscriber",
"shipping-simulator",
"share#default"
"shipping-simulator"
]
},
"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": {
"props": {
"marginBottom": 3
@ -134,8 +292,21 @@
"flex-layout.row#buy-button": {
"props": {
"paddingTop": 0,
"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"]
},

View File

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

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 */

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;
}

View File

View File

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

View File

@ -1,3 +1,29 @@
.product-identifier--productReference {
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);
}

View File

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

View File

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

View File

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

View File

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

View File

View File

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

View File

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