feat(shipping-simulator): added custom placeholder component

2023-02-09 08:07:31 -03:00 · 2023-02-09 08:07:31 -03:00 · 9847452543
commit 9847452543
parent 469955d63c
22 changed files with 345 additions and 126 deletions
--- a/react/components/Html/index.tsx
+++ b/react/components/Html/index.tsx
@ -4,37 +4,48 @@ 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
   *
   * @default div
   */
-    tag?: keyof React.ReactHTML
+  tag?: keyof React.ReactHTML;
  /**
   * Classes CSS extras que deseja adicionar.
   * Feito para uso de [classes do tachyons](https://tachyons.io/)
   */
-    tachyonsClasses?: string
+  tachyonsClasses?: string;
  /**
   * Se caso quiser usar esse componente
   * para adicinar um texto simples
   */
-    text?: string
+  text?: string;
  /**
   * Tag ID para
   */
-    testId?: string
-}
+  testId?: string;
+};

-export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => {
+export const Html = ({
+  children = null,
+  tag = "div",
+  text = "",
+  tachyonsClasses: classes = "",
+  testId,
+}: HtmlProps) => {
  const { handles } = useCssHandles(CSS_HANDLES);

  const props = {
    className: `${handles.html} ${classes}`,
-      "data-testid": testId
+    "data-testid": testId,
  };
-    const Children = <>{children}{text}</>;
+  const Children = (
+    <>
+      {children}
+      {text}
+    </>
+  );
  const Element = React.createElement(tag, props, Children);

  return <>{Element}</>;
--- a/react/components/PixCustomInstallments/_ComponentsFunctions.ts
+++ b/react/components/PixCustomInstallments/_ComponentsFunctions.ts
@ -1,3 +1,20 @@
+export const calculationPercent = (
+  percent: number | undefined,
+  value: number | undefined
+) => {
+  if (value && percent) {
+    const newPercent = percent / 100;
+
+    const discount = value * newPercent;
+
+    const newValue = value - discount;
+
+    return newValue.toFixed(2).toString().replace(".", ",");
+  }
+
+  return "";
+};
+
 export const sanatizeColor = (color: string) => {
  if (color) {
    const [first] = color.split(" ");
--- a/react/components/PixCustomInstallments/_PixCustomInstallments.tsx
+++ b/react/components/PixCustomInstallments/_PixCustomInstallments.tsx
@ -3,57 +3,38 @@ import React from "react";
 import styles from "./_PixCustomInstallments.module.css";

 import { useProduct } from "vtex.product-context";
-import { sanatizeColor } from "./_ComponentsFunctions";
+import { calculationPercent, sanatizeColor } from "./_ComponentsFunctions";

 interface IPixCustomInstallmentsProps {
  label: string;
  percent: number;
+  color: string;
 }

 export function PixCustomInstallments({
  label = "de desconto",
  percent = 10,
+  color = "c-on-base",
 }: IPixCustomInstallmentsProps) {
  const data = useProduct();

-  const calculationPercent = (
-    percent: number | undefined,
-    value: number | undefined
-  ) => {
-    if (value && percent) {
-      const newPercent = percent / 100;
-
-      const discount = value * newPercent;
-
-      const newValue = value - discount;
-
-      return newValue.toFixed(2).toString().replace(".", ",");
-    }
-
-    return "";
-  };
-
-  console.log(data);
-
  return (
    <div className={`${styles["pix"]} flex`}>
      <img
        src="https://agenciamagma.vteximg.com.br/arquivos/pix-m3academy-henrquesantos-2023.svg"
        alt="Promoção de pagamento com o PIX"
      />
-      <p>
-        <span className={styles["pix__priceValue"]}>
+      <div>
+        <p className={styles["pix__priceValue"]}>
          {`R$ ${calculationPercent(
            percent,
            data?.product?.priceRange.sellingPrice.highPrice
          )}`}
-        </span>
-        <div
-          className={`${styles["pix__label"]} ${sanatizeColor("c-on-base")}`}
-        >
-          {`${percent}% ${label}`}
-        </div>
        </p>
+        <p className={`${styles["pix__label"]} ${sanatizeColor(color)}`}>
+          {`${percent}% ${label}`}
+        </p>
+      </div>
    </div>
  );
 }
@ -68,5 +49,9 @@ PixCustomInstallments.schema = {
    percent: {
      type: "number",
    },
+
+    color: {
+      type: "string",
+    },
  },
 };
--- a/react/components/Placeholder/_Placeholder.tsx
+++ b/react/components/Placeholder/_Placeholder.tsx
@ -0,0 +1,53 @@
+import React, { useEffect } from "react";
+
+interface IPlaceholderProps {
+  text: string;
+}
+
+export function Placeholder({ text = "Digite seu CEP" }: IPlaceholderProps) {
+  function waitForElm(selector: any) {
+    return new Promise((resolve) => {
+      if (document.querySelector(selector)) {
+        return resolve(document.querySelector(selector));
+      }
+
+      const observer = new MutationObserver(() => {
+        if (document.querySelector(selector)) {
+          resolve(document.querySelector(selector));
+          observer.disconnect();
+        }
+      });
+
+      observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+      });
+    });
+  }
+
+  async function ShippingSimulatorPlaceholder(): Promise<void> {
+    const shippingSimulatorInput = (await waitForElm(
+      ".vtex-store-components-3-x-shippingContainer .vtex-address-form-4-x-input"
+    )) as any;
+
+    if (shippingSimulatorInput !== null || shippingSimulatorInput) {
+      shippingSimulatorInput.placeholder = text;
+    }
+  }
+
+  useEffect(() => {
+    ShippingSimulatorPlaceholder();
+  }, []);
+
+  return <></>;
+}
+
+Placeholder.schema = {
+  title: "Placeholder do shipping-simulation",
+  type: "object",
+  properties: {
+    text: {
+      type: "string",
+    },
+  },
+};
--- a/react/components/Placeholder/index.ts
+++ b/react/components/Placeholder/index.ts
@ -0,0 +1 @@
+export { Placeholder } from "./_Placeholder";
--- a/react/global.d.ts
+++ b/react/global.d.ts
--- a/react/package.json
+++ b/react/package.json
@ -24,11 +24,11 @@
    "@vtex/tsconfig": "^0.4.4",
    "graphql": "^14.6.0",
    "typescript": "3.9.7",
+    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles",
+    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime",
    "vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout",
    "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text",
-    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide",
-    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
-    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles"
+    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide"
  }
 }
--- a/react/placeholder.ts
+++ b/react/placeholder.ts
@ -0,0 +1 @@
+export {Placeholder as default} from "./components/Placeholder"
--- a/react/yarn-error.log
+++ b/react/yarn-error.log
@ -1,30 +1,30 @@
 Arguments: 
-  C:\Program Files\nodejs\node.exe C:\Program Files\nodejs\node_modules\yarn\bin\yarn.js
+  /home/usuario/.nvm/versions/node/v18.12.1/bin/node /usr/bin/yarn add @types/m3-utils

 PATH: 
-  C:\Program Files\Common Files\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Windows\System32\OpenSSH\;C:\Users\victo\AppData\Roaming\nvm;C:\Program Files\nodejs;C:\Program Files\Git\cmd;C:\Program Files (x86)\NVIDIA Corporation\PhysX\Common;C:\Program Files\vtex\bin;C:\Program Files\MySQL\MySQL Server 8.0\bin;C:\Python27;C:\Program Files\mingw-w64\x86_64-8.1.0-posix-seh-rt_v6-rev0\mingw64\bin;C:\Program Files\Oracle\VirtualBox;C:\Users\victo\Documents\flutter\bin;C:\Program Files\Android\Android Studio\bin;C:\Users\victo\AppData\Local\Programs\Python\Python310\Scripts\;C:\Users\victo\AppData\Local\Programs\Python\Python310\;C:\Users\victo\AppData\Local\Microsoft\WindowsApps;C:\Users\victo\AppData\Local\Programs\Microsoft VS Code\bin;C:\Program Files\heroku\bin;C:\Users\victo\AppData\Local\Programs\Hyper\resources\bin
+  /home/usuario/.cache/activestate/bin:/home/usuario/.local/ActiveState/StateTool/release/bin:/home/usuario/.nvm/versions/node/v18.12.1/bin:/home/usuario/.cache/activestate/bin:/home/usuario/.local/ActiveState/StateTool/release/bin:/home/usuario/bin:/home/usuario/.local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin

 Yarn version: 
-  1.22.17
+  1.22.19

 Node version: 
-  14.18.1
+  18.12.1

 Platform: 
-  win32 x64
+  linux x64

 Trace: 
-  Error: http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-contex@0.10.0/public/@types/vtex.product-context: Request failed "500 Internal Server Error"
-      at ResponseError.ExtendableBuiltin (C:\Users\victo\AppData\Roaming\nvm\v14.18.1\node_modules\yarn\lib\cli.js:696:66)
-      at new ResponseError (C:\Users\victo\AppData\Roaming\nvm\v14.18.1\node_modules\yarn\lib\cli.js:802:124)
-      at Request.<anonymous> (C:\Users\victo\AppData\Roaming\nvm\v14.18.1\node_modules\yarn\lib\cli.js:67099:16)
-      at Request.emit (events.js:400:28)
-      at Request.module.exports.Request.onRequestResponse (C:\Users\victo\AppData\Roaming\nvm\v14.18.1\node_modules\yarn\lib\cli.js:141760:10)
-      at ClientRequest.emit (events.js:400:28)
-      at HTTPParser.parserOnIncomingClient (_http_client.js:647:27)
-      at HTTPParser.parserOnHeadersComplete (_http_common.js:127:17)
-      at Socket.socketOnData (_http_client.js:515:22)
-      at Socket.emit (events.js:400:28)
+  Error: https://registry.yarnpkg.com/@types%2fm3-utils: Not found
+      at params.callback [as _callback] (/usr/lib/node_modules/yarn/lib/cli.js:66145:18)
+      at self.callback (/usr/lib/node_modules/yarn/lib/cli.js:140890:22)
+      at Request.emit (node:events:513:28)
+      at Request.<anonymous> (/usr/lib/node_modules/yarn/lib/cli.js:141862:10)
+      at Request.emit (node:events:513:28)
+      at IncomingMessage.<anonymous> (/usr/lib/node_modules/yarn/lib/cli.js:141784:12)
+      at Object.onceWrapper (node:events:627:28)
+      at IncomingMessage.emit (node:events:525:35)
+      at endReadableNT (node:internal/streams/readable:1359:12)
+      at process.processTicksAndRejections (node:internal/process/task_queues:82:21)

 npm manifest: 
  {
@ -34,6 +34,7 @@ npm manifest:
    "dependencies": {
      "apollo-client": "^2.6.8",
      "jquery": "^3.6.0",
+      "m3-utils": "^0.1.0",
      "react": "^16.12.0",
      "react-apollo": "^3.1.3",
      "react-dom": "^16.12.0",
@ -53,11 +54,12 @@ npm manifest:
      "@vtex/tsconfig": "^0.4.4",
      "graphql": "^14.6.0",
      "typescript": "3.9.7",
+      "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles",
+      "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
      "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime",
      "vtex.responsive-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout",
      "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text",
-      "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide",
-      "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-contex@0.10.0/public/@types/vtex.product-context"
+      "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide"
    }
  }

@ -631,6 +633,11 @@ Lockfile:
    dependencies:
      js-tokens "^3.0.0 || ^4.0.0"
  
+  m3-utils@^0.1.0:
+    version "0.1.0"
+    resolved "https://registry.yarnpkg.com/m3-utils/-/m3-utils-0.1.0.tgz#0e0ebe1a108263ab23ce53bdee8beab5a1a0e4a8"
+    integrity sha512-N8bdQwPBeiTnOIzWKweN4rI683Lmm/xbXpfy1PqQLjqIZZcgh1eidq9Spab1RogK3DPQ9hlmvAyl4wGW6rmJmQ==
+  
  memoize-one@^6.0.0:
    version "6.0.0"
    resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
@ -841,6 +848,14 @@ Lockfile:
    resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
    integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
  
+  "vtex.css-handles@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles":
+    version "1.0.0"
+    resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles#336b23ef3a9bcb2b809529ba736783acd405d081"
+  
+  "vtex.product-context@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context":
+    version "0.10.0"
+    resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context#c5e2a97b404004681ee12f4fff7e6b62157786cc"
+  
  "vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime":
    version "8.130.0"
    resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.130.0/public/@types/vtex.render-runtime#6958e1017c423c0906eae3500bad70d3fb353a98"
--- a/store/blocks/pdp/product-shelf.jsonc
+++ b/store/blocks/pdp/product-shelf.jsonc
@ -38,7 +38,7 @@
      "itemsPerPage": {
        "desktop": 4,
        "(min-width:1025px)": 4,
-        "(min-width:768px)": 3,
+        "(min-width:769px)": 3,
        "tablet": 2,
        "phone": 2
      },
@ -85,7 +85,7 @@
        "(min-width: 1921px)": "434.4px",
        "desktop": "314.4px",
        "(min-width:1025px)": "314.4px",
-        "(min-width:768px)": "291.2px",
+        "(min-width:769px)": "291.2px",
        "tablet": "291.2px",
        "phone": "124.8px"
      },
@ -93,7 +93,7 @@
        "(min-width: 1921px)": "434.4px",
        "desktop": "314.4px",
        "(min-width:1025px)": "314.4px",
-        "(min-width:768px)": "291.2px",
+        "(min-width:769px)": "291.2px",
        "tablet": "291.2px",
        "phone": "124.8px"
      }
--- a/store/blocks/pdp/product-specifications-table.jsonc
+++ b/store/blocks/pdp/product-specifications-table.jsonc
@ -162,7 +162,8 @@
  "product-images#product-specification": {
    "props": {
      "aspectRatio": "1:1",
-      "displayMode": "first-image"
+      "displayMode": "first-image",
+      "zoomMode": "disabled"
    }
  },

--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@ -5,12 +5,19 @@
      "condition-layout.product#availability",
      "flex-layout.row#product-specifications",
      "html#pdp-slider-shelf-title",
-      "html#list-context-pdp-shelf",
+      "flex-layout.row#list-context-pdp-shelf",
      "flex-layout.row#newsletter",
      "product-questions-and-answers"
    ]
  },

+  "flex-layout.row#list-context-pdp-shelf": {
+    "props": {
+      "blockClass": "productShelf"
+    },
+    "children": ["html#list-context-pdp-shelf"]
+  },
+
  "html#breadcrumb": {
    "props": {
      "tag": "section",
@ -105,7 +112,14 @@
  "flex-layout.col#stack": {
    "children": ["stack-layout"],
    "props": {
-      "width": "60%",
+      "width": {
+        "(min-width:1921px)": "49.130434783%",
+        "(min-width:1025px)": "48.823529412%",
+        "(min-width:769px)": "100%",
+        "desktop": "48.823529412%",
+        "tablet": "100%",
+        "phone": "100%"
+      },
      "rowGap": 0
    }
  },
@ -145,7 +159,16 @@
    "props": {
      "testId": "shipping-simulator"
    },
-    "children": ["shipping-simulator"]
+    "children": [
+      "shipping-placeholder",
+      "shipping-simulator#pdp-shipping-simulator"
+    ]
+  },
+
+  "shipping-simulator#pdp-shipping-simulator": {
+    "props": {
+      "placeholder": "OKOKOKOKO"
+    }
  },

  "flex-layout.row#pix-custom-installments": {
--- a/store/interfaces.json
+++ b/store/interfaces.json
@ -5,9 +5,10 @@
  },

  "pix-custom-installments": {
-    "component": "PixCustomInstallments",
-    "props": {
-      "text": "10 % de desconto"
-    }
+    "component": "PixCustomInstallments"
+  },
+
+  "shipping-placeholder": {
+    "component": "placeholder"
  }
 }
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@ -9,8 +9,9 @@
 /* Grid breakpoints */
 .container {
  width: 100%;
-  display: flex;
+  display: inline-flex;
  padding: 0 40px;
+  margin-top: 16px;
  flex-wrap: wrap;
  flex-basis: 100%;
  align-items: baseline;
@ -43,10 +44,6 @@
 }

 .arrow--1 .link {
-  font-size: 0;
-}
-.arrow--1 .link::before {
-  content: "Sapatos";
  font-size: 14px;
  line-height: 20.12px;
 }
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@ -108,6 +108,13 @@
 .flexRow--productMain {
  padding: 0 40px;
 }
+@media screen and (min-width: 1921px) {
+  .flexRow--productAvailability,
+  .flexRow--productMain {
+    width: 75%;
+    margin: 0 auto;
+  }
+}

@media screen and (max-width: 1024px) {
  .flexRowContent--productSpecificationItemContainer,
@ -148,6 +155,8 @@
 .flexRowContent--productActions :global(.vtex-button) {
  height: 72px;
  line-height: 24.51px;
+  border: 0;
+  border-radius: 0;
 }
@media screen and (min-width: 768px) {
  .flexRowContent--productActions :global(.vtex-button) {
@ -169,6 +178,12 @@
 .flexRow--productSpecifications {
  padding: 0 40px;
 }
+@media screen and (min-width: 1921px) {
+  .flexRow--productSpecifications {
+    width: 75%;
+    margin: 0 auto;
+  }
+}

@media screen and (min-width: 1025px) {
  .flexRow--productSpecificationItemContainer {
@ -185,6 +200,16 @@
  }
 }

+.flexRow--productShelf {
+  padding: 0 40px;
+}
+@media screen and (min-width: 1921px) {
+  .flexRow--productShelf {
+    width: 75%;
+    margin: 0 auto;
+  }
+}
+
 .flexRow--newsletter {
  background-color: #000;
  margin-top: 32px;
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@ -41,13 +41,24 @@

 .sliderLayoutContainer--productShelf {
  width: 100%;
-  padding: 0 40px;
 }
-@media screen and (min-width: 1921px) {
-  .sliderLayoutContainer--productShelf {
-    width: 68.75%;
-    margin: 0 auto;
+
+.sliderArrows--productShelf {
+  width: 12.2px;
+  height: 29.6px;
+  padding: 0;
+  margin: 0;
 }
+.sliderArrows--productShelf .caretIcon {
+  display: none;
+}
+
+.sliderLeftArrow--productShelf {
+  background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-henriquesantos.svg) !important;
+}
+
+.sliderRightArrow--productShelf {
+  background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-henriquesantos.svg) !important;
 }

 .sliderTrackContainer--productShelf {
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@ -11,10 +11,30 @@
 .container {
  padding: 0;
 }
+@media screen and (min-width: 1025px) {
+  .container {
+    min-width: 100%;
+  }
+}

 .productImageTag {
  object-fit: fill !important;
 }
+@media screen and (min-width: 769px) {
+  .productImageTag {
+    max-height: 944px !important;
+  }
+}
+@media screen and (min-width: 1025px) {
+  .productImageTag {
+    max-height: 664px !important;
+  }
+}
+@media screen and (min-width: 1921px) {
+  .productImageTag {
+    max-height: 904px !important;
+  }
+}

 .carouselGaleryThumbs {
  display: block !important;
@ -34,6 +54,7 @@
 }

 .productNameContainer {
+  color: #575757;
  line-height: 34px;
 }
@media screen and (max-width: 768px) and (min-width: 375px) {
@ -67,14 +88,14 @@
  height: 0;
 }
 .skuSelectorSubcontainer--cor .skuSelectorName::before {
-  content: "Outros Cores";
+  content: "Outros Cores:";
 }

 .skuSelectorSubcontainer--tamanho {
  order: 0;
 }
 .skuSelectorSubcontainer--tamanho .skuSelectorName::before {
-  content: "Outros Tamanhos";
+  content: "Outros Tamanhos:";
 }

 .skuSelectorOptionsList,
@ -176,9 +197,9 @@
  .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
    text-align: unset;
    position: absolute;
-    right: -50.7%;
+    right: -56.65%;
    top: 70%;
-    margin-left: 16px;
+    margin-left: 32px;
    padding: 0;
    transform: translateY(-50%);
  }
@ -217,6 +238,9 @@
  border: 0;
  margin: 0;
  padding: 16px 0 0;
+  max-width: 326px;
+  width: 326px;
+  overflow: auto;
 }

 .shippingTableHead {
@ -284,6 +308,8 @@
  height: 100%;
  background-color: #000;
  color: #fff;
+  border: 0;
+  border-radius: 0;
 }
 .subscriberContainer .submit :global(.vtex-button) :global(.vtex-button__label) {
  font-size: 0;
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@ -1,7 +1,8 @@
 .container {
  width: 100%;
-  display: flex;
+  display: inline-flex;
  padding: 0 40px;
+  margin-top: 16px;
  flex-wrap: wrap;
  flex-basis: 100%;
  align-items: baseline;
@ -37,15 +38,10 @@

 .arrow--1 {
  .link {
-    font-size: 0;
-
-    &::before {
-      content: "Sapatos";
    font-size: 14px;
    line-height: 20.12px;
  }
 }
-}

 .arrow--2 {
  .link {
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@ -100,6 +100,11 @@
 .flexRow--productAvailability,
 .flexRow--productMain {
  padding: 0 40px;
+
+  @media screen and (min-width: 1921px) {
+    width: 75%;
+    margin: 0 auto;
+  }
 }

 .flexRowContent--productSpecificationItemContainer,
@ -142,6 +147,8 @@
  :global(.vtex-button) {
    height: 72px;
    line-height: 24.51px;
+    border: 0;
+    border-radius: 0;

    @media screen and (min-width: 768px) {
      height: 49px;
@ -165,6 +172,11 @@

 .flexRow--productSpecifications {
  padding: 0 40px;
+
+  @media screen and (min-width: 1921px) {
+    width: 75%;
+    margin: 0 auto;
+  }
 }

 .flexRow--productSpecificationItemContainer {
@ -181,6 +193,15 @@
  }
 }

+.flexRow--productShelf {
+  padding: 0 40px;
+
+  @media screen and (min-width: 1921px) {
+    width: 75%;
+    margin: 0 auto;
+  }
+}
+
 .flexRow--newsletter {
  background-color: #000;
  margin-top: 32px;
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@ -32,12 +32,25 @@

 .sliderLayoutContainer--productShelf {
  width: 100%;
-  padding: 0 40px;
-
-  @media screen and (min-width: 1921px) {
-    width: 68.75%;
-    margin: 0 auto;
 }
+
+.sliderArrows--productShelf {
+  width: 12.2px;
+  height: 29.6px;
+  padding: 0;
+  margin: 0;
+
+  .caretIcon {
+    display: none;
+  }
+}
+
+.sliderLeftArrow--productShelf {
+  background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-left-henriquesantos.svg) !important;
+}
+
+.sliderRightArrow--productShelf {
+  background: url(https://agenciamagma.vteximg.com.br/arquivos/arrow-right-henriquesantos.svg) !important;
 }

 .sliderTrackContainer--productShelf {
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@ -1,9 +1,25 @@
 .container {
  padding: 0;
+
+  @media screen and (min-width: 1025px) {
+    min-width: 100%;
+  }
 }

 .productImageTag {
  object-fit: fill !important;
+
+  @media screen and (min-width: 769px) {
+    max-height: 944px !important;
+  }
+
+  @media screen and (min-width: 1025px) {
+    max-height: 664px !important;
+  }
+
+  @media screen and (min-width: 1921px) {
+    max-height: 904px !important;
+  }
 }

 .carouselGaleryThumbs {
@ -26,6 +42,7 @@
 }

 .productNameContainer {
+  color: #575757;
  line-height: 34px;

  @media screen and (max-width: 768px) and (min-width: 375px) {
@ -62,7 +79,7 @@

  .skuSelectorName {
    &::before {
-      content: "Outros Cores";
+      content: "Outros Cores:";
    }
  }
 }
@ -72,7 +89,7 @@

  .skuSelectorName {
    &::before {
-      content: "Outros Tamanhos";
+      content: "Outros Tamanhos:";
    }
  }
 }
@ -188,9 +205,9 @@
      text-align: unset;

      position: absolute;
-      right: -50.7%;
+      right: -56.65%;
      top: 70%;
-      margin-left: 16px;
+      margin-left: 32px;
      padding: 0;
      transform: translateY(-50%);
    }
@ -235,6 +252,9 @@
  border: 0;
  margin: 0;
  padding: 16px 0 0;
+  max-width: 326px;
+  width: 326px;
+  overflow: auto;
 }

 .shippingTableHead {
@ -316,6 +336,8 @@
      height: 100%;
      background-color: #000;
      color: #fff;
+      border: 0;
+      border-radius: 0;

      :global(.vtex-button__label) {
        font-size: 0;
				`@ -0,0 +1 @@`
				`export { Placeholder } from "./_Placeholder";`
				`@ -0,0 +1 @@`
				`export {Placeholder as default} from "./components/Placeholder"`