feat: Cria prateleira desktop mobile

store/blocks/pdp/product.jsonc

@@ -7,11 +7,51 @@
       "tab-layout",
       //"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#breadcrumb": {
     "props": {
       "tag": "section",

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

@@ -3,12 +3,13 @@
     "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",
+      //"flex-layout.row#selling-price-savings"
-      "add-to-cart-button"
+      //"product-installments#summary"
+      //"add-to-cart-button"
     ]
   },
   "flex-layout.col#productRating": {
@@ -81,9 +82,7 @@
   },
   "product-price-savings#summary": {
     "props": {
-      "markers": [
+      "markers": ["discount"],
-        "discount"
-      ],
       "blockClass": "summary"
     }
   }

styles/css/vtex.breadcrumb.css

@@ -13,6 +13,9 @@
   padding: 0 40px;
   margin: 32px 0 0;
 }
+.container .homeLink {
+  padding: 0;
+}
 .container .homeLink::before {
   content: "Home";
 }

styles/css/vtex.flex-layout.css

@@ -11,6 +11,10 @@
 .flexRow .flexCol--info-availability, .flexRow .flexCol--rightCol {
   position: relative;
 }
+.flexRow--shelf-product-row {
+  padding: 0 40px;
+  margin: 16px 0 0;
+}
 .flexRow .flexRowContent--productPanel {
   margin: 16px 0;
   padding: 0 40px;

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 */
-  }
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
-}
+/* Grid breakpoints */
-
-@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 @@
+/*
+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 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
+/* Grid breakpoints */
 .productHighlightWrapper--collection {
-  position: absolute;
+  display: none;
-  top: 10px;
+}
-  left: 5px;
-  width: 200px;
-}
-
-.productHighlightText {
-  background: antiquewhite;
-  border-radius: 20px;
-  padding: 5px 10px;
-}

styles/css/vtex.product-price.css

@@ -39,4 +39,51 @@
 }
 .installments--sellingInfo .installmentValue::after {
   content: " sem juros";
+}
+
+.listPrice--summary {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #bababa;
+  text-decoration: line-through;
+}
+@media only screen and (max-width: 1024px) {
+  .listPrice--summary {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+.listPrice--summary::before, .listPrice--summary::after {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}
+@media only screen and (max-width: 1024px) {
+  .listPrice--summary::before, .listPrice--summary::after {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+.listPrice--summary::before {
+  content: "de ";
+}
+.listPrice--summary::after {
+  content: " por";
+}
+.listPrice--summary .listPriceValue {
+  text-decoration: none;
+}
+
+.sellingPrice--summary--hasListPrice {
+  margin: 8px 0;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+}
+@media only screen and (max-width: 1024px) {
+  .sellingPrice--summary--hasListPrice {
+    font-size: 18px;
+    line-height: 25px;
+  }
 }

styles/css/vtex.product-summary.css

@@ -1,42 +1,25 @@
-.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 */
-
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
-.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
+/* Grid breakpoints */
-  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;
-  padding-top: 1rem;
-  padding-bottom: 1rem;
 }
-
+.nameContainer .productNameContainer {
-.brandName {
+  font-weight: 400;
-  font-weight: 600;
   font-size: 18px;
-  color: #2E2E2E;
+  line-height: 25px;
-}
+  color: #000;
-
-.container {
-  text-align: start;
-}
-
-.imageContainer {
-  text-align: center;
-}
-
-.image {
-  border-radius: 0.25rem;
 }
+@media only screen and (max-width: 1024px) {
+  .nameContainer .productNameContainer {
+    font-size: 14px;
+    line-height: 19px;
+  }
+}

styles/css/vtex.rich-text.css

@@ -7,4 +7,11 @@
 */
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
-/* Grid breakpoints */
+/* Grid breakpoints */
+.container--shelf-title {
+  justify-content: center;
+  margin: 0 0 32px;
+}
+.container--shelf-title .heading {
+  margin: 0;
+}

styles/css/vtex.slider-layout.css

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

styles/css/vtex.store-components.css

@@ -9,6 +9,11 @@
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap");
 /* Grid breakpoints */
+@media only screen and (min-width: 1025px) {
+  .productDescriptionContainer {
+    padding-right: 32px;
+  }
+}
 .productDescriptionContainer .productDescriptionTitle {
   font-weight: 400;
   font-size: 24px;
@@ -79,7 +84,7 @@
 @media only screen and (max-width: 1024px) {
   .container .productImageTag--main {
     min-height: 994px;
-    max-width: auto;
+    max-width: none;
   }
 }
 @media only screen and (max-width: 767px) {
@@ -249,7 +254,7 @@
   padding: 27px 0 0;
   width: 280px;
 }
-@media only screen and (max-width: 509px) {
+@media only screen and (max-width: 767px) {
   .container .shippingContainer {
     margin: 0 0 24px;
     width: 100%;
@@ -304,12 +309,6 @@
   line-height: 16px;
   color: #afafaf;
 }
-.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form-4-x-input):focus::before {
-  display: none;
-}
-.container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form-4-x-input)::before {
-  content: "asdasd";
-}
 .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
   padding: 0;
   position: absolute;
@@ -318,7 +317,7 @@
   white-space: nowrap;
   text-decoration-line: underline;
 }
-@media only screen and (max-width: 509px) {
+@media only screen and (max-width: 767px) {
   .container .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
     left: auto;
     top: calc(100% + 8px);

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

@@ -6,6 +6,11 @@
     }
   }
 
+  &--shelf-product-row {
+    padding: 0 40px;
+    margin: 16px 0 0;
+  }
+
   .flexRowContent--productPanel {
     margin: 16px 0;
     padding: 0 40px;

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 @@
+.productHighlightWrapper--collection {
+  display: none;
+}

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

@@ -37,3 +37,52 @@
     }
   }
 }
+
+.listPrice--summary {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: $color-gray16;
+  text-decoration: line-through;
+
+  @include mq(lg, max) {
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  &::before,
+  &::after {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+
+    @include mq(lg, max) {
+      font-size: 12px;
+      line-height: 16px;
+    }
+  }
+
+  &::before {
+    content: "de ";
+  }
+
+  &::after {
+    content: " por";
+  }
+
+  .listPriceValue {
+    text-decoration: none;
+  }
+}
+
+.sellingPrice--summary--hasListPrice {
+  margin: 8px 0;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+
+  @include mq(lg, max) {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}

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

@@ -0,0 +1,15 @@
+.nameContainer {
+  padding: 16px 0 8px;
+
+  .productNameContainer {
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 25px;
+    color: $color-black2;
+
+    @include mq(lg, max) {
+      font-size: 14px;
+      line-height: 19px;
+    }
+  }
+}

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

@@ -0,0 +1,8 @@
+.container--shelf-title {
+  justify-content: center;
+  margin: 0 0 32px;
+
+  .heading {
+    margin: 0;
+  }
+}

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

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

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

@@ -1,4 +1,8 @@
 .productDescriptionContainer {
+  @include mq(lg, min) {
+    padding-right: 32px;
+  }
+
   .productDescriptionTitle {
     font-weight: 400;
     font-size: 24px;
@@ -30,6 +34,7 @@
 }
 
 .container {
+  //margin: 0;
   padding: 0;
 
   .carouselContainer {
@@ -74,7 +79,7 @@
 
     @include mq(lg, max) {
       min-height: 994px;
-      max-width: auto;
+      max-width: none;
     }
 
     @include mq(md, max) {
@@ -281,7 +286,7 @@
     position: relative;
     padding: 27px 0 0;
 
-    @include mq(cstm, max) {
+    @include mq(md, max) {
       margin: 0 0 24px;
       width: 100%;
     }
@@ -346,14 +351,6 @@
         font-size: 12px;
         line-height: 16px;
         color: $color-gray10;
-
-        &:focus::before {
-          display: none;
-        }
-
-        &::before {
-          content: "asdasd";
-        }
       }
 
       :global(.vtex-address-form__postalCode-forgottenURL) {
@@ -364,7 +361,7 @@
         white-space: nowrap;
         text-decoration-line: underline;
 
-        @include mq(cstm, max) {
+        @include mq(md, max) {
           left: auto;
           top: calc(100% + 8px);
           right: 0;

styles/sass/utils/_vars.scss

@@ -21,6 +21,7 @@ $color-gray12: #868686;
 $color-gray13: #b9b9b9;
 $color-gray14: #bfbfbf;
 $color-gray15: #b9b9b999;
+$color-gray16: #bababa;
 
 $color-blue: #4267b2;
 
@@ -33,7 +34,7 @@ $grid-breakpoints: (
   sm: 640px,
   md: 768px,
   lg: 1025px,
-  xl: 2500px,
+  xl: 1920px,
 ) !default;
 
 $z-index: (