From 984745254362aa80c14b9d3cae855a5be2bc55b8 Mon Sep 17 00:00:00 2001 From: HenriqueSSan Date: Thu, 9 Feb 2023 08:07:31 -0300 Subject: [PATCH] feat(shipping-simulator): added custom placeholder component --- react/components/Html/index.tsx | 79 +++++++++++-------- .../_ComponentsFunctions.ts | 17 ++++ .../_PixCustomInstallments.tsx | 41 +++------- react/components/Placeholder/_Placeholder.tsx | 53 +++++++++++++ react/components/Placeholder/index.ts | 1 + react/{Global.d.ts => global.d.ts} | 0 react/package.json | 6 +- react/placeholder.ts | 1 + react/tsconfig.json | 2 +- react/yarn-error.log | 51 +++++++----- store/blocks/pdp/product-shelf.jsonc | 6 +- .../pdp/product-specifications-table.jsonc | 3 +- store/blocks/pdp/product.jsonc | 29 ++++++- store/interfaces.json | 9 ++- styles/css/vtex.breadcrumb.css | 7 +- styles/css/vtex.flex-layout.css | 25 ++++++ styles/css/vtex.slider-layout.css | 23 ++++-- styles/css/vtex.store-components.css | 34 +++++++- .../sass/pages/product/vtex.breadcrumb.scss | 12 +-- .../sass/pages/product/vtex.flex-layout.scss | 21 +++++ .../pages/product/vtex.slider-layout.scss | 21 ++++- .../pages/product/vtex.store-components.scss | 30 ++++++- 22 files changed, 345 insertions(+), 126 deletions(-) create mode 100644 react/components/Placeholder/_Placeholder.tsx create mode 100644 react/components/Placeholder/index.ts rename react/{Global.d.ts => global.d.ts} (100%) create mode 100644 react/placeholder.ts diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..847f910 100644 --- a/react/components/Html/index.tsx +++ b/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, - /** - * Qual tag Html que deseja que seja usar - * - * @default div - */ - tag?: keyof React.ReactHTML - /** - * Classes CSS extras que deseja adicionar. - * Feito para uso de [classes do tachyons](https://tachyons.io/) - */ - tachyonsClasses?: string - /** - * Se caso quiser usar esse componente - * para adicinar um texto simples - */ - text?: string - /** - * Tag ID para - */ - testId?: string -} - -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 - }; - const Children = <>{children}{text}; - const Element = React.createElement(tag, props, Children); - - return <>{Element}; + children?: ReactNode; + /** + * Qual tag Html que deseja que seja usar + * + * @default div + */ + tag?: keyof React.ReactHTML; + /** + * Classes CSS extras que deseja adicionar. + * Feito para uso de [classes do tachyons](https://tachyons.io/) + */ + tachyonsClasses?: string; + /** + * Se caso quiser usar esse componente + * para adicinar um texto simples + */ + text?: string; + /** + * Tag ID para + */ + testId?: string; +}; + +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, + }; + const Children = ( + <> + {children} + {text} + + ); + const Element = React.createElement(tag, props, Children); + + return <>{Element}; }; diff --git a/react/components/PixCustomInstallments/_ComponentsFunctions.ts b/react/components/PixCustomInstallments/_ComponentsFunctions.ts index dfb4550..c43b6ba 100644 --- 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(" "); diff --git a/react/components/PixCustomInstallments/_PixCustomInstallments.tsx b/react/components/PixCustomInstallments/_PixCustomInstallments.tsx index 77ba8ce..510ffa8 100644 --- 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 (
Promoção de pagamento com o PIX -

- +

+

{`R$ ${calculationPercent( percent, data?.product?.priceRange.sellingPrice.highPrice )}`} - -

+

+

{`${percent}% ${label}`} -

-

+

+
); } @@ -68,5 +49,9 @@ PixCustomInstallments.schema = { percent: { type: "number", }, + + color: { + type: "string", + }, }, }; diff --git a/react/components/Placeholder/_Placeholder.tsx b/react/components/Placeholder/_Placeholder.tsx new file mode 100644 index 0000000..6f3dce5 --- /dev/null +++ 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 { + 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", + }, + }, +}; diff --git a/react/components/Placeholder/index.ts b/react/components/Placeholder/index.ts new file mode 100644 index 0000000..6e61fb4 --- /dev/null +++ b/react/components/Placeholder/index.ts @@ -0,0 +1 @@ +export { Placeholder } from "./_Placeholder"; diff --git a/react/Global.d.ts b/react/global.d.ts similarity index 100% rename from react/Global.d.ts rename to react/global.d.ts diff --git a/react/package.json b/react/package.json index aa90575..45352bb 100644 --- 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" } } diff --git a/react/placeholder.ts b/react/placeholder.ts new file mode 100644 index 0000000..b1a7ed3 --- /dev/null +++ b/react/placeholder.ts @@ -0,0 +1 @@ +export {Placeholder as default} from "./components/Placeholder" \ No newline at end of file diff --git a/react/tsconfig.json b/react/tsconfig.json index a26a540..9d83892 100644 --- a/react/tsconfig.json +++ b/react/tsconfig.json @@ -8,4 +8,4 @@ "target": "es2017" }, "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"] -} \ No newline at end of file +} diff --git a/react/yarn-error.log b/react/yarn-error.log index d9a21eb..dd0ebde 100644 --- 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. (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. (/usr/lib/node_modules/yarn/lib/cli.js:141862:10) + at Request.emit (node:events:513:28) + at IncomingMessage. (/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" diff --git a/store/blocks/pdp/product-shelf.jsonc b/store/blocks/pdp/product-shelf.jsonc index 924d80e..f6f438c 100644 --- 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" } diff --git a/store/blocks/pdp/product-specifications-table.jsonc b/store/blocks/pdp/product-specifications-table.jsonc index 9f512e3..b235d6b 100644 --- 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" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 060776d..500a8fa 100644 --- 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": { diff --git a/store/interfaces.json b/store/interfaces.json index 8bd0a7a..b9655d6 100644 --- 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" } } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index d610523..3ca5032 100644 --- 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; } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 5f4dfba..ce378da 100644 --- 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; diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 085dfc7..7e0e8e8 100644 --- 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 { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 287709a..ac3a7ce 100644 --- 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; diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index f0909d1..3948941 100644 --- 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,13 +38,8 @@ .arrow--1 { .link { - font-size: 0; - - &::before { - content: "Sapatos"; - font-size: 14px; - line-height: 20.12px; - } + font-size: 14px; + line-height: 20.12px; } } diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 4cef7a2..f2c70ad 100644 --- 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; diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index c3ca3f9..af0000a 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -32,14 +32,27 @@ .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 { padding-bottom: 33px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4d4714b..284f5cc 100644 --- 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;