feat(prateleira):prateleira de produtos finalizada

react/components/Html/styles.css

@@ -54,10 +54,24 @@
   color: #000000;
   border-bottom: 1px solid #000000;
 }
-
+:global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
+  margin-bottom: 20px;
+}
 .html--pdp-productMain :global(.vtex-store-components-3-x-container){
   max-width: 100%;
 }
+:global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel){
+  background: #000000;
+}
+:global(.vtex-slider-layout-0-x-paginationDotsContainer--pdp-carrousel){
+  align-items: center;
+}
+:global(.vtex-slider-layout-0-x-paginationDot--pdp-carrousel--isActive){
+  min-width: 17px;
+  min-height: 17px;
+  border: 0.5px solid black;
+  background: #ffffff;
+}
 @media screen and (max-width: 375px){
   .html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){
     min-width: 100% !important;
@@ -77,7 +91,6 @@
   }
   .html--pdp-descriptions :global(.vtex-store-components-3-x-productImagesContainer){
       width: auto;
-
   }
   .html--pdp-departamens div ul{
     flex-direction: column;

store/blocks/pdp/product.jsonc

@@ -6,6 +6,17 @@
       "html#carousel"
     ]
   },
+  "html#prateleira": {
+    "props": {
+      "testId": "vtex-product-sumary"
+    },
+    "children": [
+      "product-summary-image#shelfpdp",
+      "product-summary-name",
+      "product-list-price#summary",
+      "product-selling-price#summary"
+    ]
+  },
   "html#carousel": {
     "children": ["flex-layout.row#shelfpdp"]
   },
@@ -31,7 +42,7 @@
       },
       "infinite": true,
       "fullWidth": true,
-      "blockClass": "pdp"
+      "blockClass": "pdp-carrousel"
     }
   },
 
@@ -40,16 +51,44 @@
       "stack-layout#pdp",
       "product-summary-name",
       "product-list-price#summary",
-      "product-installments#summary",
+      "product-selling-price#summarypdp",
-      "flex-layout.row#selling-price-savings"
+      "flex-layout.row#selling-price-savingspdp"
     ]
   },
+
+  "flex-layout.row#selling-price-savingspdp": {
+    "props": {
+      "blockClass": "pdp-price",
+      "colGap": 2,
+      "preserveLayoutOnMobile": true,
+      "preventHorizontalStretch": true,
+      "marginBottom": 4
+    },
+    "children": [
+      "product-selling-price#summary",
+      "product-price-savings#summary"
+    ]
+  },
+  "product-summary-name": {
+    "props": {
+      "blockClass": "pdp-name"
+    }
+  },
   "stack-layout#pdp": {
     "children": [
-      "product-summary-image#shelf",
+      "product-summary-image#shelfpdp",
       "modal-trigger#quickview" // Check quickview.jsonc
     ]
   },
+
+  "product-summary-image#shelfpdp": {
+    "props": {
+      "blockClass": "pdp-imgpdp",
+      "showBadge": false,
+      "aspectRatio": "1:1",
+      "maxHeight": 334.4
+    }
+  },
   "html#breadcrumb": {
     "props": {
       "tag": "section",
@@ -91,9 +130,9 @@
     },
     "children": ["product-images#description", "product-description"]
   },
-  "product-description":{
+  "product-description": {
-    "props":{
+    "props": {
-      "collapseContent":false
+      "collapseContent": false
     }
   },
   "condition-layout.product#availability": {
@@ -194,7 +233,7 @@
   },
   "product-images#description": {
     "props": {
-      "maxHeight":872,
+      "maxHeight": 872,
       "testid": "product-images",
       "aspectRatio": {
         "desktop": "1:1",
@@ -235,7 +274,12 @@
       "message": "{installmentsNumber}  de {installmentValue} sem juros"
     }
   },
-
+  "product-selling-price#summarypdp": {
+    "props": {
+      "blockClass": "desconto",
+      "message": "de {sellingPriceWithTax} por"
+    }
+  },
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3,

styles/css/vtex.flex-layout.css

@@ -141,3 +141,36 @@
   align-items: end;
   flex-direction: column-reverse;
 }
+
+.flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) {
+  top: 33%;
+}
+@media screen and (max-width: 1024px) {
+  .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel) {
+    max-width: 11.2px;
+    max-height: 29.6px;
+    top: 25%;
+    padding: 0;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-slide--pdp-carrousel) {
+    width: 4.9344% !important;
+    height: max-content;
+    min-height: max-content;
+    max-width: 274px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .flexRowContent--pdp-carrousel :global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel) {
+    height: 100%;
+    max-height: 392px;
+  }
+}
+
+.flexRow--pdp-carrousel :global(.vtex-store-components-3-x-container) {
+  max-width: 100%;
+}
+.flexRow--pdp-price .flexRowContent--pdp-price {
+  justify-content: center;
+}

styles/css/vtex.product-price.css

@@ -108,3 +108,48 @@
 .installments .installmentsNumber::after {
   content: "x";
 }
+
+.sellingPriceValue--summary-pdp {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  text-align: center;
+  color: #000000;
+}
+@media screen and (max-width: 1024px) {
+  .sellingPriceValue--summary-pdp {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
+
+.sellingPrice--desconto {
+  display: flex;
+  justify-content: center;
+  gap: 5px;
+  text-decoration-line: line-through;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  color: #BABABA;
+  margin-bottom: 8px;
+}
+@media screen and (max-width: 1024px) {
+  .sellingPrice--desconto {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}
+.sellingPrice--desconto .sellingPriceValue--desconto {
+  font-size: 14px;
+  line-height: 19px;
+}
+@media screen and (max-width: 1024px) {
+  .sellingPrice--desconto .sellingPriceValue--desconto {
+    font-size: 12px;
+    line-height: 16px;
+  }
+}

styles/css/vtex.product-summary.css

@@ -55,3 +55,33 @@
 .nameContainer .productNameContainer {
   text-align: center;
 }
+@media screen and (max-width: 1024px) {
+  .nameContainer .productNameContainer--pdp-name {
+    max-height: 80px;
+  }
+}
+
+@media screen and (min-width: 1920px) {
+  .image--pdp-imgpdp {
+    min-width: 334.4px;
+  }
+}
+
+.nameContainer--pdp-name {
+  justify-content: center;
+}
+
+.productBrand--pdp-name {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+}
+@media screen and (max-width: 1024px) {
+  .productBrand--pdp-name {
+    font-size: 14px;
+    line-height: 19px;
+  }
+}

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

@@ -133,5 +133,42 @@
   align-items: end;
   flex-direction: column-reverse;
 }
+.flexRowContent--pdp-carrousel{
+  :global(.vtex-slider-layout-0-x-sliderArrows--pdp-carrousel){
+    top: 33%;
+    @media screen and (max-width: 1024px){
+      max-width: 11.2px;
+      max-height: 29.6px;
+      top: 25%;
+      padding: 0;
+    }
+  }
+  :global(.vtex-slider-layout-0-x-slide--pdp-carrousel){
+    @media screen and (max-width: 1024px){
+      width: 4.9344% !important;
+      height: max-content;
+      min-height: max-content;
+      max-width: 274px;
+    }
+  }
+  :global(.vtex-slider-layout-0-x-sliderTrackContainer--pdp-carrousel){
+    @media screen and (max-width: 1024px){
+      height: 100%;
+      max-height: 392px;
+    }
+  }
+}
+.flexRow--pdp-carrousel{
+  :global(.vtex-store-components-3-x-container){
+    max-width: 100%;
+  }
+  @media screen and (max-width: 1024px){
 
+  }
+}
+.flexRow--pdp-price{
+  .flexRowContent--pdp-price{
+    justify-content: center;
+  }
+}
 

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

@@ -46,4 +46,30 @@
   .productNameContainer{
     text-align: center;
   }
+
+  .productNameContainer--pdp-name{
+    @media screen and (max-width: 1024px){
+      max-height: 80px;
+    }
+  }
+}
+.image--pdp-imgpdp{
+  @media screen and (min-width: 1920px){
+    min-width: 334.4px;
+  }
+}
+.nameContainer--pdp-name{
+  justify-content: center;
+}
+.productBrand--pdp-name{
+  font-family: 'Open Sans',sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  @media screen and (max-width: 1024px){
+      font-size: 14px;
+      line-height: 19px;
+    }
 }

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

@@ -102,3 +102,40 @@
       }
   }
 }
+.sellingPriceValue--summary-pdp{
+  font-family: 'Open Sans',sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  text-align: center;
+  color: #000000;
+  @media screen and (max-width: 1024px){
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
+.sellingPrice--desconto{
+  display: flex;
+  justify-content: center;
+  gap: 5px;
+  text-decoration-line: line-through;
+  font-family: 'Open Sans',sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  color: #BABABA;
+  margin-bottom: 8px;
+  @media screen and (max-width: 1024px){
+    font-size: 12px;
+    line-height: 16px;
+  }
+  .sellingPriceValue--desconto{
+    font-size: 14px;
+    line-height: 19px;
+    @media screen and (max-width: 1024px){
+      font-size: 12px;
+      line-height: 16px;
+    }
+  }
+}