Feat(Pdp): Cria prateleira de produtos relacionados e cria o esboço do componente custom Pix

react/Pix.tsx

@@ -0,0 +1,3 @@
+import Pix from "./components/Pix/Pix";
+
+export default Pix;

react/components/Pix/Pix.tsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { useProduct } from 'vtex.product-context'
+
+const Pix = () => {
+  const product  = useProduct()
+  // console.log(product)
+  var pixValue = product?.product?.priceRange?.sellingPrice?.lowPrice;
+  return (
+    <div>{pixValue}</div>
+  )
+}
+
+export default Pix

store/blocks/pdp/product.jsonc

@@ -6,8 +6,8 @@
       "tab-layout#descriptionLayout",
       // "flex-layout.row#specifications-title",
       // "product-specification-group#table",
-      // "shelf.relatedProducts",
+      "rich-text#otherProductTitle",
-      "list-context.product-list#demo1",
+      "list-context.product-list#prateleira",
       "product-questions-and-answers"
     ]
   },
@@ -29,50 +29,67 @@
     }
   },
 
-  "product-summary.shelf#demo1": {
+  "rich-text#otherProductTitle": {
+    "props": {
+      "text": "### Você também pode gostar:",
+      "textAlignment": "CENTER",
+      "textPosition": "CENTER",
+      "blockClass": "otherProdcutTitle"
+    }
+  },
+
+  "product-summary.shelf#prateleira": {
+    "props": {
+      "blockClass": "prateleiraShelf"
+    },
     "children": [
-      "product-summary-name",
+      "product-summary-image#prateleiraImg",
-      "product-summary-description",
+      "product-summary-name#prateleira",
-      "product-summary-image",
+      "product-list-price#prateleira",
-      "product-summary-price",
+      "product-selling-price#prateleira"
-      "product-summary-sku-selector",
-      "product-summary-buy-button"
     ]
   },
 
-  "slider-layout#demo-products": {
+  "product-summary-image#prateleiraImg": {
+    "props": {
+      "blockClass": "prateleiraImg"
+    }
+  },
+
+  "product-summary-name#prateleira": {
+    "props": {
+      "blockClass": "prateleiraProductName"
+    }
+  },
+
+  "product-list-price#prateleira": {
+    "props": {
+      "blockClass": "prateleira"
+    }
+  },
+
+  "product-selling-price#prateleira": {
+    "props": {
+      "blockClass": "prateleira"
+    }
+  },
+
+  "slider-layout#prateleiraSlider": {
     "props": {
       "itemsPerPage": {
-        "desktop": 3,
+        "desktop": 4,
-        "tablet": 1,
+        "tablet": 3,
-        "phone": 1
+        "phone": 2
       },
       "infinite": true,
       "showNavigationArrows": "desktopOnly",
-      "blockClass": "carousel"
+      "blockClass": "prateleiraSlider"
     }
-    // "children": ["rich-text#1AA", "rich-text#2AA", "rich-text#3AA"]
   },
 
-  // "rich-text#1AA": {
+  "list-context.product-list#prateleira": {
-  //   "props": {
+    "blocks": ["product-summary.shelf#prateleira"],
-  //     "text": "ADADADAD"
+    "children": ["slider-layout#prateleiraSlider"]
-  //   }
-  // },
-  // "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": {
@@ -321,7 +338,9 @@
       "product-rating-summary",
       "product-identifier.product#identifierMain",
       "flex-layout.row#selling-price",
-      "product-installments",
+      "html#productInstallments",
+      "example-component",
+      "pix",
       "product-separator",
       "sku-selector#inverseOrder",
       "html#wrapperQuantity",
@@ -330,6 +349,13 @@
     ]
   },
 
+  "html#productInstallments": {
+    "props": {
+      "testId": "product-installments"
+    },
+   "children": ["product-installments"]
+  },
+
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3

store/interfaces.json

@@ -2,6 +2,11 @@
   "example-component": {
     "component": "Example"
   },
+
+  "pix": {
+    "component": "Pix"
+  },
+
   "html": {
     "component": "html",
     "composition": "children"

styles/css/vtex.flex-layout.css

@@ -22,7 +22,7 @@
   height: 49px;
 }
 .flexRow--buyButton .flexRowContent--buyButton :global(.vtex-button) {
-  background-color: #292929;
+  background-color: #000000;
   color: #fff;
   font-style: normal;
   font-weight: 400;

styles/css/vtex.product-price.css

@@ -1,79 +1,28 @@
-.listPrice {
+/*
-  color: #727273;
+0 - 600PX: Phone
-  margin-bottom: .25rem;
+600 - 900px: Table portrait
-  font-size: 1rem;
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.listPrice--prateleira {
+  padding: 0 16px 8px 16px;
+  margin: 0;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #bababa;
 }
 
-.sellingPrice {
+.sellingPrice--prateleira--hasListPrice {
-  color: #3f3f40;
+  padding: 0 16px;
-  font-size: 1.25rem;
+  font-family: "Open Sans";
-}
+  font-style: normal;
-
-.sellingPriceValue {
-  font-size: 2.25rem;
   font-weight: 700;
-}
+  font-size: 24px;
-
+  line-height: 33px;
-.installments {
+}
-  color: #727273;
-  margin-bottom: 1rem;
-}
-
-.savings {
-  font-weight: 500;
-  color: #79B03A;
-}
-
-.sellingPriceValue--summary {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2E2E2E;
-}
-
-.savings--summary {
-  background: #8BC34A;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-}
-
-.savings-discount--summary {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.listPrice--summary {
-  margin-bottom: 0.25rem;
-  font-size: .875rem;
-}
-
-.installments--summary {
-  margin-bottom: 2rem;
-  font-size: 0.875rem;
-}
-
-.savings--summaryPercentage {
-  background: #0f3e99;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-}
-
-.savingsPercentage--summaryPercentage {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #FFFFFF;
-  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
-}

styles/css/vtex.product-quantity.css

@@ -21,12 +21,12 @@
   border-left: 0;
   border-radius: 0;
   width: 2.5em !important;
-  color: black;
+  color: #000000;
 }
 .quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__minus-button) {
   border: 1px solid #CCCCCC;
   border-right: 0;
   border-radius: 0;
   width: 2.5em !important;
-  color: black;
+  color: #000000;
 }

styles/css/vtex.product-summary.css

@@ -1,42 +1,42 @@
-.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
+/*
-  border-radius: 50%;
+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 */
+.containerNormal--prateleiraShelf {
+  max-width: 315px !important;
 }
 
-.container :global(.vtex-modal-layout-0-x-triggerContainer) {
+.element--prateleiraShelf {
-  opacity: 0;
+  outline: 0;
-  transition: opacity 200ms ease-in-out;
 }
 
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
+.nameContainer--prateleiraProductName {
-  opacity: 1;
+  padding: 16px 16px 8px 16px;
 }
-
+.nameContainer--prateleiraProductName .brandName--prateleiraProductName {
-@media screen and (max-width: 40em) {
+  font-family: "Open Sans";
-  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
+  font-style: normal;
-    display: none;
+  font-weight: 400;
-  }
-}
-
-.nameContainer {
-  justify-content: start;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.brandName {
-  font-weight: 600;
   font-size: 18px;
-  color: #2E2E2E;
+  line-height: 25px;
-}
-
-.container {
-  text-align: start;
-}
-
-.imageContainer {
   text-align: center;
+  color: #000000;
 }
 
-.image {
+.imageWrapper--prateleiraImg,
-  border-radius: 0.25rem;
+.imageContainer--prateleiraImg,
+.image--prateleiraImg {
+  min-height: 314px;
 }
+@media screen and (max-width: 1280px) {
+  .imageWrapper--prateleiraImg,
+  .imageContainer--prateleiraImg,
+  .image--prateleiraImg {
+    min-height: 285px;
+  }
+}

styles/css/vtex.rich-text.css

@@ -6,4 +6,11 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
-/* Grid breakpoints */
+/* Grid breakpoints */
+.heading--otherProdcutTitle {
+  margin: 16px 0 24px 0;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+}

styles/css/vtex.slider-layout.css

@@ -1,31 +1,47 @@
-.sliderLayoutContainer {
+/*
-  justify-content: center;
+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 */
+.sliderLayoutContainer--prateleiraSlider {
+  width: 90.63%;
+  margin: 0 auto 101px auto;
 }
 
-.sliderLayoutContainer--carousel {
+.sliderArrows--prateleiraSlider {
-  background-color: #F0F0F0;
+  margin: 0;
-  min-height: 450px;
+  padding: 0;
 }
 
-.sliderTrackContainer {
+.sliderRightArrow--prateleiraSlider {
-  max-width: 100%;
+  right: -2.53%;
 }
 
-.paginationDotsContainer {
+.sliderLeftArrow--prateleiraSlider {
-  margin-top: .5rem;
+  left: -2.53%;
-  margin-bottom: .5rem;
 }
 
-.layoutContainer--shelf {
+.paginationDotsContainer--prateleiraSlider {
-  margin-top: 20px;
+  bottom: -32px;
-  margin-bottom: 20px;
+  align-items: center;
-  max-width: 96rem;
+}
-  min-height: 550px;
+.paginationDotsContainer--prateleiraSlider .paginationDot--prateleiraSlider {
+  height: 10px !important;
+  width: 10px !important;
+  background-color: #000000;
+  margin: 0 6px;
+}
+.paginationDotsContainer--prateleiraSlider .paginationDot--prateleiraSlider--isActive {
+  height: 17px !important;
+  width: 17px !important;
+  background-color: #fff !important;
+  border: 0.5px solid #000000;
 }
 
-.slide--shelf {
+.slide--prateleiraSlider {
-  margin-bottom: 25px;
+  padding: 0 8px;
-  padding-left: .5rem;
+}
-  padding-right: .5rem;
-  min-height: 550px;
-}

styles/css/vtex.store-components.css

@@ -55,6 +55,9 @@
   padding-top: 16.1px;
   text-decoration: underline;
 }
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
+  color: black;
+}
 .shippingContainer :global(.vtex__icon-external-link) {
   display: none;
 }
@@ -65,7 +68,7 @@
   position: relative;
   right: 129px;
   margin-top: 24px;
-  background-color: #292929;
+  background-color: #000000;
   font-size: 0;
   border: none;
   border-radius: 0;

styles/css/vtex.tab-layout.css

@@ -8,7 +8,8 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .container--descriptionLayout {
-  margin: 0 40px;
+  width: 94.44%;
+  margin: 0 auto;
 }
 .container--descriptionLayout .listContainer--descriptionButtonWrapper {
   justify-content: space-between;
@@ -36,9 +37,9 @@
 }
 .container--descriptionLayout .listContainer--descriptionButtonWrapper .listItemActive--descriptionButton :global(.vtex-button) {
   background-color: #fff;
-  color: #292929;
+  color: #000000;
   border: 0;
-  border-bottom: 2px solid #292929;
+  border-bottom: 2px solid #000000;
   border-radius: 0;
   font-style: normal;
   font-weight: 400;

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

@@ -12,7 +12,7 @@
         height: 49px;
 
         :global(.vtex-button){
-            background-color: $color-black;
+            background-color: $color-black2;
             color: $color-white;
             font-style: normal;
             font-weight: 400;

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

@@ -0,0 +1,18 @@
+.listPrice--prateleira{
+    padding: 0 16px 8px 16px;
+    margin: 0;
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: $color-gray9;
+}
+.sellingPrice--prateleira--hasListPrice{
+    padding: 0 16px;
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 33px;
+}

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

@@ -12,13 +12,13 @@
         border-left: 0;
         border-radius: 0;
         width: 2.5em !important;
-        color: black;
+        color: $color-black2;
     }
     :global(.vtex-numeric-stepper__minus-button){
         border: 1px solid #CCCCCC;
         border-right: 0;
         border-radius: 0;
         width: 2.5em !important;
-        color: black;
+        color: $color-black2;
     }
 }

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

@@ -0,0 +1,37 @@
+.containerNormal--prateleiraShelf{
+    max-width: 315px !important;
+}
+.element--prateleiraShelf{
+    outline: 0;
+}
+.nameContainer--prateleiraProductName{
+    padding: 16px 16px 8px 16px;
+
+    .brandName--prateleiraProductName{
+        font-family: 'Open Sans';
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+        text-align: center;
+        color: $color-black2;
+    }
+    // .nameWrapper--prateleiraProductName{
+    //     min-height: 50px;
+    // }
+}
+.imageWrapper--prateleiraImg,
+.imageContainer--prateleiraImg,
+.image--prateleiraImg{
+    min-height: 314px;
+
+    @media screen and (min-width: 2500px) {
+        
+    }
+    @media screen and (max-width: 1024px) {
+        
+    }
+    @media screen and (max-width: 1280px) {
+        min-height: 285px;
+    }
+}

styles/sass/pages/product/vtex.rich-text.scss

@@ -0,0 +1,7 @@
+.heading--otherProdcutTitle{
+    margin: 16px 0 24px 0;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 38px;
+}

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

@@ -0,0 +1,35 @@
+.sliderLayoutContainer--prateleiraSlider{
+    width: 90.63%;
+    margin: 0 auto 101px auto;
+}
+.sliderArrows--prateleiraSlider{
+    margin: 0;
+    padding: 0;
+}
+.sliderRightArrow--prateleiraSlider{
+    right: -2.53%;
+}
+.sliderLeftArrow--prateleiraSlider{
+    left: -2.53%;
+}
+.paginationDotsContainer--prateleiraSlider{
+    bottom: -32px;
+    align-items: center;
+
+    .paginationDot--prateleiraSlider{
+        height: 10px !important;
+        width: 10px !important;
+        background-color: $color-black2;
+        margin: 0 6px;
+
+        &--isActive{
+            height: 17px !important;
+            width: 17px !important;
+            background-color: $color-white !important;
+            border: 0.5px solid $color-black2;
+        }
+    }
+}
+.slide--prateleiraSlider{
+    padding: 0 8px;
+}

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

@@ -46,6 +46,10 @@
         padding-top: 16.1px;
         text-decoration: underline;
 
+        :last-child{
+            color: black;
+        }
+
     }
     :global(.vtex__icon-external-link){
         display: none;
@@ -58,7 +62,7 @@
         position: relative;
         right: 129px;
         margin-top: 24px;
-        background-color: $color-black;
+        background-color: $color-black2;
         font-size: 0;
         border: none;
         border-radius: 0;

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

@@ -1,5 +1,6 @@
 .container--descriptionLayout{
-    margin: 0 40px;
+    width: 94.44%;
+    margin: 0 auto;
 
     .listContainer--descriptionButtonWrapper{
         justify-content: space-between;
@@ -26,9 +27,9 @@
             margin-top: 2px;
             :global(.vtex-button){
                 background-color: $color-white;
-                color: $color-black;
+                color: $color-black2;
                 border: 0;
-                border-bottom: 2px solid $color-black;
+                border-bottom: 2px solid $color-black2;
                 border-radius: 0;
                 font-style: normal;
                 font-weight: 400;

styles/sass/utils/_vars.scss

@@ -1,4 +1,5 @@
 $color-black: #292929;
+$color-black2: #000000;
 
 $color-white: #fff;
 
@@ -10,6 +11,7 @@ $color-gray5: #e5e5e5;
 $color-gray6: #B9B9B9;
 $color-gray7: #CCCCCC;
 $color-gray8: #bfbfbf;
+$color-gray9: #bababa;
 
 $color-blue: #4267b2;