feat: Cria bloco de prateleira

store/blocks/pdp/product.jsonc

@@ -7,7 +7,9 @@
       // "flex-layout.row#specifications-title",
       // "product-specification-group#table",
       "tab-layout",
-      "shelf.relatedProducts",
+      // "product-summary.shelf#carousel",
+      "rich-text#carousel",
+      "list-context.product-list#product-carousel",
       "product-questions-and-answers",
       "newsletter"
     ]
@@ -69,15 +71,6 @@
     ]
   },
 
-  // "product-specification-badges": {
-  //   "props": {
-  //     "specificationGroupName": "Group",
-  //     "specificationName": "On Sale",
-  //     "visibleWhen": "True",
-  //     "displayValue": "SPECIFICATION_NAME"
-  //   }
-  // },
-
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
@@ -335,6 +328,28 @@
     }
   },
 
+  "rich-text#carousel": {
+    "props": {
+      "text": "Você também pode gostar:",
+      "textAlignment": "CENTER",
+      "textPosition": "CENTER",
+      "blockClass": "carousel-title"
+    }
+  },
+
+  "product-summary.shelf#carousel": {
+    "children": [
+      "product-summary-image",
+      "product-summary-name",
+      "product-price"
+    ]
+  },
+
+  "list-context.product-list#product-carousel": {
+    "blocks": ["product-summary.shelf#carousel"],
+    "children": ["slider-layout#demo-products"]
+  },
+
   "newsletter": {
     "props": {
       "label": "Assine nossa newsletter",

styles/css/vtex.breadcrumb.css

@@ -8,11 +8,11 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .container {
-  margin: 6px 36px;
+  padding: 16px 36px;
 }
 @media screen and (min-width: 112.5em) {
   .container {
-    margin: 6px 356px;
+    margin: 0px 356px;
   }
 }
 .container .link,

styles/css/vtex.flex-layout.css

@@ -9,6 +9,7 @@
 /* Grid breakpoints */
 .flexRowContent {
   margin: 0;
+  padding-top: 0;
 }
 
 .flexRowContent--menu-link,

styles/css/vtex.product-summary.css

@@ -1,42 +1,73 @@
-.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
+/*
-  border-radius: 50%;
+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 */
+:global(.vtex-slider-layout-0-x-slideChildrenContainer) {
+  width: 314px;
 }
 
-.container :global(.vtex-modal-layout-0-x-triggerContainer) {
+.imageWrapper {
-  opacity: 0;
+  height: 314px;
-  transition: opacity 200ms ease-in-out;
+  display: flex;
-}
+  justify-content: center;
-
+  align-items: center;
-.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: 0 0 8px;
-  padding-top: 1rem;
+}
-  padding-bottom: 1rem;
+.nameContainer .brandName {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #000000;
 }
 
-.brandName {
+:global(.vtex-store-components-3-x-sellingPrice) {
-  font-weight: 600;
+  padding: 0;
-  font-size: 18px;
+}
-  color: #2E2E2E;
+:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) {
+  display: none;
+}
+:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceValue) {
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  color: #000000;
 }
 
-.container {
+:global(.vtex-store-components-3-x-listPrice) {
-  text-align: start;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #bababa;
+  margin: 0;
+  padding-bottom: 8px;
+}
+:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) {
+  display: none;
+}
+:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::before {
+  content: "de ";
+}
+:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::after {
+  content: " por";
 }
 
-.imageContainer {
+:global(.vtex-slider-layout-0-x-sliderRightArrow) :global(.vtex-slider-layout-0-x-caretIcon)::after {
-  text-align: center;
+  display: block;
+  content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png);
 }
 
-.image {
+:global(.vtex-store-components-3-x-discountInsideContainer) {
-  border-radius: 0.25rem;
+  display: none;
 }
+
+:global(.vtex-slider-layout-0-x-paginationDotsContainer) :global(.vtex-slider-layout-0-x-paginationDot--shelf) {
+  color: #000000;
+}

styles/css/vtex.rich-text.css

@@ -6,4 +6,11 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
-/* Grid breakpoints */
+/* Grid breakpoints */
+.paragraph--carousel-title {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #575757;
+  margin: 0;
+}

styles/css/vtex.store-components.css

@@ -27,7 +27,6 @@
 
 .productImageTag--main {
   max-height: max-content !important;
-  max-width: 664px;
 }
 
 .carouselGaleryThumbs {
@@ -96,6 +95,12 @@
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho {
   order: 1;
 }
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
+  margin: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList {
+  margin: 0;
+}
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
   padding: 0;
   margin: auto;
@@ -335,8 +340,10 @@
 .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail {
   grid-area: email;
 }
-.subscriberContainer .form :global(.vtex-store-components-3-x-content) :global(.vtex-button) {
+.subscriberContainer .form :global(.vtex-store-components-3-x-content) .submit {
   grid-area: submit;
+}
+.subscriberContainer .form :global(.vtex-store-components-3-x-content) :global(.vtex-button) {
   background-color: #000000;
   border: none;
   border-radius: 0;
@@ -363,6 +370,8 @@
   position: relative;
 }
 .newsletter :global(.vtex-store-components-3-x-form) .label {
+  display: flex;
+  flex-direction: column;
   color: #fff;
   font-weight: 400;
   font-size: 24px;
@@ -373,12 +382,9 @@
   font-size: 18px;
   line-height: 25px;
   color: #929292;
-  position: absolute;
-  top: 85px;
-  right: 225px;
 }
 .newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) {
-  padding-top: 52px;
+  padding-top: 16px;
 }
 .newsletter :global(.vtex-store-components-3-x-form) :global(.vtex-store-components-3-x-inputGroup) :global(.vtex-input-prefix__group) {
   border: none;

styles/css/vtex.tab-layout.css

@@ -57,6 +57,7 @@
 }
 :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productImageTag) {
   width: inherit !important;
+  display: block;
 }
 :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-heading) {
   font-weight: 400;

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

@@ -1,8 +1,8 @@
 .container {
-  margin: 6px 36px;
+  padding: 16px 36px;
 
   @media screen and (min-width: 112.5em) {
-    margin: 6px 356px;
+    margin: 0px 356px;
   }
 
   .link,

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

@@ -1,5 +1,6 @@
 .flexRowContent {
   margin: 0;
+  padding-top: 0;
 }
 
 .flexRowContent--menu-link,

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

@@ -0,0 +1,86 @@
+// :global(.vtex-slider-layout-0-x-slide--shelf) {
+//   width: 300px;
+// }
+
+:global(.vtex-slider-layout-0-x-slideChildrenContainer) {
+  width: 314px;
+}
+
+.imageWrapper {
+  height: 314px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.nameContainer {
+  padding: 0 0 8px;
+
+  .brandName {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: $black;
+  }
+}
+
+:global(.vtex-store-components-3-x-sellingPrice) {
+  padding: 0;
+
+  :global(.vtex-store-components-3-x-sellingPriceLabel) {
+    display: none;
+  }
+
+  :global(.vtex-store-components-3-x-sellingPriceValue) {
+    font-weight: 700;
+    font-size: 24px;
+    line-height: 33px;
+    color: $black;
+  }
+}
+
+:global(.vtex-store-components-3-x-listPrice) {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: $gray-300;
+  margin: 0;
+  padding-bottom: 8px;
+
+  :global(.vtex-store-components-3-x-listPriceLabel) {
+    display: none;
+  }
+
+  :global(.vtex-store-components-3-x-currencyContainer) {
+    &::before {
+      content: "de ";
+    }
+
+    &::after {
+      content: " por";
+    }
+  }
+}
+
+:global(.vtex-slider-layout-0-x-sliderRightArrow) {
+  // display: none;
+
+  :global(.vtex-slider-layout-0-x-caretIcon) {
+    // display: none;
+
+    &::after {
+      display: block;
+      content: url(https://agenciamagma.vtexassets.com/arquivos/arrow-right-eleonoraotz.png);
+    }
+  }
+}
+
+:global(.vtex-store-components-3-x-discountInsideContainer) {
+  display: none;
+}
+
+:global(.vtex-slider-layout-0-x-paginationDotsContainer) {
+  :global(.vtex-slider-layout-0-x-paginationDot--shelf) {
+    color: $black;
+  }
+}

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

@@ -0,0 +1,7 @@
+.paragraph--carousel-title {
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: $gray-600;
+  margin: 0;
+}

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

@@ -1,5 +0,0 @@
-.title {
-  font-weight: 400;
-  font-size: 24px;
-  line-height: 38px;
-}

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

@@ -16,7 +16,7 @@
 
 .productImageTag--main {
   max-height: max-content !important;
-  max-width: 664px;
+  // max-width: 664px;
 }
 
 .carouselGaleryThumbs {
@@ -96,6 +96,14 @@
   .skuSelectorSubcontainer--tamanho {
     order: 1;
 
+    .skuSelectorNameContainer {
+      margin: 0;
+
+      .skuSelectorOptionsList {
+        margin: 0;
+      }
+    }
+
     .skuSelectorItemTextValue {
       padding: 0;
       margin: auto;
@@ -384,8 +392,11 @@
         grid-area: email;
       }
 
-      :global(.vtex-button) {
+      .submit {
         grid-area: submit;
+      }
+
+      :global(.vtex-button) {
         background-color: $black;
         border: none;
         border-radius: 0;
@@ -409,6 +420,7 @@
 .newsletter {
   display: block;
   background: $black;
+
   :global(.vtex-store-components-3-x-form) {
     padding: 32px 0 13px;
     width: 774px;
@@ -416,6 +428,8 @@
     position: relative;
 
     .label {
+      display: flex;
+      flex-direction: column;
       color: $white;
       font-weight: 400;
       font-size: 24px;
@@ -426,14 +440,11 @@
         font-size: 18px;
         line-height: 25px;
         color: $gray-500;
-        position: absolute;
-        top: 85px;
-        right: 225px;
       }
     }
 
     :global(.vtex-store-components-3-x-inputGroup) {
-      padding-top: 52px;
+      padding-top: 16px;
 
       :global(.vtex-input-prefix__group) {
         border: none;

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

@@ -65,6 +65,7 @@
       // }
       :global(.vtex-store-components-3-x-productImageTag) {
         width: inherit !important;
+        display: block;
         // max-width: 872px;
       }