diff --git a/.eslintignore b/.eslintignore
new file mode 100644
index 0000000..f3dbc7f
--- /dev/null
+++ b/.eslintignore
@@ -0,0 +1,3 @@
+node_modules/
+coverage/
+*.snap.ts
\ No newline at end of file
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..9713dfd
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,7 @@
+{
+ "extends": "vtex",
+ "root": true,
+ "env": {
+ "node": true
+ }
+}
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..320bc0c
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1 @@
+"@vtex/prettier-config"
\ No newline at end of file
diff --git a/package.json b/package.json
index 4b65062..e87e00e 100644
--- a/package.json
+++ b/package.json
@@ -1,20 +1,27 @@
{
+ "name": "store-theme",
+ "private": true,
"license": "UNLICENSED",
- "main": "gulpfile.js",
- "directories": {
- "doc": "docs"
- },
"scripts": {
- "dev": "concurrently \"vtex unlink --all && vtex link\" \"gulp storefront\"",
"lint": "eslint ./ --fix",
+ "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
+ "dev": "concurrently \"vtex unlink --all && vtex link\" \"gulp storefront\"",
"scss": "gulp storefront"
},
- "repository": {
- "type": "git",
- "url": "git@gitlab.com:agenciam3/pattern/vtex-io-template.git"
+ "husky": {
+ "hooks": {
+ "pre-commit": "lint-staged"
+ }
+ },
+ "lint-staged": {
+ "*.{ts,js,tsx,jsx}": [
+ "eslint --fix",
+ "prettier --write"
+ ],
+ "*.{json,graphql,gql}": [
+ "prettier --write"
+ ]
},
- "keywords": [],
- "author": "",
"devDependencies": {
"eslint": "^7.22.0",
"eslint-config-prettier": "^8.1.0",
@@ -37,8 +44,18 @@
"prettier": "2.0.2",
"typescript": "3.8.3"
},
+ "main": "gulpfile.js",
+ "directories": {
+ "doc": "docs"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git@gitlab.com:agenciam3/pattern/vtex-io-template.git"
+ },
+ "keywords": [],
+ "author": "",
"dependencies": {
"husky": "^5.2.0",
"react": "^17.0.2"
}
-}
+}
\ No newline at end of file
diff --git a/react/Parcelamento.tsx b/react/Parcelamento.tsx
new file mode 100644
index 0000000..3e42227
--- /dev/null
+++ b/react/Parcelamento.tsx
@@ -0,0 +1,3 @@
+import Parcelamento from './components/Parcelamento/Parcelamento'
+
+export default Parcelamento
diff --git a/react/components/Example/Example.tsx b/react/components/Example/Example.tsx
index d195271..934f878 100644
--- a/react/components/Example/Example.tsx
+++ b/react/components/Example/Example.tsx
@@ -1,9 +1,7 @@
-import React from 'react'
+import React from "react";
const Example = () => {
- return (
-
Example
- )
-}
+ return Example
;
+};
-export default Example
\ No newline at end of file
+export default Example;
diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx
index 847f910..594f6ca 100644
--- a/react/components/Html/index.tsx
+++ b/react/components/Html/index.tsx
@@ -1,52 +1,54 @@
-import React, { ReactNode } from "react";
-import { useCssHandles } from "vtex.css-handles";
+import React, { ReactNode } from 'react'
+import { useCssHandles } from 'vtex.css-handles'
-const CSS_HANDLES = ["html"] as const;
+const CSS_HANDLES = ['html'] as const
+
+import './style.css'
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 = "",
+ tag = 'div',
+ text = '',
+ tachyonsClasses: classes = '',
testId,
}: HtmlProps) => {
- const { handles } = useCssHandles(CSS_HANDLES);
+ const { handles } = useCssHandles(CSS_HANDLES)
const props = {
className: `${handles.html} ${classes}`,
- "data-testid": testId,
- };
+ 'data-testid': testId,
+ }
const Children = (
<>
{children}
{text}
>
- );
- const Element = React.createElement(tag, props, Children);
+ )
+ const Element = React.createElement(tag, props, Children)
- return <>{Element}>;
-};
+ return <>{Element}>
+}
diff --git a/react/components/Html/style.css b/react/components/Html/style.css
new file mode 100644
index 0000000..37aab5f
--- /dev/null
+++ b/react/components/Html/style.css
@@ -0,0 +1,14 @@
+[class*='html'] {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 16px;
+}
+
+[class*='html'] > [class*='button'] {
+ width: 100%;
+ height: 49px;
+ margin-right: 40px;
+ background: #000;
+ border: #000;
+}
diff --git a/react/components/Parcelamento/Parcelamento.css b/react/components/Parcelamento/Parcelamento.css
new file mode 100644
index 0000000..27a561c
--- /dev/null
+++ b/react/components/Parcelamento/Parcelamento.css
@@ -0,0 +1,3 @@
+.ParcelaWrapper {
+ margin: 0 0 8px 0;
+}
diff --git a/react/components/Parcelamento/Parcelamento.tsx b/react/components/Parcelamento/Parcelamento.tsx
new file mode 100644
index 0000000..9d9b6b9
--- /dev/null
+++ b/react/components/Parcelamento/Parcelamento.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import { useProduct } from 'vtex.product-context'
+import { useCssHandles } from 'vtex.css-handles'
+
+import "./Parcelamento.css"
+
+const Parcelamento = () => {
+ const CSS_HANDLES = ['ParcelaWrapper']
+
+ const handles = useCssHandles(CSS_HANDLES)
+ const product = useProduct()
+
+ const Installments = {
+ numberOfInstallments:
+ product?.selectedItem?.sellers[0].commertialOffer.Installments[3]
+ .NumberOfInstallments,
+ }
+ const Price = {
+ numberOfInstallments:
+ product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value,
+ }
+ console.log(product)
+ return (
+
+ {Installments.numberOfInstallments} x de R$
+ {Price.numberOfInstallments?.toFixed(2).toString().replace('.', ',')} sem
+ juros
+
+ )
+}
+
+export default Parcelamento
diff --git a/react/components/pix/pix.css b/react/components/pix/pix.css
new file mode 100644
index 0000000..7281087
--- /dev/null
+++ b/react/components/pix/pix.css
@@ -0,0 +1,23 @@
+.pixwrapper {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+}
+.pixPrice {
+ margin-left: 26px;
+ font-family: 'Open Sans', sans-serif;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 18px;
+ line-height: 25px;
+ color: rgba(0, 0, 0, 0.58);
+}
+.pixPrice > p {
+ margin: 0;
+ font-family: 'Open Sans', sans-serif;
+ font-style: normal;
+ font-weight: 300;
+ font-size: 13px;
+ line-height: 18px;
+ color: #929292;
+}
diff --git a/react/components/pix/pix.svg b/react/components/pix/pix.svg
new file mode 100644
index 0000000..06a7b0c
--- /dev/null
+++ b/react/components/pix/pix.svg
@@ -0,0 +1,38 @@
+
diff --git a/react/components/pix/pix.tsx b/react/components/pix/pix.tsx
new file mode 100644
index 0000000..4025ca4
--- /dev/null
+++ b/react/components/pix/pix.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+
+import { useProduct } from 'vtex.product-context'
+import { useCssHandles } from 'vtex.css-handles'
+
+import './pix.css'
+
+const Pix = () => {
+ const CSS_HANDLES = ['pixwrapper', 'pixPrice']
+
+ const handles = useCssHandles(CSS_HANDLES)
+ const product = useProduct()
+ const productPrice = product?.selectedItem?.sellers[0].commertialOffer.Price
+
+ let descontoPixValue = 0
+ if (productPrice) descontoPixValue = productPrice * 0.9
+
+ return (
+ <>
+
+
+
+ R$ {descontoPixValue.toFixed(2).toString().replace('.', ',')}
+
10 % de desconto
+
+
+ >
+ )
+}
+
+export default Pix
diff --git a/react/package.json b/react/package.json
index aa90575..76bee3b 100644
--- a/react/package.json
+++ b/react/package.json
@@ -24,11 +24,35 @@
"@vtex/tsconfig": "^0.4.4",
"graphql": "^14.6.0",
"typescript": "3.9.7",
- "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.add-to-cart-button": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.add-to-cart-button@0.29.0/public/@types/vtex.add-to-cart-button",
+ "vtex.breadcrumb": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.breadcrumb@1.9.4/public/@types/vtex.breadcrumb",
+ "vtex.checkout-summary": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-summary@0.22.0/public/@types/vtex.checkout-summary",
+ "vtex.condition-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.condition-layout@2.6.0/public/@types/vtex.condition-layout",
+ "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles",
+ "vtex.login": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.login@2.56.1/public/@types/vtex.login",
+ "vtex.menu": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.menu@2.34.25/public/@types/vtex.menu",
+ "vtex.minicart": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.minicart@2.65.0/public/@types/vtex.minicart",
+ "vtex.modal-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.modal-layout@0.14.0/public/@types/vtex.modal-layout",
+ "vtex.my-account": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.25.0/public/@types/vtex.my-account",
"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.product-list": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-list@0.36.0/public/@types/vtex.product-list",
+ "vtex.product-quantity": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-quantity@1.9.0/public/@types/vtex.product-quantity",
+ "vtex.product-review-interfaces": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-review-interfaces@1.0.2/public/_types/react",
+ "vtex.product-summary": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-summary@2.81.0/public/@types/vtex.product-summary",
+ "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime",
+ "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.15.0/public/@types/vtex.rich-text",
+ "vtex.search-result": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-result@3.119.0/public/@types/vtex.search-result",
+ "vtex.shelf": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shelf@1.47.3/public/@types/vtex.shelf",
+ "vtex.slider": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider@0.8.3/public/@types/vtex.slider",
+ "vtex.slider-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.23.0/public/@types/vtex.slider-layout",
+ "vtex.store": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store@2.129.0/public/@types/vtex.store",
+ "vtex.store-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.164.0/public/@types/vtex.store-components",
+ "vtex.store-footer": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-footer@2.26.0/public/@types/vtex.store-footer",
+ "vtex.store-header": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-header@2.29.0/public/@types/vtex.store-header",
+ "vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons",
+ "vtex.store-image": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.15.0/public/@types/vtex.store-image",
+ "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.3/public/@types/vtex.styleguide",
+ "vtex.tab-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.tab-layout@0.4.3/public/@types/vtex.tab-layout",
+ "vtex.telemarketing": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.telemarketing@2.12.0/public/@types/vtex.telemarketing"
}
}
diff --git a/react/pix.tsx b/react/pix.tsx
new file mode 100644
index 0000000..bb33125
--- /dev/null
+++ b/react/pix.tsx
@@ -0,0 +1,3 @@
+import pix from "./components/pix/pix";
+
+export default pix;
diff --git a/react/tsconfig.json b/react/tsconfig.json
index a26a540..9ac901b 100644
--- a/react/tsconfig.json
+++ b/react/tsconfig.json
@@ -2,10 +2,16 @@
"extends": "@vtex/tsconfig",
"compilerOptions": {
"noEmitOnError": false,
- "lib": ["dom"],
+ "lib": [
+ "dom"
+ ],
"module": "esnext",
"moduleResolution": "node",
"target": "es2017"
},
- "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"]
+ "include": [
+ "./typings/*.d.ts",
+ "./**/*.tsx",
+ "./**/*.ts"
+ ]
}
\ No newline at end of file
diff --git a/react/yarn.lock b/react/yarn.lock
index d4b6c43..4b9cbbb 100644
--- a/react/yarn.lock
+++ b/react/yarn.lock
@@ -774,29 +774,125 @@ use-isomorphic-layout-effect@^1.1.2:
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.add-to-cart-button@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.add-to-cart-button@0.29.0/public/@types/vtex.add-to-cart-button":
+ version "0.29.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.add-to-cart-button@0.29.0/public/@types/vtex.add-to-cart-button#0f09b88092945ba4968bbcad12d0372fb9612953"
+
+"vtex.breadcrumb@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.breadcrumb@1.9.4/public/@types/vtex.breadcrumb":
+ version "1.9.4"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.breadcrumb@1.9.4/public/@types/vtex.breadcrumb#624d6ddbd839bccd2b08e10f0f5f4a0509de834b"
+
+"vtex.checkout-summary@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-summary@0.22.0/public/@types/vtex.checkout-summary":
+ version "0.22.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-summary@0.22.0/public/@types/vtex.checkout-summary#c6d3dbd76be90cd18c4a6e03a00284dc4f12f352"
+
+"vtex.condition-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.condition-layout@2.6.0/public/@types/vtex.condition-layout":
+ version "2.6.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.condition-layout@2.6.0/public/@types/vtex.condition-layout#499861a211a200da6174e2355de934358f3f8339"
+
"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.login@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.login@2.56.1/public/@types/vtex.login":
+ version "2.56.1"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.login@2.56.1/public/@types/vtex.login#7513b3d0a7e51c9440144ff0072709854eb13ee2"
+
+"vtex.menu@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.menu@2.34.25/public/@types/vtex.menu":
+ version "2.34.25"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.menu@2.34.25/public/@types/vtex.menu#3f4c3aa3b5f8c396d1a630703862d354681ae5a2"
+
+"vtex.minicart@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.minicart@2.65.0/public/@types/vtex.minicart":
+ version "2.65.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.minicart@2.65.0/public/@types/vtex.minicart#fa4250a0cfa4628a59a1868dbfc5f735eecd01fb"
+
+"vtex.modal-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.modal-layout@0.14.0/public/@types/vtex.modal-layout":
+ version "0.14.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.modal-layout@0.14.0/public/@types/vtex.modal-layout#d5787b816241602f87aa7b57c30f300dd4367105"
+
+"vtex.my-account@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.25.0/public/@types/vtex.my-account":
+ version "1.25.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.25.0/public/@types/vtex.my-account#3bc46389c0aa28f4e3e2e008fe3690f5901b1f2a"
+
"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"
+"vtex.product-list@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-list@0.36.0/public/@types/vtex.product-list":
+ version "0.36.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-list@0.36.0/public/@types/vtex.product-list#9bfd1dffd6a098490cd8b4cd1633979436723e1a"
-"vtex.responsive-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout":
- version "0.1.2"
- resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.responsive-layout@0.1.2/public/@types/vtex.responsive-layout#e33f23a78afb3ffb8ff8aedc77b1ca6728583e72"
+"vtex.product-quantity@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-quantity@1.9.0/public/@types/vtex.product-quantity":
+ version "1.9.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-quantity@1.9.0/public/@types/vtex.product-quantity#686536c85e0bf7af98f803dc4385f959c181bb07"
-"vtex.rich-text@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text":
- version "0.14.0"
- resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.14.0/public/@types/vtex.rich-text#fd31249116da1e0f1caeaa00a44035afa9c91703"
+"vtex.product-review-interfaces@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-review-interfaces@1.0.2/public/_types/react":
+ version "1.0.2"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-review-interfaces@1.0.2/public/_types/react#84d1997cdae079d1401611f3d4a4619ed914673f"
-"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide":
- version "9.145.0"
- resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.0/public/@types/vtex.styleguide#41dfb32af8756eb5528dbd452e47003a8f67fe8c"
+"vtex.product-summary@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-summary@2.81.0/public/@types/vtex.product-summary":
+ version "2.81.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-summary@2.81.0/public/@types/vtex.product-summary#bbb90d650c759e09c71cce140f1cb4e062d17af5"
+
+"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime":
+ version "8.132.4"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime#66bb41bd4d342e37c9d85172aad5f7eefebfb6dc"
+
+"vtex.rich-text@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.15.0/public/@types/vtex.rich-text":
+ version "0.15.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.15.0/public/@types/vtex.rich-text#f23416cea64e72531069e58f1b137dfdb5b4b510"
+
+"vtex.search-result@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-result@3.119.0/public/@types/vtex.search-result":
+ version "3.119.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-result@3.119.0/public/@types/vtex.search-result#d6d22cc5245d16e24d6e2f2af92ce5b67679e91c"
+
+"vtex.shelf@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shelf@1.47.3/public/@types/vtex.shelf":
+ version "1.47.3"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shelf@1.47.3/public/@types/vtex.shelf#afccd7cc6bf2c23d007306062b7413f46b25cbc8"
+
+"vtex.slider-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.23.0/public/@types/vtex.slider-layout":
+ version "0.23.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.23.0/public/@types/vtex.slider-layout#cfb7246c982a5133f75a78bba92e3c1b64cae4c4"
+
+"vtex.slider@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider@0.8.3/public/@types/vtex.slider":
+ version "0.8.3"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider@0.8.3/public/@types/vtex.slider#9b7be08012a5d3ec41fdc651235a964cb5f7db85"
+
+"vtex.store-components@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.164.0/public/@types/vtex.store-components":
+ version "3.164.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.164.0/public/@types/vtex.store-components#ab70608373379c9a405b787c090f93fb42a10011"
+
+"vtex.store-footer@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-footer@2.26.0/public/@types/vtex.store-footer":
+ version "2.26.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-footer@2.26.0/public/@types/vtex.store-footer#434f87c10fafb4d145dea1c95906a650d9fab04a"
+
+"vtex.store-header@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-header@2.29.0/public/@types/vtex.store-header":
+ version "2.29.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-header@2.29.0/public/@types/vtex.store-header#702033f782c6c25ae2fed42b5a3703db5fd1ac87"
+
+"vtex.store-icons@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons":
+ version "0.18.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons#0ee94d549aa283ce3a13ab987c13eac4fdfd1bba"
+
+"vtex.store-image@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.15.0/public/@types/vtex.store-image":
+ version "0.15.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.15.0/public/@types/vtex.store-image#5f96a89b8eccce7ac86e487d4c61d96f770bf785"
+
+"vtex.store@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store@2.129.0/public/@types/vtex.store":
+ version "2.129.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store@2.129.0/public/@types/vtex.store#09a441473682d1e3ba2459af793e6e99c284d5fa"
+
+"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.3/public/@types/vtex.styleguide":
+ version "9.146.3"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.3/public/@types/vtex.styleguide#05558160f29cd8f4aefe419844a4bd66e2b3fdbb"
+
+"vtex.tab-layout@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.tab-layout@0.4.3/public/@types/vtex.tab-layout":
+ version "0.4.3"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.tab-layout@0.4.3/public/@types/vtex.tab-layout#579ee7ffabb55ce7ed271b0af1015f41c49b7f30"
+
+"vtex.telemarketing@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.telemarketing@2.12.0/public/@types/vtex.telemarketing":
+ version "2.12.0"
+ resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.telemarketing@2.12.0/public/@types/vtex.telemarketing#beda975262b873b778bf5c56b9ff4c2b785f3453"
yaml@^1.10.0:
version "1.10.2"
diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc
index 43ad04e..34f4233 100644
--- a/store/blocks/pdp/product-assembly.jsonc
+++ b/store/blocks/pdp/product-assembly.jsonc
@@ -1,10 +1,10 @@
{
- "sticky-layout#buy-button": {
- "props": {
- "position": "bottom"
- },
- "children": ["flex-layout.row#buy-button"]
- },
+ // "sticky-layout#buy-button": {
+ // "props": {
+ // "position": "bottom"
+ // },
+ // "children": ["flex-layout.row#buy-button"]
+ // },
"product-assembly-options": {
"children": [
"flex-layout.row#product-assembly-options",
@@ -32,17 +32,13 @@
"props": {
"verticalAlign": "middle"
},
- "children": [
- "assembly-option-item-quantity-selector"
- ]
+ "children": ["assembly-option-item-quantity-selector"]
},
"flex-layout.col#product-assembly-image": {
"props": {
"marginRight": 4
},
- "children": [
- "assembly-option-item-image"
- ]
+ "children": ["assembly-option-item-image"]
},
"flex-layout.col#product-assembly-middle": {
"props": {
@@ -96,9 +92,7 @@
"horizontalAlign": "right",
"verticalAlign": "middle"
},
- "children": [
- "assembly-option-item-quantity-selector"
- ]
+ "children": ["assembly-option-item-quantity-selector"]
},
"assembly-option-item-customize#sec-level": {
"props": {
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index d7f0c05..adf1416 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -3,7 +3,7 @@
"children": [
"html#breadcrumb",
"condition-layout.product#availability",
- "flex-layout.row#description",
+ "tab-layout#desc",
"flex-layout.row#specifications-title",
"product-specification-group#table",
"shelf.relatedProducts",
@@ -78,7 +78,7 @@
"flex-layout.col#stack": {
"children": ["stack-layout"],
"props": {
- "width": "54%",
+ "width": "46%",
"rowGap": 0
}
},
@@ -107,17 +107,15 @@
"product-identifier.product",
"product-rating-summary",
"flex-layout.row#selling-price",
- "product-installments",
- "flex-layout.row#list-price-savings",
- "product-separator",
+ "Parcelamento",
+ "pix",
"sku-selector",
- "product-quantity",
+ "html#quantityAndButton",
"product-assembly-options",
"product-gifts",
- "flex-layout.row#buy-button",
"availability-subscriber",
- "shipping-simulator",
- "share#default"
+ "shipping-simulator"
+ // "share#default"
]
},
@@ -128,19 +126,27 @@
"children": ["vtex.store-components:product-name"]
},
+ "pix": {
+ "props": {
+ "marginBottom": 16,
+ "marginTop": 8
+ }
+ },
+
+ "Parcelamento": {
+ "props": {
+ "marginBottom": 8
+ }
+ },
+
"sku-selector": {
"props": {
"variationsSpacing": 3,
"showValueNameForImageVariation": true
}
},
-
- "flex-layout.row#buy-button": {
- "props": {
- "marginTop": 4,
- "marginBottom": 7
- },
- "children": ["add-to-cart-button"]
+ "html#quantityAndButton": {
+ "children": ["product-quantity", "add-to-cart-button"]
},
"flex-layout.row#product-availability": {
@@ -175,6 +181,121 @@
"children": ["availability-subscriber"]
},
+ "flex-layout.col#image-description": {
+ "props": {
+ "blockClass": "image-description"
+ },
+ "children": ["image#img-descricao"]
+ },
+ "image#img-descricao": {
+ "props": {
+ "blockClass": "img-descricao",
+ "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true"
+ }
+ },
+
+ "flex-layout.col#description": {
+ "props": { "blockClass": "description" },
+ "children": ["product-description"]
+ },
+
+ "tab-layout#desc": {
+ "children": ["tab-list#home", "tab-content#desc"],
+ "props": {
+ "blockClass": "desc",
+ "defaultActiveTabId": "desc1"
+ }
+ },
+ "tab-list#home": {
+ "children": [
+ "tab-list.item#desc1",
+ "tab-list.item#desc2",
+ "tab-list.item#desc3",
+ "tab-list.item#desc4",
+ "tab-list.item#desc5"
+ ]
+ },
+ "tab-list.item#desc1": {
+ "props": {
+ "tabId": "desc1",
+ "label": "Descrição",
+ "defaultActiveTab": true
+ }
+ },
+ "tab-list.item#desc2": {
+ "props": {
+ "tabId": "desc2",
+ "label": "Descrição"
+ }
+ },
+ "tab-list.item#desc3": {
+ "props": {
+ "tabId": "desc3",
+ "label": "Descrição"
+ }
+ },
+ "tab-list.item#desc4": {
+ "props": {
+ "tabId": "desc4",
+ "label": "Descrição"
+ }
+ },
+ "tab-list.item#desc5": {
+ "props": {
+ "tabId": "desc5",
+ "label": "Descrição"
+ }
+ },
+ "tab-content#desc": {
+ "children": [
+ "tab-content.item#desc1",
+ "tab-content.item#desc2",
+ "tab-content.item#desc3",
+ "tab-content.item#desc4",
+ "tab-content.item#desc5"
+ ]
+ },
+ "tab-content.item#desc1": {
+ "children": ["flex-layout.row#description-row"],
+ "props": {
+ "tabId": "desc1"
+ }
+ },
+ "tab-content.item#desc2": {
+ "children": [],
+ "props": {
+ "tabId": "desc2"
+ }
+ },
+ "tab-content.item#desc3": {
+ "children": [],
+ "props": {
+ "tabId": "desc2"
+ }
+ },
+ "tab-content.item#desc4": {
+ "children": [],
+ "props": {
+ "tabId": "desc2"
+ }
+ },
+ "tab-content.item#desc5": {
+ "children": [],
+ "props": {
+ "tabId": "desc2"
+ }
+ },
+
+ "flex-layout.row#description-row": {
+ "props": {
+ "blockClass": "description-row"
+ },
+ "children": [
+ "flex-layout.col#image-description",
+ "flex-layout.col#description"
+ ]
+ },
+
"share#default": {
"props": {
"social": {
diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc
index 3035106..bb528e8 100644
--- a/store/blocks/product-price.jsonc
+++ b/store/blocks/product-price.jsonc
@@ -3,12 +3,9 @@
"props": {
"colGap": 2,
"preserveLayoutOnMobile": true,
- "preventHorizontalStretch": true,
- "marginBottom": 4
+ "preventHorizontalStretch": true
},
- "children": [
- "product-selling-price"
- ]
+ "children": ["product-selling-price"]
},
"flex-layout.row#list-price-savings": {
@@ -19,9 +16,6 @@
"marginBottom": 2,
"marginTop": 5
},
- "children": [
- "product-list-price",
- "product-price-savings"
- ]
+ "children": ["product-list-price", "product-price-savings"]
}
}
diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc
index afabee3..bb93cc8 100644
--- a/store/blocks/product-summary/product-summary.jsonc
+++ b/store/blocks/product-summary/product-summary.jsonc
@@ -81,9 +81,7 @@
},
"product-price-savings#summary": {
"props": {
- "markers": [
- "discount"
- ],
+ "markers": ["discount"],
"blockClass": "summary"
}
}
diff --git a/store/interfaces.json b/store/interfaces.json
index c4b2ac4..d504c54 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -5,5 +5,12 @@
"html": {
"component": "html",
"composition": "children"
+ },
+ "pix": {
+ "component": "pix"
+ },
+
+ "Parcelamento": {
+ "component": "Parcelamento"
}
}
diff --git a/styles/css/vtex-numeric-stepper.css b/styles/css/vtex-numeric-stepper.css
new file mode 100644
index 0000000..8a4fd1b
--- /dev/null
+++ b/styles/css/vtex-numeric-stepper.css
@@ -0,0 +1,13 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.container {
+ background: red;
+ padding: 8.5px 0;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.address-form.css b/styles/css/vtex.address-form.css
new file mode 100644
index 0000000..089b934
--- /dev/null
+++ b/styles/css/vtex.address-form.css
@@ -0,0 +1,13 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.__postalCode {
+ display: flex;
+ width: 100%;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.address.css b/styles/css/vtex.address.css
new file mode 100644
index 0000000..34c4328
--- /dev/null
+++ b/styles/css/vtex.address.css
@@ -0,0 +1,9 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
\ No newline at end of file
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
index 95cb97c..006fdc2 100644
--- a/styles/css/vtex.breadcrumb.css
+++ b/styles/css/vtex.breadcrumb.css
@@ -11,7 +11,6 @@
padding-left: 40px;
display: flex;
align-items: center;
- color: #929292;
}
.container .homeLink .homeIcon {
display: none;
@@ -19,6 +18,10 @@
.container .homeLink::before {
content: "Home";
font-size: 16px;
+ color: #929292;
+}
+.container .homeLink:hover::before {
+ color: #0f3e99;
}
.container .arrow--1 .link {
font-size: 0;
@@ -26,4 +29,8 @@
.container .arrow--1 .link::before {
content: "Sapatos";
font-size: 16px;
+ color: #929292;
+}
+.container .arrow--1 .link:hover::before {
+ color: #0f3e99;
}
\ No newline at end of file
diff --git a/styles/css/vtex.numeric-stepper.css b/styles/css/vtex.numeric-stepper.css
new file mode 100644
index 0000000..a15666e
--- /dev/null
+++ b/styles/css/vtex.numeric-stepper.css
@@ -0,0 +1,12 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.wrapper {
+ height: 80px;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
new file mode 100644
index 0000000..4bfb790
--- /dev/null
+++ b/styles/css/vtex.product-quantity.css
@@ -0,0 +1,45 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.quantitySelectorContainer {
+ margin: 0;
+}
+.quantitySelectorContainer .quantitySelectorTitle {
+ display: none;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) {
+ width: 128px;
+ border: solid 1px #ccc;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) {
+ height: 49px;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) :global(.vtex-numeric-stepper__plus-button) {
+ width: 100%;
+ height: 49px;
+ color: #000;
+ border: none;
+ background: #fff;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) {
+ width: 100%;
+ height: 49px;
+ border: none;
+ background: #fff;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) {
+ height: 49px;
+}
+.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) :global(.vtex-numeric-stepper__minus-button) {
+ width: 100%;
+ height: 49px;
+ color: #000;
+ border: none;
+ background: #fff;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index cb71014..36528d6 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -26,4 +26,112 @@
font-size: 20px;
line-height: 34px;
color: #575757;
+}
+
+.skuSelectorContainer {
+ display: flex;
+ flex-direction: column-reverse;
+}
+.skuSelectorContainer .frameAround,
+.skuSelectorContainer .skuSelectorInternalBox {
+ border-radius: 1.5rem;
+ z-index: 3;
+ padding: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItem {
+ height: 43px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
+ width: 40px;
+ height: 40px;
+ bottom: -0.25rem;
+ top: 0rem;
+ left: 0rem;
+ right: -0.25rem;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .valueWrapper {
+ padding: 10px 11px;
+ width: 40px;
+ height: 40px;
+}
+.skuSelectorContainer .frameAround {
+ border-color: #000;
+}
+
+.shippingContainer {
+ display: flex;
+ margin: 0;
+ align-items: center;
+ position: relative;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) {
+ display: flex;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) {
+ display: flex;
+ flex-direction: column;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) {
+ font-size: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label)::before {
+ content: "CALCULAR FRETE:";
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) {
+ width: 231px;
+ height: 49px;
+ margin: 0;
+ padding: 16.5px 0 16.5px 16px;
+ border: 1px solid #cccccc;
+ border-radius: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) {
+ padding: 0;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input)::before {
+ content: "Digite seu cep";
+ height: 16px;
+ width: 16px;
+ background: red;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) {
+ display: flex;
+ position: absolute;
+ padding: 0;
+ left: 312px;
+ top: 41.5px;
+}
+.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
+ color: #000;
+}
+.shippingContainer :global(.vtex-button) {
+ display: flex;
+ width: 49px;
+ height: 49px;
+ margin-bottom: 5px;
+ background: #000;
+ border: 1px solid #000;
+ border-radius: 0;
+ cursor: pointer;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label) {
+ padding: 0;
+ font-size: 0;
+}
+.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::before {
+ content: "OK";
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+ display: flex;
+ align-items: center;
+ color: #fff;
}
\ No newline at end of file
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
new file mode 100644
index 0000000..711d8df
--- /dev/null
+++ b/styles/css/vtex.tab-layout.css
@@ -0,0 +1,49 @@
+/*
+0 - 600PX: Phone
+600 - 900px: Table portrait
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.listContainer {
+ margin-bottom: 32px;
+ display: flex;
+ flex-direction: row;
+ column-gap: 197.5px;
+}
+.listContainer::after {
+ content: "";
+ background-color: #bfbfbf;
+ display: inline-block;
+ width: 100%;
+ height: 1px;
+ position: relative;
+ bottom: 9px;
+}
+
+.listItem :global(.vtex-button) {
+ background-color: white;
+ color: #bfbfbf;
+ border: 0;
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 38px;
+ text-transform: capitalize;
+ border-radius: 0;
+}
+
+.listItemActive :global(.vtex-button) {
+ background-color: white;
+ color: black;
+ border: 0;
+ border-bottom: 2px black solid;
+ font-family: "Open Sans", sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 38px;
+}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
index 3780c30..a7074cb 100644
--- a/styles/sass/pages/product/vtex.breadcrumb.scss
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -1,5 +1,3 @@
-@import "/styles/sass/utils/vars";
-
.container {
padding-left: 40px;
display: flex;
@@ -11,18 +9,25 @@
}
}
.homeLink::before {
- content: "Home";
+ content: 'Home';
font-size: 16px;
- color: $color-gray6;
+ color: #929292;
+ }
+
+ .homeLink:hover::before {
+ color: #0f3e99;
}
.arrow--1 {
.link {
font-size: 0;
}
.link::before {
- content: "Sapatos";
+ content: 'Sapatos';
font-size: 16px;
- color: $color-gray6;
+ color: #929292;
+ }
+ .link:hover::before {
+ color: #0f3e99;
}
}
}
diff --git a/styles/sass/pages/product/vtex.numeric-stepper.scss b/styles/sass/pages/product/vtex.numeric-stepper.scss
new file mode 100644
index 0000000..db39b3b
--- /dev/null
+++ b/styles/sass/pages/product/vtex.numeric-stepper.scss
@@ -0,0 +1,3 @@
+.wrapper {
+ height: 80px;
+}
diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss
new file mode 100644
index 0000000..8b339ef
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-quantity.scss
@@ -0,0 +1,42 @@
+.quantitySelectorContainer {
+ margin: 0;
+
+ .quantitySelectorTitle {
+ display: none;
+ }
+ :global(.vtex-numeric-stepper-wrapper) {
+ :global(.vtex-numeric-stepper-container) {
+ width: 128px;
+ border: solid 1px #ccc;
+
+ :global(.vtex-numeric-stepper__plus-button-container) {
+ height: 49px;
+
+ :global(.vtex-numeric-stepper__plus-button) {
+ width: 100%;
+ height: 49px;
+ color: #000;
+ border: none;
+ background: #fff;
+ }
+ }
+ :global(.vtex-numeric-stepper__input) {
+ width: 100%;
+ height: 49px;
+ border: none;
+ background: #fff;
+ }
+ :global(.vtex-numeric-stepper__minus-button-container) {
+ height: 49px;
+
+ :global(.vtex-numeric-stepper__minus-button) {
+ width: 100%;
+ height: 49px;
+ color: #000;
+ border: none;
+ background: #fff;
+ }
+ }
+ }
+ }
+}
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index e2d6654..b7d473d 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -12,7 +12,7 @@
justify-content: flex-end;
margin-right: 37px;
- font-family: "Open Sans", sans-serif;
+ font-family: 'Open Sans', sans-serif;
font-style: normal;
font-weight: 300;
font-size: 20px;
@@ -20,3 +20,136 @@
color: #575757;
}
+
+.skuSelectorContainer {
+ display: flex;
+ flex-direction: column-reverse;
+
+ .frameAround,
+ .skuSelectorInternalBox {
+ border-radius: 1.5rem;
+ z-index: 3;
+ padding: 0;
+ }
+
+ .skuSelectorSubcontainer--tamanho {
+ .skuSelectorItem {
+ height: 43px;
+ }
+
+ .frameAround {
+ width: 40px;
+ height: 40px;
+
+ bottom: -0.25rem;
+ top: 0rem;
+ left: 0rem;
+ right: -0.25rem;
+ }
+ .valueWrapper {
+ padding: 10px 11px;
+ width: 40px;
+ height: 40px;
+ }
+ }
+
+ .frameAround {
+ border-color: #000;
+ }
+}
+
+.shippingContainer {
+ display: flex;
+ margin: 0;
+ align-items: center;
+ position: relative;
+
+ :global(.vtex-address-form__postalCode) {
+ display: flex;
+
+ :global(.vtex-input) {
+ display: flex;
+ flex-direction: column;
+
+ :global(.vtex-input__label) {
+ font-size: 0;
+ }
+
+ :global(.vtex-input__label)::before {
+ content: 'CALCULAR FRETE:';
+
+ font-family: 'Open Sans', sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+ }
+
+ :global(.vtex-input-prefix__group) {
+ width: 231px;
+ height: 49px;
+ margin: 0;
+ padding: 16.5px 0 16.5px 16px;
+
+ border: 1px solid #cccccc;
+ border-radius: 0;
+
+ :global(.vtex-address-form-4-x-input) {
+ padding: 0;
+ }
+
+ :global(.vtex-address-form-4-x-input)::before {
+ content: 'Digite seu cep';
+ height: 16px;
+ width: 16px;
+ background: red;
+ }
+ }
+ }
+
+ :global(.vtex-address-form__postalCode-forgottenURL) {
+ display: flex;
+ position: absolute;
+ padding: 0;
+ left: 312px;
+ top: 41.5px;
+
+ :last-child {
+ color: #000;
+ }
+ }
+ }
+
+ :global(.vtex-button) {
+ display: flex;
+ width: 49px;
+ height: 49px;
+ margin-bottom: 5px;
+
+ background: #000;
+ border: 1px solid #000;
+ border-radius: 0;
+
+ cursor: pointer;
+
+ :global(.vtex-button__label) {
+ padding: 0;
+ font-size: 0;
+ }
+
+ :global(.vtex-button__label)::before {
+ content: 'OK';
+ font-family: 'Open Sans', sans-serif;
+ font-style: normal;
+ font-weight: 600;
+ font-size: 14px;
+ line-height: 19px;
+
+ display: flex;
+ align-items: center;
+
+ color: #fff;
+ }
+ }
+}
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
new file mode 100644
index 0000000..966d427
--- /dev/null
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -0,0 +1,38 @@
+.listContainer {
+ margin-bottom: 32px;
+ display: flex;
+ flex-direction: row;
+ column-gap: 197.5px;
+ &::after {
+ content: '';
+ background-color: #bfbfbf;
+ display: inline-block;
+ width: 100%;
+ height: 1px;
+ position: relative;
+ bottom: 9px;
+ }
+}
+.listItem :global(.vtex-button) {
+ background-color: white;
+ color: #bfbfbf;
+ border: 0;
+ font-family: 'Open Sans', sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 38px;
+ text-transform: capitalize;
+ border-radius: 0;
+}
+.listItemActive :global(.vtex-button) {
+ background-color: white;
+ color: black;
+ border: 0;
+ border-bottom: 2px black solid;
+ font-family: 'Open Sans', sans-serif;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 38px;
+}