feat(product): adicionando e estilizando input e button de add to cart

product

react/components/Html/index.tsx

@@ -1,41 +1,53 @@
 import React, { ReactNode } from "react";
 import { useCssHandles } from "vtex.css-handles";
+import "./style.css";
 
 const CSS_HANDLES = ["html"] as const;
 
 type HtmlProps = {
-    children?: ReactNode,
+  children?: ReactNode;
-    /**
+  /**
-     * Qual tag Html que deseja que seja usar
+   * Qual tag Html que deseja que seja usar
-     *
+   *
-     * @default div
+   * @default div
-     */
+   */
-    tag?: keyof React.ReactHTML
+  tag?: keyof React.ReactHTML;
-    /**
+  /**
-     * Classes CSS extras que deseja adicionar.
+   * Classes CSS extras que deseja adicionar.
-     * Feito para uso de [classes do tachyons](https://tachyons.io/)
+   * Feito para uso de [classes do tachyons](https://tachyons.io/)
-     */
+   */
-    tachyonsClasses?: string
+  tachyonsClasses?: string;
-    /**
+  /**
-     * Se caso quiser usar esse componente
+   * Se caso quiser usar esse componente
-     * para adicinar um texto simples
+   * para adicinar um texto simples
-     */
+   */
-    text?: string
+  text?: string;
-    /**
+  /**
-       * Tag ID para
+   * Tag ID para
-       */
+   */
-    testId?: string
+  testId?: string;
-}
+};
-
+
-export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => {
+export const Html = ({
-    const { handles } = useCssHandles(CSS_HANDLES);
+  children = null,
-
+  tag = "div",
-    const props = {
+  text = "",
-      className: `${handles.html} ${classes}`,
+  tachyonsClasses: classes = "",
-      "data-testid": testId
+  testId,
-    };
+}: HtmlProps) => {
-    const Children = <>{children}{text}</>;
+  const { handles } = useCssHandles(CSS_HANDLES);
-    const Element = React.createElement(tag, props, Children);
+
-
+  const props = {
-    return <>{Element}</>;
+    className: `${handles.html} ${classes}`,
+    "data-testid": testId,
+  };
+  const Children = (
+    <>
+      {children}
+      {text}
+    </>
+  );
+  const Element = React.createElement(tag, props, Children);
+
+  return <>{Element}</>;
 };

react/components/Html/style.css

@@ -0,0 +1,8 @@
+
+[class*="html--product-quantity"] {
+  height: 100%;
+}
+[class*="html--buy-button "] {
+  height: 100%;
+  width: 100%;
+}

store/blocks/pdp/product.jsonc

@@ -115,11 +115,11 @@
       "installment-component",
       "html#pix-component",
       // "product-separator", //linha que separa preço de skus
-      "sku-selector",
+      "html#sku-selector",
-      "product-quantity",
+      "flex-layout.row#quantity-and-button",
-      "product-assembly-options",
+      // "product-assembly-options",
-      "product-gifts",
+      // "product-gifts",
-      "flex-layout.row#buy-button",
+      // "flex-layout.row#buy-button",
       "availability-subscriber",
       "shipping-simulator",
       "share#default"
@@ -133,12 +133,18 @@
     "children": ["vtex.store-components:product-name"]
   },
 
+  "html#sku-selector": {
+    "props": {
+      "testId": "sku-selector"
+    },
+    "children": ["sku-selector"]
+  },
+
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
       "showValueNameForImageVariation": true,
       "blockClass": "sku-product"
-
     }
   },
 
@@ -150,14 +156,40 @@
     "children": ["pix-component"]
   },
 
+  "html#product-quantity": {
+    "props": {
+      "blockClass": "product-quantity",
+      "tag": "section",
+      "testId": "product-quantity"
+    },
+    "children": ["product-quantity"]
+  },
+
+  "html#button-addCart": {
+    "props": {
+      "tag": "section",
+      "testId": "add-to-cart-button",
+      "blockClass": "buy-button"
+    },
+    "children": ["flex-layout.row#buy-button"]
+  },
+
   "flex-layout.row#buy-button": {
     "props": {
-      "marginTop": 4,
+      "blockClass": "buy-button",
-      "marginBottom": 7
+      "width": "100%"
     },
     "children": ["add-to-cart-button"]
   },
 
+  "flex-layout.row#quantity-and-button": {
+    "props":{
+      "tag": "section",
+      "blockClass": "quantityButton"
+    },
+    "children": ["html#product-quantity","html#button-addCart"]
+  },
+
   "flex-layout.row#product-availability": {
     "props": {
       "colGap": 7,

styles/css/vtex.flex-layout.css

@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*
 0 - 600PX: Phone
 600 - 900px: Table portrait
@@ -109,7 +110,7 @@
   padding: 0;
   margin: 0;
 }
-@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
   .flexRowContent--product__image {
     flex-direction: column;
   }
@@ -118,7 +119,7 @@
   padding-right: 16px;
   margin-right: 16px;
 }
-@media (min-width: 491px) and (max-width: 1024px), (min-width: 280px) and (max-width: 490px) {
+@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
   .flexRowContent--product__image .stretchChildrenWidth {
     width: 100% !important;
     padding-right: 0;
@@ -134,4 +135,50 @@
   height: 34px;
   padding: 0 !important;
   margin: 0 0 8px 0 !important;
+}
+
+.flexRow--quantityButton {
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
+  height: 49px;
+}
+@media (min-width: 280px) and (max-width: 768px) {
+  .flexRow--quantityButton {
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    row-gap: 10px;
+    height: auto;
+  }
+}
+.flexRow--quantityButton .flexRowContent--quantityButton .stretchChildrenWidth {
+  width: 100% !important;
+}
+.flexRow--quantityButton .flexRowContent--quantityButton .stretchChildrenWidth:first-child {
+  width: 128px !important;
+  padding: 0;
+  margin: 0 10px 0 0;
+}
+.flexRow--quantityButton .flexRow--buy-button .flexRowContent--buy-button .stretchChildrenWidth {
+  width: 100% !important;
+  padding: 0;
+  margin: 0;
+  height: 49px;
+}
+.flexRow--quantityButton .flexRow--buy-button .flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-button) {
+  background: #000;
+  border-radius: 0;
+  border: none;
+}
+.flexRow--quantityButton .flexRow--buy-button .flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-add-to-cart-button-0-x-buttonText) {
+  font-size: 0;
+}
+.flexRow--quantityButton .flexRow--buy-button .flexRowContent--buy-button .stretchChildrenWidth :global(.vtex-add-to-cart-button-0-x-buttonText)::after {
+  content: "ADICIONAR À SACOLA";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  color: #fff;
 }

styles/css/vtex.product-quantity.css

@@ -0,0 +1,59 @@
+/*
+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 */
+.quantitySelectorContainer {
+  margin: 0;
+  padding: 0;
+}
+.quantitySelectorContainer .quantitySelectorTitle {
+  display: none;
+}
+.quantitySelectorContainer .quantitySelectorStepper {
+  height: 49px;
+  width: 128px;
+}
+@media (min-width: 280px) and (max-width: 768px) {
+  .quantitySelectorContainer .quantitySelectorStepper {
+    margin-bottom: 10px;
+  }
+}
+.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-container) {
+  border: 1px solid #CCCCCC;
+  height: 49px;
+  width: 100%;
+  padding: 13.5px 16px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__input) {
+  height: 100%;
+  border: none;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  text-align: center;
+  color: #929292;
+}
+.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button), .quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) {
+  border: none;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  text-align: center;
+  color: #000;
+  height: 100%;
+  background: transparent;
+  width: auto !important;
+}

styles/css/vtex.store-components.css

@@ -97,7 +97,7 @@
 .skuSelectorContainer--sku-product {
   display: flex;
   flex-direction: column-reverse;
-  margin-top: 16px;
+  margin: 16px 0;
 }
 .skuSelectorContainer--sku-product .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer {
   margin: 0;

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

@@ -128,3 +128,57 @@
   padding: 0 !important;
   margin: 0 0 8px 0 !important;
 }
+
+.flexRow--quantityButton {
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
+  height: 49px;
+
+  @media #{$mq-mobile} {
+    flex-direction: column !important;
+    align-items: flex-start !important;
+    row-gap: 10px;
+    height: auto;
+  }
+
+  .flexRowContent--quantityButton .stretchChildrenWidth{
+    &:first-child {
+          width: 128px !important;
+          padding: 0;
+          margin: 0 10px 0 0;
+    }
+    width: 100% !important;
+  }
+
+
+  .flexRow--buy-button .flexRowContent--buy-button{
+
+    .stretchChildrenWidth {
+      width: 100% !important;
+      padding: 0;
+      margin: 0;
+      height: 49px;
+
+      :global(.vtex-button) {
+        background: $color-black0;
+        border-radius: 0;
+        border: none;
+      }
+      :global(.vtex-add-to-cart-button-0-x-buttonText) {
+        font-size: 0;
+
+        &::after {
+          content: "ADICIONAR À SACOLA";
+          font-family: 'Open Sans';
+          font-style: normal;
+          font-weight: 400;
+          font-size: 18px;
+          line-height: 25px;
+          color: $color-white;
+        }
+      }
+    }
+  }
+
+}

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

@@ -0,0 +1,54 @@
+.quantitySelectorContainer {
+  margin: 0;
+  padding: 0;
+
+  .quantitySelectorTitle {
+    display: none;
+  }
+
+  .quantitySelectorStepper{
+    height: 49px;
+    width: 128px;
+
+    @media #{$mq-mobile} {
+      margin-bottom: 10px;
+    }
+
+    :global(.vtex-numeric-stepper-container) {
+      border: 1px solid #CCCCCC;
+      height: 49px;
+      width: 100%;
+      padding: 13.5px 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    :global(.vtex-numeric-stepper__input) {
+      height: 100%;
+      border: none;
+
+      font-family: $font-family;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 22px;
+      text-align: center;
+      color: $color-gray6;
+    }
+    :global(.vtex-numeric-stepper__plus-button), :global(.vtex-numeric-stepper__minus-button){
+      border: none;
+      font-family: $font-family;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 16px;
+      line-height: 22px;
+      text-align: center;
+      color: $color-black0;
+      height: 100%;
+      background: transparent;
+      width: auto!important;
+    }
+
+
+  }
+}

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

@@ -82,7 +82,7 @@
 .skuSelectorContainer--sku-product  {
   display: flex;
   flex-direction: column-reverse;
-  margin-top: 16px;
+  margin: 16px 0;
 
   .skuSelectorSubcontainer--tamanho {
 

styles/sass/utils/_vars.scss

@@ -41,6 +41,6 @@ $z-index: (
 ) !default;
 
 //media-queries
-$mq-desktop: "(min-width: 1025px) and (max-width: 2499px)";
+$mq-desktop: "(min-width: 1025px) and (max-width: 2560px)";
-$mq-tablet: "(min-width: 491px) and (max-width: 1024px)";
+$mq-tablet: "(min-width: 769px) and (max-width: 1024px)";
-$mq-mobile: "(min-width: 280px) and (max-width: 490px)";
+$mq-mobile: "(min-width: 280px) and (max-width: 768px)";