react/components/Html/styles.css

@@ -257,6 +257,12 @@
 
 [class*="html--newsletter"] {
   padding: 64px 0 32px 0;
+  margin-top: 17px;
+}
+@media screen and (max-width: 768px) {
+  [class*="html--newsletter"] {
+    padding-top: 32px;
+  }
 }
 
 [class*="html--newsletter"] input {
@@ -312,3 +318,8 @@
     position: relative;
   }
 }
+
+[class*="html--product-summary-shelf"] {
+  display: flex;
+  flex-direction: column;
+}

store/blocks/pdp/product.jsonc

@@ -6,8 +6,10 @@
       "html#product-description",
       //"html#specifications-title",
       //"product-specification-group#table",
-      "shelf.relatedProducts",
+      //"shelf.relatedProducts",
       "product-questions-and-answers",
+      "rich-text#shelf-title",
+      "list-context.product-list#shelf",
       "html#newsletter"
     ]
   },
@@ -425,7 +427,7 @@
 
   "rich-text#newsletter-title": {
     "props": {
-      "text": "Assine nossa newsletter",
+      "text": "# Assine nossa newsletter",
       "blockClass": "newsletter-title"
     }
   },
@@ -435,6 +437,57 @@
       "blockClass": "newsletter"
     },
     "children": ["rich-text#newsletter-title" , "newsletter#newsletter-product"]
-  }
+  },
 
+  "rich-text#shelf-title": {
+    "props": {
+      "text": "#### Você também pode gostar:",
+      "blockClass": "shelf-title"
+    }
+  },
+
+  "slider-layout#shelf": {
+    "props": {
+      "itemsPerPage": {
+        "desktop": 4,
+        "tablet": 3,
+        "phone": 2
+      },
+      "infinite": true,
+      "showNavigationArrows": "always",
+      "blockClass": "carousel",
+      "showPaginationDots": "always",
+      "fullWidth": true
+    }
+  },
+
+  "html#slider-layout-shelf": {
+    "props": {
+      "blockClass": "slider-layout-shelf",
+      "testId": "product-summary-list"
+    },
+    "children": ["slider-layout#shelf"]
+  },
+
+  "product-summary.shelf#product-summary": {
+    "children": ["html#product-summary-shelf"]
+  },
+
+  "html#product-summary-shelf": {
+    "props": {
+      "blockClass": "product-summary-shelf",
+      "testId": "vtex-product-summary"
+    },
+    "children": [
+      "product-summary-image#shelf",
+      "product-summary-name",
+      "product-list-price#summary",
+      "product-selling-price#summary"
+    ]
+  },
+
+  "list-context.product-list#shelf": {
+    "blocks": ["product-summary.shelf#product-summary"],
+    "children": ["html#slider-layout-shelf"]
+  }
 }

styles/css/vtex.breadcrumb.css

@@ -17,7 +17,7 @@
     width: 71.875%;
   }
 }
-@media screen and ((min-width: 769) and (max-width: 1024px)) {
+@media screen and ((min-width: 769px) and (max-width: 1024px)) {
   .container {
     width: 92.1875%;
   }

styles/css/vtex.product-price.css

@@ -23,3 +23,44 @@
 .installments-highlight--m3-custom-installments {
   font-weight: 700;
 }
+
+.listPriceValue--summary {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-decoration-line: line-through;
+  color: #BABABA;
+}
+@media screen and (max-width: 1024px) {
+  .listPriceValue--summary {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+.listPriceValue--summary::before {
+  content: "de ";
+}
+.listPriceValue--summary::after {
+  content: " por";
+}
+
+.sellingPrice--summary--hasListPrice {
+  font-size: 24px;
+  line-height: 33px;
+  margin-top: 8px;
+  margin-bottom: 32px;
+}
+@media screen and ((min-width: 769px) and (max-width: 1024px)) {
+  .sellingPrice--summary--hasListPrice {
+    font-size: 18px;
+    line-height: 25px;
+    margin-bottom: 24px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .sellingPrice--summary--hasListPrice {
+    font-size: 18px;
+    line-height: 25px;
+    margin-bottom: 16px;
+  }
+}

styles/css/vtex.product-summary.css

@@ -1,42 +1,43 @@
-.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: 16px 0 8px 0;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
 }
 
-.brandName {
+.productBrand {
-  font-weight: 600;
+  font-weight: 400;
   font-size: 18px;
-  color: #2E2E2E;
+  line-height: 25px;
+  color: #000000;
+}
+@media screen and (max-width: 1024px) {
+  .productBrand {
+    font-size: 14px;
+    line-height: 19px;
+  }
 }
 
-.container {
+.containerNormal {
-  text-align: start;
+  margin: 0;
+}
+@media screen and ((min-width: 769px) and (max-width: 1024px)) {
+  .containerNormal {
+    margin: 0 12px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .containerNormal {
+    margin: 0 8px;
+  }
 }
 
-.imageContainer {
+.element {
-  text-align: center;
+  padding: 0;
-}
-
-.image {
-  border-radius: 0.25rem;
 }

styles/css/vtex.rich-text.css

@@ -25,3 +25,28 @@
     margin-top: 64px;
   }
 }
+
+.heading-level-4 {
+  margin: 0;
+}
+
+.container--shelf-title {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  text-align: center;
+  color: #575757;
+  padding: 16px 0 32px 0;
+  justify-content: center;
+}
+@media screen and ((min-width: 769px) and (max-width: 1024px)) {
+  .container--shelf-title {
+    padding-bottom: 24px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .container--shelf-title {
+    font-size: 20px;
+    padding-bottom: 16px;
+  }
+}

styles/css/vtex.slider-layout.css

@@ -1,31 +1,95 @@
-.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;
+  width: 90%;
-  min-height: 450px;
+  margin: 0 auto;
+}
+@media screen and (min-width: 1920px) {
+  .sliderLayoutContainer--carousel {
+    width: 69.375%;
+  }
+}
+@media screen and ((min-width: 769px) and (max-width: 1024px)) {
+  .sliderLayoutContainer--carousel {
+    width: 92.1875%;
+  }
+}
+@media screen and (max-width: 768px) {
+  .sliderLayoutContainer--carousel {
+    width: 79%;
+  }
 }
 
-.sliderTrackContainer {
+.paginationDot {
-  max-width: 100%;
+  height: 10px;
+  width: 10px;
+  background-color: #000000;
+  padding: 0;
+  margin: 0 6px;
+}
+
+.paginationDot--isActive {
+  height: 17px !important;
+  width: 17px !important;
+  border: 0.5px solid #000000;
+  background-color: #FFFFFF;
 }
 
 .paginationDotsContainer {
-  margin-top: .5rem;
+  align-items: center;
-  margin-bottom: .5rem;
+  bottom: -17px;
 }
 
-.layoutContainer--shelf {
+.sliderRightArrow--carousel,
-  margin-top: 20px;
+.sliderLeftArrow--carousel {
-  margin-bottom: 20px;
+  padding: 0;
-  max-width: 96rem;
-  min-height: 550px;
 }
 
-.slide--shelf {
+.sliderRightArrow--carousel {
-  margin-bottom: 25px;
+  right: -32px;
-  padding-left: .5rem;
+}
-  padding-right: .5rem;
+@media screen and ((min-width: 769px) and (max-width: 1024px)) {
-  min-height: 550px;
+  .sliderRightArrow--carousel {
+    right: -24px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .sliderRightArrow--carousel {
+    right: -16px;
+  }
+}
+
+.sliderLeftArrow--carousel {
+  left: -32px;
+}
+@media screen and ((min-width: 769px) and (max-width: 1024px)) {
+  .sliderLeftArrow--carousel {
+    left: -24px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .sliderLeftArrow--carousel {
+    left: -16px;
+  }
+}
+
+.sliderTrack--carousel {
+  gap: 16px;
+}
+@media screen and ((min-width: 769px) and (max-width: 1024px)) {
+  .sliderTrack--carousel {
+    gap: 12px;
+  }
+}
+@media screen and (max-width: 768px) {
+  .sliderTrack--carousel {
+    gap: 8px;
+  }
 }

styles/css/vtex.tab-layout.css

@@ -28,7 +28,7 @@
     width: 71.875%;
   }
 }
-@media screen and ((min-width: 769) and (max-width: 1024px)) {
+@media screen and ((min-width: 769px) and (max-width: 1024px)) {
   .listContainer--list-product {
     width: 92.1875%;
   }
@@ -60,7 +60,7 @@
     padding-top: 64px;
   }
 }
-@media screen and ((min-width: 769) and (max-width: 1024px)) {
+@media screen and ((min-width: 769px) and (max-width: 1024px)) {
   .contentContainer--content-product {
     width: 92.1875%;
   }

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

@@ -6,7 +6,7 @@
   @media screen and (min-width: 1920px) {
     width: 71.875%;
   }
-  @media screen and ((min-width: 769) and (max-width: 1024px)) {
+  @media screen and ((min-width: 769px) and (max-width: 1024px)) {
     width: 92.1875%;
   }
   @media screen and (max-width: 768px) {

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

@@ -14,3 +14,43 @@
 .installments-highlight--m3-custom-installments {
   font-weight: 700;
 }
+
+.listPriceValue--summary {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-decoration-line: line-through;
+  color: #BABABA;
+
+  @media screen and (max-width: 1024px){
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  &::before {
+    content: "de ";
+  }
+
+  &::after {
+    content: " por";
+  }
+}
+
+.sellingPrice--summary--hasListPrice {
+  font-size: 24px;
+  line-height: 33px;
+  margin-top: 8px;
+  margin-bottom: 32px;
+
+  @media screen and ((min-width: 769px) and (max-width: 1024px)) {
+    font-size: 18px;
+    line-height: 25px;
+    margin-bottom: 24px;
+  }
+
+  @media screen and (max-width: 768px) {
+    font-size: 18px;
+    line-height: 25px;
+    margin-bottom: 16px;
+  }
+}

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

@@ -0,0 +1,31 @@
+.nameContainer {
+  padding: 16px 0 8px 0;
+}
+
+.productBrand {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #000000;
+
+  @media screen and (max-width: 1024px){
+    font-size: 14px;
+    line-height: 19px;
+  }
+}
+
+.containerNormal {
+  margin: 0;
+
+  @media screen and ((min-width: 769px) and (max-width: 1024px)) {
+    margin: 0 12px;
+  }
+
+  @media screen and (max-width: 768px) {
+    margin: 0 8px;
+  }
+}
+
+.element {
+  padding: 0;
+}

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

@@ -15,3 +15,26 @@
     margin-top: 64px;
   }
 }
+
+.heading-level-4 {
+  margin: 0;
+}
+
+.container--shelf-title {
+  font-weight: 400;
+    font-size: 24px;
+    line-height: 38px;
+    text-align: center;
+    color: #575757;
+    padding: 16px 0 32px 0;
+    justify-content: center;
+
+    @media screen and ((min-width: 769px) and (max-width: 1024px)) {
+      padding-bottom: 24px;
+    }
+
+    @media screen and (max-width: 768px) {
+      font-size: 20px;
+      padding-bottom: 16px;
+    }
+}

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

@@ -0,0 +1,76 @@
+.sliderLayoutContainer--carousel {
+  width: 90%;
+  margin: 0 auto;
+
+  @media screen and (min-width: 1920px) {
+    width: 69.375%;
+  }
+  @media screen and ((min-width: 769px) and (max-width: 1024px)) {
+    width: 92.1875%;
+  }
+  @media screen and (max-width: 768px) {
+    width: 79%;
+  }
+}
+
+.paginationDot {
+  height: 10px;
+  width: 10px;
+  background-color: #000000;
+  padding: 0;
+  margin: 0 6px;
+}
+
+.paginationDot--isActive {
+  height: 17px !important;
+  width: 17px !important;
+  border: 0.5px solid #000000;
+  background-color: #FFFFFF;
+}
+
+.paginationDotsContainer {
+  align-items: center;
+  bottom: -17px;
+}
+
+.sliderRightArrow--carousel,
+.sliderLeftArrow--carousel {
+  padding: 0;
+}
+
+.sliderRightArrow--carousel {
+  right: -32px;
+
+  @media screen and ((min-width: 769px) and (max-width: 1024px)) {
+    right: -24px;
+  }
+
+  @media screen and (max-width: 768px) {
+    right: -16px;
+  }
+}
+
+.sliderLeftArrow--carousel {
+  left: -32px;
+
+  @media screen and ((min-width: 769px) and (max-width: 1024px)) {
+    left: -24px;
+  }
+
+  @media screen and (max-width: 768px) {
+    left: -16px;
+  }
+}
+
+.sliderTrack--carousel {
+  gap: 16px;
+
+  @media screen and ((min-width: 769px) and (max-width: 1024px)) {
+    gap: 12px;
+  }
+
+  @media screen and (max-width: 768px) {
+    gap: 8px;
+  }
+}
+

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

@@ -18,7 +18,7 @@
     width: 71.875%;
   }
 
-  @media screen and ((min-width: 769) and (max-width: 1024px)) {
+  @media screen and ((min-width: 769px) and (max-width: 1024px)) {
     width: 92.1875%;
   }
 
@@ -47,7 +47,7 @@
     padding-top: 64px;
   }
 
-  @media screen and ((min-width: 769) and (max-width: 1024px)) {
+  @media screen and ((min-width: 769px) and (max-width: 1024px)) {
     width: 92.1875%;
   }