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

store/blocks/pdp/product-specifications-table.jsonc

@@ -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": [
+  "tab-list.item#specification-1": {
-      "flex-layout.row#spec-group-name",
-      "product-specification"
-    ]
-  },
-  "flex-layout.row#spec-group-name": {
     "props": {
-      "blockClass": "productSpecificationGroupName"
+      "tabId": "descriptionSpecificationsId",
-    },
+      "label": "Descrição",
-    "children": [
+      "defaultActiveTab": true
-      "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%"
     }
   },
-    "children": [
+  "tab-list.item#specification-2": {
-      "product-specification-text#specification"
-    ]
-  },
-  "flex-layout.col#spec-value": {
     "props": {
-      "blockClass": "productSpecificationValue"
+      "tabId": "productTableSpecificationsId",
-    },
+      "label": "Especificações"
-    "children": [
-      "product-specification-values"
-    ]
-  },
-  "product-specification-values": {
-    "children": [
-      "product-specification-text#value"
-    ]
-  },
-  "product-specification-text#group": {
-    "props": {
-      "message": "{groupName}"
     }
   },
-  "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"
     }
   }
 }

store/blocks/pdp/product.jsonc

@@ -3,14 +3,38 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "flex-layout.row#description",
+      "tab-layout#product-specification",
-      "flex-layout.row#specifications-title",
+      "shelf.relatedProducts#pdp-shelf-related",
-      "product-specification-group#table",
-      "shelf.relatedProducts",
       "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": {

store/blocks/product-summary/product-summary.jsonc

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

styles/configs/style.json

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

styles/css/vtex.flex-layout.css

@@ -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;
+}

styles/css/vtex.product-summary.css

@@ -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;
+  color: #2e2e2e;
-  font-size: 18px;
-  color: #2E2E2E;
 }
 
 .container {
-  text-align: start;
+  text-align: center;
+}
+
+.priceContainer {
+  padding-top: 0;
 }
 
 .imageContainer {

styles/css/vtex.shelf.css

@@ -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;
+}

styles/css/vtex.store-components.css

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

styles/css/vtex.tab-layout.css

@@ -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;
+}

styles/sass/pages/product/vtex.flex-layout.scss

@@ -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;
+}

styles/sass/pages/product/vtex.product-summary.scss

@@ -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;
+}

styles/sass/pages/product/vtex.shelf.scss

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

styles/sass/pages/product/vtex.store-components.scss

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

styles/sass/pages/product/vtex.tab-layout.scss

@@ -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;
+    }
+  }
+}