From d3bd6e57958676ffa608d072f12990f9a9339db8 Mon Sep 17 00:00:00 2001 From: Gabriel Ferraz Date: Tue, 31 Jan 2023 18:43:03 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20cria=C3=A7=C3=A3o=20da=20descri=C3=A7?= =?UTF-8?q?=C3=A3o=20do=20produto=20e=20estiliza=C3=A7=C3=A3o=20do=20pix?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .eslintignore | 3 + .eslintrc | 7 + .prettierrc | 1 + package.json | 39 +++-- react/Parcelamento.tsx | 3 + react/components/Example/Example.tsx | 10 +- react/components/Html/index.tsx | 40 ++--- react/components/Html/style.css | 14 ++ .../components/Parcelamento/Parcelamento.css | 3 + .../components/Parcelamento/Parcelamento.tsx | 32 ++++ react/components/pix/pix.css | 23 +++ react/components/pix/pix.svg | 38 +++++ react/components/pix/pix.tsx | 34 ++++ react/package.json | 34 +++- react/pix.tsx | 3 + react/tsconfig.json | 10 +- react/yarn.lock | 120 ++++++++++++-- store/blocks/pdp/product-assembly.jsonc | 24 ++- store/blocks/pdp/product.jsonc | 153 ++++++++++++++++-- store/blocks/product-price.jsonc | 12 +- .../product-summary/product-summary.jsonc | 4 +- store/interfaces.json | 7 + styles/css/vtex-numeric-stepper.css | 13 ++ styles/css/vtex.address-form.css | 13 ++ styles/css/vtex.address.css | 9 ++ styles/css/vtex.breadcrumb.css | 9 +- styles/css/vtex.numeric-stepper.css | 12 ++ styles/css/vtex.product-quantity.css | 45 ++++++ styles/css/vtex.store-components.css | 108 +++++++++++++ styles/css/vtex.tab-layout.css | 49 ++++++ .../sass/pages/product/vtex.breadcrumb.scss | 17 +- .../pages/product/vtex.numeric-stepper.scss | 3 + .../pages/product/vtex.product-quantity.scss | 42 +++++ styles/sass/pages/product/vtex.rich-text.scss | 0 .../pages/product/vtex.store-components.scss | 135 +++++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 38 +++++ 36 files changed, 1001 insertions(+), 106 deletions(-) create mode 100644 .eslintignore create mode 100644 .eslintrc create mode 100644 .prettierrc create mode 100644 react/Parcelamento.tsx create mode 100644 react/components/Html/style.css create mode 100644 react/components/Parcelamento/Parcelamento.css create mode 100644 react/components/Parcelamento/Parcelamento.tsx create mode 100644 react/components/pix/pix.css create mode 100644 react/components/pix/pix.svg create mode 100644 react/components/pix/pix.tsx create mode 100644 react/pix.tsx create mode 100644 styles/css/vtex-numeric-stepper.css create mode 100644 styles/css/vtex.address-form.css create mode 100644 styles/css/vtex.address.css create mode 100644 styles/css/vtex.numeric-stepper.css create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.numeric-stepper.scss create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss delete mode 100644 styles/sass/pages/product/vtex.rich-text.scss create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss 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 ( + <> +
+ image-pix +
+ 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; +}