feat: adiciona layout mobile

store/blocks/pdp/product.jsonc

@@ -30,12 +30,12 @@
       "testId": "vtex-product-summary"
     },
     "children": [
-      "product-summary-name",
-      "product-summary-description",
       "product-summary-image",
-      "product-summary-price",
+      "product-summary-name",
-      "product-summary-sku-selector",
+      "product-list-price",
-      "product-summary-buy-button"
+      "product-selling-price",
+      "product-summary-description"
+      // "product-summary-price",
     ]
   },
   "product-summary-image": {
@@ -482,4 +482,4 @@
       }
     }
   }
-}
+}

styles/css/vtex.product-identifier.css

@@ -19,6 +19,12 @@
   text-align: right;
   color: rgba(146, 146, 146, 0.48);
 }
+@media (max-width: 1024px) {
+  .product-identifier {
+    text-align: left;
+    justify-content: left;
+  }
+}
 .product-identifier .product-identifier__label,
 .product-identifier .product-identifier__separator {
   display: none;

styles/css/vtex.slider-layout.css

@@ -36,7 +36,6 @@
 }
 .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) {
   display: flex;
-  order: 1;
 }
 .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-store-components-3-x-discountInsideContainer) {
   display: none;
@@ -47,7 +46,6 @@
 }
 .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) {
   display: flex;
-  order: 2;
   padding: 0;
   justify-content: center;
 }
@@ -56,7 +54,6 @@
   max-width: 282.4px;
   height: 50px;
   align-items: center;
-  order: 4;
   font-family: "Open Sans", sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -67,7 +64,6 @@
 }
 .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) {
   display: flex;
-  order: 3;
   padding: 0;
 }
 .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) {

styles/css/vtex.store-components.css

@@ -16,6 +16,12 @@
 .container {
   padding: 0 40px;
 }
+@media (max-width: 1024px) {
+  .container :global(.vtex-flex-layout-0-x-flexRowContent) {
+    display: flex;
+    flex-direction: column;
+  }
+}
 
 .newsletter {
   background: black;
@@ -101,6 +107,11 @@
   display: flex;
   justify-content: right;
 }
+@media (max-width: 1024px) {
+  .productNameContainer {
+    justify-content: left;
+  }
+}
 .productNameContainer .productBrand--quickview {
   font-family: "Open Sans";
   font-style: normal;
@@ -110,11 +121,22 @@
   text-align: right;
   color: #575757;
 }
+@media (max-width: 1024px) {
+  .productNameContainer .productBrand--quickview {
+    text-align: left;
+  }
+}
 
 .productDescriptionContainer {
   max-width: 632px;
   margin-left: 32px;
 }
+@media (max-width: 1024px) {
+  .productDescriptionContainer {
+    max-width: 100%;
+    margin-left: 0;
+  }
+}
 
 .pointerEventsNone {
   display: none;

styles/css/vtex.tab-layout.css

@@ -15,6 +15,13 @@
   padding-left: 40px;
   justify-content: space-around;
 }
+@media (max-width: 1024px) {
+  .listContainer {
+    flex-direction: column;
+    border-top: #BFBFBF 1px solid;
+    border-spacing: 40px;
+  }
+}
 .listContainer::after {
   content: "";
   background-color: #BFBFBF;
@@ -48,4 +55,9 @@
   font-weight: 400;
   font-size: 18px;
   line-height: 38px;
+}
+@media (max-width: 1024px) {
+  .listItemActive :global(.vtex-button) {
+    border: 0;
+  }
 }

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

@@ -2,13 +2,16 @@
   display: flex;
   justify-content: flex-end;
   margin-right: 40px;
-
   font-family: "Open Sans", sans-serif;
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
   text-align: right;
+  @media (max-width: 1024px){
+    text-align: left;
+    justify-content: left;
+  }
 
   color: rgba(146, 146, 146, 0.48);
 

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

@@ -30,7 +30,6 @@
               padding: 0;
               :global(.vtex-product-summary-2-x-imageContainer) {
                 display: flex;
-                order: 1;
 
                 :global(.vtex-store-components-3-x-discountContainer) {
                   :global(.vtex-store-components-3-x-discountInsideContainer) {
@@ -46,7 +45,6 @@
               }
               :global(.vtex-product-summary-2-x-nameContainer) {
                 display: flex;
-                order: 2;
                 padding: 0;
                 justify-content: center;
 
@@ -55,7 +53,6 @@
                   max-width: 282.4px;
                   height: 50px;
                   align-items: center;
-                  order: 4;
 
                   font-family: 'Open Sans', sans-serif;
                   font-style: normal;
@@ -68,7 +65,6 @@
               }
               :global(.vtex-product-summary-2-x-priceContainer) {
                 display: flex;
-                order: 3;
                 padding: 0;
 
                 :global(.vtex-store-components-3-x-listPrice) {

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

@@ -5,6 +5,12 @@
 }
 .container{
   padding: 0 40px;
+  :global(.vtex-flex-layout-0-x-flexRowContent){
+    @media (max-width: 1024px){
+      display: flex;
+      flex-direction: column;
+    }
+  }
 }
 .newsletter{
     background: black;
@@ -91,6 +97,9 @@
 .productNameContainer{
   display: flex;
   justify-content: right;
+  @media (max-width: 1024px){
+    justify-content: left;
+  }
 
   .productBrand--quickview{
     font-family: 'Open Sans';
@@ -100,11 +109,18 @@
     line-height: 34px;
     text-align: right;
     color: #575757;
+    @media (max-width: 1024px){
+      text-align: left;
+    }
   }
 }
 .productDescriptionContainer{
   max-width: 632px;
   margin-left: 32px;
+  @media (max-width: 1024px){
+    max-width: 100%;
+    margin-left: 0;
+  }
 }
 .pointerEventsNone{
   display: none;

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

@@ -5,6 +5,11 @@
   padding-right: 40px;
   padding-left: 40px;
   justify-content: space-around;
+  @media (max-width: 1024px){
+    flex-direction: column;
+    border-top: #BFBFBF 1px solid;
+    border-spacing: 40px;
+  }
   &::after{
     content: "";
     background-color: #BFBFBF;
@@ -38,4 +43,7 @@
   font-weight: 400;
   font-size: 18px;
   line-height: 38px;
+  @media (max-width: 1024px){
+    border: 0;
+  }
 }