feat(slider): Adiciona o slider na prateleira de relacionados nas telas desktop, tablet e mobile

react/components/Example/Example.tsx

@@ -51,7 +51,7 @@ const Pix = () => {
     <div className="pix-container">
       <img
         className="pix-image"
-        src="https://agenciamagma.vteximg.com.br/arquivos/pix-icon-sauloklein-m3academy.svg"
+        src="https://agenciamagma.vteximg.com.br/arquivos/pixIcon-filipequintanilha.png"
         alt="pix"
       />
 

react/components/Html/styles.css

@@ -37,7 +37,9 @@
 [class*='vtex-numeric-stepper__minus-button'] {
   border: none;
   border: 1px solid #afafaf;
+  border-right: none;
   border-radius: 0;
+  background-color: white;
 }
 
 [class*='vtex-numeric-stepper__minus-button-container'],
@@ -48,6 +50,7 @@
 [class*='vtex-numeric-stepper__plus-button'] {
   border: none;
   border: 1px solid #afafaf;
+  border-left: none;
   border-radius: 0;
 }
 
@@ -61,6 +64,7 @@
   display: flex;
   align-items: center;
   color: #000000;
+  height: 43px;
 }
 
 [class*='html--buy-button'] {

store/blocks/home/home.jsonc

@@ -67,7 +67,7 @@
       "itemsPerPage": {
         "desktop": 4,
         "tablet": 3,
-        "phone": 1
+        "phone": 2
       },
       "infinite": true,
       "fullWidth": false,

store/blocks/pdp/product.jsonc

@@ -7,11 +7,51 @@
       "html#product-description",
       // "flex-layout.row#specifications-title",
       // "product-specification-group#table",
-      "shelf.relatedProducts"
+      "flex-layout.row#shelf-row"
       // "product-questions-and-answers"
     ]
   },
 
+  "flex-layout.row#shelf-row": {
+    "children": ["flex-layout.col#shelf-col"],
+    "props": {
+      "blockClass": "shelf-product-row"
+    }
+  },
+  "flex-layout.col#shelf-col": {
+    "children": ["rich-text#shelf-related", "list-context.product-list"],
+    "props": {
+      "blockClass": "shelf-product-col"
+    }
+  },
+
+  "rich-text#shelf-related": {
+    "props": {
+      "text": "### Você também pode gostar:",
+      "blockClass": "shelf-title"
+    }
+  },
+
+  "list-context.product-list": {
+    "children": ["slider-layout#shelf-prod"],
+    "blocks": ["product-summary.shelf"]
+  },
+
+  "slider-layout#shelf-prod": {
+    "props": {
+      "itemsPerPage": {
+        "(min-width:1025px)": 4,
+        "(min-width:768px)": 3,
+        "(max-width:767px)": 2
+      },
+      "infinite": true,
+      "showNavigationArrows": "always",
+      "showPaginationDots": "always",
+      "blockClass": "slide-shelf",
+      "colGap": 16
+    }
+  },
+
   "html#product-description": {
     "props": {
       "testId": "product-description"

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

@@ -9,14 +9,10 @@
     ]
   },
   "responsive-layout.desktop#productSummaryList": {
-    "children": [
+    "children": ["flex-layout.row#summaryListDesktop"]
-      "flex-layout.row#summaryListDesktop"
-    ]
   },
   "responsive-layout.mobile#productSummaryList": {
-    "children": [
+    "children": ["flex-layout.row#summaryListMobile"]
-      "flex-layout.row#summaryListMobile"
-    ]
   },
   "product-price-savings#summaryPercentage": {
     "props": {
@@ -36,7 +32,7 @@
     ]
   },
   "flex-layout.row#summaryListDesktop": {
-    "props":{
+    "props": {
       "fullWidth": true,
       "colSizing": "auto",
       "blockClass": "summaryListDesktop"
@@ -69,9 +65,7 @@
     ]
   },
   "flex-layout.row#productSpecifications": {
-    "children": [
+    "children": ["product-specification-group#summary"]
-      "product-specification-group#summary"
-    ]
   },
   "product-summary-name#summaryListDesktop": {
     "props": {
@@ -100,18 +94,13 @@
       "colSizing": "auto",
       "colGap": 5
     },
-    "children": [
+    "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"]
-      "add-to-cart-button",
-      "flex-layout.row#buyNowButton"
-    ]
   },
   "flex-layout.row#buyNowButton": {
     "props": {
       "blockClass": "buyNowButton"
     },
-    "children": [
+    "children": ["add-to-cart-button#buyNow"]
-      "add-to-cart-button#buyNow"
-    ]
   },
 
   "add-to-cart-button#buyNow": {
@@ -123,10 +112,7 @@
     }
   },
   "flex-layout.col#priceSummaryListDesktop": {
-    "children": [
+    "children": ["product-selling-price#summary", "product-list-price#summary"]
-      "product-selling-price#summary",
-      "product-list-price#summary"
-    ]
   },
   "stack-layout#summaryListDesktop": {
     "children": [
@@ -144,7 +130,7 @@
     }
   },
   "flex-layout.row#summaryListMobile": {
-    "props":{
+    "props": {
       "preserveLayoutOnMobile": true,
       "colSizing": "auto",
       "blockClass": "summaryListMobile",

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

@@ -3,12 +3,12 @@
     "children": [
       "stack-layout#prodsum",
       "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": {
@@ -81,9 +81,7 @@
   },
   "product-price-savings#summary": {
     "props": {
-      "markers": [
+      "markers": ["discount"],
-        "discount"
-      ],
       "blockClass": "summary"
     }
   }

styles/css/vtex.flex-layout.css

@@ -30,6 +30,14 @@
   padding: 0;
 }
 
+.flexColChild--productRating {
+  display: none;
+}
+
+.flexRowContent--shelf-product-row {
+  padding-bottom: 70px;
+}
+
 @media screen and (max-width: 768px) {
   .stretchChildrenWidth {
     flex-direction: column;

styles/css/vtex.modal-layout.css

@@ -1,89 +1,13 @@
-@media screen and (min-width: 40em) {
+/*
-  .paper--quickview {
+0 - 600PX: Phone
-    height: 260px;
+600 - 900px: Table portrait
-    width: 580px;
+900 - 1200px: Tablet landscape
-  }
+[1200 - 1800] is where our nortal styles apply
-
+1800px + : Big desktop
-  .actionsContainer--quickview {
+*/
-    padding: 0 2rem 2rem 2rem;
+/* Media Query M3 */
-  }
+/* Grid breakpoints */
-}
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
-
-@media screen and (min-width: 50em) {
-  .paper--quickview {
-    height: 450px;
-    width: 900px;
-  }
-}
-
-
-@media screen and (min-width: 75em) {
-  .paper--quickview {
-    width: calc(100% - 4rem);
-    height: auto;
-  }
-}
-
-@media screen and (min-width: 82em) {
-  .actionsContainer--quickview {
-    padding: 0 2.5rem 2.5rem 2.5rem;
-  }
-}
-
-.paper--quickview {
-  min-width: 320px;
-  max-width: 96rem;
-}
-
-.headerContainer--quickview {
-  border: none;
-  position: absolute;
-  right: 0;
-}
-
-.actionsContainer--quickview {
-  height: 100%;
-  width: 100%;
-  transition: box-shadow 150ms ease-in-out, border-top 150ms ease-in-out;
-  border-top-style: solid;
-  border-top-width: 1px;
-  border-top-color: transparent;
-  box-shadow: -4px 0px 27px -12px transparent;
-}
-
-.actionsContentWrapper {
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: #aaa;
-  padding-top: 1.5rem;
-}
-
-.contentContainer--quickviewContent {
-  padding: 2.5rem 0 2.5rem 2rem;
-  overflow-x: hidden;
-}
-
 .triggerContainer--quickview {
-  padding: .75rem;
+  display: none;
-}
-
-.triggerContainer {
-  outline: none;
-}
-
-.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) {
-  border-top-color: rgb(238, 238, 238);
-  box-shadow: -4px 0px 27px -12px rgba(0,0,0,0.64);
-}
-
-.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) .actionsContentWrapper {
-  border-top-color: transparent;
-}
-
-.closeButton {
-  padding-right: 1rem;
-}
-
-.paper--product-gifts {
-  padding: 1.5rem;
 }

styles/css/vtex.product-highlights.css

@@ -1,12 +1,13 @@
-.productHighlightWrapper--collection {
+/*
-  position: absolute;
+0 - 600PX: Phone
-  top: 10px;
+600 - 900px: Table portrait
-  left: 5px;
+900 - 1200px: Tablet landscape
-  width: 200px;
+[1200 - 1800] is where our nortal styles apply
-}
+1800px + : Big desktop
-
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 .productHighlightText {
-  background: antiquewhite;
+  display: none;
-  border-radius: 20px;
-  padding: 5px 10px;
 }

styles/css/vtex.product-price.css

@@ -13,6 +13,28 @@
   display: none;
 }
 
+.listPrice--summary {
+  display: block;
+  font-size: 14px;
+  line-height: 19px;
+  color: #bababa;
+  padding-bottom: 8px;
+}
+.listPrice--summary::before {
+  content: "de ";
+  text-decoration: line-through;
+}
+.listPrice--summary::after {
+  content: " por";
+  text-decoration: line-through;
+}
+
+.sellingPriceValue--summary {
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+}
+
 .sellingPrice {
   font-weight: 700;
   font-size: 25px;

styles/css/vtex.product-summary.css

@@ -1,42 +1,32 @@
-.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) {
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
-  opacity: 1;
+.element {
-}
+  padding: 0;
-
-@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;
 }
 
 .imageContainer {
-  text-align: center;
+  width: 100%;
 }
 
-.image {
+.containerNormal {
-  border-radius: 0.25rem;
+  max-width: none !important;
+}
+
+.brandName {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #000000;
+}
+
+.nameContainer {
+  padding: 16px 0 8px;
 }

styles/css/vtex.rich-text.css

@@ -8,3 +8,14 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+.container--shelf-title {
+  justify-content: center;
+}
+
+.heading--shelf-title {
+  margin: 16px 0 32px 0;
+  font-size: 24px;
+  line-height: 38px;
+  color: #575757;
+  font-weight: 400;
+}

styles/css/vtex.slider-layout.css

@@ -1,31 +1,87 @@
-.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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+.sliderLayoutContainer--slide-shelf {
+  padding: 0 19px;
+  margin: 0 0 113px;
+}
+@media only screen and (max-width: 1024px) {
+  .sliderLayoutContainer--slide-shelf {
+    margin: 0 0 105px;
+    padding: 0 17px;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .sliderLayoutContainer--slide-shelf {
+    margin: 0 0 65px;
+    padding: 0 15px;
+  }
+}
+.sliderLayoutContainer--slide-shelf .slideChildrenContainer {
+  margin: 0 8px;
+}
+@media only screen and (max-width: 1024px) {
+  .sliderLayoutContainer--slide-shelf .slideChildrenContainer {
+    margin: 0 6px;
+  }
+}
+@media only screen and (max-width: 768px) {
+  .sliderLayoutContainer--slide-shelf .slideChildrenContainer {
+    margin: 0 4px;
+  }
+}
+.sliderLayoutContainer--slide-shelf .slideChildrenContainer .paginationDotsContainer {
+  top: calc(100% + 32px);
 }
 
-.sliderLayoutContainer--carousel {
+.sliderLeftArrow--slide-shelf {
-  background-color: #F0F0F0;
+  padding: 0;
-  min-height: 450px;
+  margin: 0;
+  left: 0;
+}
+.sliderLeftArrow--slide-shelf::before {
+  content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-filipequintanilha.svg);
+  width: 11px;
+  height: 29px;
 }
 
-.sliderTrackContainer {
+.sliderRightArrow--slide-shelf {
-  max-width: 100%;
+  padding: 0;
+  margin: auto;
+  right: 0;
+}
+.sliderRightArrow--slide-shelf::before {
+  content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-filipequintanilha.svg);
+  width: 11px;
+  height: 29px;
 }
 
-.paginationDotsContainer {
+.caretIcon--slide-shelf {
-  margin-top: .5rem;
+  width: 0;
-  margin-bottom: .5rem;
+  height: 0;
 }
 
-.layoutContainer--shelf {
+.paginationDotsContainer--slide-shelf {
-  margin-top: 20px;
+  bottom: -42px;
-  margin-bottom: 20px;
+  align-items: center;
-  max-width: 96rem;
+  gap: 12px;
-  min-height: 550px;
 }
 
-.slide--shelf {
+.paginationDot--slide-shelf {
-  margin-bottom: 25px;
+  background-color: #000000;
-  padding-left: .5rem;
+  margin: 0;
-  padding-right: .5rem;
+}
-  min-height: 550px;
+
+.paginationDot--slide-shelf--isActive {
+  background-color: white;
+  border: 1px solid #000000;
+  width: 17px !important;
+  height: 17px !important;
 }

styles/css/vtex.store-components.css

@@ -388,6 +388,14 @@
   .productImagesContainer--first-image {
     width: 100%;
   }
+  .productDescriptionTitle {
+    font-size: 20px;
+    line-height: 32px;
+  }
+  .productDescriptionText {
+    font-size: 14px;
+    line-height: 19px;
+  }
 }
 @media screen and (min-width: 1920px) {
   .container {

styles/css/vtex.store-footer.css

@@ -1,11 +1,13 @@
-.row--menu-row {
+/*
-  padding-right: 24px;
+0 - 600PX: Phone
-}
+600 - 900px: Table portrait
-
+900 - 1200px: Tablet landscape
-.row--menu-row .rowContainer {
+[1200 - 1800] is where our nortal styles apply
-  align-items: flex-start;
+1800px + : Big desktop
-}
+*/
-
+/* Media Query M3 */
-.row--payment-methods {
+/* Grid breakpoints */
-  padding-top: 16px;
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
+.poweredBy {
+  display: none;
 }

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

@@ -20,6 +20,13 @@
   padding: 0;
 }
 
+.flexColChild--productRating {
+  display: none;
+}
+
+.flexRowContent--shelf-product-row {
+  padding-bottom: 70px;
+}
 // .flexCol--conteudo-imagens {
 //   width: 98.35% !important;
 // }

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

@@ -0,0 +1,3 @@
+.triggerContainer--quickview {
+  display: none;
+}

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

@@ -0,0 +1,3 @@
+.productHighlightText {
+  display: none;
+}

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

@@ -3,6 +3,30 @@
   display: none;
 }
 
+.listPrice--summary {
+  display: block;
+  font-size: 14px;
+  line-height: 19px;
+  color: $color-gray13;
+  padding-bottom: 8px;
+
+  &::before {
+    content: 'de ';
+    text-decoration: line-through;
+  }
+
+  &::after {
+    content: ' por';
+    text-decoration: line-through;
+  }
+}
+
+.sellingPriceValue--summary {
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+}
+
 .sellingPrice {
   font-weight: 700;
   font-size: 25px;
@@ -19,7 +43,7 @@
     color: $color-gray7;
 
     &::after {
-      content: " x ";
+      content: ' x ';
     }
   }
 }
@@ -31,12 +55,12 @@
     color: $color-gray7;
 
     &::before {
-      content: "de ";
+      content: 'de ';
       font-weight: 400;
     }
 
     &::after {
-      content: " sem juros ";
+      content: ' sem juros ';
       font-weight: 400;
     }
   }

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

@@ -0,0 +1,25 @@
+// .container {
+//   margin: 0 8px;
+// }
+
+.element {
+  padding: 0;
+}
+
+.imageContainer {
+  width: 100%;
+}
+.containerNormal {
+  max-width: none !important;
+}
+
+.brandName {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: $color-black2;
+}
+
+.nameContainer {
+  padding: 16px 0 8px;
+}

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

@@ -0,0 +1,11 @@
+.container--shelf-title {
+  justify-content: center;
+}
+
+.heading--shelf-title {
+  margin: 16px 0 32px 0;
+  font-size: 24px;
+  line-height: 38px;
+  color: $color-gray6;
+  font-weight: 400;
+}

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

@@ -0,0 +1,75 @@
+.sliderLayoutContainer--slide-shelf {
+  padding: 0 19px;
+  margin: 0 0 113px;
+
+  @include mq(md, max) {
+    margin: 0 0 105px;
+    padding: 0 17px;
+  }
+
+  @include mq(sm, max) {
+    margin: 0 0 65px;
+    padding: 0 15px;
+  }
+
+  .slideChildrenContainer {
+    margin: 0 8px;
+
+    @include mq(md, max) {
+      margin: 0 6px;
+    }
+
+    @include mq(sm, max) {
+      margin: 0 4px;
+    }
+
+    .paginationDotsContainer {
+      top: calc(100% + 32px);
+    }
+  }
+}
+
+.sliderLeftArrow--slide-shelf {
+  padding: 0;
+  margin: 0;
+  left: 0;
+  &::before {
+    content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-filipequintanilha.svg);
+    width: 11px;
+    height: 29px;
+  }
+}
+
+.sliderRightArrow--slide-shelf {
+  padding: 0;
+  margin: auto;
+  right: 0;
+
+  &::before {
+    content: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-filipequintanilha.svg);
+    width: 11px;
+    height: 29px;
+  }
+}
+
+.caretIcon--slide-shelf {
+  width: 0;
+  height: 0;
+}
+
+.paginationDotsContainer--slide-shelf {
+  bottom: -42px;
+  align-items: center;
+  gap: 12px;
+}
+
+.paginationDot--slide-shelf {
+  background-color: $color-black2;
+  margin: 0;
+}
+.paginationDot--slide-shelf--isActive {
+  background-color: white;
+  border: 1px solid $color-black2;
+  width: 17px !important;
+  height: 17px !important;
+}

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

@@ -466,6 +466,16 @@
   .productImagesContainer--first-image {
     width: 100%;
   }
+
+  .productDescriptionTitle {
+    font-size: 20px;
+    line-height: 32px;
+  }
+
+  .productDescriptionText {
+    font-size: 14px;
+    line-height: 19px;
+  }
 }
 
 @media screen and (min-width: 1920px) {

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

@@ -0,0 +1,3 @@
+.poweredBy {
+  display: none;
+}

styles/sass/utils/_vars.scss

@@ -16,6 +16,7 @@ $color-gray9: #afafaf;
 $color-gray10: #868686;
 $color-gray11: #b9b9b9;
 $color-gray12: #bfbfbf;
+$color-gray13: #bababa;
 
 $color-blue: #4267b2;
 
@@ -25,10 +26,10 @@ $color-green: #4caf50;
 $grid-breakpoints: (
   xs: 0,
   cstm: 400,
-  sm: 576px,
+  sm: 769px,
-  md: 768px,
+  md: 1025px,
-  lg: 992px,
+  lg: 1440px,
-  xl: 1200px,
+  xl: 1920px,
 ) !default;
 
 $z-index: (