feat: adicona cep

store/blocks/pdp/product.jsonc

@@ -79,7 +79,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      // "width": "60%",
       "rowGap": 0
     }
   },
@@ -111,7 +111,7 @@
       "product-installments",
       "product-separator",
       "sku-selector",
-      "flex-layout.row#quantity-buy-button",
+      "flex-layout.row#buy-button",
       "product-gifts",
       "availability-subscriber",
       "shipping-simulator"
@@ -159,7 +159,7 @@
       "width": "73%",
       "blockClass": "buy-button-row"
     },
-    "children": ["add-to-cart-button"]
+    "children": ["product-quantity", "add-to-cart-button"]
   },
 
   "flex-layout.row#product-availability": {
@@ -203,5 +203,13 @@
         "Pinterest": true
       }
     }
+  },
+
+  "product-quantity": {
+    "props": {
+      "size": "large",
+      "width": "28%",
+      "showLabel": false
+    }
   }
 }

store/blocks/product-summary/quickview.json

@@ -139,13 +139,5 @@
       "blockClass": "quickview",
       "showNavigationArrows": true
     }
-  },
-
-  "product-quantity": {
-    "props": {
-      "size": "large",
-      "width": "28%",
-      "showLabel": false
-    }
   }
 }

styles/css/agenciamagma.store-theme.css

@@ -14,7 +14,3 @@
 .html--pdp-breadcrumb {
   background-color: none;
 }
-
-.homeLink {
-  display: none;
-}

styles/css/vtex.add-to-cart-button.css

@@ -0,0 +1,20 @@
+@charset "UTF-8";
+/*
+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 */
+.buttonText {
+  font-size: 0;
+}
+.buttonText::after {
+  content: "ADICIONAR À SACOLA";
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #fff;
+}

styles/css/vtex.flex-layout.css

@@ -10,4 +10,14 @@
 .flexRowContent--buy-button-row :global(.vtex-button) {
   background: #000000;
   border: none;
+  border-radius: 0;
+  width: 100%;
+}
+
+.strechChildrenWidth {
+  width: 640px;
+}
+
+.flexRowContent--buy-button-row {
+  height: 49px;
 }

styles/css/vtex.store-components.css

@@ -119,3 +119,77 @@
 .skuSelectorItemTextValue {
   color: rgba(185, 185, 185, 0.6);
 }
+
+.productImageTag {
+  max-width: 664px;
+}
+
+.address-form__field .input__label {
+  font-size: 40px;
+}
+
+.shippingContainer {
+  display: flex;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+  display: flex;
+}
+.shippingContainer :global(.vtex-input-prefix__group) {
+  width: 280px;
+  height: 49px;
+  border-radius: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
+  position: relative;
+  left: 32px;
+  padding: 0;
+  margin-top: 25px;
+  text-decoration: underline;
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  display: flex;
+  align-items: center;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 16px;
+  text-decoration: underline;
+  color: #000000;
+}
+.shippingContainer :global(.vtex__icon-external-link) {
+  display: none;
+}
+.shippingContainer :global(.vtex-button) {
+  position: relative;
+  right: 148px;
+  height: 49px;
+  width: 49px;
+  margin-top: 27px;
+  font-size: 0;
+  border: 0;
+  border-radius: 0;
+  background: #000000;
+  cursor: pointer;
+}
+.shippingContainer :global(.vtex-button)::after {
+  content: "OK";
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 19px;
+  color: #fff;
+}
+.shippingContainer :global(.vtex-button__label) {
+  height: fit-content;
+}
+.shippingContainer :global(.vtex-input__label) {
+  font-size: 0px;
+}
+.shippingContainer :global(.vtex-input__label)::after {
+  content: "CALCULAR FRETE";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}

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

@@ -5,7 +5,3 @@
 .html--pdp-breadcrumb {
   background-color: none;
 }
-
-.homeLink {
-  display: none;
-}

styles/sass/pages/product/vtex.add-to-cart-button.scss

@@ -0,0 +1,12 @@
+.buttonText {
+  font-size: 0;
+
+  &::after {
+    content: "ADICIONAR À SACOLA";
+    font-weight: 400;
+    font-size: 18px;
+    line-height: 25px;
+
+    color: $white;
+  }
+}

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

@@ -1,4 +1,14 @@
 .flexRowContent--buy-button-row :global(.vtex-button) {
   background: $black;
   border: none;
+  border-radius: 0;
+  width: 100%;
+}
+
+.strechChildrenWidth {
+  width: 640px;
+}
+
+.flexRowContent--buy-button-row {
+  height: 49px;
 }

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

@@ -138,3 +138,97 @@
 .skuSelectorItemTextValue {
   color: rgba(185, 185, 185, 0.6);
 }
+
+.productImageTag {
+  max-width: 664px;
+}
+
+.address-form__field {
+    .input__label {
+      font-size: 40px;
+    }
+}
+
+// CEP
+.shippingContainer {
+  display: flex;
+
+  :global(.vtex-address-form__postalCode) {
+    display: flex;
+  }
+
+  :global(.vtex-input-prefix__group) {
+    width: 280px;
+    height: 49px;
+    border-radius: 0;
+  }
+
+  :global(.vtex-address-form__postalCode-forgottenURL) {
+    position: relative;
+    left: 32px;
+    padding: 0;
+    margin-top: 25px;
+    text-decoration: underline;
+
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 16px;
+
+    display: flex;
+    align-items: center;
+
+    :last-child {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      text-decoration: underline;
+
+      color: $black;
+    }
+  }
+
+  :global(.vtex__icon-external-link) {
+    display: none;
+  }
+
+  :global(.vtex-button) {
+    position: relative;
+    right: 148px;
+    height: 49px;
+    width: 49px;
+    margin-top: 27px;
+
+    font-size: 0;
+    border: 0;
+    border-radius: 0;
+    background: $black;
+    cursor: pointer;
+
+    &::after {
+      content: "OK";
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 19px;
+
+      color: $white;
+    }
+  }
+
+  :global(.vtex-button__label) {
+    height: fit-content;
+  }
+
+  :global(.vtex-input__label) {
+    font-size: 0px;
+
+    &::after {
+      content: "CALCULAR FRETE";
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+
+      color: $gray;
+    }
+  }
+}
+