feat(product): adicionando estilo no product-image

product

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",

store/blocks/pdp/product.jsonc

@@ -50,7 +50,8 @@
       "marginTop": 4,
       "marginBottom": 7,
       "paddingTop": 7,
-      "paddingBottom": 7
+      "paddingBottom": 7,
+      "blockClass": "product__image"
     },
     "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
   },
@@ -87,11 +88,14 @@
   },
   "product-images": {
     "props": {
+      "testId": "product-images",
       "aspectRatio": {
         "desktop": "auto",
-        "phone": "16:9"
+        "phone": "auto"
       },
-      "displayThumbnailsArrows": true
+      "showPaginationDots": false,
+      "thumbnailsOrientation": "horizontal",
+      "children": ["product-images"]
     }
   },
   "flex-layout.col#right-col": {

styles/css/vtex.breadcrumb.css

@@ -36,6 +36,18 @@
 .container .homeLink .homeIcon {
   display: none;
 }
+.container .link--1 {
+  font-size: 0;
+}
+.container .link--1::after {
+  content: "Sapatos";
+  display: block;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}
 .container .term {
   color: #929292;
 }

styles/css/vtex.flex-layout.css

@@ -1,3 +1,13 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
+/* Grid breakpoints */
 .flexRowContent--menu-link,
 .flexRowContent--main-header {
   padding: 0 0.5rem;
@@ -9,14 +19,12 @@
     padding: 0 1rem;
   }
 }
-
 @media screen and (min-width: 80rem) {
   .flexRowContent--menu-link,
   .flexRowContent--main-header {
     padding: 0 0.25rem;
   }
 }
-
 .flexRowContent--menu-link {
   background-color: #03044e;
   color: #fff;
@@ -96,3 +104,16 @@
 .flexRow--addToCartRow {
   padding-bottom: 1rem;
 }
+
+@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
+  .flexRowContent--product__image {
+    flex-direction: column;
+  }
+}
+
+@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
+  .stretchChildrenWidth {
+    width: 100% !important;
+    padding-right: 0;
+  }
+}

styles/css/vtex.stack-layout.css

@@ -1,6 +1,16 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
+/* Grid breakpoints */
 .stackItem--product {
   width: 100%;
-  min-height: 257px
+  min-height: none;
 }
 
 .stackItem--quickview {

styles/css/vtex.store-components.css

@@ -8,6 +8,66 @@
 /* Media Query M3 */
 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");
 /* Grid breakpoints */
-.newsletter {
+.container {
-  background: red;
+  padding: 16px 360px;
+  margin: 0;
+}
+@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
+  .container {
+    padding: 16px 40px;
+  }
+}
+
+.swiperCaretNext, .swiperCaretPrev {
+  display: none;
+}
+
+.carouselGaleryCursor {
+  cursor: initial;
+}
+
+.productImageTag--main, .videoContainer {
+  object-fit: unset !important;
+  max-height: 904px !important;
+  cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default;
+}
+@media (min-width: 1025px) and (max-width: 2499px) {
+  .productImageTag--main, .videoContainer {
+    max-height: 664px !important;
+  }
+}
+@media (min-width: 491px) and (max-width: 1024px) {
+  .productImageTag--main, .videoContainer {
+    max-height: 944px !important;
+  }
+}
+@media (min-width: 280px) and (max-width: 490px) {
+  .productImageTag--main, .videoContainer {
+    max-height: 296px !important;
+  }
+}
+
+.carouselGaleryThumbs {
+  margin-top: 0;
+}
+@media (min-width: 280px) and (max-width: 490px), (min-width: 491px) and (max-width: 1024px) {
+  .carouselGaleryThumbs {
+    display: block !important;
+  }
+}
+.carouselGaleryThumbs .productImagesThumb {
+  width: 10% !important;
+  height: 100% !important;
+  margin: 16px 16px 0 0;
+  border-radius: 8px;
+}
+@media (min-width: 1025px) and (max-width: 2499px), (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
+  .carouselGaleryThumbs .productImagesThumb {
+    width: 90px !important;
+    height: 90px !important;
+  }
+}
+.carouselGaleryThumbs .productImagesThumb .figure, .carouselGaleryThumbs .productImagesThumb .thumbImg {
+  width: 100%;
+  height: 100%;
 }

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

@@ -29,6 +29,21 @@
       display: none;
     }
   }
+
+  .link--1 {
+    font-size: 0;
+
+    &::after {
+      content: 'Sapatos';
+      display: block;
+      font-family: $font-family;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+    }
+  }
+
   .term {
     color: $color-gray6;
   }

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

@@ -0,0 +1,111 @@
+.flexRowContent--menu-link,
+.flexRowContent--main-header {
+  padding: 0 0.5rem;
+}
+
+@media screen and (min-width: 40em) {
+  .flexRowContent--menu-link,
+  .flexRowContent--main-header {
+    padding: 0 1rem;
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .flexRowContent--menu-link,
+  .flexRowContent--main-header {
+    padding: 0 0.25rem;
+  }
+}
+
+.flexRowContent--menu-link {
+  background-color: #03044e;
+  color: #fff;
+}
+
+.flexRowContent--main-header {
+  background-color: #f0f0f0;
+}
+
+.flexRowContent--main-header-mobile {
+  align-items: center;
+  padding: 0.625rem 0.5rem;
+  background-color: #f0f0f0;
+}
+
+.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
+  color: #ffffff;
+  font-size: 14px;
+}
+
+.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
+  color: #727273;
+  font-size: 14px;
+}
+
+.flexRow--deals {
+  background-color: #0F3E99;
+  padding: 14px 0px;
+}
+
+.flexRow--deals .stretchChildrenWidth {
+  align-items: center;
+}
+
+.flexRow--deals .flexCol {
+  align-items: center;
+  margin-bottom: 5px;
+  padding-top: 5px;
+}
+
+.flexCol--filterCol {
+  max-width: 500px;
+  min-width: 230px;
+}
+
+.flexCol--productCountCol {
+  align-items: flex-start;
+}
+
+.flexCol--orderByCol {
+  align-items: flex-end;
+}
+
+.flexCol--orderByMobileCol {
+  width: 42%;
+}
+
+.flexCol--filterMobileCol {
+  width: 38%;
+}
+
+.flexRow--quickviewMainRow {
+  display: flex;
+  max-height: 100%;
+}
+
+.flexColChild--quickviewDetails:first-child {
+  overflow-y: auto;
+  height: 66% !important;
+  overflow-x: hidden;
+}
+
+.flexColChild--quickviewDetails:last-child {
+  height: 34% !important;
+}
+
+.flexRow--addToCartRow {
+  padding-bottom: 1rem;
+}
+
+.flexRowContent--product__image{
+  @media #{$mq-tablet},  #{$mq-mobile} {
+    flex-direction: column;
+  }
+}
+
+.stretchChildrenWidth {
+  @media #{$mq-tablet}, #{$mq-mobile}{
+    width: 100% !important;
+    padding-right: 0;
+  }
+}

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

@@ -0,0 +1,10 @@
+.stackItem--product {
+  width: 100%;
+  min-height: none;
+}
+
+.stackItem--quickview {
+  right: 0;
+  top: 0;
+  left: auto;
+}

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

@@ -1,3 +1,61 @@
-.newsletter{
+.container {
-    background: red;
+  padding:16px 360px;
+  margin: 0;
+
+  @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
+    padding: 16px 40px;
   }
+}
+
+.swiperCaretNext, .swiperCaretPrev {
+  display: none;
+}
+.carouselGaleryCursor {
+  cursor: initial;
+}
+
+.productImageTag--main, .videoContainer {
+  object-fit: unset !important;
+  max-height: 904px !important;
+  cursor: url(https://agenciamagma.vtexassets.com/_v/public/assets/v1/published/vtex.store-components@3.164.0/public/react/91618bbaeb77d5f5b0173112a38a893e.svg) 8 8, default;
+
+  @media #{$mq-desktop} {
+    max-height: 664px !important;
+  }
+
+  @media #{$mq-tablet} {
+    max-height: 944px !important;
+  }
+
+  @media #{$mq-mobile} {
+    max-height: 296px !important;
+  }
+
+}
+.carouselGaleryThumbs {
+  margin-top: 0;
+
+  @media #{$mq-mobile}, #{$mq-tablet} {
+    display: block !important;
+  }
+
+  .productImagesThumb {
+    width: 10% !important;
+    height: 100% !important;
+    margin: 16px 16px 0 0;
+    border-radius: 8px;
+
+    @media #{$mq-desktop}, #{$mq-tablet}, #{$mq-mobile} {
+      width: 90px !important;
+      height: 90px !important;
+    }
+
+    .figure, .thumbImg{
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+
+