fix: made carousel

store/blocks/pdp/product.jsonc

@@ -7,11 +7,44 @@
       "tab-layout#description",
       // "flex-layout.row#specifications-title",
       // "product-specification-group#table",
-      "shelf.relatedProducts",
+      // "shelf.relatedProducts",
+      "rich-text#carousel-title",
+      "list-context.product-list#carousel",
       "product-questions-and-answers"
     ]
   },
 
+  "rich-text#carousel-title": {
+    "props": {
+      "textAlignment": "CENTER",
+      "textPosition": "CENTER",
+      "text": "Você também pode gostar:"
+    }
+  },
+
+  "slider-layout#carousel-slider": {
+    "props": {
+      "itemsPerPage": {
+        "desktop": 4,
+        "tablet": 3,
+        "phone": 2
+      }
+    }
+  },
+
+  "list-context.product-list#carousel": {
+    "children": ["slider-layout#carousel-slider"],
+    "blocks": ["product-summary.shelf#carousel-shelf"]
+  },
+
+  "product-summary.shelf#carousel-shelf": {
+    "children": [
+      "product-summary-image",
+      "product-summary-name",
+      "product-summary-price"
+    ]
+  },
+
   "tab-layout#description": {
     "children": ["tab-list#description", "tab-content#description"]
   },

styles/css/vtex.product-summary.css

@@ -1,42 +1,50 @@
-.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) {
+.imageNormal {
-  opacity: 1;
+  width: 100vw;
-}
+  height: 100vw;
-
-@media screen and (max-width: 40em) {
-  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
-    display: none;
-  }
 }
 
 .nameContainer {
-  justify-content: start;
+  padding-bottom: 0;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
 }
 
-.brandName {
+.productBrand {
-  font-weight: 600;
+  font-weight: 400;
   font-size: 18px;
-  color: #2E2E2E;
+  line-height: 25px;
-}
-
-.container {
-  text-align: start;
-}
-
-.imageContainer {
   text-align: center;
+  color: #000000;
 }
 
-.image {
+.installmentContainer {
-  border-radius: 0.25rem;
+  display: none;
+}
+
+.listPriceContainer {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: center;
+  text-decoration-line: line-through;
+  color: #bababa;
+}
+
+.sellingPrice {
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  text-align: center;
+  color: #000000;
+}
+
+.sellingPriceLabel {
+  display: none;
 }

styles/css/vtex.rich-text.css

@@ -7,3 +7,14 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.container {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #575757;
+  margin-bottom: 32px;
+}
+
+.paragraph {
+  margin: 0;
+}

styles/css/vtex.slider-layout.css

@@ -1,31 +1,31 @@
-.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 */
+.paginationDot {
+  height: 10px !important;
+  width: 10px !important;
+  background: #000000;
 }
 
-.sliderLayoutContainer--carousel {
+.paginationDot--isActive {
-  background-color: #F0F0F0;
+  height: 17px !important;
-  min-height: 450px;
+  width: 17px !important;
-}
+  background: white;
-
+  border: 0.5px solid #000000;
-.sliderTrackContainer {
-  max-width: 100%;
 }
 
 .paginationDotsContainer {
-  margin-top: .5rem;
+  display: flex;
-  margin-bottom: .5rem;
+  align-items: center;
 }
 
-.layoutContainer--shelf {
+.slideArrows {
-  margin-top: 20px;
+  width: 11.2px;
-  margin-bottom: 20px;
+  height: 29.6px;
-  max-width: 96rem;
-  min-height: 550px;
-}
-
-.slide--shelf {
-  margin-bottom: 25px;
-  padding-left: .5rem;
-  padding-right: .5rem;
-  min-height: 550px;
 }

styles/css/vtex.store-components.css

@@ -345,3 +345,7 @@
   line-height: 22px;
   color: #929292;
 }
+
+.discountInsideContainer {
+  display: none;
+}

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

@@ -0,0 +1,41 @@
+.imageNormal {
+  width: 100vw;
+  height: 100vw;
+}
+
+.nameContainer {
+  padding-bottom: 0;
+}
+
+.productBrand {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #000000;
+}
+
+.installmentContainer {
+  display: none;
+}
+
+.listPriceContainer {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: center;
+  text-decoration-line: line-through;
+  color: #bababa;
+}
+
+.sellingPrice {
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  text-align: center;
+  color: #000000;
+}
+
+.sellingPriceLabel {
+  display: none;
+}

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

@@ -0,0 +1,11 @@
+.container {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #575757;
+  margin-bottom: 32px;
+}
+
+.paragraph {
+  margin: 0;
+}

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

@@ -0,0 +1,22 @@
+.paginationDot {
+  height: 10px !important;
+  width: 10px !important;
+  background: #000000;
+}
+
+.paginationDot--isActive {
+  height: 17px !important;
+  width: 17px !important;
+  background: white;
+  border: 0.5px solid #000000;
+}
+
+.paginationDotsContainer {
+  display: flex;
+  align-items: center;
+}
+
+.slideArrows {
+  width: 11.2px;
+  height: 29.6px;
+}

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

@@ -347,3 +347,7 @@
   line-height: 22px;
   color: #929292;
 }
+
+.discountInsideContainer {
+  display: none;
+}