feat: cria product list com slider layout

store/blocks/pdp/product.jsonc

@@ -4,10 +4,9 @@
       "html#breadcrumb",
       "condition-layout.product#availability",
       "html#tab-layout",
-      "flex-layout.row#specifications-title",
+      // "shelf.relatedProducts",
-      "product-specification-group#table",
+      "list-context.product-list",
-      "shelf.relatedProducts",
+      "newsletter"
-      "product-questions-and-answers"
     ]
   },
   "html#breadcrumb": {
@@ -122,15 +121,6 @@
     "children": ["product-images", "product-description"]
   },
 
-  "flex-layout.row#specifications-title": {
-    "children": ["rich-text#specifications"]
-  },
-  "rich-text#specifications": {
-    "props": {
-      "text": "##### Product Specifications"
-    }
-  },
-
   "condition-layout.product#availability": {
     "props": {
       "conditions": [
@@ -297,5 +287,26 @@
         "Pinterest": true
       }
     }
+  },
+
+  "list-context.product-list": {
+    "blocks": ["product-summary.shelf"],
+    "children": ["slider-layout#related-products"]
+  },
+
+  "slider-layout#related-products": {
+    "props": {
+      "itemsPerPage": {
+        "desktop": 4,
+        "tablet": 3,
+        "phone": 2
+      },
+      "infinite": true,
+      "showNavigationArrows": "always",
+      "blockClass": "carousel"
+      // "fullWidth": false
+    }
+    // ,
+    // "children": ["rich-text#1", "rich-text#2", "rich-text#3"]
   }
 }

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

@@ -1,14 +1,14 @@
 {
   "product-summary.shelf": {
     "children": [
-      "stack-layout#prodsum",
+      "product-summary-image#shelf",
       "product-summary-name",
-      "flex-layout.col#productRating",
+      // "flex-layout.col#productRating",
-      "product-summary-space",
+      // "product-summary-space",
       "product-list-price#summary",
-      "flex-layout.row#selling-price-savings",
+      "product-selling-price#summary"
-      "product-installments#summary",
+      // "product-installments#summary",
-      "add-to-cart-button"
+      // "add-to-cart-button"
     ]
   },
   "flex-layout.col#productRating": {
@@ -18,19 +18,11 @@
     "children": ["product-rating-inline"]
   },
 
-  "stack-layout#prodsum": {
-    "children": [
-      "product-summary-image#shelf",
-      "vtex.product-highlights@2.x:product-highlights#collection",
-      "modal-trigger#quickview" // Check quickview.jsonc
-    ]
-  },
-
   "product-summary-image#shelf": {
     "props": {
       "showBadge": false,
       "aspectRatio": "1:1",
-      "maxHeight": 300
+      "maxHeight": 1000
     }
   },
 
@@ -54,21 +46,11 @@
 
   "product-list-price#summary": {
     "props": {
-      "blockClass": "summary"
+      "blockClass": "summary",
+      "message": "de {listPriceValue} por"
     }
   },
-  "flex-layout.row#selling-price-savings": {
+
-    "props": {
-      "colGap": 2,
-      "preserveLayoutOnMobile": true,
-      "preventHorizontalStretch": true,
-      "marginBottom": 4
-    },
-    "children": [
-      "product-selling-price#summary",
-      "product-price-savings#summary"
-    ]
-  },
   "product-installments#summary": {
     "props": {
       "blockClass": "summary"
@@ -81,9 +63,7 @@
   },
   "product-price-savings#summary": {
     "props": {
-      "markers": [
+      "markers": ["discount"],
-        "discount"
-      ],
       "blockClass": "summary"
     }
   }

styles/css/vtex.product-price.css

@@ -31,3 +31,32 @@
   font-size: 13px;
   color: #929292;
 }
+
+/* ----- SHELF ----- */
+.listPrice--summary {
+  font-size: 14px;
+  line-height: 19px;
+  text-decoration-line: line-through;
+  color: #bababa;
+}
+@media only screen and (max-width: 1024px) {
+  .listPrice--summary {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+
+.sellingPrice--summary {
+  padding-top: 8px;
+}
+.sellingPrice--summary .sellingPriceValue--summary {
+  font-size: 24px;
+  line-height: 33px;
+  color: #000000;
+}
+@media only screen and (max-width: 1024px) {
+  .sellingPrice--summary .sellingPriceValue--summary {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}

styles/css/vtex.product-summar.css

@@ -0,0 +1,12 @@
+/*
+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 */
+.nameContainer {
+  background-color: pink;
+}

styles/css/vtex.product-summary.css

@@ -1,42 +1,56 @@
-.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
+/*
-  border-radius: 50%;
+0 - 600PX: Phone
-}
+600 - 900px: Table portrait
-
+900 - 1200px: Tablet landscape
-.container :global(.vtex-modal-layout-0-x-triggerContainer) {
+[1200 - 1800] is where our nortal styles apply
-  opacity: 0;
+1800px + : Big desktop
-  transition: opacity 200ms ease-in-out;
+*/
-}
+/* Media Query M3 */
-
+/* Grid breakpoints */
-.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 {
-  justify-content: start;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.brandName {
-  font-weight: 600;
-  font-size: 18px;
-  color: #2E2E2E;
-}
-
 .container {
-  text-align: start;
+  margin: 0;
+  border-radius: 0;
+  max-width: 1000px !important;
 }
-
+.container .element {
-.imageContainer {
+  padding: 0 8px;
+}
+@media only screen and (max-width: 1024px) {
+  .container .element {
+    padding: 0 6px;
+  }
+}
+@media only screen and (max-width: 639px) {
+  .container .element {
+    padding: 0 4px;
+  }
+}
+.container .element .imageContainer {
+  width: 100%;
+}
+.container .element .imageContainer .image {
+  object-fit: cover !important;
+}
+.container .element .nameContainer {
+  padding: 16px 16px 8px;
+}
+@media only screen and (max-width: 1024px) {
+  .container .element .nameContainer {
+    padding: 16px 8px 8px;
+  }
+}
+.container .element .nameContainer .productBrand {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
   text-align: center;
+  color: #000000;
+}
+@media only screen and (max-width: 1024px) {
+  .container .element .nameContainer .productBrand {
+    font-size: 14px;
+    line-height: 19px;
   }
-
-.image {
-  border-radius: 0.25rem;
 }

styles/css/vtex.slider-layout.css

@@ -1,31 +1,85 @@
-.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--carousel {
-  background-color: #F0F0F0;
+  padding: 0 59.2px 113px;
-  min-height: 450px;
 }
-
+@media only screen and (min-width: 1920px) {
-.sliderTrackContainer {
+  .sliderLayoutContainer--carousel {
-  max-width: 100%;
+    padding: 0 379.2px 113px;
   }
-
-.paginationDotsContainer {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
 }
-
+@media only screen and (max-width: 1024px) {
-.layoutContainer--shelf {
+  .sliderLayoutContainer--carousel {
-  margin-top: 20px;
+    padding: 0 57.2px 105px;
-  margin-bottom: 20px;
-  max-width: 96rem;
-  min-height: 550px;
   }
-
+}
-.slide--shelf {
+@media only screen and (max-width: 639px) {
-  margin-bottom: 25px;
+  .sliderLayoutContainer--carousel {
-  padding-left: .5rem;
+    padding: 0 55.2px 65px;
-  padding-right: .5rem;
+  }
-  min-height: 550px;
+}
+.sliderLayoutContainer--carousel .sliderArrows {
+  padding: 0;
+  margin: 0;
+}
+.sliderLayoutContainer--carousel .sliderArrows.sliderLeftArrow {
+  margin-left: 40px;
+}
+@media only screen and (min-width: 1920px) {
+  .sliderLayoutContainer--carousel .sliderArrows.sliderLeftArrow {
+    margin-left: 360px;
+  }
+}
+.sliderLayoutContainer--carousel .sliderArrows.sliderLeftArrow::before {
+  content: "";
+  width: 11.2px;
+  height: 29.6px;
+  background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-andreamm.svg");
+}
+.sliderLayoutContainer--carousel .sliderArrows.sliderRightArrow {
+  margin-right: 40px;
+}
+@media only screen and (min-width: 1920px) {
+  .sliderLayoutContainer--carousel .sliderArrows.sliderRightArrow {
+    margin-right: 360px;
+  }
+}
+.sliderLayoutContainer--carousel .sliderArrows.sliderRightArrow::after {
+  content: "";
+  width: 11.2px;
+  height: 29.6px;
+  background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-andreamm.svg");
+}
+.sliderLayoutContainer--carousel .sliderArrows .caretIcon {
+  display: none;
+}
+.sliderLayoutContainer--carousel .paginationDotsContainer {
+  bottom: 64px;
+  gap: 12px;
+  align-items: center;
+}
+@media only screen and (max-width: 639px) {
+  .sliderLayoutContainer--carousel .paginationDotsContainer {
+    bottom: 32px;
+  }
+}
+.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot {
+  width: 10px;
+  height: 10px;
+  margin: 0;
+  padding: 0;
+  background: #000000;
+}
+.sliderLayoutContainer--carousel .paginationDotsContainer .paginationDot--isActive {
+  width: 17px !important;
+  height: 17px !important;
+  border: 0.5px solid #000000;
+  background: #ffffff;
 }

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

@@ -15,14 +15,6 @@
       width: 100% !important;
     }
   }
-
-  // @include mq(md, max)
-  // @media only screen and (max-width: 639px) {
-  //   :global(.vtex-store-components-3-x-productImagesContainer--carousel) {
-  //     background-color: blue;
-  //     margin-bottom: 32px;
-  //   }
-  // }
 }
 
 /* ----- RIGHT-COL ----- */

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

@@ -26,3 +26,40 @@
   font-size: 13px;
   color: #929292;
 }
+
+/* ----- SHELF ----- */
+.listPrice--summary {
+  // background-color: red;
+  // font-family: "Open Sans";
+  // font-style: normal;
+  // font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  // text-align: center;
+  text-decoration-line: line-through;
+  color: #bababa;
+
+  @include mq(lg, max) {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+
+.sellingPrice--summary {
+  padding-top: 8px;
+  // background-color: white;
+
+  .sellingPriceValue--summary {
+    // font-family: "Open Sans";
+    // font-style: normal;
+    // font-weight: 700;
+    font-size: 24px;
+    line-height: 33px;
+    color: #000000;
+
+    @include mq(lg, max) {
+      font-size: 18px;
+      line-height: 25px;
+    }
+  }
+}

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

@@ -0,0 +1,54 @@
+.container {
+  // background-color: green;
+  margin: 0;
+  border-radius: 0;
+
+  max-width: 1000px !important;
+
+  .element {
+    padding: 0 8px;
+
+    @include mq(lg, max) {
+      padding: 0 6px;
+    }
+
+    @include mq(md, max) {
+      padding: 0 4px;
+    }
+
+    .imageContainer {
+      // background: #ededed;
+      // background-color: yellow;
+      width: 100%;
+
+      .image {
+        // background: #ededed;
+        object-fit: cover !important;
+        // background-color: red;
+      }
+    }
+
+    .nameContainer {
+      padding: 16px 16px 8px;
+
+      @include mq(lg, max) {
+        padding: 16px 8px 8px;
+      }
+
+      .productBrand {
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 400;
+        font-size: 18px;
+        line-height: 25px;
+        text-align: center;
+        color: #000000;
+
+        @include mq(lg, max) {
+          font-size: 14px;
+          line-height: 19px;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,82 @@
+.sliderLayoutContainer--carousel {
+  // background-color: aqua;
+  padding: 0 59.2px 113px;
+
+  @include mq(xl, min) {
+    padding: 0 379.2px 113px;
+  }
+
+  @include mq(lg, max) {
+    padding: 0 57.2px 105px;
+  }
+
+  @include mq(md, max) {
+    padding: 0 55.2px 65px;
+  }
+
+  .sliderArrows {
+    // background-color: blue !important;
+    padding: 0;
+    margin: 0;
+
+    &.sliderLeftArrow {
+      margin-left: 40px;
+
+      @include mq(xl, min) {
+        margin-left: 360px;
+      }
+
+      &::before {
+        content: "";
+        width: 11.2px;
+        height: 29.6px;
+        background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-andreamm.svg");
+      }
+    }
+
+    &.sliderRightArrow {
+      margin-right: 40px;
+
+      @include mq(xl, min) {
+        margin-right: 360px;
+      }
+
+      &::after {
+        content: "";
+        width: 11.2px;
+        height: 29.6px;
+        background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-andreamm.svg");
+      }
+    }
+
+    .caretIcon {
+      display: none;
+    }
+  }
+
+  .paginationDotsContainer {
+    // background-color: lightgreen;
+    bottom: 64px;
+    gap: 12px;
+    align-items: center;
+
+    @include mq(md, max) {
+      bottom: 32px;
+    }
+
+    .paginationDot {
+      width: 10px;
+      height: 10px;
+      margin: 0;
+      padding: 0;
+      background: #000000;
+
+      &--isActive {
+        width: 17px !important;
+        height: 17px !important;
+        border: 0.5px solid #000000;
+        background: #ffffff;
+      }
+    }
+  }
+}