feat(pdp-shelf): cretaed initial styles for small,medium devices

store/blocks/pdp/product-shelf.jsonc

@@ -26,14 +26,23 @@
     "props": {
       "text": "## Você também pode gostar:",
       "textPosition": "CENTER",
-      "textAlignment": "CENTER"
+      "textAlignment": "CENTER",
+      "blockClass": "productShelfTitle"
     }
   },
 
   "slider-layout#pdp-shelf": {
     "props": {
       "blockClass": "productShelf",
-      "infinite": true
+      "itemsPerPage": {
+        "desktop": 4,
+        "(min-width:1025px)": 4,
+        "(min-width:768px)": 3,
+        "tablet": 2,
+
+        "phone": 2
+      },
+      "fullWidth": true
     }
   },
 
@@ -48,7 +57,16 @@
   "product-summary-image#pdp-shelf": {
     "props": {
       "showBadge": false,
-      "alabelSellingPricespectRatio": "1:1"
+      "alabelSellingPricespectRatio": "1:1",
+      "aspectRatio": "1:1",
+      "width": {
+        "(min-width: 1921px)": "434.4px",
+        "desktop": "314.4px",
+        "(min-width:1025px)": "314.4px",
+        "(min-width:768px)": "291.2px",
+        "tablet": "291.2px",
+        "phone": "124.8px"
+      }
     }
   },
 

store/blocks/pdp/product.jsonc

@@ -60,6 +60,7 @@
       "rowGap": 7,
       "marginTop": 5,
       "marginBottom": 7,
+      "preserveLayoutOnMobile": false,
       "blockClass": "productMain"
     },
     "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
@@ -252,7 +253,5 @@
       "blockClass": "message-availability"
     },
     "children": ["availability-subscriber"]
-  },
-
-  "availability-subscriber": {}
+  }
 }

styles/css/vtex.flex-layout.css

@@ -110,9 +110,11 @@
 }
 
 @media screen and (max-width: 1024px) {
+  .flexRowContent--productAvailability,
   .flexRowContent--productMain {
     flex-direction: column !important;
   }
+  .flexRowContent--productAvailability .stretchChildrenWidth,
   .flexRowContent--productMain .stretchChildrenWidth {
     width: 100% !important;
   }
@@ -166,6 +168,8 @@
   padding: 0 40px;
 }
 
-.flexRow--productSpecificationItemContainer {
-  padding: 0 32px;
+@media screen and (min-width: 1025px) {
+  .flexRow--productSpecificationItemContainer {
+    padding: 0 32px;
+  }
 }

styles/css/vtex.product-summary.css

@@ -49,4 +49,17 @@
 
 .image {
   border-radius: 0.25rem;
+}
+
+.sellingPriceContainer .currencyContainer {
+  font-weight: 700;
+  color: #000;
+  font-size: 18px;
+  line-height: normal;
+}
+@media screen and (min-width: 1025px) {
+  .sellingPriceContainer .currencyContainer {
+    font-size: 24px;
+    line-height: normal;
+  }
 }

styles/css/vtex.rich-text.css

@@ -6,4 +6,18 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
-/* Grid breakpoints */
+/* Grid breakpoints */
+.container--productShelfTitle {
+  padding: 0 40px;
+}
+.container--productShelfTitle .heading {
+  font-size: 20px;
+  font-weight: 400;
+  line-height: 38px;
+  color: #575757;
+}
+@media screen and (min-width: 768px) {
+  .container--productShelfTitle .heading {
+    font-size: 24px;
+  }
+}

styles/css/vtex.slider-layout.css

@@ -42,4 +42,22 @@
 .sliderLayoutContainer--productShelf {
   width: 100%;
   padding: 0 40px;
+}
+
+.paginationDotsContainer--productShelf {
+  align-items: center;
+}
+
+.paginationDot--productShelf {
+  background-color: #000;
+  width: 10px !important;
+  height: 10px !important;
+  transition: 300ms ease;
+}
+
+.paginationDot--productShelf--isActive {
+  border: 1px solid #000;
+  background-color: #fff;
+  width: 17px !important;
+  height: 17px !important;
 }

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

@@ -102,6 +102,7 @@
   padding: 0 40px;
 }
 
+.flexRowContent--productAvailability,
 .flexRowContent--productMain {
   @media screen and (max-width: 1024px) {
     flex-direction: column !important;
@@ -166,5 +167,7 @@
 }
 
 .flexRow--productSpecificationItemContainer {
-  padding: 0 32px;
+  @media screen and (min-width: 1025px) {
+    padding: 0 32px;
+  }
 }

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

@@ -42,3 +42,17 @@
 .image {
   border-radius: 0.25rem;
 }
+
+.sellingPriceContainer {
+  .currencyContainer {
+    font-weight: 700;
+    color: #000;
+    font-size: 18px;
+    line-height: normal;
+
+    @media screen and (min-width: 1025px) {
+      font-size: 24px;
+      line-height: normal;
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+.container--productShelfTitle {
+  padding: 0 40px;
+
+  .heading {
+    font-size: 20px;
+    font-weight: 400;
+    line-height: 38px;
+    color: #575757;
+
+    @media screen and (min-width: 768px) {
+      font-size: 24px;
+    }
+  }
+}

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

@@ -34,3 +34,21 @@
   width: 100%;
   padding: 0 40px;
 }
+
+.paginationDotsContainer--productShelf {
+  align-items: center;
+}
+
+.paginationDot--productShelf {
+  background-color: #000;
+  width: 10px !important;
+  height: 10px !important;
+  transition: 300ms ease;
+}
+
+.paginationDot--productShelf--isActive {
+  border: 1px solid #000;
+  background-color: #fff;
+  width: 17px !important;
+  height: 17px !important;
+}