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

fix: Ajusta imagens do produto desktop mobile

Browse Source
This commit is contained in:
Saulo Klein Nery 2023-02-10 14:21:19 -03:00
parent 5f536d3bcb
commit 78050fe264
7 changed files with 46 additions and 549 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
store/blocks/footer/footer.json
View File

@ -1,127 +0,0 @@
{
"footer": {
"blocks": [
"footer-layout.desktop",
"footer-layout.mobile"
]
},
"footer-layout.desktop": {
"children": [
"flex-layout.row#footer-1-desktop",
"flex-layout.row#footer-2-desktop",
"flex-layout.row#footer-3-desktop"
]
},
"flex-layout.row#footer-1-desktop": {
"children": [
"vtex.menu@2.x:menu#Products",
"vtex.menu@2.x:menu#footer-clothing",
"vtex.menu@2.x:menu#footer-decoration",
"vtex.menu@2.x:menu#footer-bags",
"footer-spacer",
"social-networks"
],
"props": {
"blockClass": "menu-row",
"paddingTop": 6,
"paddingBottom": 3
}
},
"social-networks": {
"props": {
"socialNetworks": [
{
"name": "Facebook",
"url": "https://www.facebook.com/vtexonline/"
},
{
"name": "Instagram",
"url": "https://www.instagram.com/vtextruecloud/"
},
{
"name": "Twitter",
"url": "https://twitter.com/vtexonline"
},
{
"name": "Youtube",
"url": "https://www.youtube.com/user/VTEXTV"
}
]
}
},
"flex-layout.row#footer-2-desktop": {
"children": [
"accepted-payment-methods"
],
"props": {
"blockClass": "payment-methods"
}
},
"accepted-payment-methods": {
"props": {
"paymentMethods": [
"MasterCard",
"Visa",
"Diners Club"
]
}
},
"flex-layout.row#footer-3-desktop": {
"children": [
"rich-text#footer"
],
"props": {
"blockClass": "credits"
}
},
"rich-text#footer": {
"props": {
"text": "All stock and product photos are from photos.icons8.com",
"blockClass": "footer"
}
},
"footer-layout.mobile": {
"children": [
"flex-layout.row#1-footer-mobile",
"flex-layout.row#2-footer-mobile"
]
},
"flex-layout.row#2-footer-mobile": {
"children": [
"flex-layout.col#footer-1-mobile"
],
"props": {
"blockClass": "payment-methods",
"paddingTop": 4,
"paddingBottom": 4
}
},
"flex-layout.col#footer-1-mobile": {
"children": [
"accepted-payment-methods",
"social-networks",
"rich-text#footer-mobile"
],
"props": {
"blockClass": "payment-methods",
"paddingTop": 4,
"paddingBottom": 4,
"rowGap": 4
}
},
"flex-layout.row#1-footer-mobile": {
"props": {
"paddingTop": 4,
"paddingBottom": 4
},
"children": [
"vtex.menu@2.x:menu#footer-mobile"
]
},
"rich-text#footer-mobile": {
"props": {
"text": "All stock and product photos are from photos.icons8.com",
"blockClass": "footer"
}
}
}

393
store/blocks/footer/menu.json
View File

@ -1,393 +0,0 @@
{
"vtex.menu@2.x:menu#Products": {
"props": {
"orientation": "vertical"
},
"children": [
"menu-item#news",
"menu-item#blackfriday",
"menu-item#sale",
"menu-item#personalization"
]
},
"menu-item#news": {
"props": {
"id": "menu-item-news",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "#",
"noFollow": false,
"tagTitle": "News",
"text": "News"
}
}
},
"menu-item#blackfriday": {
"props": {
"id": "menu-item-black-friday",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "#",
"noFollow": false,
"tagTitle": "BlackFriday",
"text": "Black Friday"
}
}
},
"menu-item#sale": {
"props": {
"id": "menu-item-sale",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "#",
"noFollow": false,
"tagTitle": "Sale",
"text": "Sale"
}
}
},
"menu-item#personalization": {
"props": {
"id": "menu-item-personalization",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "#",
"noFollow": false,
"tagTitle": "Personalization",
"text": "Personalization"
}
}
},
"vtex.menu@2.x:menu#footer-decoration": {
"props": {
"orientation": "vertical"
},
"children": [
"menu-item#smartphones",
"menu-item#videogames",
"menu-item#tvs"
]
},
"menu-item#smartphones": {
"props": {
"id": "menu-item-smartphones",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "/decoration/smartphones",
"noFollow": true,
"tagTitle": "Smartphones",
"text": "Smartphones"
}
}
},
"menu-item#videogames": {
"props": {
"id": "menu-item-videogames",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "/decoration/videogames",
"noFollow": true,
"tagTitle": "Videogames",
"text": "Videogames"
}
}
},
"menu-item#tvs": {
"props": {
"id": "menu-item-tvs",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "/decoration/tvs",
"noFollow": true,
"tagTitle": "TVs",
"text": "TVs"
}
}
},
"vtex.menu@2.x:menu#footer-bags": {
"props": {
"orientation": "vertical"
},
"children": [
"menu-item#bags",
"menu-item#backpacks",
"menu-item#necessaire"
]
},
"menu-item#bags": {
"props": {
"id": "menu-item-bags",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "/bags/d",
"noFollow": true,
"tagTitle": "Bags",
"text": "Bags"
}
}
},
"menu-item#backpacks": {
"props": {
"id": "menu-item-backpacks",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "/bags/backpacks",
"noFollow": true,
"tagTitle": "Backpacks",
"text": "Backpacks"
}
}
},
"menu-item#necessaire": {
"props": {
"id": "menu-item-necessaire",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "/bags/necessaire",
"noFollow": true,
"tagTitle": "Necessaire",
"text": "Necessaire"
}
}
},
"vtex.menu@2.x:menu#footer-clothing": {
"props": {
"orientation": "vertical"
},
"children": [
"menu-item#clothing",
"menu-item#shorts",
"menu-item#tank-tops",
"menu-item#shirts",
"menu-item#sweatshirt",
"menu-item#cropped"
]
},
"vtex.menu@2.x:menu#footer-mobile": {
"props": {
"orientation": "vertical"
},
"children": [
"menu-item#clothing-mobile",
"menu-item#decoration-mobile",
"menu-item#sale-mobile"
]
},
"menu-item#clothing-mobile": {
"props": {
"id": "menu-item-category-clothing",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "/clothing/d",
"noFollow": true,
"tagTitle": "Clothing",
"text": "Clothing"
}
},
"blocks": ["vtex.menu@2.x:submenu.accordion#clothing"]
},
"vtex.menu@2.x:submenu.accordion#clothing": {
"children": ["vtex.menu@2.x:menu#clothing-accordion"]
},
"vtex.menu@2.x:menu#clothing-accordion": {
"props": {
"orientation": "vertical"
},
"children": [
"menu-item#shorts",
"menu-item#tank-tops",
"menu-item#shirts",
"menu-item#sweatshirt",
"menu-item#cropped"
]
},
"menu-item#decoration-mobile": {
"props": {
"itemProps": {
"tagTitle": "Decoration",
"text": "Decoration"
}
},
"blocks": ["vtex.menu@2.x:submenu.accordion#decoration"]
},
"vtex.menu@2.x:submenu.accordion#decoration": {
"children": ["vtex.menu@2.x:menu#footer-decoration-mobile"]
},
"vtex.menu@2.x:menu#footer-decoration-mobile": {
"props": {
"orientation": "vertical"
},
"children": [
"menu-item#smartphones",
"menu-item#videogames",
"menu-item#tvs"
]
},
"menu-item#sale-mobile": {
"props": {
"itemProps": {
"tagTitle": "Sale",
"text": "Sale"
}
},
"blocks": ["vtex.menu@2.x:submenu.accordion#sale"]
},
"vtex.menu@2.x:submenu.accordion#sale": {
"children": ["vtex.menu@2.x:menu#footer-sale-mobile"]
},
"vtex.menu@2.x:menu#footer-sale-mobile": {
"props": {
"orientation": "vertical"
},
"children": [
"menu-item#smartphones",
"menu-item#videogames",
"menu-item#tvs"
]
},
"menu-item#clothing": {
"props": {
"id": "menu-item-category-clothing",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "/clothing/d",
"noFollow": true,
"tagTitle": "Clothing",
"text": "Clothing"
}
}
},
"menu-item#shorts": {
"props": {
"id": "menu-item-shorts",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "/clothing/shorts",
"noFollow": false,
"tagTitle": "Shorts",
"text": "Shorts"
}
}
},
"menu-item#tank-tops": {
"props": {
"id": "menu-item-tank-tops",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "/clothing/tank-tops",
"noFollow": false,
"tagTitle": "Tank tops",
"text": "Tank tops"
}
}
},
"menu-item#shirts": {
"props": {
"id": "menu-item-shirts",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "/clothing/shirts",
"noFollow": false,
"tagTitle": "Shirts",
"text": "Shirts"
}
}
},
"menu-item#sweatshirt": {
"props": {
"id": "menu-item-sweat-shirts",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "/clothing/sweatshirt",
"noFollow": false,
"tagTitle": "Sweatshirt",
"text": "Sweatshirt"
}
}
},
"menu-item#cropped": {
"props": {
"id": "menu-item-cropped",
"type": "custom",
"iconId": null,
"highlight": false,
"itemProps": {
"type": "internal",
"href": "/clothing/cropped",
"noFollow": false,
"tagTitle": "Cropped",
"text": "Cropped"
}
}
}
}

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

@ -115,7 +115,7 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
"width": "49%",
"width": "50%",
"rowGap": 0,
"blockClass": "productShowcase"
}
@ -131,7 +131,8 @@
"thumbnailsOrientation": "horizontal",
"displayThumbnailsArrows": true,
"showNavigationArrows": false,
"showPaginationDots": false
"showPaginationDots": false,
"contentType": "images"
}
},
@ -186,7 +187,8 @@
"sku-selector": {
"props": {
"variationsSpacing": 3,
"showValueNameForImageVariation": true
"showValueNameForImageVariation": true,
"hideImpossibleCombinations": false
}
},
@ -322,6 +324,12 @@
}
},
"product-description": {
"props": {
"collapseContent": false
}
},
"tab-content.item#1": {
"children": ["product-images#2", "product-description"],
"props": {

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

@ -14,6 +14,11 @@
padding-right: 32px;
}
}
@media only screen and (max-width: 1024px) {
.productDescriptionContainer {
border-bottom: 1px solid #b9b9b9;
}
}
.productDescriptionContainer .productDescriptionTitle {
font-weight: 400;
font-size: 24px;
@ -34,13 +39,14 @@
}
@media only screen and (max-width: 1024px) {
.productDescriptionContainer .productDescriptionText {
margin: 0 0 16px;
font-size: 14px;
line-height: 19px;
}
}
.productImageTag--productImage2--main {
max-height: auto !important;
max-height: none !important;
object-fit: fill !important;
}
@ -52,6 +58,7 @@
flex-direction: column-reverse;
}
.container .carouselContainer .carouselGaleryThumbs {
display: block !important;
position: static;
margin: 16px 0 0;
}
@ -78,18 +85,13 @@
}
.container .productImageTag--main {
object-fit: fill !important;
max-width: 664px;
min-height: 664px;
max-height: none !important;
}
@media only screen and (max-width: 1024px) {
.container .productImageTag--main {
min-height: 994px;
max-width: none;
}
}
@media only screen and (max-width: 767px) {
.container .productImageTag--main {
min-height: auto;
min-width: auto;
}
}
.container .productNameContainer {

24
styles/css/vtex.store-footer.css
View File

@ -1,11 +1,13 @@
.row--menu-row {
padding-right: 24px;
}
.row--menu-row .rowContainer {
align-items: flex-start;
}
.row--payment-methods {
padding-top: 16px;
}
/*
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 */
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
/* Grid breakpoints */
.poweredBy {
display: none;
}

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

@ -3,6 +3,10 @@
padding-right: 32px;
}
@include mq(lg, max) {
border-bottom: 1px solid $color-gray13;
}
.productDescriptionTitle {
font-weight: 400;
font-size: 24px;
@ -22,6 +26,7 @@
color: $color-gray6;
@include mq(lg, max) {
margin: 0 0 16px;
font-size: 14px;
line-height: 19px;
}
@ -29,7 +34,7 @@
}
.productImageTag--productImage2--main {
max-height: auto !important;
max-height: none !important;
object-fit: fill !important;
}
@ -42,6 +47,7 @@
flex-direction: column-reverse;
.carouselGaleryThumbs {
display: block !important;
position: static;
margin: 16px 0 0;
}
@ -74,16 +80,12 @@
.productImageTag--main {
object-fit: fill !important;
max-width: 664px;
min-height: 664px;
max-height: none !important;
@include mq(lg, max) {
min-height: 994px;
max-width: none;
}
@include mq(md, max) {
min-height: auto;
min-width: auto;
}
}

3
styles/sass/pages/product/vtex.store-footer.scss Normal file
View File

@ -0,0 +1,3 @@
.poweredBy {
display: none;
}