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

feat: Cria área do produto mobile

Browse Source
This commit is contained in:
Saulo Klein Nery 2023-02-09 07:47:26 -03:00
parent 45a071299f
commit cf0a37e7c7
10 changed files with 126 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,12 +5,13 @@
//"example-component",
"condition-layout.product#availability",
"tab-layout",
"flex-layout.row#specifications-title",
"product-specification-group#table",
"shelf.relatedProducts",
"product-questions-and-answers"
//"flex-layout.row#specifications-title",
//"product-specification-group#table",
"shelf.relatedProducts"
//"product-questions-and-answers"
]
},
"html#breadcrumb": {
"props": {
"tag": "section",
@ -116,6 +117,9 @@
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
//"availability-subscriber",
//"product-assembly-options",
"product-rating-summary",
//"flex-layout.row#list-price-savings",
"flex-layout.row#selling-prices",
@ -123,12 +127,9 @@
"pix-component",
//"product-separator",
"sku-selector",
"product-identifier.product",
//"product-quantity",
"product-assembly-options",
"product-gifts",
//"product-gifts",
"flex-layout.row#buy-button",
"availability-subscriber",
"shipping-simulator",
"placeholder-component"
//"share#default"
@ -190,9 +191,9 @@
},
"children": [
"flex-layout.row#product-name",
"product-identifier.product",
"flex-layout.row#availability",
"sku-selector",
"product-identifier.product"
"sku-selector"
]
},
"flex-layout.row#availability": {

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

@ -15,6 +15,16 @@
margin: 16px 0;
padding: 0 40px;
}
@media only screen and (max-width: 1024px) {
.flexRow .flexRowContent--productPanel {
flex-direction: column;
}
}
@media only screen and (max-width: 1024px) {
.flexRow .flexRowContent--productPanel .stretchChildrenWidth {
width: 100% !important;
}
}
.flexRow .flexRowContent--productPanel .stretchChildrenWidth:first-child {
padding: 0;
justify-content: normal;
@ -22,6 +32,12 @@
.flexRow .flexRowContent--productPanel .flexCol--productShowcase {
padding: 0 32px 0 0;
}
@media only screen and (max-width: 1024px) {
.flexRow .flexRowContent--productPanel .flexCol--productShowcase {
padding: 0;
margin: 0 0 32px;
}
}
.flexRow .flexRowContent--quantityAndBuy {
margin: 0 0 16px;
}

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

@ -9,14 +9,20 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
.product-identifier--productReference {
position: absolute;
top: 42px;
right: 0;
margin: 8px 0 0;
display: flex;
justify-content: flex-end;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.4784313725);
}
.product-identifier--productReference__label, .product-identifier--productReference__separator {
@media only screen and (max-width: 1024px) {
.product-identifier--productReference {
justify-content: flex-start;
}
}
.product-identifier--productReference :global(.vtex-product-identifier-0-x-product-identifier__label),
.product-identifier--productReference :global(.vtex-product-identifier-0-x-product-identifier__separator) {
display: none;
}

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

@ -9,7 +9,7 @@
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
.sellingPrice--hasListPrice {
margin: 51px 0 0;
margin: 24px 0 0;
font-weight: 700;
font-size: 25px;
line-height: 38px;

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

@ -37,6 +37,11 @@
.container .carouselContainer .carouselThumbBorder {
height: fit-content;
}
@media only screen and (max-width: 1024px) {
.container .productImagesGallerySlide {
width: 100% !important;
}
}
.container .productImagesThumb {
max-height: 90px !important;
margin: 0 16px 0 0;
@ -55,9 +60,20 @@
max-width: 664px;
min-height: 664px;
}
@media only screen and (max-width: 1024px) {
.container .productImageTag--main {
min-height: 994px;
max-width: none;
}
}
.container .productNameContainer {
text-align: right;
}
@media only screen and (max-width: 1024px) {
.container .productNameContainer {
text-align: left;
}
}
.container .productNameContainer .productBrand--quickview {
font-weight: 300;
font-size: 20px;
@ -103,6 +119,12 @@
justify-content: center;
border: 1px solid #989898;
}
.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: rgba(185, 185, 185, 0.6);
}
.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross {
border-radius: 50%;
background-image: linear-gradient(to top left, transparent 44%, #d5d5d5, transparent 52%);
@ -110,6 +132,9 @@
.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox {
border: 2px solid #000;
}
.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper {
color: #000;
}
.container .skuSelectorContainer .skuSelectorSubcontainer .skuSelectorNameContainer {
margin: 0;
}
@ -127,7 +152,7 @@
margin: 0;
}
.container .subscriberContainer {
margin: 43px 0 0;
margin: 24px 0 0;
}
.container .subscriberContainer :global(.vtex-store-components-3-x-title) {
font-size: 0;
@ -159,6 +184,8 @@
column-gap: 10px;
row-gap: 15px;
margin: 16px 0 0;
width: 100%;
max-width: initial;
}
.container .subscriberContainer :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-content) :global(.vtex-store-components-3-x-input) {
margin: 0;

21
styles/sass/pages/product/vtex.flex-layout.scss
View File

@ -10,13 +10,28 @@
margin: 16px 0;
padding: 0 40px;
.stretchChildrenWidth:first-child {
padding: 0;
justify-content: normal;
@include mq(lg, max) {
flex-direction: column;
}
.stretchChildrenWidth {
@include mq(lg, max) {
width: 100% !important;
}
&:first-child {
padding: 0;
justify-content: normal;
}
}
.flexCol--productShowcase {
padding: 0 32px 0 0;
@include mq(lg, max) {
padding: 0;
margin: 0 0 32px;
}
}
}

14
styles/sass/pages/product/vtex.product-identifier.scss
View File

@ -1,14 +1,18 @@
.product-identifier--productReference {
position: absolute;
top: 42px;
right: 0;
margin: 8px 0 0;
display: flex;
justify-content: flex-end;
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray8;
&__label,
&__separator {
@include mq(lg, max) {
justify-content: flex-start;
}
:global(.vtex-product-identifier-0-x-product-identifier__label),
:global(.vtex-product-identifier-0-x-product-identifier__separator) {
display: none;
}
}

2
styles/sass/pages/product/vtex.product-price.scss
View File

@ -1,5 +1,5 @@
.sellingPrice--hasListPrice {
margin: 51px 0 0;
margin: 24px 0 0;
font-weight: 700;
font-size: 25px;
line-height: 38px;

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

@ -32,6 +32,12 @@
}
}
.productImagesGallerySlide {
@include mq(lg, max) {
width: 100% !important;
}
}
.productImagesThumb {
max-height: 90px !important;
margin: 0 16px 0 0;
@ -51,11 +57,20 @@
object-fit: fill !important;
max-width: 664px;
min-height: 664px;
@include mq(lg, max) {
min-height: 994px;
max-width: none;
}
}
.productNameContainer {
text-align: right;
@include mq(lg, max) {
text-align: left;
}
.productBrand--quickview {
font-weight: 300;
font-size: 20px;
@ -105,6 +120,13 @@
justify-content: center;
border: 1px solid $color-gray9;
.valueWrapper {
font-weight: 400;
font-size: 14px;
line-height: 19px;
color: $color-gray15;
}
.diagonalCross {
border-radius: 50%;
background-image: linear-gradient(
@ -118,6 +140,10 @@
&--selected .skuSelectorInternalBox {
border: 2px solid $color-black2;
.valueWrapper {
color: $color-black2;
}
}
}
}
@ -148,7 +174,7 @@
}
.subscriberContainer {
margin: 43px 0 0;
margin: 24px 0 0;
:global(.vtex-store-components-3-x-title) {
font-size: 0;
@ -183,6 +209,8 @@
column-gap: 10px;
row-gap: 15px;
margin: 16px 0 0;
width: 100%;
max-width: initial;
:global(.vtex-store-components-3-x-input) {
margin: 0;

5
styles/sass/utils/_vars.scss
View File

@ -20,6 +20,7 @@ $color-gray11: #d5d5d5;
$color-gray12: #868686;
$color-gray13: #b9b9b9;
$color-gray14: #bfbfbf;
$color-gray15: #b9b9b999;
$color-blue: #4267b2;
@ -31,8 +32,8 @@ $grid-breakpoints: (
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
lg: 1025px,
xl: 2500px,
) !default;
$z-index: (