forked from M3-Academy/challenge-vtex-io
develop #8
@ -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}</>;
|
||||
};
|
||||
|
||||
@ -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(" ");
|
||||
|
||||
@ -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")}`}
|
||||
>
|
||||
</p>
|
||||
<p className={`${styles["pix__label"]} ${sanatizeColor(color)}`}>
|
||||
{`${percent}% ${label}`}
|
||||
</div>
|
||||
</p>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -68,5 +49,9 @@ PixCustomInstallments.schema = {
|
||||
percent: {
|
||||
type: "number",
|
||||
},
|
||||
|
||||
color: {
|
||||
type: "string",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
53
react/components/Placeholder/_Placeholder.tsx
Normal file
53
react/components/Placeholder/_Placeholder.tsx
Normal file
@ -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",
|
||||
},
|
||||
},
|
||||
};
|
||||
1
react/components/Placeholder/index.ts
Normal file
1
react/components/Placeholder/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export { Placeholder } from "./_Placeholder";
|
||||
0
react/Global.d.ts → react/global.d.ts
vendored
0
react/Global.d.ts → react/global.d.ts
vendored
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
1
react/placeholder.ts
Normal file
1
react/placeholder.ts
Normal file
@ -0,0 +1 @@
|
||||
export {Placeholder as default} from "./components/Placeholder"
|
||||
@ -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"
|
||||
|
||||
@ -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"
|
||||
}
|
||||
|
||||
@ -162,7 +162,8 @@
|
||||
"product-images#product-specification": {
|
||||
"props": {
|
||||
"aspectRatio": "1:1",
|
||||
"displayMode": "first-image"
|
||||
"displayMode": "first-image",
|
||||
"zoomMode": "disabled"
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@ -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": {
|
||||
|
||||
@ -5,9 +5,10 @@
|
||||
},
|
||||
|
||||
"pix-custom-installments": {
|
||||
"component": "PixCustomInstallments",
|
||||
"props": {
|
||||
"text": "10 % de desconto"
|
||||
}
|
||||
"component": "PixCustomInstallments"
|
||||
},
|
||||
|
||||
"shipping-placeholder": {
|
||||
"component": "placeholder"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user