feat: customização do Breadcump

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/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}</>;
 };

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",
@@ -40,7 +40,7 @@
         "phone": 1
       },
       "infinite": true,
-      "showNavigationArrows": "desktopOnly",
+      "showNavigationArrows": "never",
       "blockClass": "carousel"
     }
   },

store/blocks/pdp/product.jsonc

@@ -78,7 +78,7 @@
   "flex-layout.col#stack": {
     "children": ["stack-layout"],
     "props": {
-      "width": "60%",
+      "width": "54%",
       "rowGap": 0
     }
   },
@@ -91,7 +91,10 @@
         "desktop": "auto",
         "phone": "16:9"
       },
-      "displayThumbnailsArrows": true
+      "thumbnailsOrientation": "horizontal",
+      "displayThumbnailsArrows": false,
+      "showNavigationArrows": false,
+      "showPaginationDots": false
     }
   },
   "flex-layout.col#right-col": {
@@ -101,12 +104,12 @@
     },
     "children": [
       "flex-layout.row#product-name",
+      "product-identifier.product",
       "product-rating-summary",
-      "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
+      "flex-layout.row#list-price-savings",
       "product-separator",
-      "product-identifier.product",
       "sku-selector",
       "product-quantity",
       "product-assembly-options",

store/blocks/product-summary/quickview.json

@@ -1,9 +1,6 @@
 {
   "modal-trigger#quickview": {
-    "children": [
+    "children": ["icon-expand", "modal-layout#quickview"],
-      "icon-expand",
-      "modal-layout#quickview"
-    ],
     "props": {
       "blockClass": "quickview"
     }
@@ -63,9 +60,7 @@
   },
 
   "flex-layout.col#quickview-product-quantity": {
-    "children": [
+    "children": ["product-summary-quantity#quickview"]
-      "product-summary-quantity#quickview"
-    ]
   },
   "product-summary-quantity#quickview": {
     "props": {
@@ -74,18 +69,14 @@
     }
   },
   "flex-layout.col#quickview-add-to-card-button": {
-    "children": [
+    "children": ["add-to-cart-button"],
-      "add-to-cart-button"
-    ],
     "props": {
       "width": "grow"
     }
   },
 
   "flex-layout.row#quickview-actions-2": {
-    "children": [
+    "children": ["link.product#button-pdp"]
-      "link.product#button-pdp"
-    ]
   },
   "link.product#button-pdp": {
     "props": {
@@ -107,15 +98,10 @@
     }
   },
   "flex-layout.col#quickview-images": {
-    "children": [
+    "children": ["product-images#quickview"]
-      "product-images#quickview"
-    ]
   },
   "flex-layout.col#quickview-product-details": {
-    "children": [
+    "children": ["modal-content#quickview", "modal-actions#quickview"],
-      "modal-content#quickview",
-      "modal-actions#quickview"
-    ],
     "props": {
       "preventVerticalStretch": true,
       "blockClass": "quickviewDetails"
@@ -134,10 +120,10 @@
       "blockClass": "quickview"
     }
   },
-  "product-images#quickview" : {
+  "product-images#quickview": {
     "props": {
       "blockClass": "quickview",
-      "showNavigationArrows": true
+      "showNavigationArrows": "never"
     }
   }
 }

styles/css/agenciamagma.store-theme.css

@@ -8,9 +8,9 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .html {
-  background-color: red;
+  background-color: blueviolet;
 }
 
 .html--pdp-breadcrumb {
-  background-color: green;
+  background-color: black;
 }

styles/css/vtex.breadcrumb.css

@@ -0,0 +1,29 @@
+/*
+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 {
+  padding-left: 40px;
+  display: flex;
+  align-items: center;
+  color: #929292;
+}
+.container .homeLink .homeIcon {
+  display: none;
+}
+.container .homeLink::before {
+  content: "Home";
+  font-size: 16px;
+}
+.container .arrow--1 .link {
+  font-size: 0;
+}
+.container .arrow--1 .link::before {
+  content: "Sapatos";
+  font-size: 16px;
+}

styles/css/vtex.flex-layout.css

@@ -1,98 +1,13 @@
-.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
-@media screen and (min-width: 40em) {
+1800px + : Big desktop
-  .flexRowContent--menu-link,
+*/
-  .flexRowContent--main-header {
+/* Media Query M3 */
-    padding: 0 1rem;
+/* Grid breakpoints */
-  }
+.stretchChildrenWidth {
-}
+  margin: 0;
-
+  padding: 0;
-@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.product-identifier.css

@@ -1,3 +1,25 @@
-.product-identifier--productReference {
+/*
-  margin-bottom: 1rem;
+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 */
+.product-identifier {
+  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;
+  color: rgba(146, 146, 146, 0.48);
 }
+.product-identifier .product-identifier__label,
+.product-identifier .product-identifier__separator {
+  display: none;
+}

styles/css/vtex.store-components.css

@@ -9,4 +9,21 @@
 /* Grid breakpoints */
 .newsletter {
   background: red;
+}
+
+.carouselGaleryThumbs {
+  width: 59.24%;
+  padding-left: 40px;
+}
+
+.productBrand {
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 37px;
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  color: #575757;
 }

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

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

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

@@ -0,0 +1,28 @@
+@import "/styles/sass/utils/vars";
+
+.container {
+  padding-left: 40px;
+  display: flex;
+  align-items: center;
+
+  .homeLink {
+    .homeIcon {
+      display: none;
+    }
+  }
+  .homeLink::before {
+    content: "Home";
+    font-size: 16px;
+    color: $color-gray6;
+  }
+  .arrow--1 {
+    .link {
+      font-size: 0;
+    }
+    .link::before {
+      content: "Sapatos";
+      font-size: 16px;
+      color: $color-gray6;
+    }
+  }
+}

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

@@ -0,0 +1,4 @@
+.stretchChildrenWidth {
+  margin: 0;
+  padding: 0;
+}

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

@@ -0,0 +1,19 @@
+.product-identifier {
+  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;
+
+  color: rgba(146, 146, 146, 0.48);
+
+  .product-identifier__label,
+  .product-identifier__separator {
+    display: none;
+  }
+}

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

@@ -1,3 +1,22 @@
-.newsletter{
+.newsletter {
-    background: red;
+  background: red;
-}
+}
+
+.carouselGaleryThumbs {
+  width: 59.24%;
+  padding-left: 40px;
+}
+
+.productBrand {
+  display: flex;
+  justify-content: flex-end;
+  margin-right: 37px;
+
+  font-family: "Open Sans", sans-serif;
+  font-style: normal;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+
+  color: #575757;
+}

styles/sass/utils/_vars.scss

@@ -7,6 +7,7 @@ $color-gray2: #7d7d7d;
 $color-gray3: #f0f0f0;
 $color-gray4: #c4c4c4;
 $color-gray5: #e5e5e5;
+$color-gray6: #929292;
 
 $color-blue: #4267b2;
 
@@ -14,18 +15,18 @@ $color-green: #4caf50;
 
 /* Grid breakpoints */
 $grid-breakpoints: (
-	xs: 0,
+  xs: 0,
-	cstm: 400,
+  cstm: 400,
-	sm: 576px,
+  sm: 576px,
-	md: 768px,
+  md: 768px,
-	lg: 992px,
+  lg: 992px,
-	xl: 1200px
+  xl: 1200px,
 ) !default;
 
 $z-index: (
-	level1: 5,
+  level1: 5,
-	level2: 10,
+  level2: 10,
-	level3: 15,
+  level3: 15,
-	level4: 20,
+  level4: 20,
-	level5: 25
+  level5: 25,
 ) !default;