feat(stack): Estiliza as fotos para todos os tamanhos de tela

manifest.json

@@ -15,7 +15,6 @@
     "postreleasy": "vtex publish --verbose"
   },
   "dependencies": {
-    "agenciamagma.store-theme": "5.x",
     "vtex.store": "2.x",
     "vtex.store-header": "2.x",
     "vtex.product-summary": "2.x",

react/components/Html/index.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import { useCssHandles } from "vtex.css-handles";
-
+import "./styles.css";
 const CSS_HANDLES = ["html"] as const;
 
 type HtmlProps = {

react/components/Html/styles.css

@@ -0,0 +1,50 @@
+[class*="html--pdp-breadcrumb"] {
+  margin: 0 40px;
+}
+
+[class*="html--product-main"] {
+  display: flex;
+  padding: 0 40px 16px;
+  gap: 32px;
+}
+
+[class*="html--stack"] {
+  width: 48.8235294%;
+}
+
+[class*="html--right-col"] {
+  width: 48.8235294%;
+}
+
+@media screen and (min-width: 2500px) {
+  [class*="html--pdp-breadcrumb"] {
+    margin: 0 360px;
+  }
+
+  [class*="html--product-main"] {
+    padding: 0 360px 16px;
+  }
+
+  [class*="html--stack"] {
+    width: 49.13043478%;
+  }
+
+  [class*="html--right-col"] {
+    width: 49.13043478%;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  [class*="html--product-main"] {
+    display: block;
+    padding: 0 40px 16px;
+  }
+
+  [class*="html--stack"] {
+    width: 100%;
+  }
+
+  [class*="html--right-col"] {
+    width: 100%;
+  }
+}

store/blocks/pdp/product.jsonc

@@ -40,20 +40,15 @@
           "subject": "isProductAvailable"
         }
       ],
-      "Then": "flex-layout.row#product-main",
+      "Then": "html#product-main",
-      "Else": "flex-layout.row#product-availability"
+      "Else": "html#product-availability"
     }
   },
-  "flex-layout.row#product-main": {
+  "html#product-main": {
     "props": {
-      "colGap": 7,
+      "blockClass": "product-main"
-      "rowGap": 7,
-      "marginTop": 4,
-      "marginBottom": 7,
-      "paddingTop": 7,
-      "paddingBottom": 7
     },
-    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
+    "children": ["html#stack", "html#right-col"]
   },
 
   "stack-layout": {
@@ -61,7 +56,7 @@
       "blockClass": "product"
     },
     "children": [
-      "flex-layout.row#product-image",
+      "html#product-image",
       "product-bookmark",
       "product-specification-badges"
     ]
@@ -76,29 +71,32 @@
     }
   },
 
-  "flex-layout.col#stack": {
+  "html#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      "blockClass": "stack"
-      "rowGap": 0
     }
   },
-  "flex-layout.row#product-image": {
+  "html#product-image": {
+    "props": {
+      "blockClass": "product-image"
+    },
     "children": ["product-images"]
   },
   "product-images": {
     "props": {
-      "aspectRatio": {
+      // "aspectRatio": "auto",
-        "desktop": "auto",
+      "thumbnailAspectRatio": "1:1",
-        "phone": "16:9"
+      "thumbnailMaxHeight": 90,
-      },
+      "showNavigationArrows": false,
-      "displayThumbnailsArrows": true
+      "showPaginationDots": false,
+      "thumbnailsOrientation": "horizontal",
+      "thumbnailVisibility": "visible"
     }
   },
-  "flex-layout.col#right-col": {
+  "html#right-col": {
     "props": {
-      "preventVerticalStretch": true,
+      "blockClass": "right-col"
-      "rowGap": 0
     },
     "children": [
       "flex-layout.row#product-name",
@@ -141,19 +139,13 @@
     "children": ["add-to-cart-button"]
   },
 
-  "flex-layout.row#product-availability": {
+  "html#product-availability": {
     "props": {
-      "colGap": 7,
+      "blockClass": "product-availability"
-      "marginTop": 4,
-      "marginBottom": 7,
-      "paddingTop": 7
     },
-    "children": [
+    "children": ["html#stack", "html#right-col-availability"]
-      "flex-layout.col#stack",
-      "flex-layout.col#right-col-availability"
-    ]
   },
-  "flex-layout.col#right-col-availability": {
+  "html#right-col-availability": {
     "props": {
       "preventVerticalStretch": true,
       "rowGap": 0,

styles/css/agenciamagma.store-theme.css

@@ -6,12 +6,4 @@
 1800px + : Big desktop
 */
 /* Media Query M3 */
-/* Grid breakpoints */
+/* Grid breakpoints */
-.html--pdp-breadcrumb {
-  margin: 0 40px;
-}
-@media screen and (min-width: 2500px) {
-  .html--pdp-breadcrumb {
-    margin: 0 360px;
-  }
-}

styles/css/vtex.store-components.css

@@ -9,4 +9,26 @@
 /* Grid breakpoints */
 .newsletter {
   background: red;
+}
+
+.productImageTag--main {
+  max-height: max-content !important;
+}
+
+.carouselGaleryThumbs {
+  margin-top: 16px;
+}
+@media screen and (max-width: 1024px) {
+  .carouselGaleryThumbs {
+    margin-bottom: 32px;
+    display: block;
+  }
+}
+.carouselGaleryThumbs .productImagesThumbActive,
+.carouselGaleryThumbs .productImagesThumb {
+  margin: 0 16px 0 0;
+  width: 90px !important;
+  height: 90px;
+  border-radius: 8px;
+  overflow: hidden;
 }

styles/sass/pages/product/agenciamagma.store-theme.scss

@@ -1,11 +0,0 @@
-// .html {
-//   background-color: red;
-// }
-
-.html--pdp-breadcrumb {
-  margin: 0 40px;
-
-  @media screen and (min-width: 2500px) {
-    margin: 0 360px;
-  }
-}

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

@@ -1,3 +1,26 @@
-.newsletter{
+.newsletter {
-    background: red;
+  background: red;
-}
+}
+
+.productImageTag--main {
+  max-height: max-content !important;
+}
+
+.carouselGaleryThumbs {
+  margin-top: 16px;
+
+  @media screen and (max-width: 1024px) {
+    margin-bottom: 32px;
+    display: block;
+  }
+
+  .productImagesThumbActive,
+  .productImagesThumb {
+    margin: 0 16px 0 0;
+
+    width: 90px !important;
+    height: 90px;
+    border-radius: 8px;
+    overflow: hidden;
+  }
+}