From 85efcc7f81549e469f503a41c4afcd2fae19305f Mon Sep 17 00:00:00 2001 From: ueberjames Date: Tue, 7 Feb 2023 21:29:59 -0300 Subject: [PATCH] =?UTF-8?q?estiliza=C3=A7=C3=A3o=20dos=20bot=C3=B5es=20qua?= =?UTF-8?q?ntidade=20e=20adiciona=20sacola?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manifest.json | 1 - react/Pix.tsx | 4 + react/components/Html/index.tsx | 1 + react/components/Html/style.css | 9 + react/components/pix/Pix.tsx | 45 ++++ react/components/pix/styles.module.css | 39 ++++ react/typings/css.d.ts | 4 + react/typings/global.d.ts | 7 + react/typings/graphql.d.ts | 6 + react/typings/storefront.d.ts | 15 ++ react/typings/vtex.css-handles.ts | 1 + react/typings/vtex.order-manager.d.ts | 103 +++++++++ react/typings/vtex.render-runtime.d.ts | 38 ++++ react/typings/vtex.styleguide.d.ts | 9 + store/blocks/minicart.jsonc | 3 +- store/blocks/pdp/product.jsonc | 76 +++++-- store/blocks/product-summary/quickview.json | 18 +- store/interfaces.json | 3 + ...-theme.css => vtex.add-to-cart-button.css} | 11 +- styles/css/vtex.flex-layout.css | 33 ++- styles/css/vtex.product-identifier.css | 23 +- styles/css/vtex.product-price.css | 93 ++------ styles/css/vtex.product-quantity.css | 39 ++++ styles/css/vtex.store-components.css | 137 ++++++++++- styles/css/vtex.styleguide.css | 10 + .../product/agenciamagma.store-theme.scss | 8 - .../product/vtex.add-to-cart-button.scss | 9 + .../sass/pages/product/vtex.flex-layout.scss | 38 +++- .../product/vtex.product-identifier.scss | 12 + .../pages/product/vtex.product-price.scss | 17 ++ .../pages/product/vtex.product-quantity.scss | 33 +++ .../pages/product/vtex.store-components.scss | 214 ++++++++++++++++++ 32 files changed, 936 insertions(+), 123 deletions(-) create mode 100644 react/Pix.tsx create mode 100644 react/components/Html/style.css create mode 100644 react/components/pix/Pix.tsx create mode 100644 react/components/pix/styles.module.css create mode 100644 react/typings/css.d.ts create mode 100644 react/typings/global.d.ts create mode 100644 react/typings/graphql.d.ts create mode 100644 react/typings/storefront.d.ts create mode 100644 react/typings/vtex.css-handles.ts create mode 100644 react/typings/vtex.order-manager.d.ts create mode 100644 react/typings/vtex.render-runtime.d.ts create mode 100644 react/typings/vtex.styleguide.d.ts rename styles/css/{agenciamagma.store-theme.css => vtex.add-to-cart-button.css} (72%) create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/css/vtex.styleguide.css delete mode 100644 styles/sass/pages/product/agenciamagma.store-theme.scss create mode 100644 styles/sass/pages/product/vtex.add-to-cart-button.scss create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss create mode 100644 styles/sass/pages/product/vtex.product-price.scss create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/manifest.json b/manifest.json index 9ee3cc5..a2cde0d 100644 --- a/manifest.json +++ b/manifest.json @@ -15,7 +15,6 @@ "postreleasy": "vtex publish --verbose" }, "dependencies": { - "agenciamagma.store-theme": "5.x", "vtex.store": "2.x", "vtex.store-header": "2.x", "vtex.product-summary": "2.x", diff --git a/react/Pix.tsx b/react/Pix.tsx new file mode 100644 index 0000000..e044e8a --- /dev/null +++ b/react/Pix.tsx @@ -0,0 +1,4 @@ +import Pix from "./components/pix/Pix"; + + +export default Pix; diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..47dc783 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,5 +1,6 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; +import "./style.css" const CSS_HANDLES = ["html"] as const; diff --git a/react/components/Html/style.css b/react/components/Html/style.css new file mode 100644 index 0000000..9e62d40 --- /dev/null +++ b/react/components/Html/style.css @@ -0,0 +1,9 @@ +[class*="html--quantity-button-buy"] { + display: flex; + gap: 10px; + + + +} + + diff --git a/react/components/pix/Pix.tsx b/react/components/pix/Pix.tsx new file mode 100644 index 0000000..cdd8480 --- /dev/null +++ b/react/components/pix/Pix.tsx @@ -0,0 +1,45 @@ +import React, { useEffect } from "react"; +import { useProduct} from "vtex.product-context"; +import styles from "./styles.module.css"; + + +const Pix = () => { + + useEffect(()=>{ + const cep = document.querySelector(".vtex-address-form-4-x-input"); + + cep?.setAttribute("placeholder", "Digite seu CEP"); + + }) + +const productvalue = useProduct(); + +const pixproduct = productvalue?.product?.priceRange?.sellingPrice?.lowPrice; + +const desconto = (Number(pixproduct)*10)/100; + +const total = Number(pixproduct) - Number(desconto.toFixed(2)) + +return ( + +
+
+
+ +
+
+

R$ { total.toFixed(2)}

+

10% de desconto

+
+ +
+
+ + + + +); + +}; + +export default Pix; diff --git a/react/components/pix/styles.module.css b/react/components/pix/styles.module.css new file mode 100644 index 0000000..4258692 --- /dev/null +++ b/react/components/pix/styles.module.css @@ -0,0 +1,39 @@ + + +.pix-container{ + display: flex; + + +} + +.pix-content{ + display: flex; + width: 197px; + +} + +.pix-img{ + margin-top: 22px; +} + +.pix-desconto{ + margin-left: 26px; + +} + +.pix-valor{ + margin: 8px 0 0px 0; + color:#000000; + font-size: 18px; + line-height: 25px; + font-weight: 700; + +} + +.pix-text{ + font-size: 13px; + margin: 0; + color: #929292; + font-family: 'Open Sans'; + +} diff --git a/react/typings/css.d.ts b/react/typings/css.d.ts new file mode 100644 index 0000000..c5862b6 --- /dev/null +++ b/react/typings/css.d.ts @@ -0,0 +1,4 @@ +declare module "*.css" { + const css: any; + export default css; +} diff --git a/react/typings/global.d.ts b/react/typings/global.d.ts new file mode 100644 index 0000000..17b4165 --- /dev/null +++ b/react/typings/global.d.ts @@ -0,0 +1,7 @@ +export interface TimeSplit { + hours: string + minutes: string + seconds: string +} + +type GenericObject = Record diff --git a/react/typings/graphql.d.ts b/react/typings/graphql.d.ts new file mode 100644 index 0000000..84017d3 --- /dev/null +++ b/react/typings/graphql.d.ts @@ -0,0 +1,6 @@ +declare module "*.graphql" { + import { DocumentNode } from "graphql"; + + const value: DocumentNode; + export default value; +} diff --git a/react/typings/storefront.d.ts b/react/typings/storefront.d.ts new file mode 100644 index 0000000..4689dc6 --- /dev/null +++ b/react/typings/storefront.d.ts @@ -0,0 +1,15 @@ +import { FunctionComponent } from "react"; + +declare global { + interface StorefrontFunctionComponent

+ extends FunctionComponent

{ + getSchema?(props: P): GenericObject + schema?: GenericObject + } + + interface StorefrontComponent

+ extends Component { + getSchema?(props: P): GenericObject + schema: GenericObject + } +} diff --git a/react/typings/vtex.css-handles.ts b/react/typings/vtex.css-handles.ts new file mode 100644 index 0000000..4f191a0 --- /dev/null +++ b/react/typings/vtex.css-handles.ts @@ -0,0 +1 @@ +declare module "vtex.css-handles" diff --git a/react/typings/vtex.order-manager.d.ts b/react/typings/vtex.order-manager.d.ts new file mode 100644 index 0000000..b563ce5 --- /dev/null +++ b/react/typings/vtex.order-manager.d.ts @@ -0,0 +1,103 @@ +/* eslint-disable no-inner-declarations */ +declare module "vtex.order-manager/OrderQueue" { + export * from "vtex.order-manager/react/OrderQueue"; + export { default } from "vtex.order-manager/react/OrderQueue"; + + export const QueueStatus = { + PENDING: "Pending", + FULFILLED: "Fulfilled", + } as const; +} + +declare module "vtex.order-manager/OrderForm" { + import { createContext, useContext } from "react"; + import type { DEFAULT_ORDER_FORM } from "@vtex/order-manager/src/constants"; + import type { Context, OrderForm } from "@vtex/order-manager/src/typings"; + + type DefaultOrderForm = typeof DEFAULT_ORDER_FORM; + type DefaultOrderFormOmited = Omit; + type DefaultOrderFormUpdated = DefaultOrderFormOmited & { + items: OrderFormItem[] | null; + }; + + export const OrderFormContext = createContext>({ + orderForm: DefaultOrderFormUpdated, + setOrderForm: noop, + error: undefined, + loading: false, + }); + + function useOrderForm() { + const context = useContext(OrderFormContext); + + if (context === undefined) { + throw new Error( + "useOrderForm must be used within a OrderFormProvider" + ); + } + return context as Context; + } + + export type OrderFormItem = { + additionalInfo: { + brandName: string; + __typename: string; + }; + attachments: Array; + attachmentOfferings: Array; + bundleItems: Array; + parentAssemblyBinding: any; + parentItemIndex: any; + sellingPriceWithAssemblies: any; + options: any; + availability: string; + detailUrl: string; + id: string; + imageUrls: Record; + listPrice: number; + manualPrice: any; + measurementUnit: string; + modalType: any; + name: string; + offerings: Array; + price: number; + priceTags: Array; + productCategories: Record; + productCategoryIds: string; + productRefId: string; + productId: string; + quantity: number; + seller: string; + sellingPrice: number; + skuName: string; + skuSpecifications: Array; + unitMultiplier: number; + uniqueId: string; + refId: string; + isGift: boolean; + priceDefinition: { + calculatedSellingPrice: number; + total: number; + sellingPrices: Array<{ + quantity: number; + value: number; + __typename: string; + }>; + __typename: string; + }; + __typename: string; + }; + + export { OrderFormProvider, useOrderForm }; + declare const _default: { + OrderFormProvider: import("react").FC>; + useOrderForm: typeof useOrderForm; + }; + export default _default; +} + +declare module "vtex.order-manager/constants" { + export * from "vtex.order-manager/react/constants"; +} + + diff --git a/react/typings/vtex.render-runtime.d.ts b/react/typings/vtex.render-runtime.d.ts new file mode 100644 index 0000000..bfb1e97 --- /dev/null +++ b/react/typings/vtex.render-runtime.d.ts @@ -0,0 +1,38 @@ +/* Typings for `render-runtime` */ +declare module "vtex.render-runtime" { + import { ComponentType, ReactElement, ReactType } from "react"; + + export interface NavigationOptions { + page: string + params?: any + } + + export interface RenderContextProps { + runtime: { + navigate: (options: NavigationOptions) => void + } + } + + interface ExtensionPointProps { + id: string + [key: string]: any + } + + export const ExtensionPoint: ComponentType; + + interface ChildBlockProps { + id: string + } + + export const ChildBlock: ComponentType; + export const useChildBlock = () => GenericObject; + + export const Helmet: ReactElement; + export const Link: ReactType; + export const NoSSR: ReactElement; + export const RenderContextConsumer: ReactElement; + export const canUseDOM: boolean; + export const withRuntimeContext: ( + Component: ComponentType + ) => ComponentType; +} diff --git a/react/typings/vtex.styleguide.d.ts b/react/typings/vtex.styleguide.d.ts new file mode 100644 index 0000000..6f1f00a --- /dev/null +++ b/react/typings/vtex.styleguide.d.ts @@ -0,0 +1,9 @@ +declare module "vtex.styleguide" { + import { ComponentType } from "react"; + + export const Input: ComponentType; + + interface InputProps { + [key: string]: any + } +} diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 5c797c2..e28d91a 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -2,7 +2,8 @@ "add-to-cart-button": { "props": { "addToCartFeedback": "customEvent", - "customPixelEventId": "add-to-cart-button" + "customPixelEventId": "add-to-cart-button", + "text":"ADICIONAR À SACOLA" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 3d65342..734e8d8 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -10,6 +10,8 @@ "product-questions-and-answers" ] }, + + "html#breadcrumb": { "props": { "tag": "section", @@ -18,6 +20,8 @@ }, "children": ["breadcrumb"] }, + + "flex-layout.row#specifications-title": { "children": ["rich-text#specifications"] }, @@ -50,7 +54,8 @@ "marginTop": 4, "marginBottom": 7, "paddingTop": 7, - "paddingBottom": 7 + "paddingBottom": 7, + "blockClass": "product-main" }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] }, @@ -106,23 +111,38 @@ }, "children": [ "flex-layout.row#product-name", - "product-rating-summary", - "flex-layout.row#list-price-savings", - "flex-layout.row#selling-price", - "product-installments", - "product-separator", "product-identifier.product", + "product-rating-summary", + "flex-layout.row#selling-price", + "product-installments#m3", + "Pix", "sku-selector", - "product-quantity", + // "product-quantity", + "html#quantity-button-buy", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", + // "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" ] }, + "html#quantity-button-buy":{ + "props": { + "blockClass": "quantity-button-buy" + + }, + "children": [ + "product-quantity#size", + "flex-layout.row#buy-button" + ] + }, + "product-quantity#size": { + "props": { + "size": "large", + "showLabel": false + } + }, "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -140,7 +160,8 @@ "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "size-buy-button" }, "children": ["add-to-cart-button"] }, @@ -170,21 +191,30 @@ "flex-layout.row#availability" ] }, + + "product-identifier.product": { + "props": { + "label": "hide" + + + } +}, + "flex-layout.row#availability": { "props": { "blockClass": "message-availability" }, "children": ["availability-subscriber"] - }, - - "share#default": { - "props": { - "social": { - "Facebook": true, - "WhatsApp": true, - "Twitter": false, - "Pinterest": true - } - } } -} + + // "share#default": { + // "props": { + // "social": { + // "Facebook": true, + // "WhatsApp": true, + // "Twitter": false, + // "Pinterest": true + // } + // } + // } + } diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..913fe31 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -36,11 +36,25 @@ }, "flex-layout.col#quickviewPrice": { "children": [ - "flex-layout.row#list-price-savings", + "flex-layout.row#selling-price", - "product-installments" + "product-installments", + "product-installments#m3" ] }, + + "product-installments#m3":{ + "props":{ + "markers":["discount"], + "blockClass":"m3-install", + "installmentsCriteria":"max-quantity-without-interest", + + "message":" {installmentsNumber}x de {installmentValue} sem juros" + + + } + }, + "modal-actions#quickview": { "props": { "blockClass": "quickview" diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..74af5f3 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "Pix":{ + "component": "Pix" } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/vtex.add-to-cart-button.css similarity index 72% rename from styles/css/agenciamagma.store-theme.css rename to styles/css/vtex.add-to-cart-button.css index 8659f9c..fd5c390 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/vtex.add-to-cart-button.css @@ -8,10 +8,9 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap"); /* Grid breakpoints */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; +.buttonText { + font-family: "Open Sans", sans-serif; + font-weight: 400; + font-size: 18px; + line-height: 25px; } \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index e5ab5d2..d091357 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -8,7 +8,36 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap"); /* Grid breakpoints */ -.container { - margin: 0; +.flexRowContent--product-main { + gap: 32px; padding: 0; + margin: 0; + padding-left: 40px; + padding-right: 40px; +} +.flexRowContent--product-main .stretchChildrenWidth { + padding: 0; +} + +.flexRow--size-buy-button { + width: 100%; + height: 49px; + margin: 0; +} +.flexRow--size-buy-button .flexRowContent--size-buy-button { + height: 49px; + width: 100%; + margin: 0; +} + +.flexRowContent--size-buy-button :global(.vtex-button) { + background: #000000; + border: none; + border-radius: 0; + width: 100%; +} +@media only screen and (max-width: 1024px) { + .flexRowContent--size-buy-button :global(.vtex-button) { + width: 780px; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..bdeaed3 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,22 @@ -.product-identifier--productReference { - margin-bottom: 1rem; +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap"); +/* Grid breakpoints */ +.product-identifier__value { + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.4784313725); + display: flex; + justify-content: flex-end; } +@media only screen and (max-width: 1024px) { + .product-identifier__value { + justify-content: flex-start; + } +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..1d52269 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,22 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap"); +/* Grid breakpoints */ .sellingPriceValue { - font-size: 2.25rem; font-weight: 700; + font-size: 25px; + line-height: 38px; + font-family: "Open Sans", sans-serif; + color: #000000 !important; } -.installments { - color: #727273; - margin-bottom: 1rem; -} - -.savings { - font-weight: 500; - color: #79B03A; -} - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; -} - -.savings--summary { - background: #8BC34A; - border-radius: 1000px; - align-items: center; - display: flex; - - padding-left: 0.5rem; - padding-right: 0.5rem; - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; -} - -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.listPrice--summary { - margin-bottom: 0.25rem; - font-size: .875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.savings--summaryPercentage { - background: #0f3e99; - border-radius: 1000px; - align-items: center; - display: flex; -} - -.savingsPercentage--summaryPercentage { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; -} +.installmentsNumber, +.installmentValue { + font-weight: 700; +} \ 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..958da61 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,39 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap"); +/* Grid breakpoints */ +.quantitySelectorTitle { + display: none; +} + +:global(.vtex-numeric-stepper__minus-button) { + background-color: #FFFFFF; +} + +.quantitySelectorContainer { + width: 128px; + height: 49px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-container) { + height: 49px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper__input) { + height: 49px !important; + width: 48px; + padding: 0; + margin: 0; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; + width: 40px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; + width: 40px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 682d400..1f07097 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,4 +7,139 @@ */ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap"); -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container { + margin: 0; + padding: 0; + max-width: 100%; +} +.container .productImagesGallerySlide { + width: 100% !important; +} +.container .productImageTag--main { + max-height: 100% !important; + max-width: 100% !important; +} +.container .productNameContainer { + font-size: 20px; + line-height: 34px; + color: #575757; + display: flex; + justify-content: flex-end; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor { + order: 2; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0; + margin-left: 16px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after { + visibility: visible; + display: block; + content: "OUTRAS CORES:"; + font-size: 14px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameSeparator { + display: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround { + border-radius: 30px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox { + border-radius: 21px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0; + margin-left: 16px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after { + visibility: visible; + display: block; + content: "OUTROS TAMANHOS:"; + font-size: 14px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround { + width: 40px; + height: 40px; + border-radius: 30px; + top: 0; + left: 0; + right: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox { + margin: auto; + padding: 0; + width: 40px; + height: 40px; + border-radius: 30px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { + padding: 0; + margin: auto; +} +.skuSelectorContainer .valueWrapper .skuSelectorItemTextValue { + margin-right: 5px; +} +.skuSelectorContainer .frameAround { + border-color: #000000; + z-index: 2; +} +.skuSelectorContainer .diagonalCross { + background-image: linear-gradient(to top left, transparent 44%, rgba(0, 0, 0, 0.3) 48%, currentColor 48%, currentColor 52%, transparent 52%); + width: 36px; + height: 17px; + top: 11px; +} +.skuSelectorContainer .skuSelectorItem--skus--selected .skuSelectorItemTextValue--skus { + font-size: 14px; + line-height: 19px; + font-weight: 400; + color: #000000; + font-family: "Open Sans", sans-serif; +} + +.shippingContainer { + display: flex; +} +.shippingContainer :global(.vtex-input-prefix__group) { + height: 49px; +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-input__label)::after { + content: "CALCULAR FRETE:"; + font-size: 14px; + line-height: 19px; + font-weight: 400; + font-family: "Open Sans", sans-serif; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; +} +.shippingContainer :global(.vtex-button) { + font-size: 0; + position: relative; + right: 164px; + width: 49px; + height: 49px; + margin-top: 27px; + background-color: #000000; + border: none; + border-radius: 0; +} +.shippingContainer :global(.vtex-button)::after { + content: "OK"; + color: #FFFFFF; + font-size: 14px; + line-height: 19px; + font-weight: 600; +} \ No newline at end of file diff --git a/styles/css/vtex.styleguide.css b/styles/css/vtex.styleguide.css new file mode 100644 index 0000000..682d400 --- /dev/null +++ b/styles/css/vtex.styleguide.css @@ -0,0 +1,10 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700;800&display=swap"); +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss deleted file mode 100644 index ea7d5b9..0000000 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ /dev/null @@ -1,8 +0,0 @@ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} - diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss new file mode 100644 index 0000000..4659e57 --- /dev/null +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -0,0 +1,9 @@ +.buttonText { + font-family: $font-open; + font-weight: 400; + font-size: 18px; + line-height: 25px; + } + + + diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 2241db1..7b6b64b 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,5 +1,39 @@ -.container{ - margin: 0; + +.flexRowContent--product-main { + gap: 32px; padding: 0; + margin: 0; + padding-left: 40px; + padding-right: 40px; + + .stretchChildrenWidth { + padding: 0; + } + + } +// quantity +.flexRow--size-buy-button{ + width: 100%; +height: 49px; +margin: 0; + .flexRowContent--size-buy-button { + height: 49px; + width: 100%; + margin: 0; + } +} + + +.flexRowContent--size-buy-button :global(.vtex-button) { + background: $color-black2; + border: none; + border-radius: 0; + width: 100%; + @include mq (md, max) { + width: 780px; + } +} + + diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss new file mode 100644 index 0000000..5befa40 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,12 @@ + +.product-identifier__value +{ + font-size: 14px; + line-height: 19px; + color: #9292927a; +display: flex; +justify-content: flex-end; +@include mq (md, max) { + justify-content: flex-start; +} +} diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss new file mode 100644 index 0000000..5bf98b2 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,17 @@ +.sellingPriceValue +{ + +font-weight: 700; +font-size: 25px; + line-height: 38px; + font-family: $font-open; + color: $color-black2 !important; + +} + +.installmentsNumber, +.installmentValue { + font-weight: 700; +} + + 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..72b6dec --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,33 @@ +.quantitySelectorTitle{ + display: none; +} + +:global(.vtex-numeric-stepper__minus-button){ + background-color: $color-white; +} + +.quantitySelectorContainer{ + width: 128px; + height: 49px; + + + :global(.vtex-numeric-stepper-container){ + height: 49px; + } + :global(.vtex-numeric-stepper__input){ + height: 49px !important; + width: 48px; + padding: 0; + margin: 0; + } + :global(.vtex-numeric-stepper__plus-button-container){ + height: 49px; + width: 40px; + } + :global(.vtex-numeric-stepper__minus-button-container){ + height: 49px; + width: 40px; + } +} + + diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index e69de29..a108cd2 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -0,0 +1,214 @@ +.container{ + margin: 0; + padding: 0; + max-width: 100%; + + .productImagesGallerySlide{ + width: 100% !important; + } + + + .productImageTag--main{ + max-height: 100% !important; + max-width: 100% !important; + } + + + .productNameContainer { + font-size: 20px; + line-height: 34px; + color: #575757; + display: flex; + justify-content: flex-end; + } +} + +// sku-selector + +.skuSelectorContainer { + display: flex; + flex-direction: column; + + .skuSelectorSubcontainer--cor { + + + order: 2; + + + .skuSelectorName { + + font-size: 0; + + margin-left: 16px; + + &::after { + + visibility: visible; + display: block; + content: "OUTRAS CORES:"; + font-size: 14px; + + + } + + + } + + .skuSelectorSelectorImageValue, + .skuSelectorNameSeparator { + display: none; + } + + .frameAround { + + border-radius: 30px; + + } + + .skuSelectorItemImageValue, + .skuSelectorInternalBox { + + border-radius: 21px; + + + } + + } + + .skuSelectorSubcontainer--tamanho { + + .skuSelectorName { + + font-size: 0; + + margin-left: 16px; + + &::after { + + visibility: visible; + display: block; + content: "OUTROS TAMANHOS:"; + font-size: 14px; + + + } + + } + + .frameAround { + // border:3px solid $color-black2; + width: 40px; + height: 40px; + border-radius: 30px; + top: 0; + left: 0; + right: 0; + } + + .skuSelectorInternalBox { + + margin: auto; + padding: 0; + width: 40px; + height: 40px; + border-radius: 30px; + } + + .skuSelectorItemTextValue { + + + padding: 0; + margin: auto; + } + } + + .valueWrapper .skuSelectorItemTextValue { + margin-right: 5px; + } + + .frameAround { + border-color: $color-black2; + z-index: 2; + + } + + .diagonalCross { + background-image: linear-gradient(to top left, transparent 44%, rgba(0, 0, 0, 0.3) 48%, currentColor 48%, currentColor 52%, transparent 52%); + width: 36px; + height: 17px; + top: 11px; + } + + .skuSelectorItem--skus--selected { + + .skuSelectorItemTextValue--skus { + font-size: 14px; + line-height: 19px; + font-weight: 400; + color: $color-black2; + font-family: $font-open; + + } + } + +} + + +// sku-selector-fim + +// cep + +.shippingContainer { + +display: flex; + +:global(.vtex-input-prefix__group) { + + height: 49px; + + +} + +:global(.vtex-input__label) { + + font-size: 0; + + &::after { + content: "CALCULAR FRETE:"; + font-size: 14px; + line-height: 19px; + font-weight: 400; + font-family: $font-open; + } + +} + +:global(.vtex-address-form__postalCode) { + display: flex; +} + +:global(.vtex-button) { + font-size: 0; + position: relative; + right: 164px; + width: 49px; + height: 49px; + margin-top: 27px; + background-color: $color-black2; + border: none; + border-radius: 0; + + &::after { + + content: "OK"; + color: $color-white; + font-size: 14px; + line-height: 19px; + font-weight: 600; + + } +} + + + +}