projeto finalizado

store/blocks/pdp/product.jsonc

@@ -98,8 +98,7 @@
   "product-images": {
     "props": {
       "aspectRatio": {
-        "desktop": "auto",
-        "phone": "16:9"
+        "desktop": "auto"
       },
       "thumbnailsOrientation": "horizontal",
       "showPaginationDots": false,
@@ -286,11 +285,26 @@
     "children": [
       "product-summary-image",
       "product-summary-name",
-      "product-summary-price",
+      "product-list-price#summary",
+      "product-selling-price#summary",
       "product-summary-buy-button"
     ]
   },
 
+  "product-selling-price#summary": {
+    "props": {
+      "blockClass": "summary-selling-price"
+    },
+    "children": ["product-selling-price"]
+  },
+
+  "product-list-price#summary": {
+    "props": {
+      "blockClass": "summary-list-price"
+    },
+    "children": ["product-summary-price"]
+  },
+
   "html#slider": {
     "props": {
       "testId": "product-summary-list",

styles/css/vtex.flex-layout.css

@@ -10,6 +10,7 @@
 /* Grid breakpoints */
 .flexRowContent--product-main-stack {
   padding: 0 30px;
+  margin-bottom: 0;
 }
 @media screen and (max-width: 1024px) {
   .flexRowContent--product-main-stack {

styles/css/vtex.product-price.css

@@ -12,6 +12,11 @@
   visibility: hidden;
 }
 
+.listPrice--summary {
+  visibility: visible;
+  display: block;
+}
+
 .savings {
   display: none;
 }

styles/css/vtex.slider-layout.css

@@ -10,8 +10,12 @@
 /* Grid breakpoints */
 .sliderLayoutContainer--carousel {
   background-color: white;
+}
+@media screen and (min-width: 1025px) {
+  .sliderLayoutContainer--carousel {
     padding: 0 40px;
   }
+}
 
 .paginationDotsContainer {
   color: black;

styles/css/vtex.store-components.css

@@ -205,16 +205,20 @@
 }
 .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
   color: #000000;
-  position: absolute;
-  left: 348px;
-  top: 25px;
   font-family: "Open Sans";
   font-style: normal;
   font-weight: 400;
   font-size: 12px;
   line-height: 16px;
 }
-@media screen and (max-width: 1024px) {
+@media screen and (min-width: 768px) {
+  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+    position: absolute;
+    left: 348px;
+    top: 25px;
+  }
+}
+@media screen and (max-width: 1024px) and (min-width: 768px) {
   .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
     right: -60px;
   }

styles/css/vtex.tab-layout.css

@@ -29,7 +29,7 @@
 
 .contentItem {
   display: flex;
-  padding: 62px 52px;
+  padding: 62px 52px 0;
 }
 @media screen and (min-width: 1920px) {
   .contentItem {

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

@@ -6,6 +6,7 @@
 // }
 .flexRowContent--product-main-stack {
   padding: 0 30px;
+  margin-bottom: 0;
 
   @media screen and (max-width: 1024px) {
     display: flex;

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

@@ -2,6 +2,11 @@
   visibility: hidden;
 }
 
+.listPrice--summary {
+  visibility: visible;
+  display: block;
+}
+
 .savings {
   display: none;
 }

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

@@ -1,7 +1,10 @@
 .sliderLayoutContainer--carousel {
   background-color: white;
+
+  @media screen and (min-width: 1025px) {
     padding: 0 40px;
   }
+}
 
 .paginationDotsContainer {
   color: black;

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

@@ -229,9 +229,6 @@
 
   :global(.vtex-address-form__postalCode-forgottenURL) {
     color: $color-black;
-    position: absolute;
-    left: 348px;
-    top: 25px;
 
     font-family: $font-family;
     font-style: normal;
@@ -239,7 +236,13 @@
     font-size: 12px;
     line-height: 16px;
 
-    @media screen and (max-width: 1024px) {
+    @media screen and (min-width: 768px) {
+      position: absolute;
+      left: 348px;
+      top: 25px;
+    }
+
+    @media screen and (max-width: 1024px) and (min-width: 768px) {
       right: -60px;
     }
   }

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

@@ -16,7 +16,7 @@
 
 .contentItem {
   display: flex;
-  padding: 62px 52px;
+  padding: 62px 52px 0;
 
   @media screen and (min-width: 1920px) {
     padding: 62px 360px;