andreamatsunaga/challenge-vtex-io-andrea-matsunaga
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(main): cria product-images responsivo

Browse Source
This commit is contained in:
Andrea Matsunaga 2023-02-02 16:31:57 -03:00
parent eaa263c035
commit 237742b407
10 changed files with 184 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
manifest.json
View File

@ -15,7 +15,6 @@
"postreleasy": "vtex publish --verbose"
},
"dependencies": {
"agenciamagma.store-theme": "5.x",
"vtex.store": "2.x",
"vtex.store-header": "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 { useCssHandles } from "vtex.css-handles";
import "./styles.css";
const CSS_HANDLES = ["html"] as const;

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

@ -0,0 +1,4 @@
/* [class*="html--product-images"] {
background-color: yellow;
padding-right: 16px;
} */

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

@ -43,59 +43,41 @@
"Else": "flex-layout.row#product-availability"
}
},
"flex-layout.row#product-main": {
"props": {
"colGap": 7,
"rowGap": 7,
"marginTop": 4,
"marginBottom": 7,
"paddingTop": 7,
"paddingBottom": 7
"marginBottom": 5,
"blockClass": "productMain",
"fullWidth": true
},
"children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
"children": ["html#product-images", "flex-layout.col#right-col"]
},
"stack-layout": {
"html#product-images": {
"props": {
"blockClass": "product"
"tag": "section",
"testId": "product-images",
"blockClass": "product-images"
},
"children": [
"flex-layout.row#product-image",
"product-bookmark",
"product-specification-badges"
]
},
"product-specification-badges": {
"props": {
"specificationGroupName": "Group",
"specificationName": "On Sale",
"visibleWhen": "True",
"displayValue": "SPECIFICATION_NAME"
}
},
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "60%",
"rowGap": 0
}
},
"flex-layout.row#product-image": {
"children": ["product-images"]
},
"product-images": {
"props": {
"aspectRatio": {
"desktop": "auto",
"phone": "16:9"
},
"displayThumbnailsArrows": true
"thumbnailsOrientation": "horizontal",
"showNavigationArrows": false,
"showPaginationDots": false,
"maxHeight": 2560
}
},
"flex-layout.col#right-col": {
"props": {
"width": "50%",
"preventVerticalStretch": true,
"rowGap": 0
},
@ -148,12 +130,13 @@
"paddingTop": 7
},
"children": [
"flex-layout.col#stack",
"html#product-images",
"flex-layout.col#right-col-availability"
]
},
"flex-layout.col#right-col-availability": {
"props": {
"width": "50%",
"preventVerticalStretch": true,
"rowGap": 0,
"blockClass": "info-availability"

10
styles/configs/style.json
View File

@ -5,25 +5,25 @@
{ "s": 20 },
{
"ns": {
"value": 40,
"minWidth": true
"value": 64,
"minWidth": false
}
},
{
"m": {
"value": 40,
"value": 48,
"minWidth": true
}
},
{
"l": {
"value": 64,
"minWidth": true
"minWidth": false
}
},
{
"xl": {
"value": 80,
"value": 120,
"minWidth": true
}
}

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

@ -1,98 +1,34 @@
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.5rem;
/*
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 */
.flexRowContent--productMain {
padding: 0 40px;
gap: 32px;
}
@media screen and (min-width: 40em) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 1rem;
@media only screen and (min-width: 1920px) {
.flexRowContent--productMain {
padding: 0 360px;
}
}
@media screen and (min-width: 80rem) {
.flexRowContent--menu-link,
.flexRowContent--main-header {
padding: 0 0.25rem;
@media only screen and (max-width: 1024px) {
.flexRowContent--productMain {
flex-direction: column;
}
.flexRowContent--productMain .stretchChildrenWidth {
width: 100% !important;
}
.flexRowContent--productMain .stretchChildrenWidth :first-child {
padding-right: 0;
}
}
.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;
}
@media only screen and (max-width: 1024px) and (max-width: 639px) {
.flexRowContent--productMain .stretchChildrenWidth:first-child {
margin-bottom: 32px;
}
}

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

@ -7,6 +7,41 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
.newsletter {
background: red;
.container {
margin: 0;
padding: 0;
}
.productImagesGallerySlide {
width: 100% !important;
margin: 0;
}
.productImagesGallerySlide .productImageTag {
width: 100%;
aspect-ratio: 1/1;
object-fit: cover !important;
}
.carouselGaleryThumbs {
margin-top: 16px;
display: block;
}
.carouselGaleryThumbs .productImagesThumb {
width: 90px !important;
height: 100% !important;
margin-right: 16px;
margin-bottom: 0;
}
.carouselGaleryThumbs .productImagesThumb:last-child {
margin-right: 0;
}
.carouselGaleryThumbs .productImagesThumb .figure {
width: 100%;
height: 100%;
}
.carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
width: 100%;
aspect-ratio: 1/1;
border-radius: 8px;
object-fit: cover;
}

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

@ -0,0 +1,29 @@
.flexRowContent--productMain {
// background-color: red;
padding: 0 40px;
gap: 32px;
@include mq(xl) {
padding: 0 360px;
}
@include mq(lg, max) {
// background-color: red;
flex-direction: column;
.stretchChildrenWidth {
width: 100% !important;
// background-color: blue;
:first-child {
padding-right: 0;
}
@include mq(md, max) {
&:first-child {
margin-bottom: 32px;
}
}
}
}
}

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

@ -1,3 +1,50 @@
.newsletter{
background: red;
}
.container {
margin: 0;
padding: 0;
}
.productImagesGallerySlide {
width: 100% !important;
margin: 0;
.productImageTag {
// background-color: yellow;
width: 100%;
// height: 100% !important;
aspect-ratio: 1 / 1;
object-fit: cover !important;
}
}
.carouselGaleryThumbs {
// background-color: blue;
margin-top: 16px;
display: block;
.productImagesThumb {
width: 90px !important; // 13.5543% !important (em 1440px);
height: 100% !important;
margin-right: 16px;
margin-bottom: 0;
&:last-child {
margin-right: 0;
}
.figure {
width: 100%;
height: 100%;
.thumbImg {
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 8px;
object-fit: cover;
}
}
// @include mq(lg, max) {
// background-color: magenta;
// }
}
}

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

@ -14,18 +14,18 @@ $color-green: #4caf50;
/* Grid breakpoints */
$grid-breakpoints: (
xs: 0,
cstm: 400,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
xs: 0,
cstm: 400,
sm: 375px,
md: 640px, // 768px,
lg: 1025px,
xl: 1920px,
) !default;
$z-index: (
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25
level1: 5,
level2: 10,
level3: 15,
level4: 20,
level5: 25,
) !default;