HenriqueSantosSantana/challenge-vtex-io-henrique-santos-santana
1
0
Fork 0
forked from M3-Academy/challenge-vtex-io
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(pdp/shelf/tab-layout): created initial blocks and styles for medium, small devices

Browse Source
This commit is contained in:
Henrique Santos Santana 2023-01-27 16:32:01 -03:00
parent 6575d114fd
commit 07e782dee6
15 changed files with 384 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

185
store/blocks/pdp/product-specifications-table.jsonc
View File

@ -1,83 +1,146 @@
{
"product-specification-group#table": {
"tab-layout#product-specification": {
"children": [
"flex-layout.row#spec-group"
"tab-list#product-specification",
"tab-content#product-specification"
]
},
"flex-layout.row#spec-group": {
"tab-list#product-specification": {
"props": {
"blockClass": "productSpecificationGroup"
"blockClass": "ProductSpecificationTabList"
},
"children": [
"flex-layout.col#spec-group"
"tab-list.item#specification-1",
"tab-list.item#specification-2",
"tab-list.item#specification-3",
"tab-list.item#specification-4"
]
},
"flex-layout.col#spec-group": {
"children": [
"flex-layout.row#spec-group-name",
"product-specification"
]
},
"flex-layout.row#spec-group-name": {
"tab-list.item#specification-1": {
"props": {
"blockClass": "productSpecificationGroupName"
},
"children": [
"product-specification-text#group"
]
},
"product-specification": {
"children": [
"flex-layout.row#spec-item"
]
},
"flex-layout.row#spec-item": {
"props": {
"blockClass": "productSpecification"
},
"children": [
"flex-layout.col#spec-name",
"flex-layout.col#spec-value"
]
},
"flex-layout.col#spec-name": {
"props": {
"blockClass": "productSpecificationName",
"width": {
"mobile": "50%",
"desktop": "25%"
"tabId": "descriptionSpecificationsId",
"label": "Descrição",
"defaultActiveTab": true
}
},
"children": [
"product-specification-text#specification"
]
},
"flex-layout.col#spec-value": {
"tab-list.item#specification-2": {
"props": {
"blockClass": "productSpecificationValue"
},
"children": [
"product-specification-values"
]
},
"product-specification-values": {
"children": [
"product-specification-text#value"
]
},
"product-specification-text#group": {
"props": {
"message": "{groupName}"
"tabId": "productTableSpecificationsId",
"label": "Especificações"
}
},
"product-specification-text#specification": {
"tab-list.item#specification-3": {
"props": {
"message": "{specificationName}"
"tabId": "productVendorId",
"label": "Vendedor"
}
},
"product-specification-text#value": {
"tab-list.item#specification-4": {
"props": {
"message": "{specificationValue}"
"tabId": "productLocationId",
"label": "Localização"
}
},
"tab-content#product-specification": {
"children": [
"tab-content.item#specification-1",
"tab-content.item#specification-2",
"tab-content.item#specification-3",
"tab-content.item#specification-4"
]
},
"tab-content.item#specification-1": {
"children": ["flex-layout.row#product-specification-1"],
"props": {
"tabId": "descriptionSpecificationsId"
}
},
"tab-content.item#specification-2": {
"children": ["flex-layout.row#product-specification-2"],
"props": {
"tabId": "productTableSpecificationsId"
}
},
"tab-content.item#specification-3": {
"children": ["flex-layout.row#product-specification-1"],
"props": {
"tabId": "productVendorId"
}
},
"tab-content.item#specification-4": {
"children": ["flex-layout.row#product-specification-2"],
"props": {
"tabId": "productLocationId"
}
},
"flex-layout.row#product-specification-1": {
"props": {
"blockClass": "productSpecificationItemContainer",
"colGap": 7,
"marginTop": 7,
"rowGap": 5
},
"children": [
"product-images#product-specification",
"flex-layout.row#description-1"
]
},
"flex-layout.row#product-specification-2": {
"props": {
"blockClass": "productSpecificationItemContainer",
"colGap": 7,
"marginTop": 7,
"rowGap": 5
},
"children": [
"product-images#product-specification",
"flex-layout.row#description-2"
]
},
"product-images#product-specification": {
"props": {
"aspectRatio": "1:1",
"displayMode": "first-image"
}
},
"flex-layout.row#description-1": {
"props": {
"marginBottom": 7
},
"children": ["product-description#product-specification-1"]
},
"flex-layout.row#description-2": {
"props": {
"marginBottom": 7
},
"children": ["product-description#product-specification-2"]
},
"product-description#product-specification-1": {
"props": {
"collapseContent": false
}
},
"product-description#product-specification-2": {
"props": {
"collapseContent": false,
"title": "Descrição"
}
}
}

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

@ -3,14 +3,38 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
"flex-layout.row#description",
"flex-layout.row#specifications-title",
"product-specification-group#table",
"shelf.relatedProducts",
"tab-layout#product-specification",
"shelf.relatedProducts#pdp-shelf-related",
"newsletter",
"product-questions-and-answers"
]
},
"shelf.relatedProducts#pdp-shelf-related": {
"blocks": ["product-summary.shelf#pdp-shelf-related"],
"props": {
"productList": {
"titleText": "Você também pode gostar:"
}
}
},
"product-summary.shelf#pdp-shelf-related": {
"children": [
"product-summary-image",
"product-summary-name",
"product-summary-price"
]
},
"product-summary-price": {},
"product-summary-image": {
"props": {
"showBadge": false,
"aspectRatio": "1:1"
}
},
"html#breadcrumb": {
"props": {
"tag": "section",
@ -77,20 +101,6 @@
]
},
"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": [
@ -139,6 +149,13 @@
]
},
"product-installments": {
"props": {
"markers": ["discount"],
"message": "{installmentsNumber}x {installmentValue}{hasInterest, select, true { {interestRate} de juros} false { sem juros}}"
}
},
"flex-layout.row#product-name": {
"props": {
"marginBottom": 5,
@ -178,9 +195,24 @@
"flex-layout.row#buy-button": {
"props": {
"marginTop": 4,
"marginBottom": 7
"marginBottom": 7,
"blockClass": "productAddToCart"
},
"children": ["add-to-cart-button"]
"children": ["html#add-to-cart-button"]
},
"html#add-to-cart-button": {
"props": {
"testId": "add-to-cart-button"
},
"children": ["add-to-cart-button#pdp-add-to-cart-button"]
},
"add-to-cart-button#pdp-add-to-cart-button": {
"props": {
"text": "Adicionar à sacola",
"blockClass": "productAddToCartButton"
}
},
"flex-layout.row#product-availability": {

22
store/blocks/product-summary/product-summary.jsonc
View File

@ -1,14 +1,11 @@
{
"product-summary.shelf": {
"product-summary.shelf#pdp-product-summary": {
"children": [
"stack-layout#prodsum",
"product-summary-name",
"flex-layout.col#productRating",
"product-summary-space",
"product-list-price#summary",
"flex-layout.row#selling-price-savings",
"product-installments#summary",
"add-to-cart-button"
"product-installments#summary"
]
},
"flex-layout.col#productRating": {
@ -19,11 +16,7 @@
},
"stack-layout#prodsum": {
"children": [
"product-summary-image#shelf",
"vtex.product-highlights@2.x:product-highlights#collection",
"modal-trigger#quickview" // Check quickview.jsonc
]
"children": ["product-summary-image#shelf"]
},
"product-summary-image#shelf": {
@ -64,10 +57,7 @@
"preventHorizontalStretch": true,
"marginBottom": 4
},
"children": [
"product-selling-price#summary",
"product-price-savings#summary"
]
"children": ["product-selling-price#summary"]
},
"product-installments#summary": {
"props": {
@ -81,9 +71,7 @@
},
"product-price-savings#summary": {
"props": {
"markers": [
"discount"
],
"markers": ["discount"],
"blockClass": "summary"
}
}

4
styles/configs/style.json
View File

@ -270,8 +270,8 @@
},
"heading-3": {
"fontFamily": "Open Sans, arial, sans-serif",
"fontWeight": "700",
"fontSize": "1.75rem",
"fontWeight": "400",
"fontSize": "0.875rem",
"textTransform": "initial",
"letterSpacing": "0"
},

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

@ -120,3 +120,28 @@
align-items: flex-end;
}
}
.flexRowContent--productAddToCart :global(.vtex-button) {
height: 72px;
line-height: 24.51px;
}
@media screen and (min-width: 1025px) {
.flexRowContent--productAddToCart :global(.vtex-button) {
height: 49px;
}
}
.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-button__label) {
justify-content: stretch;
padding: 12px 64px;
}
.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
flex-grow: 1;
width: 100%;
}
.flexRowContent--productAddToCart :global(.vtex-button) :global(.vtex-add-to-cart-button-0-x-buttonText) {
width: 99%;
}
.flexRow--productSpecificationItemContainer {
padding: 0 40px;
}

24
styles/css/vtex.product-summary.css
View File

@ -1,4 +1,14 @@
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
/*
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 */
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround,
.skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
border-radius: 50%;
}
@ -16,21 +26,21 @@
display: none;
}
}
.nameContainer {
justify-content: start;
padding-top: 1rem;
padding-bottom: 1rem;
}
.brandName {
font-weight: 600;
font-size: 18px;
color: #2E2E2E;
color: #2e2e2e;
}
.container {
text-align: start;
text-align: center;
}
.priceContainer {
padding-top: 0;
}
.imageContainer {

16
styles/css/vtex.shelf.css Normal file
View File

@ -0,0 +1,16 @@
/*
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 */
.relatedProducts {
padding: 0 40px;
}
.shelfContentContainer :global(.vtex-slider-0-x-sliderFrame) {
gap: 12px;
}

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

@ -25,6 +25,9 @@
margin-left: 16px;
margin-bottom: 0;
}
.productImagesThumb .thumbImg {
border-radius: 8px;
}
.productImagesThumb:first-child {
margin-left: 0;
}

26
styles/css/vtex.tab-layout.css Normal file
View File

@ -0,0 +1,26 @@
/*
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 */
@media screen and (max-width: 1024px) {
.listContainer--ProductSpecificationTabList {
width: 100%;
padding: 0 40px;
flex-direction: column;
flex-wrap: nowrap;
}
.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) {
width: 100%;
}
.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) :global(.vtex-button__label) {
justify-content: start;
}
}
.listContainer--ProductSpecificationTabList .listItem :global(.vtex-button) {
text-transform: capitalize !important;
}

0
styles/sass/pages/product/vtex-product-quantity.scss Normal file
View File

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

@ -115,3 +115,32 @@
align-items: flex-end;
}
}
.flexRowContent--productAddToCart {
:global(.vtex-button) {
height: 72px;
line-height: 24.51px;
@media screen and (min-width: 1025px) {
height: 49px;
}
:global(.vtex-button__label) {
justify-content: stretch;
padding: 12px 64px;
}
:global(.vtex-add-to-cart-button-0-x-buttonDataContainer) {
flex-grow: 1;
width: 100%;
}
:global(.vtex-add-to-cart-button-0-x-buttonText) {
width: 99%;
}
}
}
.flexRow--productSpecificationItemContainer {
padding: 0 40px;
}

44
styles/sass/pages/product/vtex.product-summary.scss Normal file
View File

@ -0,0 +1,44 @@
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround,
.skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
border-radius: 50%;
}
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
opacity: 0;
transition: opacity 200ms ease-in-out;
}
.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
opacity: 1;
}
@media screen and (max-width: 40em) {
.container :global(.vtex-modal-layout-0-x-triggerContainer) {
display: none;
}
}
.nameContainer {
padding-top: 1rem;
padding-bottom: 1rem;
}
.brandName {
color: #2e2e2e;
}
.container {
text-align: center;
}
.priceContainer {
padding-top: 0;
}
.imageContainer {
text-align: center;
}
.image {
border-radius: 0.25rem;
}

9
styles/sass/pages/product/vtex.shelf.scss Normal file
View File

@ -0,0 +1,9 @@
.relatedProducts {
padding: 0 40px;
}
.shelfContentContainer {
:global(.vtex-slider-0-x-sliderFrame) {
gap: 12px;
}
}

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

@ -16,6 +16,10 @@
margin-left: 16px;
margin-bottom: 0;
.thumbImg {
border-radius: 8px;
}
&:first-child {
margin-left: 0;
}

24
styles/sass/pages/product/vtex.tab-layout.scss Normal file
View File

@ -0,0 +1,24 @@
.listContainer--ProductSpecificationTabList {
@media screen and (max-width: 1024px) {
width: 100%;
padding: 0 40px;
flex-direction: column;
flex-wrap: nowrap;
.listItem {
:global(.vtex-button) {
width: 100%;
:global(.vtex-button__label) {
justify-content: start;
}
}
}
}
.listItem {
:global(.vtex-button) {
text-transform: capitalize !important;
}
}
}