feat(produto): Ajustes Css do produto

manifest.json

@@ -15,7 +15,6 @@
     "postreleasy": "vtex publish --verbose"
   },
   "dependencies": {
-    "agenciamagma.store-theme": "5.x",
     "vtex.store": "2.x",
     "vtex.store-header": "2.x",
     "vtex.product-summary": "2.x",

react/Example.tsx

@@ -1,3 +0,0 @@
-import Example from "./components/Example/Example";
-
-export default Example;

react/PixComponent.tsx

@@ -0,0 +1,3 @@
+import PixComponent from "./components/PixComponent/PixComponent";
+
+export default PixComponent;

react/components/Example/Example.tsx

@@ -1,9 +0,0 @@
-import React from 'react'
-
-const Example = () => {
-  return (
-    <div>Example</div>
-  )
-}
-
-export default Example

react/components/Html/index.tsx

@@ -4,38 +4,49 @@ import { useCssHandles } from "vtex.css-handles";
 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/PixComponent/PixComponent.css

@@ -0,0 +1,15 @@
+.wrapperPix:after {
+  display: none;
+}
+
+.wrapperPix:before {
+  display: none;
+}
+
+.wrapperPixImage {
+  width: 40%;
+}
+
+.wrapperPrices {
+  width: 60%;
+}

react/components/PixComponent/PixComponent.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { useProduct } from "vtex.product-context";
+import "./PixComponent.css";
+
+const pixComponent = () => {
+  const product = useProduct();
+
+  return (
+    <div className="wrapperPix">
+      <div className="wrapperPrices">
+        <p className="wrapperTitle">
+          {(product?.product?.priceRange.sellingPrice.highPrice || 0) * 0.9}
+        </p>
+        <p className="wrapperSubtitle">10 % de desconto</p>
+      </div>
+    </div>
+  );
+};
+
+export default pixComponent;

store/blocks/footer/footer.json

@@ -1,9 +1,6 @@
 {
   "footer": {
-    "blocks": [
+    "blocks": ["footer-layout.desktop", "footer-layout.mobile"]
-      "footer-layout.desktop",
-      "footer-layout.mobile"
-    ]
   },
   "footer-layout.desktop": {
     "children": [
@@ -50,26 +47,18 @@
     }
   },
   "flex-layout.row#footer-2-desktop": {
-    "children": [
+    "children": ["accepted-payment-methods"],
-      "accepted-payment-methods"
-    ],
     "props": {
       "blockClass": "payment-methods"
     }
   },
   "accepted-payment-methods": {
     "props": {
-      "paymentMethods": [
+      "paymentMethods": ["MasterCard", "Visa", "Diners Club"]
-        "MasterCard",
-        "Visa",
-        "Diners Club"
-      ]
     }
   },
   "flex-layout.row#footer-3-desktop": {
-    "children": [
+    "children": ["rich-text#footer"],
-      "rich-text#footer"
-    ],
     "props": {
       "blockClass": "credits"
     }
@@ -87,9 +76,7 @@
     ]
   },
   "flex-layout.row#2-footer-mobile": {
-    "children": [
+    "children": ["flex-layout.col#footer-1-mobile"],
-      "flex-layout.col#footer-1-mobile"
-    ],
     "props": {
       "blockClass": "payment-methods",
       "paddingTop": 4,
@@ -114,9 +101,7 @@
       "paddingTop": 4,
       "paddingBottom": 4
     },
-    "children": [
+    "children": ["vtex.menu@2.x:menu#footer-mobile"]
-      "vtex.menu@2.x:menu#footer-mobile"
-    ]
   },
   "rich-text#footer-mobile": {
     "props": {

store/blocks/home/home.jsonc

@@ -2,9 +2,9 @@
   "store.home": {
     "blocks": [
       "list-context.image-list#demo",
-      "example-component",      /* You can make references to blocks defined in other files.
+      "example-component",
-       * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
+      /* You can make references to blocks defined in other files.
-      "flex-layout.row#deals",
+       * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals",
       "__fold__",
       "rich-text#shelf-title",
       "flex-layout.row#shelf",

store/blocks/pdp/product.jsonc

@@ -3,10 +3,12 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "flex-layout.row#description",
+      // "flex-layout.row#description",
-      "flex-layout.row#specifications-title",
+      // "flex-layout.row#specifications-title",
-      "product-specification-group#table",
+      "tab-layout#home",
-      "shelf.relatedProducts",
+      "newsletter",
+      // "product-specification-group#table",
+      // "shelf.relatedProducts",
       "product-questions-and-answers"
     ]
   },
@@ -18,6 +20,115 @@
     },
     "children": ["breadcrumb"]
   },
+
+  // Description
+  "tab-layout#home": {
+    "children": ["tab-list#description", "tab-content#description"],
+    "props": {
+      "blockClass": "description",
+      "defaultActiveTabId": "description1"
+    }
+  },
+
+  // Abas
+  "tab-list#description": {
+    "children": [
+      "tab-list.item#description1",
+      "tab-list.item#description2",
+      "tab-list.item#description3",
+      "tab-list.item#description4",
+      "tab-list.item#description5"
+    ]
+  },
+
+  "tab-list.item#description1": {
+    "props": {
+      "tabId": "description1",
+      "label": "Descrição",
+      "defaultActiveTab": true,
+      "blockClass": "description"
+    }
+  },
+
+  "tab-list.item#description2": {
+    "props": {
+      "tabId": "description2",
+      "label": "Descrição",
+      "blockClass": "description"
+    }
+  },
+
+  "tab-list.item#description3": {
+    "props": {
+      "tabId": "description3",
+      "label": "Descrição",
+      "blockClass": "description"
+    }
+  },
+
+  "tab-list.item#description4": {
+    "props": {
+      "tabId": "description4",
+      "label": "Descrição",
+      "blockClass": "description"
+    }
+  },
+
+  "tab-list.item#description5": {
+    "props": {
+      "tabId": "description5",
+      "label": "Descrição",
+      "blockClass": "description"
+    }
+  },
+
+  // Conteudos
+  "tab-content#description": {
+    "children": [
+      "tab-content.item#description1",
+      "tab-content.item#description2",
+      "tab-content.item#description3",
+      "tab-content.item#description4",
+      "tab-content.item#description5"
+    ]
+  },
+
+  "tab-content.item#description1": {
+    "children": ["product-description"],
+    "props": {
+      "tabId": "description1",
+      "blockClass": "descriptionContent"
+    }
+  },
+  "tab-content.item#description2": {
+    "children": ["product-description"],
+    "props": {
+      "tabId": "description2",
+      "blockClass": "descriptionContent"
+    }
+  },
+  "tab-content.item#description3": {
+    "children": ["product-description"],
+    "props": {
+      "tabId": "description3",
+      "blockClass": "descriptionContent"
+    }
+  },
+  "tab-content.item#description4": {
+    "children": ["product-description"],
+    "props": {
+      "tabId": "description4",
+      "blockClass": "descriptionContent"
+    }
+  },
+  "tab-content.item#description5": {
+    "children": ["product-description"],
+    "props": {
+      "tabId": "description5",
+      "blockClass": "descriptionContent"
+    }
+  },
+
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
   },
@@ -104,12 +215,13 @@
       "product-rating-summary",
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
+      "pix-component",
       "product-installments",
       "product-separator",
       "product-identifier.product",
       "sku-selector",
       "product-quantity",
-      "product-assembly-options",
+      // "product-assembly-options",
       "product-gifts",
       "flex-layout.row#buy-button",
       "availability-subscriber",

store/interfaces.json

@@ -5,5 +5,8 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+  "pix-component": {
+    "component": "PixComponent"
   }
 }

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,25 @@
+/*
+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 */
+.homeLink .homeIcon {
+  display: none;
+}
+
+.homeLink::before {
+  content: "Home";
+  font-size: 16px;
+}
+
+.arrow--1 .Link {
+  font-size: 0;
+}
+.arrow--1 .Link::before {
+  content: "Sapatos";
+  font-size: 16px;
+}

styles/css/vtex.flex-layout.css

@@ -1,98 +1,16 @@
-.flexRowContent--menu-link,
+/*
-.flexRowContent--main-header {
+0 - 600PX: Phone
-  padding: 0 0.5rem;
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.flexRowContent {
+  width: 100%;
+  margin-left: 0 320px;
 }
-
+.flexRowContent .stretchChildrenWidth {
-@media screen and (min-width: 40em) {
+  width: 50% !important;
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 1rem;
-  }
-}
-
-@media screen and (min-width: 80rem) {
-  .flexRowContent--menu-link,
-  .flexRowContent--main-header {
-    padding: 0 0.25rem;
-  }
-}
-
-.flexRowContent--menu-link {
-  background-color: #03044e;
-  color: #fff;
-}
-
-.flexRowContent--main-header {
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--main-header-mobile {
-  align-items: center;
-  padding: 0.625rem 0.5rem;
-  background-color: #f0f0f0;
-}
-
-.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) {
-  color: #ffffff;
-  font-size: 14px;
-}
-
-.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) {
-  color: #727273;
-  font-size: 14px;
-}
-
-.flexRow--deals {
-  background-color: #0F3E99;
-  padding: 14px 0px;
-}
-
-.flexRow--deals .stretchChildrenWidth {
-  align-items: center;
-}
-
-.flexRow--deals .flexCol {
-  align-items: center;
-  margin-bottom: 5px;
-  padding-top: 5px;
-}
-
-.flexCol--filterCol {
-  max-width: 500px;
-  min-width: 230px;
-}
-
-.flexCol--productCountCol {
-  align-items: flex-start;
-}
-
-.flexCol--orderByCol {
-  align-items: flex-end;
-}
-
-.flexCol--orderByMobileCol {
-  width: 42%;
-}
-
-.flexCol--filterMobileCol {
-  width: 38%;
-}
-
-.flexRow--quickviewMainRow {
-  display: flex;
-  max-height: 100%;
-}
-
-.flexColChild--quickviewDetails:first-child {
-  overflow-y: auto;
-  height: 66% !important;
-  overflow-x: hidden;
-}
-
-.flexColChild--quickviewDetails:last-child {
-  height: 34% !important;
-}
-
-.flexRow--addToCartRow {
-  padding-bottom: 1rem;
 }

styles/css/vtex.shelf.css

@@ -0,0 +1,12 @@
+/*
+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 */
+.container {
+  display: none;
+}

styles/css/vtex.store-components.css

@@ -8,5 +8,45 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .newsletter {
-  background: red;
+  background: black;
+  color: white;
+}
+
+.container .carouselContainer .carouselGaleryCursor .productImagesGallerySwiperContainer .swiperPaginationClickable {
+  display: none;
+}
+.container .carouselContainer .flexColChild .productBrand {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  text-align: right !important;
+  color: #575757;
+}
+
+.flexCol .flexColChild .flexRowContent {
+  justify-content: end !important;
+  display: none;
+}
+
+.productBrand--quickview {
+  display: flex;
+  justify-content: end;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  text-align: right;
+  color: #575757;
+}
+
+.productImageTag {
+  height: 664px;
+  width: 664px;
+}
+
+.sellingPriceValue {
+  display: none;
 }

styles/css/vtex.tab-layout.css

@@ -0,0 +1,57 @@
+@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 */
+.container .listContainer .listItem {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 38px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #bfbfbf;
+}
+.container .listContainer .listItemActive {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 32px;
+  line-height: 38px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #000000;
+}
+.container .contentContainer .contentItem .productDescriptionContainer {
+  padding: 100px;
+}
+.container .contentContainer .contentItem .productDescriptionContainer .productDescriptionTitle {
+  display: block;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 32px;
+  color: #575757;
+}
+.container .contentContainer .contentItem .productDescriptionContainer .productDescriptionText {
+  content: "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+
+.descriptionContent {
+  padding: 100px;
+}

styles/css/vtex.telemarketing.css

@@ -0,0 +1,12 @@
+/*
+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 */
+.wrapper {
+  display: none;
+}

styles/sass/pages/product/vtex.breadcrumb.scss

@@ -0,0 +1,21 @@
+.homeLink {
+  .homeIcon {
+    display: none;
+  }
+}
+
+.homeLink::before {
+  content: "Home";
+  font-size: 16px;
+}
+
+.arrow--1 {
+  .Link {
+    font-size: 0;
+  }
+
+  .Link::before {
+    content: "Sapatos";
+    font-size: 16px;
+  }
+}

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

@@ -0,0 +1,8 @@
+.flexRowContent {
+  width: 100%;
+  margin-left: 0 320px;
+  // Wrapper do produto
+  .stretchChildrenWidth {
+    width: 50% !important;
+  }
+}

styles/sass/pages/product/vtex.shelf.scss

@@ -0,0 +1,3 @@
+.container {
+  display: none;
+}

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

@@ -1,3 +1,81 @@
-.newsletter{
+.newsletter {
-    background: red;
+  background: black;
+  color: white;
+}
+
+// Bloco do produto
+.container {
+  .product-images {
+    // display: block;
+  }
+
+  // Bloco das imagens
+  .carouselContainer {
+    // Bloco das miniaturas
+    .carouselGaleryThumbs {
+      // Miniaturas individuais
+      .productImagesThumb {
+      }
+    }
+
+    .carouselGaleryCursor {
+      // width: 50% !important;
+      // order: 1;
+      .productImagesGallerySwiperContainer {
+        .productImagesGallerySlide {
+          .productImage {
+            .productImageTag--main {
+            }
+          }
+        }
+      }
+      .productImagesGallerySwiperContainer {
+        .swiperPaginationClickable {
+          display: none;
+        }
+      }
+    }
+
+    .flexColChild {
+      .productBrand {
+        font-family: "Open Sans";
+        font-style: normal;
+        font-weight: 300;
+        font-size: 20px;
+        line-height: 34px;
+        text-align: right !important;
+        color: #575757;
+      }
+    }
+  }
+}
+
+.flexCol {
+  .flexColChild {
+    .flexRowContent {
+      justify-content: end !important;
+      display: none;
+    }
+  }
+}
+
+.productBrand--quickview {
+  display: flex;
+  justify-content: end;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  text-align: right;
+  color: #575757;
+}
+
+.productImageTag {
+  height: 664px;
+  width: 664px;
+}
+
+.sellingPriceValue {
+  display: none;
 }

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

@@ -0,0 +1,59 @@
+.container {
+  // display: none;
+  .listContainer {
+    .listItem {
+      font-family: "Open Sans";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 18px;
+      line-height: 38px;
+      display: flex;
+      align-items: center;
+      text-align: center;
+      color: #bfbfbf;
+    }
+
+    .listItemActive {
+      font-family: "Open Sans";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 32px;
+      line-height: 38px;
+      display: flex;
+      align-items: center;
+      text-align: center;
+      color: #000000;
+    }
+  }
+
+  // Descrição
+  .contentContainer {
+    .contentItem {
+      .productDescriptionContainer {
+        padding: 100px;
+        .productDescriptionTitle {
+          display: block;
+          font-family: "Open Sans";
+          font-style: normal;
+          font-weight: 400;
+          font-size: 24px;
+          line-height: 32px;
+          color: #575757;
+        }
+        .productDescriptionText {
+          content: "Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.";
+          font-family: "Open Sans";
+          font-style: normal;
+          font-weight: 400;
+          font-size: 16px;
+          line-height: 22px;
+          color: #929292;
+        }
+      }
+    }
+  }
+}
+
+.descriptionContent {
+  padding: 100px;
+}

styles/sass/pages/product/vtex.telemarketing.scss

@@ -0,0 +1,3 @@
+.wrapper {
+  display: none;
+}