Feat(Pdp): Adiciona fonte, cria descrição do produto e cria a base da prateleira de produtos

store/blocks/minicart.jsonc

@@ -9,7 +9,8 @@
     "props": {
       "addToCartFeedback": "customEvent",
       "customPixelEventId": "add-to-cart-button",
-      "text": "Adicionar à sacola"
+      "text": "Adicionar à sacola",
+      "blockClass": "addSacola"
     }
   },
 

store/blocks/pdp/product.jsonc

@@ -3,14 +3,15 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      // "flex-layout.row#description",
+      "tab-layout#descriptionLayout",
-      "tab-layout#AA323",
       // "flex-layout.row#specifications-title",
       // "product-specification-group#table",
-      "shelf.relatedProducts",
+      // "shelf.relatedProducts",
+      "list-context.product-list#demo1",
       "product-questions-and-answers"
     ]
   },
+
   "html#breadcrumb": {
     "props": {
       "tag": "section",
@@ -27,12 +28,72 @@
       "text": "##### Product Specifications"
     }
   },
-  "flex-layout.row#description": {
+
+  "product-summary.shelf#demo1": {
+    "children": [
+      "product-summary-name",
+      "product-summary-description",
+      "product-summary-image",
+      "product-summary-price",
+      "product-summary-sku-selector",
+      "product-summary-buy-button"
+    ]
+  },
+
+  "slider-layout#demo-products": {
     "props": {
-      "marginBottom": 7
+      "itemsPerPage": {
+        "desktop": 3,
+        "tablet": 1,
+        "phone": 1
       },
-    "children": ["product-description"]
+      "infinite": true,
+      "showNavigationArrows": "desktopOnly",
+      "blockClass": "carousel"
+    }
+    // "children": ["rich-text#1AA", "rich-text#2AA", "rich-text#3AA"]
   },
+
+  // "rich-text#1AA": {
+  //   "props": {
+  //     "text": "ADADADAD"
+  //   }
+  // },
+  // "rich-text#2AA": {
+  //   "props": {
+  //     "text": "FGFGFGFG"
+  //   }
+  // },
+  // "rich-text#3AA": {
+  //   "props": {
+  //     "text": "GHGHGHGHHGH"
+  //   }
+  // },
+
+  "list-context.product-list#demo1": {
+    "blocks": ["product-summary.shelf#demo1"],
+    "children": ["slider-layout#demo-products"]
+  },
+  
+  "flex-layout.col#description": {
+    "props": {
+      "preventVerticalStretch": true
+    },
+    "children": ["product-description#1", "product-description#2"]
+  },
+
+  "product-description#1": {
+    "props": {
+      "blockClass": "descriptioncontent1"
+    }
+  },
+  "product-description#2": {
+    "props": {
+      "blockClass": "descriptioncontent2",
+      "showTitle": false
+    }
+  },
+
   "condition-layout.product#availability": {
     "props": {
       "conditions": [
@@ -58,22 +119,10 @@
   },
   "flex-layout.row#descriptionRow": {
     "props": {
-      // "colGap": 7,
+      "blockClass": "descriptionRow",
-      // "rowGap": 7,
+      "colGap": 7
-      // "marginTop": 4,
-      // "marginBottom": 7,
-      // "paddingTop": 7,
-      // "paddingBottom": 7,
-      "blockClass": "descriptionRow"
     },
-    "children": ["image#example111", "flex-layout.row#description"]
+    "children": ["product-images#descriptionImg", "flex-layout.col#description"]
-  },
-
-  "image#example111": {
-    "props": {
-      "src": "https://storecomponents.vteximg.com.br/arquivos/box.png",
-      "maxHeight": 100
-    }
   },
 
   "stack-layout": {
@@ -102,47 +151,86 @@
     }
   },
 
-  "tab-layout#AA323": {
+  "tab-layout#descriptionLayout": {
+    "props": {
+      "blockClass": "descriptionLayout"
+    },
     "children": [
-      "tab-list#AA555",
+      "tab-list#descriptionButtonWrapper",
-      "tab-content#AA555"
+      "tab-content#descriptionContentWrapper"
     ]
   },
 
-  "tab-list#AA555": {
+  "tab-list#descriptionButtonWrapper": {
+    "props": {
+      "blockClass": "descriptionButtonWrapper"
+    },
     "children": [
       "tab-list.item#1",
-      "tab-list.item#2"
+      "tab-list.item#2",
+      "tab-list.item#3",
+      "tab-list.item#4",
+      "tab-list.item#5"
       ]
   },
 
-  "tab-content#AA555": {
+  "tab-content#descriptionContentWrapper": {
+    "props": {
+      "blockClass": "descriptionContentWrapper"
+    },
     "children": [
       "tab-content.item#1",
-      "tab-content.item#2"
+      "tab-content.item#2",
+      "tab-content.item#3",
+      "tab-content.item#4",
+      "tab-content.item#5"
       ]
   },
 
   "tab-list.item#1": {
     "props": {
-      "tabId": "majorAppliances",
+      "tabId": "description1",
-      "label": "Major Appliances",
+      "label": "Descrição",
+      "blockClass": "descriptionButton",
       "defaultActiveTab": true
     }
   },
   "tab-list.item#2": {
     "props": {
-      "tabId": "electronics",
+      "tabId": "description2",
-      "label": "Electronics"
+      "blockClass": "descriptionButton",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#3": {
+    "props": {
+      "tabId": "description3",
+      "blockClass": "descriptionButton",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#4": {
+    "props": {
+      "tabId": "description4",
+      "blockClass": "descriptionButton",
+      "label": "Descrição"
+    }
+  },
+  "tab-list.item#5": {
+    "props": {
+      "tabId": "description5",
+      "blockClass": "descriptionButton",
+      "label": "Descrição"
     }
   },
 
   "tab-content.item#1": {
     "children": [
-      "rich-text#1"
+      "flex-layout.row#descriptionRow"
     ],
     "props": {
-      "tabId": "majorAppliances"
+      "tabId": "description1",
+      "blockClass": "descriptionContent"
     }
   },
   "tab-content.item#2": {
@@ -150,22 +238,43 @@
       "flex-layout.row#descriptionRow"
     ],
     "props": {
-      "tabId": "electronics"
+      "tabId": "description2",
+      "blockClass": "descriptionContent"
     }
   },
-
+  "tab-content.item#3": {
-  "rich-text#1": {
+    "children": [
+      "flex-layout.row#descriptionRow"
+    ],
     "props": {
-      "text": "Texto para Major Appliances",
+      "tabId": "description3",
-      "textPosition": "CENTER",
+      "blockClass": "descriptionContent"
-      "font": "t-heading-3"
     }
   },
-  "rich-text#2": {
+  "tab-content.item#4": {
+    "children": [
+      "flex-layout.row#descriptionRow"
+    ],
     "props": {
-      "text": "Texto para Electronics",
+      "tabId": "description4",
-      "textPosition": "CENTER",
+      "blockClass": "descriptionContent"
-      "font": "t-heading-3"
+    }
+  },
+  "tab-content.item#5": {
+    "children": [
+      "flex-layout.row#descriptionRow"
+    ],
+    "props": {
+      "tabId": "description5",
+      "blockClass": "descriptionContent"
+    }
+  },
+  "product-images#descriptionImg": {
+    "props": {
+      "displayMode": "first-image",
+      "maxHeight": 632,
+      "blockClass": "descriptionImg",
+      "width": "49%"
     }
   },
 
@@ -186,9 +295,9 @@
     }
   },
   "flex-layout.row#product-image": {
-    "children": ["product-images"]
+    "children": ["product-images#imgsMain"]
   },
-  "product-images": {
+  "product-images#imgsMain": {
     "props": {
       "aspectRatio": {
         "desktop": "auto",
@@ -198,6 +307,7 @@
       "showPaginationDots": false,
       "thumbnailsOrientation": "horizontal",
       "thumbnailMaxHeight": 90,
+      "blockClass": "ImgsMain",
       "maxHeight": 664
     }
   },

styles/configs/font-faces.css

@@ -0,0 +1,31 @@
+@font-face {
+    font-family: "Open Sans";
+    src: url(assets/fonts/OpenSans-Light.ttf);
+    font-weight: 300;
+}
+@font-face {
+    font-family: "Open Sans";
+    src: url(assets/fonts/OpenSans-Regular.ttf);
+    font-weight: 400;
+}
+@font-face {
+    font-family: "Open Sans";
+    src: url(assets/fonts/OpenSans-Medium.ttf);
+    font-weight: 500;
+}
+
+@font-face {
+    font-family: "Open Sans";
+    src: url(assets/fonts/OpenSans-SemiBold.ttf);
+    font-weight: 600;
+}
+@font-face {
+    font-family: "Open Sans";
+    src: url(assets/fonts/OpenSans-Bold.ttf);
+    font-weight: 700;
+}
+@font-face {
+    font-family: "Open Sans";
+    src: url(assets/fonts/OpenSans-ExtraBold.ttf);
+    font-weight: 800;
+}

styles/configs/style.json

@@ -253,84 +253,84 @@
         "measure": [30, 34, 20],
         "styles": {
           "heading-1": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "700",
             "fontSize": "3rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-2": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "700",
             "fontSize": "2.25rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-3": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "700",
             "fontSize": "1.75rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-4": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "normal",
             "fontSize": "1.5rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-5": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "normal",
             "fontSize": "1.25rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "heading-6": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "normal",
             "fontSize": "1.25rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "body": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "normal",
             "fontSize": "1rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "normal",
             "fontSize": "0.875rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "mini": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "normal",
             "fontSize": "0.75rem",
             "textTransform": "initial",
             "letterSpacing": "0"
           },
           "action": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "500",
             "fontSize": "1rem",
             "textTransform": "uppercase",
             "letterSpacing": "0"
           },
           "action--small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "500",
             "fontSize": "0.875rem",
             "textTransform": "uppercase",
             "letterSpacing": "0"
           },
           "action--large": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+            "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
             "fontWeight": "500",
             "fontSize": "1.25rem",
             "textTransform": "uppercase",

styles/css/vtex.flex-layout.css

@@ -21,3 +21,14 @@
   margin: 0;
   height: 49px;
 }
+.flexRow--buyButton .flexRowContent--buyButton :global(.vtex-button) {
+  background-color: #292929;
+  color: #fff;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  border: none;
+  border-radius: 0;
+  height: 48px;
+}

styles/css/vtex.store-components.css

@@ -11,7 +11,7 @@
   background: red;
 }
 
-.productImageTag--main {
+.productImageTag--ImgsMain--main {
   object-fit: unset !important;
 }
 
@@ -53,6 +53,7 @@
   left: 150px;
   align-items: center;
   padding-top: 16.1px;
+  text-decoration: underline;
 }
 .shippingContainer :global(.vtex__icon-external-link) {
   display: none;
@@ -64,7 +65,7 @@
   position: relative;
   right: 129px;
   margin-top: 24px;
-  background-color: black;
+  background-color: #292929;
   font-size: 0;
   border: none;
   border-radius: 0;
@@ -74,5 +75,25 @@
   font-weight: 600;
   font-size: 14px;
   line-height: 19px;
-  color: white;
+  color: #fff;
+}
+
+.productDescriptionContainer--descriptioncontent1 {
+  margin-bottom: 16px;
+}
+
+.productDescriptionTitle--descriptioncontent1 {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  margin-bottom: 8px;
+}
+
+.content--descriptioncontent1,
+.content--descriptioncontent2 {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
 }

styles/css/vtex.tab-layout.css

@@ -0,0 +1,51 @@
+/*
+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 */
+.container--descriptionLayout {
+  margin: 0 40px;
+}
+.container--descriptionLayout .listContainer--descriptionButtonWrapper {
+  justify-content: space-between;
+  border-bottom: 1px solid #B9B9B9;
+  padding: 0 64px;
+  margin-bottom: 32px;
+}
+.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton {
+  margin: 0;
+  padding: 0;
+}
+.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button) {
+  color: #bfbfbf;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+}
+.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItem--descriptionButton :global(.vtex-button__label) {
+  padding: 0 16px !important;
+  text-transform: capitalize;
+}
+.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton {
+  margin-top: 2px;
+}
+.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button) {
+  background-color: #fff;
+  color: #292929;
+  border: 0;
+  border-bottom: 2px solid #292929;
+  border-radius: 0;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+}
+.container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button__label) {
+  padding: 0 16px !important;
+  text-transform: capitalize;
+}

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

@@ -10,6 +10,18 @@
     .flexRowContent--buyButton{
         margin: 0;
         height: 49px;
+
+        :global(.vtex-button){
+            background-color: $color-black;
+            color: $color-white;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 18px;
+            line-height: 25px;
+            border: none;
+            border-radius: 0;
+            height: 48px;
+        }
     }
     
 }

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

@@ -2,7 +2,7 @@
     background: red;
 }
 
-.productImageTag--main{
+.productImageTag--ImgsMain--main{
     object-fit: unset !important;
 }
 
@@ -35,7 +35,7 @@
     }
     :global(.vtex-input-prefix__group){
         height: 49px;
-        border: 1px solid #CCCCCC;
+        border: 1px solid $color-gray7;
         border-radius: 0;
     }
     :global(.vtex-address-form__postalCode-forgottenURL){
@@ -44,6 +44,7 @@
         left: 150px;
         align-items: center;
         padding-top: 16.1px;
+        text-decoration: underline;
 
     }
     :global(.vtex__icon-external-link){
@@ -57,7 +58,7 @@
         position: relative;
         right: 129px;
         margin-top: 24px;
-        background-color: black;
+        background-color: $color-black;
         font-size: 0;
         border: none;
         border-radius: 0;
@@ -67,7 +68,26 @@
             font-weight: 600;
             font-size: 14px;
             line-height: 19px;
-            color: white;
+            color: $color-white;
         }
     }
 }
+
+.productDescriptionContainer--descriptioncontent1{
+    margin-bottom: 16px;
+}
+.productDescriptionTitle--descriptioncontent1{
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 32px;
+    margin-bottom: 8px;
+}
+
+.content--descriptioncontent1,
+.content--descriptioncontent2{
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+}

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

@@ -0,0 +1,44 @@
+.container--descriptionLayout{
+    margin: 0 40px;
+
+    .listContainer--descriptionButtonWrapper{
+        justify-content: space-between;
+        border-bottom: 1px solid $color-gray6;
+        padding: 0 64px;
+        margin-bottom: 32px;
+
+        .listItem--descriptionButton{
+            margin: 0;
+            padding: 0;
+            :global(.vtex-button){
+                color: $color-gray8;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 18px;
+                line-height: 38px;
+            }
+            :global(.vtex-button__label){
+                padding: 0 16px !important;
+                text-transform: capitalize;
+            }
+        }
+        .listItemActive--descriptionButton{
+            margin-top: 2px;
+            :global(.vtex-button){
+                background-color: $color-white;
+                color: $color-black;
+                border: 0;
+                border-bottom: 2px solid $color-black;
+                border-radius: 0;
+                font-style: normal;
+                font-weight: 400;
+                font-size: 18px;
+                line-height: 38px;
+            }
+            :global(.vtex-button__label){
+                padding: 0 16px !important;
+                text-transform: capitalize;
+            }
+        }
+    }
+}

styles/sass/utils/_vars.scss

@@ -7,6 +7,9 @@ $color-gray2: #7d7d7d;
 $color-gray3: #f0f0f0;
 $color-gray4: #c4c4c4;
 $color-gray5: #e5e5e5;
+$color-gray6: #B9B9B9;
+$color-gray7: #CCCCCC;
+$color-gray8: #bfbfbf;
 
 $color-blue: #4267b2;