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

@@ -3,6 +3,8 @@
   column-gap: 10px;
 }
 
+
+
 /* Tablet */
 @media (max-width: 1024px) {
   [class*="html--container__buyButton"] {
@@ -97,3 +99,7 @@ max-width:314.4px;
   width: unset;
   max-width: 291.2px;
 }}
+
+[class*="html--quantity"] {
+  max-width: 128px!important;
+ }

store/blocks/pdp/tab-layout-product.jsonc

@@ -101,6 +101,11 @@
     },
     "children": ["product-images#imageDescription", "product-description"]
   },
+  "product-description": {
+    "props": {
+      "collapseContent": false
+    }
+  },
   "flex-layout.row#wrapperImageDescription": {
     "props": {
       "blockClass": "imageDescription",

styles/css/agenciamagma.store-theme.css

@@ -1,16 +0,0 @@
-/*
-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 */
-/* Grid breakpoints */
-.html {
-  background-color: red;
-}
-
-.html--pdp-breadcrumb {
-  background-color: green;
-}

styles/css/vtex.flex-layout.css

@@ -10,7 +10,6 @@
 .flexRowContent--product-main {
   padding: 0 40px;
   margin: 0;
-  border: 1px solid red;
   column-gap: 32px;
 }
 @media (max-width: 1024px) {

styles/css/vtex.product-identifier.css

@@ -15,6 +15,7 @@
   .product-identifier--productReference {
     display: block;
     padding-right: 0;
+    padding-bottom: 24px;
   }
 }
 .product-identifier--productReference .product-identifier__label,
@@ -27,7 +28,6 @@
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
-  /* identical to box height */
   text-align: right;
   color: rgba(146, 146, 146, 0.4784313725);
 }

styles/css/vtex.product-quantity.css

@@ -0,0 +1,27 @@
+/*
+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 */
+/* Grid breakpoints */
+.quantitySelectorStepper {
+  border: 1px solid #989898;
+  max-width: 128px;
+  padding: 3.5px 0;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) {
+  border: none;
+  width: 28px;
+}
+.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button),
+.quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button) {
+  border: none;
+  background-color: #fff;
+}
+
+.quantitySelectorContainer--quantity__wrapper {
+  width: 128px;
+}

styles/css/vtex.store-components.css

@@ -119,6 +119,196 @@
   padding-left: 0 !important;
   padding-right: 0 !important;
 }
+:global(.vtex-store-components-3-x-container) .productNameContainer--quickview {
+  text-align: end;
+  padding-bottom: 8px;
+}
+@media (max-width: 1024px) {
+  :global(.vtex-store-components-3-x-container) .productNameContainer--quickview {
+    text-align: initial;
+  }
+}
+
+.shippingContainer {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  width: 100%;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  display: flex;
+}
+@media (max-width: 1024px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) {
+    flex-direction: column;
+  }
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+  position: absolute;
+  left: 312px;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  text-decoration-line: underline;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
+  color: #000;
+}
+@media (max-width: 1024px) {
+  .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+    position: initial;
+  }
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex__icon-external-link) {
+  display: none;
+}
+.shippingContainer :global(.vtex-input__label) {
+  display: none;
+}
+.shippingContainer :global(.vtex-input-prefix__group) {
+  border: 1px solid #cccccc;
+  border-radius: 0;
+  max-width: 231px;
+  height: 49px;
+}
+.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input),
+.shippingContainer :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::placeholder {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+}
+.shippingContainer :global(.vtex-button) {
+  background: none;
+  border: none;
+  width: 49px;
+  height: 49px;
+  border-radius: 0;
+  background-color: #000;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
+  font-size: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after {
+  content: "OK";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  /* identical to box height */
+  display: flex;
+  align-items: center;
+  color: #ffffff;
+}
+
+.shippingTable {
+  width: 100%;
+  max-width: 326px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.shippingTable .shippingTableHead {
+  display: table-header-group;
+}
+.shippingTable .shippingTableHead .shippingTableRow {
+  display: flex;
+  column-gap: 32px;
+  padding-bottom: 15px;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName,
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
+  display: flex;
+  width: 100%;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-transform: uppercase;
+  /* identical to box height */
+  color: #202020;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName {
+  width: 100%;
+  max-width: 78px;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate {
+  order: 3;
+  width: 100%;
+  max-width: 136px;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice {
+  width: 100%;
+  max-width: 48px;
+  display: flex;
+  order: 2;
+  width: 100%;
+  font-size: 0;
+}
+.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::after {
+  content: "Frete";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-transform: uppercase;
+  /* identical to box height */
+  color: #202020;
+}
+.shippingTable .shippingTableBody {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  row-gap: 15px;
+}
+.shippingTable .shippingTableBody .shippingTableRow {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName,
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice,
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
+  display: flex;
+  flex: 1;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+  color: #afafaf;
+  padding: 0;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn {
+  display: none;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName {
+  width: 100%;
+  max-width: 78px;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate {
+  order: 3;
+  width: 100%;
+  max-width: 136px;
+}
+.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice {
+  order: 2;
+  width: 100%;
+  max-width: 48px;
+}
 
 @media (max-width: 1024px) {
   .subscriberContainer {

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

@@ -1,7 +0,0 @@
-.html {
-  background-color: red;
-}
-
-.html--pdp-breadcrumb {
-  background-color: green;
-}

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

@@ -2,7 +2,6 @@
 .flexRowContent--product-main {
   padding: 0 40px;
   margin: 0;
-  border: 1px solid red;
   column-gap: 32px;
 
   @media (max-width:1024px) {

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

@@ -6,6 +6,7 @@
   @media (max-width:1024px) {
     display: block;
     padding-right: 0;
+    padding-bottom: 24px;
   }
 
   .product-identifier__label,
@@ -14,15 +15,12 @@
   }
 
   .product-identifier__value {
-    font-family: 'Open Sans';
+    font-family: $font-family;
     font-style: normal;
     font-weight: 400;
     font-size: 14px;
     line-height: 19px;
-    /* identical to box height */
-
     text-align: right;
-
     color: #9292927a;
   }
 }

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

@@ -0,0 +1,26 @@
+.quantitySelectorStepper {
+  border: 1px solid #989898;
+  max-width: 128px;
+  padding: 3.5px 0;
+
+
+
+  :global(.vtex-numeric-stepper-wrapper) {
+    :global(.vtex-numeric-stepper-container) {
+      :global(.vtex-numeric-stepper__input) {
+        border: none;
+        width: 28px;
+      }
+
+      :global(.vtex-numeric-stepper__plus-button),
+      :global(.vtex-numeric-stepper__minus-button) {
+        border: none;
+        background-color: #fff;
+      }
+    }
+  }
+}
+
+.quantitySelectorContainer--quantity__wrapper {
+  width: 128px;
+}

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

@@ -118,13 +118,240 @@
 }
 
 // FIM NEWSLETTER
+
 // INICIO MAIN
 :global(.vtex-store-components-3-x-container) {
   padding-left: 0 !important;
   padding-right: 0 !important;
+
+  .productNameContainer--quickview {
+    text-align: end;
+    padding-bottom: 8px;
+
+    @media (max-width:1024px) {
+      text-align: initial;
+    }
+  }
 }
 
 
+// Area de formulario do cep
+.shippingContainer {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  width: 100%;
+
+  :global(.vtex-address-form__postalCode) {
+    display: flex;
+
+    @media (max-width:1024px) {
+      flex-direction: column;
+    }
+
+    :global(.vtex-address-form__postalCode-forgottenURL) {
+      position: absolute;
+      left: 312px;
+      font-family: $font-family;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      display: flex;
+      align-items: center;
+      text-decoration-line: underline;
+
+      :last-child {
+        color: #000;
+      }
+
+      @media (max-width:1024px) {
+        position: initial;
+      }
+
+      :global(.vtex__icon-external-link) {
+        display: none;
+      }
+    }
+  }
+
+  :global(.vtex-input__label) {
+    display: none;
+  }
+
+  :global(.vtex-input-prefix__group) {
+    border: 1px solid #cccccc;
+    border-radius: 0;
+    max-width: 231px;
+    height: 49px;
+
+
+
+    :global(.vtex-address-form-4-x-input),
+    :global(.vtex-address-form-4-x-input)::placeholder {
+      font-family: $font-family;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      display: flex;
+      align-items: center;
+
+      color: #afafaf;
+    }
+
+
+  }
+
+  :global(.vtex-button) {
+    background: none;
+    border: none;
+    width: 49px;
+    height: 49px;
+    border-radius: 0;
+    background-color: #000;
+
+    :global(.vtex-button__label) {
+      font-size: 0;
+
+      &::after {
+        content: "OK";
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 600;
+        font-size: 14px;
+        line-height: 19px;
+        /* identical to box height */
+
+        display: flex;
+        align-items: center;
+
+        color: #ffffff;
+      }
+    }
+  }
+}
+
+// Area de opcoes de entrega
+.shippingTable {
+  width: 100%;
+  max-width: 326px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+
+  .shippingTableHead {
+    display: table-header-group;
+
+    .shippingTableRow {
+      display: flex;
+      column-gap: 32px;
+      padding-bottom: 15px;
+
+      .shippingTableHeadDeliveryName,
+      .shippingTableHeadDeliveryEstimate {
+        display: flex;
+        width: 100%;
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        text-transform: uppercase;
+        /* identical to box height */
+        color: #202020;
+      }
+
+      .shippingTableHeadDeliveryName {
+        width: 100%;
+        max-width: 78px;
+      }
+
+      .shippingTableHeadDeliveryEstimate {
+        order: 3;
+        width: 100%;
+        max-width: 136px;
+      }
+
+      .shippingTableHeadDeliveryPrice {
+        width: 100%;
+        max-width: 48px;
+        display: flex;
+        order: 2;
+        width: 100%;
+        font-size: 0;
+
+        &::after {
+          content: "Frete";
+          font-family: $font-family;
+          font-style: normal;
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 19px;
+          text-transform: uppercase;
+          /* identical to box height */
+
+          color: #202020;
+        }
+      }
+    }
+  }
+
+  .shippingTableBody {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 15px;
+
+    .shippingTableRow {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      .shippingTableCellDeliveryName,
+      .shippingTableCellDeliveryPrice,
+      .shippingTableCellDeliveryEstimate {
+        display: flex;
+        flex: 1;
+        font-family: $font-family;
+        font-style: normal;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 16px;
+        display: flex;
+        align-items: center;
+
+        color: #afafaf;
+        padding: 0;
+      }
+
+      .shippingTableCellDeliveryName {
+        .shippingTableLabel {
+          .shippingTableRadioBtn {
+            display: none;
+          }
+        }
+      }
+
+      .shippingTableCellDeliveryName {
+        width: 100%;
+        max-width: 78px;
+      }
+
+      .shippingTableCellDeliveryEstimate {
+        order: 3;
+        width: 100%;
+        max-width: 136px;
+      }
+
+      .shippingTableCellDeliveryPrice {
+        order: 2;
+        width: 100%;
+        max-width: 48px;
+      }
+    }
+  }
+}
 
 // FIM MAIN
 
@@ -144,7 +371,7 @@
 
     &::after {
       content: "Produto indisponível";
-      font-family: "Open Sans";
+      font-family: $font-family;
       font-style: normal;
       font-weight: 700;
       font-size: 14px;
@@ -162,7 +389,7 @@
 
     &::after {
       content: "Deseja saber quando estiver disponível?";
-      font-family: "Open Sans";
+      font-family: $font-family;
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
@@ -265,7 +492,7 @@
 
             &::after {
               content: "avise-me";
-              font-family: "Open Sans";
+              font-family: $font-family;
               font-style: normal;
               font-weight: 600;
               font-size: 14px;
@@ -447,7 +674,7 @@
     .skuSelectorItemTextValue {
       padding: 0;
       margin: auto;
-      font-family: 'Open Sans';
+      font-family: $font-family;
       font-style: normal;
       font-weight: 400;
       font-size: 14px;

styles/sass/utils/_vars.scss

@@ -1,4 +1,4 @@
-$font-family : "Open Sans";
+$font-family : $font-family;
 $color-black: #000000;
 $color-black2: #292929;
 $color-black3: #575757;