diff --git a/manifest.json b/manifest.json index 9ee3cc5..6f9f3e2 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", @@ -66,7 +65,8 @@ "vtex.tab-layout": "0.x", "vtex.condition-layout": "2.x", "vtex.css-handles": "1.x", - "vtex.product-context": "0.x" + "vtex.product-context": "0.x", + "vtex.store-newsletter": "1.x" }, "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema" } diff --git a/react/PixDiscount.tsx b/react/PixDiscount.tsx new file mode 100644 index 0000000..f53e7ea --- /dev/null +++ b/react/PixDiscount.tsx @@ -0,0 +1,3 @@ +import PixDiscount from "./components/PixDiscount/PixDiscount"; + +export default PixDiscount; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index a19bc6a..b259a58 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,20 +1,76 @@ -@media(min-width:769px){ - [class*="html--buy-button"]{ +/* + CONTEUDO DO CONTADOR E BOTÃO DE ADD PRODUTO +*/ +[class*="html--buy-button"] :global(.vtex-button) { + min-height: 49px; + padding: 12px 64px; + background: #000; + color: #FFF; + border: none; + border-radius: 0; + font-weight: 400; + font-size: 18px; + line-height: 25px; display: flex; - } + align-items: center; + text-align: center; } + +[class*="html--buy-button"]{ + display: flex; + margin: 16px 0; +} + +[class*="html--buy-button"] :global(.vtex-button__label) { + padding: 0 !important; +} + @media(max-width: 768px){ [class*="html--buy-button"]{ display: block; + margin: 16px 0; } } +/* + DESCRIÇÃO DO PRODUTO SELECIONADO +*/ [class*="html--image-description"] { margin-right: 16px; width: 100%; } +@media(max-width: 1024px){ + [class*="html--image-description"] { + margin: 0; + } +} + [class*="html--container-description"] { margin: 32px 32px 16px 32px; } +@media(max-width: 1024px){ + [class*="html--container-description"] { + margin: 16px 0; + } +} +/* + NEWSLETTER +*/ +[class*="html--container-form-input"] { + display: flex; + margin-bottom: 16px; + position: relative; + width: 53.75%; +} + +@media(max-width: 1024px){ + [class*="html--container-form-input"] { + display: flex; + padding: 0 40px; + margin-bottom: 32px; + position: relative; + width: 100%; + } +} diff --git a/react/components/PixDiscount/PixDiscount.tsx b/react/components/PixDiscount/PixDiscount.tsx new file mode 100644 index 0000000..0387cb5 --- /dev/null +++ b/react/components/PixDiscount/PixDiscount.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; +import styles from "./styles.module.css"; + +const PixDiscount = () => { + + const productContextValue = useProduct(); + const productPrice = productContextValue?.product?.priceRange?.sellingPrice?.lowPrice; + const discount = (Number(productPrice) * 10) / 100; + const totalDiscount = Number(productPrice) - Number(discount.toFixed(2)); + + + return ( +
+
+
+ Imagem Pix +
+
+ +
+

R$ {totalDiscount.toFixed(2)}

+

10% de desconto

+
+
+ ) +} + +export default PixDiscount; diff --git a/react/components/PixDiscount/styles.module.css b/react/components/PixDiscount/styles.module.css new file mode 100644 index 0000000..48a71c8 --- /dev/null +++ b/react/components/PixDiscount/styles.module.css @@ -0,0 +1,35 @@ +.wrapper { + display: flex; + margin: 8px 0 16px 0; + height: 39px; +} +.container-img{ + margin-right: 26px; + display: flex; + align-items: center; +} +.figure-pix{ + margin: 0; + height: 24px; +} + +.img-pix { + height: 24px; + width: 100%; +} + +.price-pix{ + margin: 0; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} + +.discount{ + margin: 0; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} 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 800b870..1366c10 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -3,7 +3,6 @@ "props": { "addToCartFeedback": "customEvent", "customPixelEventId": "add-to-cart-button", - "blockClass": "button", "text": "ADICIONAR À SACOLA" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index fe68660..fd2f18b 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,7 +4,8 @@ "html#breadcrumb", "condition-layout.product#availability", "tab-layout#description", - "list-context.product-list#prateleira" + "list-context.product-list#prateleira", + "newsletter-form#container-newsletter" ] }, @@ -21,17 +22,87 @@ }, /* - DESCRIÇÃO DO PRODUTO SELECIONADO (TAB-LAYOUT#description) + IMAGEM DO PRODUTO PRINCIPAL, E CARROUSEL DE IMAGENS DO PRODUTO +*/ +"condition-layout.product#availability": { + "props": { + "blockClass": "availability", + "conditions": [ + { + "subject": "isProductAvailable" + } + ], + "Then": "flex-layout.row#product-main", + "Else": "flex-layout.row#product-availability" + } +}, +"flex-layout.row#product-main": { + "props": { + "blockClass":"main" + }, + "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] +}, + +"stack-layout": { + "props": { + "blockClass": "product" + }, + "children": [ + "flex-layout.row#product-image", + "product-bookmark", + "product-specification-badges" + ] +}, + +"product-specification-badges": { + "props": { + "specificationGroupName": "Group", + "specificationName": "On Sale", + "visibleWhen": "True", + "displayValue": "SPECIFICATION_NAME" + } +}, + +"flex-layout.col#stack": { + "children": ["stack-layout"], + "props": { + "blockClass": "stack", + "width": "50%", + "rowGap": 0 + } +}, +"flex-layout.row#product-image": { + "children": ["product-images"] +}, +"product-images": { + "props": { + "thumbnailsOrientation": "horizontal", + "showPaginationDots": false, + "showNavigationArrows": false, + "aspectRatio": { + "desktop": "auto", + "phone": "auto" + }, + "displayThumbnailsArrows": true + } +}, + +/* + DESCRIÇÃO DO PRODUTO SELECIONADO (TAB-LAYOUT#DESCRIPTION) */ "html#container-description": { "props": { "tag": "div", "blockClass": "container-description" + }, "children": ["flex-layout.row#product-description"] }, "flex-layout.row#product-description": { + "props": { + "blockClass": "product-description" + }, "children": ["html#image-description", "flex-layout.row#description"] }, @@ -149,92 +220,92 @@ */ "list-context.product-list#prateleira": { "blocks": ["product-summary.shelf#prateleira"], - "children": ["slider-layout#demo-products"] -}, - -"product-summary.shelf#prateleira": { - "children": [ - "stack-layout#prodsum", - "product-summary-name", - "product-list-price", - "product-selling-price" - ] -}, - -/* - IMAGEM DO PRODUTO PRINCIPAL, E CARROUSEL DE IMAGENS DO PRODUTO -*/ - "condition-layout.product#availability": { - "props": { - "blockClass": "availability", - "conditions": [ - { - "subject": "isProductAvailable" - } - ], - "Then": "flex-layout.row#product-main", - "Else": "flex-layout.row#product-availability" - } - }, - "flex-layout.row#product-main": { - "props": { - "blockClass":"main", - "colGap": 7, - "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7, - "paddingBottom": 7 - }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "children": ["rich-text#prateleira","slider-layout#prateleira"] }, - "stack-layout": { - "props": { - "blockClass": "product" - }, + "product-summary.shelf#prateleira": { "children": [ - "flex-layout.row#product-image", - "product-bookmark", - "product-specification-badges" + "stack-layout#prodsum", + "product-summary-name", + "product-list-price", + "product-selling-price" ] }, - "product-specification-badges": { + "rich-text#prateleira": { "props": { - "specificationGroupName": "Group", - "specificationName": "On Sale", - "visibleWhen": "True", - "displayValue": "SPECIFICATION_NAME" - } + "textAlignment": "CENTER", + "textPosition": "CENTER", + "text": "Você também pode gostar:", + "blockClass": "title-prateleira" + } }, - "flex-layout.col#stack": { - "children": ["stack-layout"], + "slider-layout#prateleira": { "props": { - "blockClass": "stack", - "width": "50%", - "rowGap": 0 - } - }, - "flex-layout.row#product-image": { - "children": ["product-images"] - }, - "product-images": { - "props": { - "thumbnailsOrientation": "horizontal", - "showPaginationDots": false, - "showNavigationArrows": false, - "aspectRatio": { - "desktop": "auto", - "phone": "16:9" + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 1 }, - "displayThumbnailsArrows": true + "infinite": true, + "fullWidth": false, + "blockClass": "prateleira" } }, /* - INFORMAÇÕES DO PRODUTO (NOME, ID, PREÇO, PARCELA, CORES, TAMANHOS ETC..) + NEWSLETTER + */ + "newsletter-form#container-newsletter": { + "props": { + "blockClass": "container-newsletter" + }, + + "children": [ + "rich-text#subscriber-newsletter", + "rich-text#offer-newsletter", + "html#container-form-input" + ] + }, + + "rich-text#subscriber-newsletter": { + "props": { + "blockClass": "subscriber-newsletter", + "textAlignment": "center", + "textPosition": "CENTER", + "text": "Assine nossa newsletter" + } + }, + + "rich-text#offer-newsletter": { + "props": { + "blockClass": "offer-newsletter", + "textAlignment": "center", + "textPosition": "CENTER", + "text": "Receba ofertas e novidades por e-mail" + } + }, + "html#container-form-input": { + "props": { + "blockClass": "container-form-input" + }, + "children": ["newsletter-input-email", "newsletter-submit"] + }, + + "newsletter-input-email": { + "props": { + "placeholderText": "Digite seu e-mail" + } + }, + "newsletter-submit": { + "props": { + "submitButtonLabel": "Enviar" + } + }, + + /* + INFORMAÇÕES DO PRODUTO (NOME, ID, PREÇO, PARCELA, CORES, TAMANHOS ETC..) */ "flex-layout.col#right-col": { "props": { @@ -247,6 +318,7 @@ "product-identifier.product", "flex-layout.row#selling-price", "product-installments#parcelaProduct", + "pix-discount", "availability-subscriber", "sku-selector", "html#buy-button", @@ -263,6 +335,7 @@ "product-installments#parcelaProduct": { "props": { + "installmentsCriteria": "max-quantity-without-interest", "markers": ["discount", "x"], "blockClass": "divider", "message": "{installmentsNumber} x de {installmentValue} sem juros" @@ -288,12 +361,12 @@ "children": ["product-quantity","add-to-cart-button"] }, + /* + ASSINANTES DE PRODUTOS INDISPONIVEIS + */ "flex-layout.row#product-availability": { "props": { - "colGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7 + "blockClass": "product-availability" }, "children": [ "flex-layout.col#stack", diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..085dfaf 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "pix-discount": { + "component": "PixDiscount" } } diff --git a/styles/css/vtex-store-newsletter.css b/styles/css/vtex-store-newsletter.css new file mode 100644 index 0000000..2609326 --- /dev/null +++ b/styles/css/vtex-store-newsletter.css @@ -0,0 +1,32 @@ +/* +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 */ +.newsletterForm--container-newsletter { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #000000; + margin-top: 64px; + position: relative; +} + +.emailInputContainer { + border-bottom: 1px solid #fff; + width: 100%; + margin-bottom: 16px; + position: relative; +} +.emailInputContainer :global(.vtex-input-prefix__group) { + border: none; +} +.emailInputContainer :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + background-color: transparent; + padding: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 5c4d12b..49e614c 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -8,76 +8,87 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +/* PREÇO PRINCIPAL DO PRODUTO */ +.flexRowContent--selling-price { + margin: 0; +} + /* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/ -@media only screen and (max-width: 1023px) { +@media only screen and (max-width: 1024px) { .flexRowContent--main { display: block; } } -.flexRowContent--main .flexCol--stack { +@media only screen and (max-width: 1024px) { + .flexRowContent--main .stretchChildrenWidth { + width: 100% !important; + } +} +.flexRowContent--main .stretchChildrenWidth .flexCol--stack { padding-left: 40px; } -@media only screen and (max-width: 1023px) { - .flexRowContent--main .flexCol--stack { +@media only screen and (max-width: 1024px) { + .flexRowContent--main .stretchChildrenWidth .flexCol--stack { padding: 0 40px; width: 100%; } } -.flexRowContent--main .flexCol--right-col { +.flexRowContent--main .stretchChildrenWidth .flexCol--right-col { padding-right: 40px; margin-left: 16px; } -@media only screen and (max-width: 1023px) { - .flexRowContent--main .flexCol--right-col { +@media only screen and (max-width: 1024px) { + .flexRowContent--main .stretchChildrenWidth .flexCol--right-col { padding: 0 40px; margin-left: 0; } } /* ASSINANTE DE PRODUTO INDISPONIVEL */ -.flexRowContent--message-availability { +.flexRowContent--product-availability { + padding: 0; + margin: 0; + padding: 0 40px; +} +@media only screen and (max-width: 1024px) { + .flexRowContent--product-availability { + display: block; + } +} +.flexRowContent--product-availability :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + padding: 0; + display: flex; +} +@media only screen and (max-width: 1024px) { + .flexRowContent--product-availability :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { + width: 100% !important; + } +} +.flexRowContent--product-availability .flexCol--info-availability { + margin-left: 16px; +} +@media only screen and (max-width: 1024px) { + .flexRowContent--product-availability .flexCol--info-availability { + margin: 0; + } +} +.flexRowContent--product-availability .flexCol--info-availability .flexRowContent--message-availability { width: 375px; } -@media only screen and (max-width: 1023px) { - .flexRowContent--message-availability { +@media only screen and (max-width: 1024px) { + .flexRowContent--product-availability .flexCol--info-availability .flexRowContent--message-availability { width: 100%; } } -/* BOTAO DE ADICIONAR A SACOLA */ -.flexRowContent { - padding: 0; - margin: 0; +/* DESCRIÇÃO DO PRODUTO */ +@media only screen and (max-width: 1024px) { + .flexRowContent--product-description { + display: block; + } } -.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { - padding: 0; - display: flex; -} -@media only screen and (max-width: 1023px) { - .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { +@media only screen and (max-width: 1024px) { + .flexRowContent--product-description .stretchChildrenWidth { width: 100% !important; } -} -.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) { - background-color: black; - border: none; - height: 49px; - margin-top: 8px; -} -@media only screen and (max-width: 767px) { - .flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) { - margin: 0 0 16px; - height: auto; - } -} -.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { - font-size: 0; -} -.flexRowContent :global(.vtex-flex-layout-0-x-stretchChildrenWidth) :global(.vtex-button) :global(.vtex-button__label) :global(.vtex-add-to-cart-button-0-x-buttonDataContainer)::after { - font-family: "Open sans", sans-serif; - content: "ADICIONAR À SACOLA"; - font-size: 18px; - font-weight: 400; - padding: 12px 64px; - line-height: 22px; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index d074a22..7ebd1ef 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -16,7 +16,7 @@ line-height: 19px; color: rgba(146, 146, 146, 0.48); } -@media only screen and (max-width: 1023px) { +@media only screen and (max-width: 1024px) { .product-identifier--productReference { justify-content: start; margin-bottom: 24px; diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 00b2514..e8765a0 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -10,14 +10,12 @@ /* INPUT CONTADOR DE PRODUTO */ .quantitySelectorContainer { height: 49px; - margin-top: 8px; - margin-bottom: 16px; width: 149px; - margin-right: 10px; + margin: 0 10px 0 0; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .quantitySelectorContainer { - margin-bottom: 10px; + margin: 0 0 10px 0; } } .quantitySelectorContainer .quantitySelectorTitle { diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..b0921a2 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,74 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +/* + PRATELEIRA DE PRODUTO +*/ +.paragraph--title-prateleira { + font-weight: 400; + font-size: 24px; + line-height: 38px; + margin: 0 0 32px; + color: #575757; +} +@media only screen and (max-width: 1024px) { + .paragraph--title-prateleira { + margin: 0 0 24px; + } +} +@media only screen and (max-width: 768px) { + .paragraph--title-prateleira { + margin: 0 0 16px; + } +} + +/* + NEWSLETTER +*/ +.container--subscriber-newsletter { + justify-content: center; + width: 100%; + margin: 32px 0 16px 0; + padding: 0 40px; +} +@media only screen and (max-width: 1024px) { + .container--subscriber-newsletter { + margin: 64px 0 16px 0; + } +} +.container--subscriber-newsletter .wrapper--subscriber-newsletter { + align-items: center; +} +.container--subscriber-newsletter .wrapper--subscriber-newsletter .paragraph--subscriber-newsletter { + margin: 0; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #fff; +} + +.container--offer-newsletter { + display: flex; + justify-content: center; + width: 100%; + margin-bottom: 16px; + padding: 0 40px; +} +.container--offer-newsletter .wrapper--offer-newsletter { + display: flex; + align-items: center; +} +.container--offer-newsletter .wrapper--offer-newsletter .paragraph--offer-newsletter { + margin: 0; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +@media only screen and (max-width: 1024px) { + .container--offer-newsletter .wrapper--offer-newsletter .paragraph--offer-newsletter { + font-size: 16px; + line-height: 22px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 066c8fa..4239de1 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,24 +9,39 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { - padding: 0; max-width: 100%; + padding: 0; + margin: 0; } /*IMAGEM PRINCIPAL DO PRODUTO */ -.productImage { +@media only screen and (max-width: 1024px) { + .productImagesGallerySlide { + margin: 0; + } +} +.productImagesGallerySlide .productImage { margin-right: 16px; } -.productImage .productImageTag { +@media only screen and (max-width: 1024px) { + .productImagesGallerySlide .productImage { + margin: 0; + } +} +.productImagesGallerySlide .productImage .productImageTag { width: 100%; max-height: 100% !important; object-fit: contain; } - /*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */ .carouselGaleryThumbs { margin: 16px 0; } +@media only screen and (max-width: 768px) { + .carouselGaleryThumbs { + display: block; + } +} .carouselGaleryThumbs .thumbImg { width: 90px; height: 90px; @@ -49,7 +64,7 @@ line-height: 34px; color: #575757; } -@media only screen and (max-width: 1023px) { +@media only screen and (max-width: 1024px) { .productNameContainer--quickview { text-align: start; } @@ -156,7 +171,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ width: 374.65px; margin-top: 16px; } -@media only screen and (max-width: 1023px) { +@media only screen and (max-width: 1024px) { .subscriberContainer .form :global(.vtex-store-components-3-x-content) { width: 100%; max-width: 100%; @@ -167,7 +182,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ margin-right: 10.08px; margin-bottom: 15px; } -@media only screen and (max-width: 1023px) { +@media only screen and (max-width: 1024px) { .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputName { width: 49%; } @@ -191,7 +206,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ font-weight: 400; margin-bottom: 15px; } -@media only screen and (max-width: 1023px) { +@media only screen and (max-width: 1024px) { .subscriberContainer .form :global(.vtex-store-components-3-x-content) .inputEmail { width: -webkit-fill-available; margin: 0 0 0 8px; @@ -239,7 +254,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ .shippingContainer { display: flex; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .shippingContainer { display: block; position: relative; @@ -250,7 +265,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ align-items: center; padding: 0; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode) { display: block; } @@ -270,7 +285,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ height: 49px; border-radius: 0; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input-prefix__group) { width: 100%; } @@ -285,7 +300,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ line-height: 16px; text-decoration: underline; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { left: 0; margin-top: 8px; @@ -301,20 +316,22 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ .shippingContainer :global(.vtex-button) { height: 49px; width: 49px; - margin-top: auto !important; + margin-top: 27px !important; position: relative; right: 148px; font-size: 0; border-radius: 0; + background-color: #000000; + border: none; cursor: pointer; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .shippingContainer :global(.vtex-button) { height: 49px !important; margin: 0 !important; position: absolute; - right: 0px; - top: 26px; + right: 0; + top: 27px; } } .shippingContainer :global(.vtex-button)::before { @@ -350,7 +367,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ line-height: 19px; color: #202020; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryName { margin-right: 32px; } @@ -367,7 +384,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ font-size: 0; margin-right: 30px; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { margin-right: 32px; } @@ -391,7 +408,7 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ line-height: 16px; color: #afafaf; } -@media only screen and (max-width: 767px) { +@media only screen and (max-width: 768px) { .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { margin-right: 22px; } @@ -428,6 +445,11 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ .productDescriptionContainer { margin-left: 16px; } +@media only screen and (max-width: 1024px) { + .productDescriptionContainer { + margin: 0; + } +} .productDescriptionContainer .productDescriptionTitle { font-weight: 400; font-size: 24px; @@ -436,6 +458,11 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ margin-bottom: 8px; color: #575757; } +@media only screen and (max-width: 1024px) { + .productDescriptionContainer .productDescriptionTitle { + margin-top: 16px; + } +} .productDescriptionContainer .productDescriptionText { font-weight: 400; font-size: 16px; diff --git a/styles/css/vtex.store-newsletter.css b/styles/css/vtex.store-newsletter.css new file mode 100644 index 0000000..7c6d545 --- /dev/null +++ b/styles/css/vtex.store-newsletter.css @@ -0,0 +1,94 @@ +/* +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 */ +.newsletterForm--container-newsletter { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: #000000; + margin-top: 64px; + position: relative; +} + +.emailInputContainer { + border-bottom: 1px solid #929292; + width: 100%; + position: relative; + height: 32px; +} +.emailInputContainer :global(.vtex-input) { + display: flex; + width: 100%; + height: 32px; +} +.emailInputContainer :global(.vtex-input) :global(.vtex-input__error) { + position: absolute; + right: 0; + margin-right: 16px; +} +@media only screen and (max-width: 768px) { + .emailInputContainer :global(.vtex-input) :global(.vtex-input__error) { + width: 100%; + top: 32px; + left: 18px; + font-size: 12px; + line-height: 16px; + font-weight: 400; + } +} +.emailInputContainer :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: none; + height: 32px; + width: 100%; +} +.emailInputContainer :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + background-color: transparent; + padding: 0 0 7px 0; + color: #fff; + font-weight: 400; + font-size: 18px; + line-height: 25px; +} +@media only screen and (max-width: 1024px) { + .emailInputContainer :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + padding: 0 0 16px 16px; + } +} +@media only screen and (max-width: 768px) { + .emailInputContainer :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + padding: 0 0 16px 16px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + } +} + +.formSubmitContainer { + height: 32px; + border-bottom: 3px solid #bfbfbf; +} +@media only screen and (max-width: 1024px) { + .formSubmitContainer { + right: 40px; + } +} +.formSubmitContainer :global(.vtex-button) { + background-color: transparent; + border: none; + display: flex; +} +.formSubmitContainer :global(.vtex-button) :global(.vtex-button__label) { + font-weight: 700; + font-size: 14px; + line-height: 19px; + padding: 0 16px 13px 16px; + padding-top: 0 !important; + padding-bottom: 0 !important; +} \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 4732012..f9e2f13 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -16,18 +16,39 @@ border-bottom: 1px solid #b9b9b9; justify-content: space-between; } +@media only screen and (max-width: 1024px) { + .container--description .listContainer { + padding: 0; + flex-direction: column; + border-top: 1px solid #b9b9b9; + margin-top: 16px; + padding-top: 16px; + } +} .container--description .listContainer .listItem { margin: 0; padding: 0; height: 38px; width: 114px; } +@media only screen and (max-width: 1024px) { + .container--description .listContainer .listItem { + width: 100%; + margin-bottom: 16px; + } +} .container--description .listContainer .listItem :global(.vtex-button) { background-color: transparent; border: none; color: #bfbfbf; width: 100%; } +@media only screen and (max-width: 1024px) { + .container--description .listContainer .listItem :global(.vtex-button) { + display: flex; + justify-content: flex-start; + } +} .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label) { padding: 0 !important; height: 38px; @@ -35,8 +56,26 @@ font-size: 18px; line-height: 38px; text-transform: capitalize; + border-bottom: 2px solid transparent; } .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label):hover { - color: black; + color: #000000; border-bottom: 2px solid #000000; +} +@media only screen and (max-width: 1024px) { + .container--description .listContainer .listItem :global(.vtex-button) :global(.vtex-button__label):hover { + border-bottom: none; + } +} +.container--description .listContainer .listItemActive { + color: #000000; + border-bottom: 2px solid #000000; +} +@media only screen and (max-width: 1024px) { + .container--description .listContainer .listItemActive { + border-bottom: none; + } +} +.container--description .listContainer .listItemActive :global(.vtex-button) { + color: #000000; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 0c0916a..821c251 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,65 +1,73 @@ +/* PREÇO PRINCIPAL DO PRODUTO */ +.flexRowContent--selling-price { + margin: 0; +} + /* EMBRULHO DA IMAGEM E INFORMAÇÕES DE PREÇOS, VALORES, PARCELAMENTO ETC..*/ .flexRowContent--main { @include mq(md, max) { display: block; } - .flexCol--stack { - padding-left: 40px; + .stretchChildrenWidth { @include mq(md, max) { - padding: 0 40px; - width: 100%; + width: 100% !important; } - } - .flexCol--right-col { - padding-right: 40px; - margin-left: 16px; - @include mq(md, max) { - padding: 0 40px; - margin-left: 0; + .flexCol--stack { + padding-left: 40px; + @include mq(md, max) { + padding: 0 40px; + width: 100%; + } + } + .flexCol--right-col { + padding-right: 40px; + margin-left: 16px; + @include mq(md, max) { + padding: 0 40px; + margin-left: 0; + } } } } /* ASSINANTE DE PRODUTO INDISPONIVEL */ -.flexRowContent--message-availability { - width: 375px; - @include mq(md, max) { - width: 100%; - } -} - -/* BOTAO DE ADICIONAR A SACOLA */ -.flexRowContent { +.flexRowContent--product-availability { padding: 0; margin: 0; + padding: 0 40px; + @include mq(md, max) { + display: block; + } :global(.vtex-flex-layout-0-x-stretchChildrenWidth) { padding: 0; display: flex; @include mq(md, max) { width: 100% !important; } - :global(.vtex-button) { - background-color: black; - border: none; - height: 49px; - margin-top: 8px; - @include mq(sm, max) { - margin: 0 0 16px; - height: auto; - } - :global(.vtex-button__label) { - :global(.vtex-add-to-cart-button-0-x-buttonDataContainer) { - font-size: 0; - &::after { - font-family: "Open sans", sans-serif; - content: "ADICIONAR À SACOLA"; - font-size: 18px; - font-weight: 400; - padding: 12px 64px; - line-height: 22px; - } - } + } + + .flexCol--info-availability { + margin-left: 16px; + @include mq(md, max) { + margin: 0; + } + .flexRowContent--message-availability { + width: 375px; + @include mq(md, max) { + width: 100%; } } } } + +/* DESCRIÇÃO DO PRODUTO */ +.flexRowContent--product-description { + @include mq(md, max) { + display: block; + } + .stretchChildrenWidth { + @include mq(md, max) { + width: 100% !important; + } + } +} diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index d151f90..2d1a27d 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,12 +1,10 @@ /* INPUT CONTADOR DE PRODUTO */ .quantitySelectorContainer { height: 49px; - margin-top: 8px; - margin-bottom: 16px; width: 149px; - margin-right: 10px; + margin: 0 10px 0 0; @include mq(sm, max) { - margin-bottom: 10px; + margin: 0 0 10px 0; } .quantitySelectorTitle { display: none; diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..dc59baa 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,63 @@ +/* + PRATELEIRA DE PRODUTO +*/ +.paragraph--title-prateleira { + font-weight: 400; + font-size: 24px; + line-height: 38px; + margin: 0 0 32px; + color: $color-gray13; + @include mq(md, max) { + margin: 0 0 24px; + } + + @include mq(sm, max) { + margin: 0 0 16px; + } +} + +/* + NEWSLETTER +*/ +.container--subscriber-newsletter { + justify-content: center; + width: 100%; + margin: 32px 0 16px 0; + padding: 0 40px; + @include mq(md, max) { + margin: 64px 0 16px 0; + } + .wrapper--subscriber-newsletter { + align-items: center; + .paragraph--subscriber-newsletter { + margin: 0; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $color-white; + } + } +} + +.container--offer-newsletter { + display: flex; + justify-content: center; + width: 100%; + margin-bottom: 16px; + padding: 0 40px; + .wrapper--offer-newsletter { + display: flex; + align-items: center; + .paragraph--offer-newsletter { + margin: 0; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $color-gray14; + @include mq(md, max) { + font-size: 16px; + line-height: 22px; + } + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 7555852..ec37454 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,21 +1,35 @@ .container { - padding: 0; max-width: 100%; + padding: 0; + margin: 0; } /*IMAGEM PRINCIPAL DO PRODUTO */ -.productImage { - margin-right: 16px; - .productImageTag { - width: 100%; - max-height: 100% !important; - object-fit: contain; +.productImagesGallerySlide { + @include mq(md, max) { + margin: 0; + } + .productImage { + margin-right: 16px; + @include mq(md, max) { + margin: 0; + } + .productImageTag { + width: 100%; + max-height: 100% !important; + object-fit: contain; + @include mq(sm, max) { + } + } } } /*CARROUSEL GALERIA DE IMAGENS DO PRODUTO */ .carouselGaleryThumbs { margin: 16px 0; + @include mq(sm, max) { + display: block; + } .thumbImg { width: 90px; @@ -302,19 +316,21 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ :global(.vtex-button) { height: 49px; width: 49px; - margin-top: auto !important; + margin-top: 27px !important; position: relative; right: 148px; font-size: 0; border-radius: 0; + background-color: $color-black-padrao; + border: none; cursor: pointer; @include mq(sm, max) { height: 49px !important; margin: 0 !important; position: absolute; - right: 0px; - top: 26px; + right: 0; + top: 27px; } &::before { content: "OK"; @@ -430,6 +446,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ /* DESCRIÇÃO DO PRODUTO */ .productDescriptionContainer { margin-left: 16px; + @include mq(md, max) { + margin: 0; + } .productDescriptionTitle { font-weight: 400; font-size: 24px; @@ -437,6 +456,9 @@ FORMULARIO DE PRODUTO INDISPONIVEL */ height: 40px; margin-bottom: 8px; color: $color-gray13; + @include mq(md, max) { + margin-top: 16px; + } } .productDescriptionText { font-weight: 400; diff --git a/styles/sass/pages/product/vtex.store-newsletter.scss b/styles/sass/pages/product/vtex.store-newsletter.scss new file mode 100644 index 0000000..f6bcfac --- /dev/null +++ b/styles/sass/pages/product/vtex.store-newsletter.scss @@ -0,0 +1,77 @@ +.newsletterForm--container-newsletter { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background-color: $color-black-padrao; + margin-top: 64px; + position: relative; +} + +.emailInputContainer { + border-bottom: 1px solid $color-gray14; + width: 100%; + position: relative; + height: 32px; + :global(.vtex-input) { + display: flex; + width: 100%; + height: 32px; + :global(.vtex-input__error) { + position: absolute; + right: 0; + margin-right: 16px; + @include mq(sm, max) { + width: 100%; + top: 32px; + left: 18px; + font-size: 12px; + line-height: 16px; + font-weight: 400; + } + } + :global(.vtex-input-prefix__group) { + border: none; + height: 32px; + width: 100%; + :global(.vtex-styleguide-9-x-input) { + background-color: transparent; + padding: 0 0 7px 0; + color: $color-white; + font-weight: 400; + font-size: 18px; + line-height: 25px; + @include mq(md, max) { + padding: 0 0 16px 16px; + } + @include mq(sm, max) { + padding: 0 0 16px 16px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + } + } + } + } +} + +.formSubmitContainer { + height: 32px; + border-bottom: 3px solid $color-gray12; + @include mq(md, max) { + right: 40px; + } + :global(.vtex-button) { + background-color: transparent; + border: none; + display: flex; + :global(.vtex-button__label) { + font-weight: 700; + font-size: 14px; + line-height: 19px; + padding: 0 16px 13px 16px; + padding-top: 0 !important; + padding-bottom: 0 !important; + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 2ae2070..57ebfc2 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -5,17 +5,32 @@ padding: 0 80px; border-bottom: 1px solid $color-gray11; justify-content: space-between; + @include mq(md, max) { + padding: 0; + flex-direction: column; + border-top: 1px solid $color-gray11; + margin-top: 16px; + padding-top: 16px; + } .listItem { margin: 0; padding: 0; height: 38px; width: 114px; + @include mq(md, max) { + width: 100%; + margin-bottom: 16px; + } :global(.vtex-button) { background-color: transparent; border: none; color: $color-gray12; width: 100%; + @include mq(md, max) { + display: flex; + justify-content: flex-start; + } :global(.vtex-button__label) { padding: 0 !important; @@ -24,12 +39,27 @@ font-size: 18px; line-height: 38px; text-transform: capitalize; + border-bottom: 2px solid transparent; &:hover { - color: black; + color: $color-black-padrao; border-bottom: 2px solid $color-black-padrao; + @include mq(md, max) { + border-bottom: none; + } } } } } + + .listItemActive { + color: $color-black-padrao; + border-bottom: 2px solid $color-black-padrao; + @include mq(md, max) { + border-bottom: none; + } + :global(.vtex-button) { + color: $color-black-padrao; + } + } } } diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index d8b21c2..a4a08a0 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -27,10 +27,10 @@ $color-green: #4caf50; $grid-breakpoints: ( xs: 0, cstm: 400, - sm: 768px, - md: 1024px, - lg: 1920px, - xl: 1921px, + sm: 769px, + md: 1025px, + lg: 1921px, + xl: 1922px, ) !default; $z-index: (