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 (
-
-
+
+
{`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;