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

Merge pull request 'development' (#3) from development into master

Browse Source 
Reviewed-on: #3
This commit is contained in:
Luiz Felipe Silva 2023-02-10 10:32:41 +00:00
commit 5ee72919ce
17 changed files with 274 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
.vscode/schemas/html.json vendored
View File

2
store/blocks/home/deals.json
View File

@ -1,7 +1,7 @@
{ {
"flex-layout.row#deals": { "flex-layout.row#deals": {
"children": [ "children": [
"flex-layout.col#deals1",
"flex-layout.col#deals2", "flex-layout.col#deals2",
"flex-layout.col#deals3", "flex-layout.col#deals3",
"flex-layout.col#deals4" "flex-layout.col#deals4"

6
store/blocks/home/home.jsonc
View File

@ -2,9 +2,9 @@
"store.home": { "store.home": {
"blocks": [ "blocks": [
"list-context.image-list#demo", "list-context.image-list#demo",
"example-component", /* You can make references to blocks defined in other files. "example-component",
* For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ /* You can make references to blocks defined in other files.
"flex-layout.row#deals", * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals",
"__fold__", "__fold__",
"rich-text#shelf-title", "rich-text#shelf-title",
"flex-layout.row#shelf", "flex-layout.row#shelf",

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

@ -10,6 +10,7 @@
"product-questions-and-answers" "product-questions-and-answers"
] ]
}, },
"html#breadcrumb": { "html#breadcrumb": {
"props": { "props": {
"tag": "section", "tag": "section",
@ -18,20 +19,24 @@
}, },
"children": ["breadcrumb"] "children": ["breadcrumb"]
}, },
"flex-layout.row#specifications-title": { "flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"] "children": ["rich-text#specifications"]
}, },
"rich-text#specifications": { "rich-text#specifications": {
"props": { "props": {
"text": "##### Product Specifications" "text": "##### Product Specifications"
} }
}, },
"flex-layout.row#description": { "flex-layout.row#description": {
"props": { "props": {
"marginBottom": 7 "marginBottom": 7
}, },
"children": ["product-description"] "children": ["product-description"]
}, },
"condition-layout.product#availability": { "condition-layout.product#availability": {
"props": { "props": {
"conditions": [ "conditions": [
@ -43,6 +48,7 @@
"Else": "flex-layout.row#product-availability" "Else": "flex-layout.row#product-availability"
} }
}, },
"flex-layout.row#product-main": { "flex-layout.row#product-main": {
"props": { "props": {
"colGap": 7, "colGap": 7,
@ -82,9 +88,11 @@
"rowGap": 0 "rowGap": 0
} }
}, },
"flex-layout.row#product-image": { "flex-layout.row#product-image": {
"children": ["product-images"] "children": ["product-images"]
}, },
"product-images": { "product-images": {
"props": { "props": {
"aspectRatio": { "aspectRatio": {
@ -94,11 +102,23 @@
"displayThumbnailsArrows": true "displayThumbnailsArrows": true
} }
}, },
"flex-layout.col#right-col": { "flex-layout.col#right-col": {
"props": { "props": {
"preventVerticalStretch": true, "preventVerticalStretch": true,
"rowGap": 0 "rowGap": 0
}, },
"product-installments": {
"props": {
"markers": ["discount"],
"message": "ou: {sellingPriceValue}x de {installmentValue}",
"blockClass": "teste"
}
},
"children": [ "children": [
"flex-layout.row#product-name", "flex-layout.row#product-name",
"product-rating-summary", "product-rating-summary",

20
styles/css/vtex-breadcrumb.css Normal file
View File

@ -0,0 +1,20 @@
/*
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 */
:global(.vtex-breadcrumb-1-x-container) {
background-color: black;
}
:global(.vtex-breadcrumb-1-x-container--m3-product-breadcrumb) {
color: red;
}
.product-breadcrumb, .homeLink {
background-color: blue;
}

8
styles/css/agenciamagma.store-theme.css → styles/css/vtex-flex-layout.css
View File

@ -7,10 +7,10 @@
*/ */
/* Media Query M3 */ /* Media Query M3 */
/* Grid breakpoints */ /* Grid breakpoints */
.html { :global(.vtex-breadcrumb-1-x-link--m3-product-breadcrumb) {
background-color: red; background-color: black;
} }
.html--pdp-breadcrumb { .product-breadcrumb {
background-color: green; background-color: blue;
} }

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

@ -0,0 +1,54 @@
/*
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 */
.container {
display: flex;
}
.homeLink::after {
content: "Home";
}
.homeLink,
.link--1,
.link--2 {
text-transform: capitalize;
font-family: Open Sans;
font-size: 14px;
font-weight: 400;
line-height: 19px;
color: #929292;
}
.homeLink::after,
.link--1::after,
.link--2::after {
text-transform: capitalize;
font-family: Open Sans;
font-size: 14px;
font-weight: 400;
line-height: 19px;
color: #929292;
color: #929292;
}
.homeIcon,
.term {
display: none;
}
.link--1 {
font-size: 0;
}
.link--1::after {
content: "Sapatos";
}
.caretIcon:last-child {
display: none;
}

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

@ -1,98 +1,9 @@
.flexRowContent--menu-link, /*
.flexRowContent--main-header { 0 - 600PX: Phone
padding: 0 0.5rem; 600 - 900px: Table portrait
} 900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
@media screen and (min-width: 40em) { 1800px + : Big desktop
.flexRowContent--menu-link, */
.flexRowContent--main-header { /* Media Query M3 */
padding: 0 1rem; /* Grid breakpoints */
}
}
@media screen and (min-width: 80rem) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
}
}
.flexRowContent--menu-link {
background-color: #03044e;
color: #fff;
}
.flexRowContent--main-header {
background-color: #f0f0f0;
}
.flexRowContent--main-header-mobile {
align-items: center;
padding: 0.625rem 0.5rem;
background-color: #f0f0f0;
}
.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
color: #ffffff;
font-size: 14px;
}
.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
color: #727273;
font-size: 14px;
}
.flexRow--deals {
background-color: #0F3E99;
padding: 14px 0px;
}
.flexRow--deals .stretchChildrenWidth {
align-items: center;
}
.flexRow--deals .flexCol {
align-items: center;
margin-bottom: 5px;
padding-top: 5px;
}
.flexCol--filterCol {
max-width: 500px;
min-width: 230px;
}
.flexCol--productCountCol {
align-items: flex-start;
}
.flexCol--orderByCol {
align-items: flex-end;
}
.flexCol--orderByMobileCol {
width: 42%;
}
.flexCol--filterMobileCol {
width: 38%;
}
.flexRow--quickviewMainRow {
display: flex;
max-height: 100%;
}
.flexColChild--quickviewDetails:first-child {
overflow-y: auto;
height: 66% !important;
overflow-x: hidden;
}
.flexColChild--quickviewDetails:last-child {
height: 34% !important;
}
.flexRow--addToCartRow {
padding-bottom: 1rem;
}

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

@ -1,79 +1,38 @@
.listPrice { /*
color: #727273; 0 - 600PX: Phone
margin-bottom: .25rem; 600 - 900px: Table portrait
font-size: 1rem; 900 - 1200px: Tablet landscape
[1200 - 1800] is where our nortal styles apply
1800px + : Big desktop
*/
/* Media Query M3 */
/* Grid breakpoints */
.sellingPrice--m3-custom-selling-price {
font-size: 0;
} }
.sellingPrice--m3-custom-selling-price .currencyContainer--m3-custom-selling-price {
.sellingPrice { font-family: Open Sans;
color: #3f3f40; font-size: 25px;
font-size: 1.25rem;
}
.sellingPriceValue {
font-size: 2.25rem;
font-weight: 700; font-weight: 700;
line-height: 38px;
color: #000000;
margin-left: 0;
} }
.installments { .installments--m3-custom-installments {
color: #727273; font-family: Open Sans;
margin-bottom: 1rem; font-size: 16px;
font-weight: 400;
line-height: 22px;
} }
.installments--m3-custom-installments .installmentsNumber--m3-custom-installments--36 {
.savings { font-size: 0;
font-weight: 500;
color: #79B03A;
} }
.installments--m3-custom-installments .installmentsNumber--m3-custom-installments--36::after {
.sellingPriceValue--summary { content: "4 ";
font-size: 1.25rem; font-size: 16px;
font-weight: 600; font-weight: 600;
color: #2E2E2E;
} }
.installments--m3-custom-installments .installmentsNumber--m3-custom-installments--36::before {
.savings--summary { font-size: 0;
background: #8BC34A;
border-radius: 1000px;
align-items: center;
display: flex;
padding-left: 0.5rem;
padding-right: 0.5rem;
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
}
.savings-discount--summary {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.listPrice--summary {
margin-bottom: 0.25rem;
font-size: .875rem;
}
.installments--summary {
margin-bottom: 2rem;
font-size: 0.875rem;
}
.savings--summaryPercentage {
background: #0f3e99;
border-radius: 1000px;
align-items: center;
display: flex;
}
.savingsPercentage--summaryPercentage {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
color: #FFFFFF;
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
} }

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

@ -10,3 +10,14 @@
.newsletter { .newsletter {
background: red; background: red;
} }
.productBrand--quickview {
font-family: Open Sans;
font-size: 20px;
font-weight: 300;
line-height: 34px;
text-align: right;
color: #575757;
display: flex;
justify-content: end;
}

47
styles/css/vtex.store-header.css
View File

@ -1,10 +1,7 @@
/* add transitions */ /* add transitions */
:global(.vtex-sticky-layout-0-x-container) :global(.vtex-sticky-layout-0-x-container) :global(.vtex-store-components-3-x-logoLink),
:global(.vtex-store-components-3-x-logoLink), :global(.vtex-sticky-layout-0-x-container) :global(.vtex-minicart-2-x-openIconContainer),
:global(.vtex-sticky-layout-0-x-container) :global(.vtex-sticky-layout-0-x-container) :global(.vtex-store-components-3-x-searchBarContainer) {
:global(.vtex-minicart-2-x-openIconContainer),
:global(.vtex-sticky-layout-0-x-container)
:global(.vtex-store-components-3-x-searchBarContainer) {
transition: all 0.3s ease; transition: all 0.3s ease;
display: block; display: block;
} }
@ -23,10 +20,8 @@
} }
/* add a box-shadow to desktop/mobile header when stuck */ /* add a box-shadow to desktop/mobile header when stuck */
:global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
:global(.vtex-flex-layout-0-x-flexRowContent--main-header), :global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
:global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
} }
@ -34,8 +29,7 @@
* remove the extra padding when stuck from the desktop header * remove the extra padding when stuck from the desktop header
* we add a transition only when "stuck" for the "unstick" step seem faster * we add a transition only when "stuck" for the "unstick" step seem faster
*/ */
:global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
:global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
transition: padding 0.3s ease, background 0.3s ease; transition: padding 0.3s ease, background 0.3s ease;
padding-top: 0; padding-top: 0;
padding-bottom: 0; padding-bottom: 0;
@ -43,18 +37,15 @@
/* if supported add some translucency to the desktop/mobile header background */ /* if supported add some translucency to the desktop/mobile header background */
@supports (backdrop-filter: blur(5px)) { @supports (backdrop-filter: blur(5px)) {
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
:global(.vtex-flex-layout-0-x-flexRowContent--main-header), :global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
:global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
:global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
} }
/* header background when stuck and not hovered */ /* header background when stuck and not hovered */
:global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover) :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover) :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
:global(.vtex-flex-layout-0-x-flexRowContent--main-header), :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover) :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
:global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover)
:global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
background: rgba(240, 240, 240, 0.8); background: rgba(240, 240, 240, 0.8);
} }
} }
@ -65,20 +56,16 @@
} }
/* resize the logo for neat effect */ /* resize the logo for neat effect */
:global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-store-components-3-x-logoLink) {
:global(.vtex-store-components-3-x-logoLink) {
transform: scale(0.85); transform: scale(0.85);
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
:global(.vtex-sticky-layout-0-x-container)
:global(.vtex-store-components-3-x-logoLink), :global(.vtex-sticky-layout-0-x-container) :global(.vtex-store-components-3-x-logoLink),
:global(.vtex-sticky-layout-0-x-container) :global(.vtex-sticky-layout-0-x-container) :global(.vtex-minicart-2-x-openIconContainer),
:global(.vtex-minicart-2-x-openIconContainer), :global(.vtex-sticky-layout-0-x-container) :global(.vtex-store-components-3-x-searchBarContainer),
:global(.vtex-sticky-layout-0-x-container) :global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
:global(.vtex-store-components-3-x-searchBarContainer),
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
:global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
transition: none; transition: none;
} }
} }

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

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

49
styles/sass/pages/product/vtex.breadcrumb.scss Normal file
View File

@ -0,0 +1,49 @@
.container {
display: flex;
}
.homeLink {
&::after {
content: "Home";
}
}
.homeLink,
.link--1,
.link--2 {
text-transform: capitalize;
font-family: Open Sans;
font-size: 14px;
font-weight: 400;
line-height: 19px;
color: #929292;
&::after {
text-transform: capitalize;
font-family: Open Sans;
font-size: 14px;
font-weight: 400;
line-height: 19px;
color: #929292;
color: #929292;
}
}
.homeIcon,
.term {
display: none;
}
.link--1 {
font-size: 0;
&::after {
content: "Sapatos";
}
}
.caretIcon {
&:last-child {
display: none;
}
}

5
styles/sass/pages/product/vtex.flex-layout.scss Normal file
View File

@ -0,0 +1,5 @@
.flexRowContent--m3-product-details {
//background-color: blue;
}

35
styles/sass/pages/product/vtex.product-price.scss Normal file
View File

@ -0,0 +1,35 @@
.sellingPrice--m3-custom-selling-price {
font-size: 0;
.currencyContainer--m3-custom-selling-price {
font-family: Open Sans;
font-size: 25px;
font-weight: 700;
line-height: 38px;
color: #000000;
margin-left: 0;
}
}
.installments--m3-custom-installments {
font-family: Open Sans;
font-size: 16px;
font-weight: 400;
line-height: 22px;
.installmentsNumber--m3-custom-installments--36 {
font-size: 0;
&::after {
content: "4 ";
font-size: 16px;
font-weight: 600;
}
&::before {
font-size: 0;
}
}
}

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

@ -1,3 +1,15 @@
.newsletter { .newsletter {
background: red; background: red;
} }
.productBrand--quickview {
font-family: Open Sans;
font-size: 20px;
font-weight: 300;
line-height: 34px;
text-align: right;
color: #575757;
display: flex;
justify-content: end;
}