Merge branch 'feature/prateleira' into desenvolvimento

react/components/Html/styles.css

@@ -1,17 +1,10 @@
 /* [class*=html--pdp-breadcrumb]{
   background: blue;
 } */
-/* .html {
-  background-color: red;
-}
-
-.html--pdp-breadcrumb {
-  background-color: green;
-} */
 .html--pdp-section_descriptions{
   display: flex;
   flex-direction: column;
-  gap: 32;
+  gap: 32px;
   padding: 0px 40px 0px 40px;
 }
 .html--pdp-section_descriptions :global(.vtex-flex-layout-0-x-flexRowContent){
@@ -20,6 +13,15 @@
 .html--pdp-descriptions{
   display: flex;
 }
+.html--pdp-descriptions :global(.vtex-flex-layout-0-x-flexRow){
+  width: 100%;
+}
+.html--pdp-descriptions :global(.vtex-store-components-3-x-container){
+  max-width: 100%;
+}
+.html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
+  padding-left: 28px;
+}
 .html--pdp-departamens{
   background: transparent;
   margin-top: 32px;
@@ -36,6 +38,7 @@
   list-style: none;
   margin: 0;
 }
+
 .html--pdp-departamens div ul li button{
   outline: none;
   border: none;
@@ -51,3 +54,56 @@
   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;
+    max-height: 100% !important;
+}
+}
+@media screen and (max-width: 1024px) {
+  .html--pdp-descriptions :global(.vtex-store-components-3-x-productImageTag){
+      min-width: 296px;
+  }
+  .html--pdp-descriptions :global(.vtex-flex-layout-0-x-flexRowContent){
+      flex-direction: column;
+  }
+  .html--pdp-descriptions :global(.vtex-flex-layout-0-x-stretchChildrenWidth){
+      align-items: center;
+      width: 100% !important;
+  }
+  .html--pdp-descriptions :global(.vtex-store-components-3-x-productImagesContainer){
+      width: auto;
+  }
+  .html--pdp-departamens div ul{
+    flex-direction: column;
+    justify-content: end;
+    padding: 0;
+  }
+  .html--pdp-descriptions :global(.vtex-store-components-3-x-productImage){
+    padding-left: 0px;
+  }
+  .html--pdp-departamens div ul li  :global(button.open){
+    border-bottom: none;
+  }
+  .html--pdp-departamens ul{
+    border-top: 1px solid rgba(185, 185, 185, 1);
+  }
+}

store/blocks/pdp/product.jsonc

@@ -1,11 +1,94 @@
 {
   "store.product": {
     "children": [
-      "html#breadcrumb",
+      "html#departaments",
-      "condition-layout.product#availability",
+      "flex-layout.row#specifications-title",
-      "html#departaments"
+      "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"]
+  },
+  "flex-layout.row#shelfpdp": {
+    "props": {
+      "blockClass": "pdp-carrousel"
+    },
+    "children": ["list-context.product-list#pdp"]
+  },
+  "list-context.product-list#pdp": {
+    "blocks": ["product-summary.shelf#Pdp"],
+    "children": ["slider-layout#demo-products#pdp"],
+    "props": {
+      "orderBy": "OrderByTopSaleDESC"
+    }
+  },
+  "slider-layout#demo-products#pdp": {
+    "props": {
+      "itemsPerPage": {
+        "desktop": 4,
+        "tablet": 3,
+        "phone": 2
+      },
+      "infinite": true,
+      "fullWidth": true,
+      "blockClass": "pdp-carrousel"
+    }
+  },
+
+  "product-summary.shelf#Pdp": {
+    "children": [
+      "stack-layout#pdp",
+      "product-summary-name",
+      "product-list-price#summary",
+      "product-selling-price#summarypdp",
+      "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#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",
@@ -34,16 +117,23 @@
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
   },
+
   "rich-text#specifications": {
     "props": {
-      "text": "##### Product Specifications"
+      "text": "##### Você também pode gostar:",
+      "blockClass": "pdp-specifications"
     }
   },
   "flex-layout.row#description": {
     "props": {
-      "width": "50%"
+      "width": "66%"
     },
-    "children": ["product-images#description","product-description"]
+    "children": ["product-images#description", "product-description"]
+  },
+  "product-description": {
+    "props": {
+      "collapseContent": false
+    }
   },
   "condition-layout.product#availability": {
     "props": {
@@ -52,10 +142,19 @@
           "subject": "isProductAvailable"
         }
       ],
-      "Then": "flex-layout.row#product-main",
+      "Then": "html#product-main",
       "Else": "flex-layout.row#product-availability"
     }
   },
+
+  "html#product-main": {
+    "props": {
+      "tag": "div",
+      "testId": "Product-Images",
+      "blockClass": "pdp-productMain"
+    },
+    "children": ["flex-layout.row#product-main"]
+  },
   "flex-layout.row#product-main": {
     "props": {
       "colGap": 7,
@@ -94,28 +193,28 @@
       "testId": "description",
       "blockClass": "pdp-section_descriptions"
     },
-    "children": ["html#Sections","html#description"]
+    "children": ["html#Sections", "html#description"]
   },
+
   "html#description": {
     "props": {
       "tag": "div",
       "testId": "description",
       "blockClass": "pdp-descriptions"
     },
-    "children": [
+    "children": ["flex-layout.row#description"]
-      "flex-layout.row#description"
-    ]
   },
 
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
       "rowGap": 10,
-      "width":"46%",
+      "width": "50%",
       "blockClass": "StackLayout",
-      "htmlId":"teste"
+      "htmlId": "teste"
     }
   },
+
   "flex-layout.row#product-image": {
     "children": ["product-images"]
   },
@@ -134,6 +233,7 @@
   },
   "product-images#description": {
     "props": {
+      "maxHeight": 872,
       "testid": "product-images",
       "aspectRatio": {
         "desktop": "1:1",
@@ -143,7 +243,7 @@
       "showPaginationDots": false,
       "thumbnailVisibility": "hiden",
       "displayMode": "first-image",
-      "zoomMode":"disabled"
+      "zoomMode": "disabled"
     }
   },
   "flex-layout.col#right-col": {
@@ -174,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.breadcrumb.css

@@ -13,7 +13,7 @@
   margin-right: auto;
   max-width: 96rem;
 }
-@media screen and (max-width: 64.0625em) {
+@media screen and (max-width: 1024px) {
   .container {
     padding: 0 0 0 10.67%;
   }

styles/css/vtex.flex-layout.css

@@ -29,13 +29,13 @@
   max-width: 526px;
 }
 
-@media screen and (min-width: 40em) {
+@media screen and (min-width: 1024px) {
   .flexRowContent--menu-link,
   .flexRowContent--main-header {
     padding: 0 1rem;
   }
 }
-@media screen and (min-width: 80rem) {
+@media screen and (min-width: 1280px) {
   .flexRowContent--menu-link,
   .flexRowContent--main-header {
     padding: 0 0.25rem;
@@ -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

@@ -20,7 +20,7 @@
   opacity: 1;
 }
 
-@media screen and (max-width: 40em) {
+@media screen and (max-width: 1024px) {
   .container :global(.vtex-modal-layout-0-x-triggerContainer) {
     display: none;
   }
@@ -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/css/vtex.rich-text.css

@@ -7,3 +7,14 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+.container--pdp-specifications {
+  justify-content: center;
+}
+.container--pdp-specifications .wrapper--pdp-specifications .heading {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  color: #575757;
+}

styles/css/vtex.store-components.css

@@ -90,19 +90,19 @@
 .carouselContainer .productImage {
   max-width: 85.238%;
 }
-@media screen and (min-width: 156.25em) {
+@media screen and (min-width: 1920px) {
   .carouselContainer .productImage {
     min-width: 904px;
     max-width: 100%;
   }
 }
-@media screen and (max-width: 64.0625em) {
+@media screen and (max-width: 1024px) {
   .carouselContainer .productImage {
     min-width: 296px;
     max-width: 100%;
   }
 }
-@media screen and (max-width: 23.375em) {
+@media screen and (max-width: 375px) {
   .carouselContainer .productImage {
     min-width: 0;
     max-width: 100%;
@@ -127,7 +127,7 @@
   background: white;
   margin-right: 1em;
 }
-@media screen and (max-width: 64.0625em) {
+@media screen and (max-width: 1024px) {
   .carouselGaleryThumbs .productImagesThumb {
     width: 30% !important;
   }
@@ -142,7 +142,7 @@
   border-radius: 8px;
   min-height: 5.54em;
 }
-@media screen and (max-width: 64.0625em) {
+@media screen and (max-width: 1024px) {
   .carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
     min-height: 4.9em;
   }
@@ -151,3 +151,42 @@
   border-radius: 8px;
   width: 90px;
 }
+
+.productDescriptionContainer .productDescriptionTitle {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+}
+@media screen and (min-width: 1920px) {
+  .productDescriptionContainer .productDescriptionTitle {
+    font-size: 32px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .productDescriptionContainer .productDescriptionTitle {
+    font-size: 20px !important;
+  }
+}
+.productDescriptionContainer .content {
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+@media screen and (min-width: 1920px) {
+  .productDescriptionContainer .content {
+    font-size: 18px;
+    line-height: 25px;
+  }
+}
+@media screen and (max-width: 1024px) {
+  .productDescriptionContainer .content {
+    font-size: 14px !important;
+    line-height: 19px !important;
+  }
+}

styles/css/vtex.store-video.css

@@ -4,7 +4,7 @@
   margin-top: 2%;
 }
 
-@media only screen and (min-width: 640px) {
+@media only screen and (min-width: 280px) {
   .videoContainer {
     height: 700px;
   }

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

@@ -3,7 +3,7 @@
     margin-left: auto;
     margin-right: auto;
     max-width: 96rem;
-    @media screen and (max-width: 64.0625em){
+    @media screen and (max-width: 1024px){
       padding: 0 0 0 10.67%;
     }
     .term,.termArrow{

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

@@ -18,14 +18,14 @@
     }
   }
 }
-@media screen and (min-width: 40em) {
+@media screen and (min-width: 1024px) {
   .flexRowContent--menu-link,
   .flexRowContent--main-header {
     padding: 0 1rem;
   }
 }
 
-@media screen and (min-width: 80rem) {
+@media screen and (min-width: 1280px) {
   .flexRowContent--menu-link,
   .flexRowContent--main-header {
     padding: 0 0.25rem;
@@ -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

@@ -11,7 +11,7 @@
   opacity: 1;
 }
 
-@media screen and (max-width: 40em) {
+@media screen and (max-width: 1024px) {
   .container :global(.vtex-modal-layout-0-x-triggerContainer) {
     display: none;
   }
@@ -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/product/vtex.rich-text.scss

@@ -0,0 +1,15 @@
+.container{
+  &--pdp-specifications{
+    justify-content: center;
+    .wrapper--pdp-specifications{
+      .heading{
+        font-family: 'Open Sans',sans-serif;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 38px;
+        color: #575757;
+      }
+    }
+  }
+}

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

@@ -90,15 +90,15 @@
   padding: 0 40px 0;
   .productImage{
     max-width:85.238%;
-    @media screen and (min-width: 156.25em){
+    @media screen and (min-width: 1920px){
       min-width: 904px;
       max-width:100%;
     }
-    @media screen and (max-width: 64.0625em){
+    @media screen and (max-width: 1024px){
       min-width: 296px;
       max-width:100%;
     }
-    @media screen and (max-width: 23.375em){
+    @media screen and (max-width: 375px){
       min-width: 0;
       max-width:100%;
     }
@@ -120,7 +120,7 @@
     width: max-content !important;
     background:white;
     margin-right: 1em;
-    @media screen and (max-width: 64.0625em){
+    @media screen and (max-width: 1024px){
       width: 30% !important;
     }
     .figure{
@@ -130,7 +130,7 @@
         .thumbImg{
           border-radius: 8px;
           min-height: 5.54em;
-          @media screen and (max-width: 64.0625em){
+          @media screen and (max-width: 1024px){
             min-height: 4.9em;
           }
         }
@@ -142,4 +142,36 @@
     }
   }
 }
+.productDescriptionContainer{
+  .productDescriptionTitle{
+    font-family: 'Open Sans',sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 32px;
+    color: #575757;
+    @media screen and (min-width: 1920px){
+      font-size: 32px;
+    }
+    @media screen and (max-width: 1024px){
+      font-size: 20px !important;
+    }
+  }
+  .content{
+    font-family: 'Open Sans',sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+    color: #929292;
+    @media screen and (min-width: 1920px){
+      font-size: 18px;
+      line-height: 25px;
+    }
+    @media screen and (max-width: 1024px){
+      font-size: 14px !important;
+      line-height: 19px !important;
+    }
+  }
+}
 

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;
+    }
+  }
+}

styles/sass/utils/_mixin.scss

@@ -24,7 +24,7 @@
         } //375px
     }
     @if $breakpoint == phone {
-        @media only screen and (max-width: 37.5em) {
+        @media only screen and (max-width:1024px) {
             @content;
         } //600px
     }
@@ -39,7 +39,7 @@
         } //1200px
     }
     @if $breakpoint == big-desktop {
-        @media only screen and (min-width: 112.5em) {
+        @media only screen and (min-width: 1900px) {
             @content;
         } //1800px
     }