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 'feat: componente alterado e adicionado o do figma.' (#2) from feature/price into development

Browse Source 
Reviewed-on: #2
This commit is contained in:
Luiz Felipe Silva 2023-02-10 10:32:26 +00:00
commit 4869e18489
15 changed files with 200 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/header/header.jsonc
View File

@ -19,7 +19,7 @@
"fullWidth": true
}
},
"flex-layout.row#3-desktop": {
"props": {
"blockClass": "menu-link",

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

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

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

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

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

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

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

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

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

@ -1,98 +1,9 @@
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.5rem;
}
@media screen and (min-width: 40em) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 1rem;
}
}
@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;
}
/*
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 */

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

@ -1,79 +1,38 @@
.listPrice {
color: #727273;
margin-bottom: .25rem;
font-size: 1rem;
/*
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 */
.sellingPrice--m3-custom-selling-price {
font-size: 0;
}
.sellingPrice {
color: #3f3f40;
font-size: 1.25rem;
}
.sellingPriceValue {
font-size: 2.25rem;
.sellingPrice--m3-custom-selling-price .currencyContainer--m3-custom-selling-price {
font-family: Open Sans;
font-size: 25px;
font-weight: 700;
line-height: 38px;
color: #000000;
margin-left: 0;
}
.installments {
color: #727273;
margin-bottom: 1rem;
.installments--m3-custom-installments {
font-family: Open Sans;
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
.savings {
font-weight: 500;
color: #79B03A;
.installments--m3-custom-installments .installmentsNumber--m3-custom-installments--36 {
font-size: 0;
}
.sellingPriceValue--summary {
font-size: 1.25rem;
.installments--m3-custom-installments .installmentsNumber--m3-custom-installments--36::after {
content: "4 ";
font-size: 16px;
font-weight: 600;
color: #2E2E2E;
}
.savings--summary {
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;
}
.installments--m3-custom-installments .installmentsNumber--m3-custom-installments--36::before {
font-size: 0;
}

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

@ -9,4 +9,15 @@
/* Grid breakpoints */
.newsletter {
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 */
:global(.vtex-sticky-layout-0-x-container)
: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-store-components-3-x-searchBarContainer) {
:global(.vtex-sticky-layout-0-x-container) :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-store-components-3-x-searchBarContainer) {
transition: all 0.3s ease;
display: block;
}
@ -23,10 +20,8 @@
}
/* add a box-shadow to desktop/mobile header when stuck */
: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-mobile) {
: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-mobile) {
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
* we add a transition only when "stuck" for the "unstick" step seem faster
*/
: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) {
transition: padding 0.3s ease, background 0.3s ease;
padding-top: 0;
padding-bottom: 0;
@ -43,18 +37,15 @@
/* if supported add some translucency to the desktop/mobile header background */
@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-mobile) {
: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-mobile) {
backdrop-filter: blur(8px);
}
/* header background when stuck and not hovered */
:global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover)
: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),
: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);
}
}
@ -65,20 +56,16 @@
}
/* resize the logo for neat effect */
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
:global(.vtex-store-components-3-x-logoLink) {
:global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-store-components-3-x-logoLink) {
transform: scale(0.85);
}
@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-minicart-2-x-openIconContainer),
:global(.vtex-sticky-layout-0-x-container)
:global(.vtex-store-components-3-x-searchBarContainer),
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
:global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
:global(.vtex-sticky-layout-0-x-container) :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-store-components-3-x-searchBarContainer),
:global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
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;
}
}
}

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

@ -1,3 +1,15 @@
.newsletter{
background: red;
}
.newsletter {
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;
}