feat(pdp): Adiciona slider layout

store/blocks/pdp/product.jsonc

@@ -7,13 +7,40 @@
       "tab-layout#details",
       /*"html#description",*/
       /*"flex-layout.row#description",*/
-      "flex-layout.row#specifications-title",
+      /*"flex-layout.row#specifications-title",*/
-      "product-specification-group#table",
+      /*"product-specification-group#table",*/
-      "shelf.relatedProducts",
+
+      "list-context.product-list#prateleira",
+      /*"shelf.relatedProducts",*/
       "product-questions-and-answers"
     ]
   },
 
+  "list-context.product-list#prateleira": {
+    "blocks": ["product-summary.shelf"],
+    "children": ["rich-text#prateleira", "slider-layout#prateleira"]
+  },
+  "rich-text#prateleira": {
+    "props": {
+      "textAlignment": "CENTER",
+      "textPosition": "CENTER",
+      "text": "Você também pode gostar:",
+      "blockClass": "title-prateleira"
+    }
+  },
+  "slider-layout#prateleira": {
+    "props": {
+      "itemsPerPage": {
+        "desktop": 4,
+        "tablet": 3,
+        "phone": 1
+      },
+      "infinite": true,
+      "fullWidth": false,
+      "blockClass": "prateleira"
+    }
+  },
+
   "tab-layout#details": {
     "children": ["tab-list#details", "tab-content#details"],
     "props": {
@@ -86,6 +113,7 @@
   "product-images#description": {
     "props": {
       "displayMode": "first-image",
+      "zoomMode": "disabled",
       "blockClass": "description-imagem"
     }
   },
@@ -188,8 +216,7 @@
   "flex-layout.col#right-col": {
     "props": {
       "preventVerticalStretch": true,
-      "rowGap": 0,
+      "rowGap": 0
-      "width": "46%"
     },
     "children": [
       "flex-layout.row#product-name",

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": {
@@ -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": [

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

@@ -6,9 +6,9 @@
       "flex-layout.col#productRating",
       "product-summary-space",
       "product-list-price#summary",
-      "flex-layout.row#selling-price-savings",
+      "flex-layout.row#selling-price-savings"
-      "product-installments#summary",
+      /*"product-installments#summary",
-      "add-to-cart-button"
+      "add-to-cart-button"*/
     ]
   },
   "flex-layout.col#productRating": {
@@ -20,9 +20,9 @@
 
   "stack-layout#prodsum": {
     "children": [
-      "product-summary-image#shelf",
+      "product-summary-image#shelf"
-      "vtex.product-highlights@2.x:product-highlights#collection",
+      /*"vtex.product-highlights@2.x:product-highlights#collection",*/
-      "modal-trigger#quickview" // Check quickview.jsonc
+      /*"modal-trigger#quickview" // Check quickview.jsonc*/
     ]
   },
 
@@ -54,19 +54,21 @@
 
   "product-list-price#summary": {
     "props": {
-      "blockClass": "summary"
+      "blockClass": "summary",
+      "labelListPrice": "teste"
     }
   },
   "flex-layout.row#selling-price-savings": {
     "props": {
-      "colGap": 2,
+      /*"colGap": 2,*/
       "preserveLayoutOnMobile": true,
       "preventHorizontalStretch": true,
-      "marginBottom": 4
+      /*"marginBottom": 4,*/
+      "horizontalAlign": "center"
     },
     "children": [
-      "product-selling-price#summary",
+      "product-selling-price#summary"
-      "product-price-savings#summary"
+      /*"product-price-savings#summary"*/
     ]
   },
   "product-installments#summary": {

styles/css/vtex.product-price.css

@@ -24,3 +24,24 @@
   content: "de ";
   font-weight: 400;
 }
+
+.listPrice--summary {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #bababa;
+  margin-bottom: 8px;
+}
+.listPrice--summary :global(.vtex-product-price-1-x-currencyCode--summary)::before {
+  content: "de ";
+}
+.listPrice--summary :global(.vtex-product-price-1-x-listPriceValue--summary):last-child::after {
+  content: " por";
+}
+
+.sellingPrice--summary {
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  color: #000000;
+}

styles/css/vtex.product-summary.css

@@ -1,42 +1,24 @@
-.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 */
+.nameContainer {
+  text-align: center;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.nameContainer .productBrand {
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #000000;
 }
 
-.container :global(.vtex-modal-layout-0-x-triggerContainer) {
+.spacer {
-  opacity: 0;
-  transition: opacity 200ms ease-in-out;
-}
-
-.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-top: 1rem;
-  padding-bottom: 1rem;
-}
-
-.brandName {
-  font-weight: 600;
-  font-size: 18px;
-  color: #2E2E2E;
-}
-
-.container {
-  text-align: start;
-}
-
-.imageContainer {
-  text-align: center;
-}
-
-.image {
-  border-radius: 0.25rem;
-}

styles/css/vtex.rich-text.css

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

styles/css/vtex.slider-layout.css

@@ -1,31 +1,33 @@
-.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 */
+.paginationDotsContainer--prateleira {
+  align-items: center;
+}
+.paginationDotsContainer--prateleira .paginationDot--prateleira {
+  background-color: #000000;
+  margin-left: 6px;
+  margin-right: 6px;
+}
+.paginationDotsContainer--prateleira .paginationDot--prateleira--isActive {
+  background-color: #fff;
+  border: 0.5px solid #000000;
+  width: 17px !important;
+  height: 17px !important;
 }
 
-.sliderLayoutContainer--carousel {
+.slide--prateleira {
-  background-color: #F0F0F0;
+  margin-right: 8px;
-  min-height: 450px;
+  margin-left: 8px;
+  margin-bottom: 32px;
 }
 
-.sliderTrackContainer {
+.sliderArrows--prateleira {
-  max-width: 100%;
+  margin: 14px;
-}
-
-.paginationDotsContainer {
-  margin-top: .5rem;
-  margin-bottom: .5rem;
-}
-
-.layoutContainer--shelf {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  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

@@ -44,6 +44,7 @@
 
 .productImagesThumb {
   max-width: 90px;
+  width: 90px !important;
   margin-right: 16px;
 }
 
@@ -289,6 +290,9 @@
   border: 1px solid red;
 }
 
+.subscriberContainer {
+  position: relative;
+}
 .subscriberContainer .title {
   font-size: 0;
   margin: 0;
@@ -330,21 +334,24 @@
   color: #989898;
 }
 .subscriberContainer .content :global(.vtex-input-prefix__group) {
-  border: none;
+  border: 0.6px solid #989898;
+  border-radius: 0%;
 }
 .subscriberContainer .content .inputEmail,
 .subscriberContainer .content .inputName {
-  border: 0.6px solid #989898;
   margin: 0;
 }
 .subscriberContainer .content .submit {
   position: absolute;
   top: 55px;
   width: 100%;
+  cursor: pointer;
 }
 .subscriberContainer .content .submit :global(.vtex-button) {
   width: 100%;
   background-color: #000000;
+  border: none;
+  border-radius: 0%;
   height: 49px;
 }
 .subscriberContainer .content .submit :global(.vtex-button__label) {
@@ -357,3 +364,14 @@
   line-height: 25px;
   color: #fff;
 }
+.subscriberContainer .content :global(.vtex-input__error) {
+  margin: 0;
+  font-size: 12px;
+  line-height: 16px;
+}
+.subscriberContainer .success {
+  position: absolute;
+  top: 90px;
+  font-size: 12px;
+  line-height: 16px;
+}

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

@@ -18,3 +18,32 @@
     }
   }
 }
+
+//PRATELEIRA PRECOS
+.listPrice--summary {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: $color-gray11;
+  margin-bottom: 8px;
+
+  :global(.vtex-product-price-1-x-currencyCode--summary) {
+    &::before {
+      content: "de ";
+    }
+  }
+  :global(.vtex-product-price-1-x-listPriceValue--summary) {
+    &:last-child {
+      &::after {
+        content: " por";
+      }
+    }
+  }
+}
+
+.sellingPrice--summary {
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  color: $color-black-100;
+}

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

@@ -0,0 +1,16 @@
+.nameContainer {
+  text-align: center;
+  padding-top: 8px;
+  padding-bottom: 8px;
+
+  .productBrand {
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 25px;
+    color: $color-black-100;
+  }
+}
+
+.spacer {
+  display: none;
+}

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

@@ -0,0 +1,12 @@
+.container--title-prateleira {
+  margin-top: 16px;
+  margin-bottom: 12px;
+
+  .paragraph--title-prateleira {
+    margin: 0;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 38px;
+    color: $color-gray8;
+  }
+}

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

@@ -0,0 +1,29 @@
+//DOTS
+
+.paginationDotsContainer--prateleira {
+  align-items: center;
+
+  .paginationDot--prateleira {
+    background-color: $color-black-100;
+    margin-left: 6px;
+    margin-right: 6px;
+  }
+
+  .paginationDot--prateleira--isActive {
+    background-color: $color-white;
+    border: 0.5px solid #000000;
+    width: 17px !important;
+    height: 17px !important;
+  }
+}
+
+//SLIDES
+.slide--prateleira {
+  margin-right: 8px;
+  margin-left: 8px;
+  margin-bottom: 32px;
+}
+
+.sliderArrows--prateleira {
+  margin: 14px;
+}

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

@@ -35,6 +35,7 @@
 
 .productImagesThumb {
   max-width: 90px;
+  width: 90px !important;
   margin-right: 16px;
 }
 
@@ -323,6 +324,8 @@
 
 //PRODUTO INDISPONIVEL
 .subscriberContainer {
+  position: relative;
+
   .title {
     font-size: 0;
     margin: 0;
@@ -368,12 +371,12 @@
     }
 
     :global(.vtex-input-prefix__group) {
-      border: none;
+      border: 0.6px solid $color-gray7;
+      border-radius: 0%;
     }
 
     .inputEmail,
     .inputName {
-      border: 0.6px solid $color-gray7;
       margin: 0;
     }
 
@@ -381,10 +384,13 @@
       position: absolute;
       top: 55px;
       width: 100%;
+      cursor: pointer;
 
       :global(.vtex-button) {
         width: 100%;
         background-color: $color-black-100;
+        border: none;
+        border-radius: 0%;
         height: 49px;
       }
 
@@ -399,5 +405,17 @@
         }
       }
     }
+
+    :global(.vtex-input__error) {
+      margin: 0;
+      font-size: 12px;
+      line-height: 16px;
+    }
+  }
+  .success {
+    position: absolute;
+    top: 90px;
+    font-size: 12px;
+    line-height: 16px;
   }
 }

styles/sass/utils/_vars.scss

@@ -14,6 +14,7 @@ $color-gray7: #989898;
 $color-gray8: #575757;
 $color-gray9: #bfbfbf;
 $color-gray10: #868686;
+$color-gray11: #bababa;
 
 $color-blue: #4267b2;