Merge branch 'feature/product-image' into desenvolvimento

docs/Todo.md

@@ -11,9 +11,9 @@ os Requisitos cobrados serão:
 
 - HACK Layout deve ser desenvolvido na seguinte pagina de produto (PDP): https://agenciamagma.myvtex.com/sandalia-azul-spike-amarracao/p
 
-- FIXME [Blocos que devem ser ajustado e desenvolvidos](BreadCrumb){ {c}
+- FIXME [Blocos que devem ser ajustado e desenvolvidos](Todo__Bloco_De_Imagens_Do_Produto){ {c}
 
-      - HACK 1. BreadCrumb;
+      - [x] 1. BreadCrumb;
 
       - HACK 2. todo o bloco de imagens do produto e dados do produto e de compra (ao lado das imagens),
 
@@ -22,6 +22,8 @@ os Requisitos cobrados serão:
       - HACK 4. prateleira de produtos,
 
       - HACK 5. Newsletter.
+
+      - HACK dados_do_produto_e_de_compra-ao_lado_das_imagens
 }
 
 

store/blocks/pdp/product.jsonc

@@ -1,15 +1,6 @@
 {
   "store.product": {
-    "children": [
+    "children": ["html#breadcrumb", "condition-layout.product#availability"]
-      "html#breadcrumb",
-      "condition-layout.product#availability",
-      "flex-layout.row#description",
-      "flex-layout.row#specifications-title",
-      "example-component",
-      "product-specification-group#table",
-      "shelf.relatedProducts",
-      "product-questions-and-answers"
-    ]
   },
   "html#breadcrumb": {
     "props": {
@@ -53,7 +44,7 @@
       "paddingTop": 7,
       "paddingBottom": 7
     },
-    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
+    "children": ["flex-layout.col#stack"]
   },
 
   "stack-layout": {
@@ -80,7 +71,8 @@
     "children": ["stack-layout"],
     "props": {
       "width": "60%",
-      "rowGap": 0
+      "rowGap": 10,
+      "blockClass": "StackLayout"
     }
   },
   "flex-layout.row#product-image": {
@@ -90,8 +82,10 @@
     "props": {
       "aspectRatio": {
         "desktop": "auto",
-        "phone": "16:9"
+        "phone": "auto"
       },
+      "showNavigationArrows": false,
+      "showPaginationDots": false,
       "displayThumbnailsArrows": false,
       "thumbnailsOrientation": "horizontal"
     }

styles/css/vtex.breadcrumb.css

@@ -9,6 +9,14 @@
 /* Grid breakpoints */
 .container {
   padding: 0 40px 16px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 96rem;
+}
+@media screen and (max-width: 64.0625em) {
+  .container {
+    padding: 0 0 0 10.67%;
+  }
 }
 .container .term, .container .termArrow {
   display: none;

styles/css/vtex.store-components.css

@@ -39,10 +39,70 @@
   border-radius: 50%;
 }
 
-.newsletter {
+.carouselContainer {
-  background: black;
+  padding: 0 40px 0;
+}
+.carouselContainer .productImage {
+  max-width: 85.238%;
+}
+@media screen and (min-width: 156.25em) {
+  .carouselContainer .productImage {
+    min-width: 904px;
+    max-width: 100%;
+  }
+}
+@media screen and (max-width: 64.0625em) {
+  .carouselContainer .productImage {
+    min-width: 296px;
+    max-width: 100%;
+  }
+}
+@media screen and (max-width: 23.375em) {
+  .carouselContainer .productImage {
+    min-width: 0;
+    max-width: 100%;
+  }
+}
+.carouselContainer .productImage .productImageTag- {
+  max-height: 100% !important;
+  margin-bottom: 1em;
+  align-self: stretch;
+}
+.carouselContainer .productImage .productImageTag--main {
+  border-radius: 8px;
+  max-height: 100% !important;
 }
 
 .carouselGaleryThumbs {
-  flex-direction: row;
+  display: block;
+  height: max-content;
+}
+.carouselGaleryThumbs .productImagesThumb {
+  width: max-content !important;
+  background: white;
+  margin-right: 1em;
+}
+@media screen and (max-width: 64.0625em) {
+  .carouselGaleryThumbs .productImagesThumb {
+    width: 30% !important;
+  }
+}
+.carouselGaleryThumbs .productImagesThumb .figure {
+  width: 100%;
+}
+.carouselGaleryThumbs .productImagesThumb .figure--video {
+  min-height: 90px;
+}
+.carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
+  border-radius: 8px;
+  min-height: 5.54em;
+}
+@media screen and (max-width: 64.0625em) {
+  .carouselGaleryThumbs .productImagesThumb .figure--video .thumbImg {
+    min-height: 4.9em;
+  }
+}
+.carouselGaleryThumbs .productImagesThumb .figure .thumbImg {
+  border-radius: 8px;
+  width: 90px;
 }

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

@@ -1,6 +1,11 @@
 .container{
     padding: 0 40px 16px;
-
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 96rem;
+    @media screen and (max-width: 64.0625em){
+      padding: 0 0 0 10.67%;
+    }
     .term,.termArrow{
       display: none;
     }

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

@@ -44,10 +44,60 @@
   }
 }
 
-.newsletter{
+.carouselContainer{
-    background: black;
+  padding: 0 40px 0;
+  .productImage{
+    max-width:85.238%;
+    @media screen and (min-width: 156.25em){
+      min-width: 904px;
+      max-width:100%;
+    }
+    @media screen and (max-width: 64.0625em){
+      min-width: 296px;
+      max-width:100%;
+    }
+    @media screen and (max-width: 23.375em){
+      min-width: 0;
+      max-width:100%;
+    }
+    .productImageTag-{
+      max-height: 100% !important;
+      margin-bottom: 1em;
+      align-self: stretch;
+      &-main{
+        border-radius: 8px;
+        max-height: 100% !important;
+      }
+    }
+  }
+}
+.carouselGaleryThumbs{
+  display: block;
+  height: max-content;
+  .productImagesThumb{
+    width: max-content !important;
+    background:white;
+    margin-right: 1em;
+    @media screen and (max-width: 64.0625em){
+      width: 30% !important;
+    }
+    .figure{
+      width: 100%;
+      &--video{
+        min-height: 90px;
+        .thumbImg{
+          border-radius: 8px;
+          min-height: 5.54em;
+          @media screen and (max-width: 64.0625em){
+            min-height: 4.9em;
+          }
+        }
+      }
+      .thumbImg{
+        border-radius: 8px;
+        width: 90px;
+      }
+    }
+  }
 }
 
-.carouselGaleryThumbs{
-  flex-direction: row;
-}