From 3c71327d2d72ca0a0dd617fbe7f6ce9b81995923 Mon Sep 17 00:00:00 2001 From: Gabriel Lehmann Date: Fri, 10 Feb 2023 12:35:03 -0300 Subject: [PATCH] feat: fix right col --- manifest.json | 1 - react/PixComponents.tsx | 3 + react/assets/pixImage.svg | 38 +++ react/components/PixComponents/PixImage.tsx | 154 +++++++++ react/components/PixComponents/index.tsx | 34 ++ react/components/PixComponents/styles.css | 24 ++ react/tsconfig.json | 3 +- react/typings/css.d.ts | 4 + react/typings/svg.d.ts | 4 + store/blocks/pdp/product.jsonc | 56 +++- store/blocks/product-price.jsonc | 12 +- store/interfaces.json | 3 + styles/css/agenciamagma.store-theme.css | 9 +- styles/css/vtex.add-to-cart-button.css | 22 ++ styles/css/vtex.flex-layout.css | 116 ++----- styles/css/vtex.product-identifier.css | 30 +- styles/css/vtex.product-price.css | 110 +++---- styles/css/vtex.product-quantity.css | 53 +++ styles/css/vtex.store-components.css | 297 ++++++++++++++++- .../product/agenciamagma.store-theme.scss | 7 - .../product/vtex.add-to-cart-button.scss | 12 + .../sass/pages/product/vtex.flex-layout.scss | 20 ++ .../product/vtex.product-identifier.scss | 20 ++ .../pages/product/vtex.product-price.scss | 47 +++ .../pages/product/vtex.product-quantity.scss | 44 +++ .../pages/product/vtex.store-components.scss | 303 +++++++++++++++++- 26 files changed, 1222 insertions(+), 204 deletions(-) create mode 100644 react/PixComponents.tsx create mode 100644 react/assets/pixImage.svg create mode 100644 react/components/PixComponents/PixImage.tsx create mode 100644 react/components/PixComponents/index.tsx create mode 100644 react/components/PixComponents/styles.css create mode 100644 react/typings/css.d.ts create mode 100644 react/typings/svg.d.ts create mode 100644 styles/css/vtex.add-to-cart-button.css create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/sass/pages/product/vtex.add-to-cart-button.scss create mode 100644 styles/sass/pages/product/vtex.flex-layout.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/PixComponents.tsx b/react/PixComponents.tsx new file mode 100644 index 0000000..02adf66 --- /dev/null +++ b/react/PixComponents.tsx @@ -0,0 +1,3 @@ +import PixComponents from "./components/PixComponents"; + +export default PixComponents; diff --git a/react/assets/pixImage.svg b/react/assets/pixImage.svg new file mode 100644 index 0000000..c675f09 --- /dev/null +++ b/react/assets/pixImage.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/react/components/PixComponents/PixImage.tsx b/react/components/PixComponents/PixImage.tsx new file mode 100644 index 0000000..16be127 --- /dev/null +++ b/react/components/PixComponents/PixImage.tsx @@ -0,0 +1,154 @@ +import React from "react"; + +export default function PixImage() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/react/components/PixComponents/index.tsx b/react/components/PixComponents/index.tsx new file mode 100644 index 0000000..2321304 --- /dev/null +++ b/react/components/PixComponents/index.tsx @@ -0,0 +1,34 @@ +import React, { useEffect, useState } from "react"; +import { useProduct } from "vtex.product-context"; +import PixImage from "./PixImage"; +import Style from "./styles.css"; + +const PixComponents = () => { + const [pixValue, setPixValue] = useState(0); + const productInfo = useProduct(); + const productLowPrice = + productInfo?.product?.priceRange.sellingPrice.lowPrice; + useEffect(() => { + if (productLowPrice) { + setPixValue(productLowPrice * 0.9); + } + }, []); + + return ( +
+
+
+ +
+
+
+ R$ {pixValue.toFixed(2).replace(".", ",")} +
+ 10 % de desconto +
+
+
+ ); +}; + +export default PixComponents; diff --git a/react/components/PixComponents/styles.css b/react/components/PixComponents/styles.css new file mode 100644 index 0000000..bb2b643 --- /dev/null +++ b/react/components/PixComponents/styles.css @@ -0,0 +1,24 @@ +.pixDiv { + display: flex; + gap: 26px; +} + +.pixImgDiv { + display: flex; + justify-content: center; + align-items: center; +} + +.priceNormal { + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} + +.priceDiscount { + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/react/tsconfig.json b/react/tsconfig.json index a26a540..b19356c 100644 --- a/react/tsconfig.json +++ b/react/tsconfig.json @@ -1,6 +1,7 @@ { "extends": "@vtex/tsconfig", "compilerOptions": { + "jsx": "react", "noEmitOnError": false, "lib": ["dom"], "module": "esnext", @@ -8,4 +9,4 @@ "target": "es2017" }, "include": ["./typings/*.d.ts", "./**/*.tsx", "./**/*.ts"] -} \ No newline at end of file +} diff --git a/react/typings/css.d.ts b/react/typings/css.d.ts new file mode 100644 index 0000000..6c77fb4 --- /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/svg.d.ts b/react/typings/svg.d.ts new file mode 100644 index 0000000..5e52f80 --- /dev/null +++ b/react/typings/svg.d.ts @@ -0,0 +1,4 @@ +declare module "*.svg" { + const content: string; + export default content; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..5a5264d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,8 +4,8 @@ "html#breadcrumb", "condition-layout.product#availability", "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", "shelf.relatedProducts", "product-questions-and-answers" ] @@ -101,23 +101,48 @@ }, "children": [ "flex-layout.row#product-name", + "product-identifier.product", "product-rating-summary", - "flex-layout.row#list-price-savings", + // "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - "product-separator", - "product-identifier.product", + "pix-components", + // "product-separator", "sku-selector", - "product-quantity", - "product-assembly-options", - "product-gifts", - "flex-layout.row#buy-button", + "flex-layout.row#quantity-and-add-button", + // "product-quantity", + // "product-assembly-options", + // "product-gifts", + // "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" + // "share#default" ] }, + "flex-layout.row#quantity-and-add-button": { + "props": { + "blockClass": "quantity-and-add-button", + "preventHorizontalStretch": true, + "fullWidth": true, + "colGap": 0 + }, + "children": ["product-quantity", "flex-layout.row#buy-button"] + }, + + "product-identifier.product": { + "props": { + "blockClass": "product-identifier.productReference" + } + }, + + "product-installments": { + "props": { + "message": "{installmentsNumber} {hasInterest, select, true {x} false {}} de {installmentValue} sem juros", + "blockClass": "installmentsPrice" + } + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -132,10 +157,17 @@ } }, + "add-to-cart-button": { + "props": { + "blockClass": "add-to-cart-button" + } + }, + "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "add-to-cart-button-background" }, "children": ["add-to-cart-button"] }, 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/interfaces.json b/store/interfaces.json index c4b2ac4..d831fd7 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "pix-components": { + "component": "PixComponents" } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..34c4328 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,11 +6,4 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} \ No newline at end of file +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css new file mode 100644 index 0000000..d8585ee --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,22 @@ +@charset "UTF-8"; +/* +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 */ +.buttonText--add-to-cart-button { + position: relative; + color: black; +} +.buttonText--add-to-cart-button::before { + content: "ADICIONAR À SACOLA"; + position: absolute; + right: 15px; + top: 1px; + display: block; + color: white; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..3eeba9e 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,28 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; +/* +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 */ +.flexRowContent--add-to-cart-button-background { + margin: unset; +} +.flexRowContent--add-to-cart-button-background :global(.vtex-button) { + background-color: black; + border-radius: 0; + border: 0; + height: 49px; + width: 526px; + margin-left: 10px; } -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; - } -} - -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; - } -} - -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; -} - -.flexRowContent--main-header { - background-color: #f0f0f0; -} - -.flexRowContent--main-header-mobile { - align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; -} - -.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { - color: #ffffff; - font-size: 14px; -} - -.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { - color: #727273; - font-size: 14px; -} - -.flexRow--deals { - background-color: #0F3E99; - padding: 14px 0px; -} - -.flexRow--deals .stretchChildrenWidth { - align-items: center; -} - -.flexRow--deals .flexCol { - align-items: center; - margin-bottom: 5px; - padding-top: 5px; -} - -.flexCol--filterCol { - max-width: 500px; - min-width: 230px; -} - -.flexCol--productCountCol { - align-items: flex-start; -} - -.flexCol--orderByCol { - align-items: flex-end; -} - -.flexCol--orderByMobileCol { - width: 42%; -} - -.flexCol--filterMobileCol { - width: 38%; -} - -.flexRow--quickviewMainRow { +.flexColChild :global(.vtex-flex-layout-0-x-flexColChild) { display: flex; - max-height: 100%; } -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; -} - -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-bottom: 1rem; -} +.flexRowContent--quantity-and-add-button :global(.vtex-button__label) { + padding: unset !important; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..b9301f4 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,29 @@ -.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 */ +/* Grid breakpoints */ +.product-identifier__separator { + display: none; } + +.product-identifier__label { + display: none; +} + +.product-identifier__value { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} + +.product-identifier { + display: flex; + justify-content: end; + width: 100%; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..d5b9a11 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,57 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.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 */ +/* Grid breakpoints */ +.sellingPrice--hasListPrice { font-weight: 700; + font-size: 25px; + line-height: 38px; + margin: unset; } -.installments { - color: #727273; - margin-bottom: 1rem; +.installments--installmentsPrice { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; } -.savings { - font-weight: 500; - color: #79B03A; +.installmentsNumber--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; +.currencyCode--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } -.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; +.currencyInteger--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding-left: 0.5rem; - padding-right: 0.5rem; +.currencyDecimal--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } -.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; -} +.currencyFraction--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} \ 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..fde6969 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,53 @@ +/* +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: unset; +} + +.quantitySelectorStepper { + border: none; +} + +.quantitySelectorContainer :global(.vtex-styleguide-9-x-hideDecorators) { + border-left: none; + border-right: none; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button) { + background: unset; + border-radius: unset; + border-color: #cccccc; + color: black; + height: 49px; + width: 39px !important; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__input) { + border-color: #cccccc; + color: #929292; + height: 49px; + width: 50px; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) { + border-radius: unset; + border-color: #cccccc; + color: black; + height: 49px; + width: 39px !important; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..2974c94 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -7,6 +8,298 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - background: red; +.productBrand--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} + +.productNameContainer--quickview { + text-align: end; + margin-bottom: 8px; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} + +.skuSelectorInternalBox { + border-radius: 24px; +} + +.skuSelectorItem { + height: 40px; + width: 40px; +} + +.valueWrapper { + color: #989898; + padding: unset; +} + +.diagonalCross { + transform: rotateY(180deg) scale(0.75); + color: #989898; +} + +.frameAround { + border-radius: 24px; + border-color: black; +} + +.skuSelectorName { + position: relative; + color: white; +} +.skuSelectorName::before { + content: "OUTRAS CORES:"; + background-color: white; + white-space: nowrap; + position: absolute; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.skuSelectorSubcontainer--tamanho .skuSelectorName::before { + content: "OUTROS TAMANHOS:"; + background-color: white; + white-space: nowrap; + position: absolute; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.shippingContainer { + position: relative; +} +.shippingContainer :global(.vtex-input__label) { + margin-top: 16px; +} +.shippingContainer :global(.vtex-input__label)::before { + content: "CALCULAR FRETE:"; + background-color: white; + white-space: nowrap; + position: absolute; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.shippingContainer :global(.vtex-button) { + z-index: 1000; + border-radius: 0; + border: unset; + position: absolute; + background-color: black; + color: transparent; + left: 231px; + top: 24px; + width: 49px; + height: 49px; +} +.shippingContainer :global(.vtex-button)::before { + content: "OK"; + white-space: nowrap; + position: absolute; + width: 100%; + height: 100%; + justify-content: center; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #ffffff; +} +.shippingContainer :global(.vtex-address-form-4-x-input) { + width: 100%; +} +.shippingContainer :global(.vtex-address-form-4-x-input):focus { + z-index: 999; +} +.shippingContainer :global(.vtex-address-form-4-x-input):not(:empty) { + z-index: 999; +} +.shippingContainer :global(.vtex-input-prefix__group) { + border-radius: 0; + color: #cccccc; + width: 280px; + height: 49px; +} +.shippingContainer :global(.vtex-input-prefix__group)::before { + content: "Digite seu CEP"; + position: absolute; + padding: 16px 16.5px 0; + white-space: nowrap; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + top: 24px; + left: 312px; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :first-child { + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; + color: #000000; +} +.shippingContainer :global(.vtex__icon-external-link) { + display: none; +} + +.shippingTable { + display: grid; + flex-direction: column; + border: unset; + padding: unset; + margin: unset; + gap: 15px; +} +.shippingTable :global(.vtex-store-components-3-x-shippingTableRow) { + display: grid; + text-align: left; + grid-template-columns: 110px 110px 110px; +} +.shippingTable :global(.vtex-store-components-3-x-shippingTableRow) :nth-child(even) { + order: 4; +} + +.shippingTableHead { + display: grid; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} + +.shippingTableRadioBtn { + display: none; +} + +.shippingTableCellDeliveryName { + display: grid; + margin-bottom: 15px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: unset; +} + +.shippingTableCellDeliveryEstimate { + display: grid; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: unset; +} + +.shippingTableCellDeliveryPrice { + display: grid; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: unset; +} + +.title { + color: transparent; + position: relative; +} +.title::before { + content: "Digite seu CEP"; + background-color: #ffffff; + position: absolute; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} + +.subscribeLabel { + color: transparent; + position: relative; +} +.subscribeLabel::before { + content: "Deseja saber quando estiver disponível?"; + background-color: #ffffff; + position: absolute; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} + +.submit :global(.vtex-button) { + width: 100%; + color: transparent; + position: relative; + background-color: black; + border-radius: 0; + border-color: black; + height: 49px; +} +.submit :global(.vtex-button)::before { + content: "AVISE-ME"; + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #ffffff; +} + +.content :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} + +.content :global(.vtex-input-prefix__group) { + border-radius: 0; +} + +.content :global(.vtex-store-components-3-x-submit) { + position: absolute; + top: 100%; + left: 0; + right: 0; +} + +.content :global(.vtex-store-components-3-x-input) { + margin: unset; + margin-bottom: 15px; +} + +.content { + position: relative; + max-width: unset; + display: flex; + justify-content: center; + align-items: center; +} +.content :first-child { + margin-right: 8px; } \ 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 index ea7d5b9..8b13789 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1 @@ -.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..95f827a --- /dev/null +++ b/styles/sass/pages/product/vtex.add-to-cart-button.scss @@ -0,0 +1,12 @@ +.buttonText--add-to-cart-button { + position: relative; + color: black; + &::before { + content: "ADICIONAR À SACOLA"; + position: absolute; + right: 15px; + top: 1px; + display: block; + color: white; + } +} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..3d1e57d --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,20 @@ +.flexRowContent--add-to-cart-button-background { + margin: unset; + + :global(.vtex-button) { + background-color: black; + border-radius: 0; + border: 0; + height: 49px; + width: 526px; + margin-left: 10px; + } +} + +.flexColChild :global(.vtex-flex-layout-0-x-flexColChild) { + display: flex; +} + +.flexRowContent--quantity-and-add-button :global(.vtex-button__label) { + padding: unset !important; +} 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..16fa8bc --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,20 @@ +.product-identifier__separator { + display: none; +} + +.product-identifier__label { + display: none; +} + +.product-identifier__value { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} + +.product-identifier { + display: flex; + justify-content: end; + width: 100%; +} 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..6319360 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,47 @@ +.sellingPrice--hasListPrice { + font-weight: 700; + font-size: 25px; + line-height: 38px; + margin: unset; +} + +.installments--installmentsPrice { + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.installmentsNumber--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.currencyCode--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.currencyInteger--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.currencyDecimal--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.currencyFraction--installmentsPrice { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} 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..71fdc04 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,44 @@ +.quantitySelectorContainer { + margin: unset; +} + +.quantitySelectorStepper { + border: none; +} + +.quantitySelectorContainer :global(.vtex-styleguide-9-x-hideDecorators) { + border-left: none; + border-right: none; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button) { + background: unset; + border-radius: unset; + border-color: #cccccc; + color: black; + height: 49px; + width: 39px !important; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__input) { + border-color: #cccccc; + color: #929292; + height: 49px; + width: 50px; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) { + border-radius: unset; + border-color: #cccccc; + color: black; + height: 49px; + width: 39px !important; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..775c099 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,300 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.productBrand--quickview { + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} + +.productNameContainer--quickview { + text-align: end; + margin-bottom: 8px; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} + +.skuSelectorInternalBox { + border-radius: 24px; +} + +.skuSelectorItem { + height: 40px; + width: 40px; +} + +.valueWrapper { + color: #989898; + padding: unset; +} + +.diagonalCross { + transform: rotateY(180deg) scale(0.75); + color: #989898; +} + +.frameAround { + border-radius: 24px; + border-color: black; +} + +.skuSelectorName { + position: relative; + color: white; + &::before { + content: "OUTRAS CORES:"; + background-color: white; + white-space: nowrap; + position: absolute; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } +} + +.skuSelectorSubcontainer--tamanho { + .skuSelectorName { + &::before { + content: "OUTROS TAMANHOS:"; + background-color: white; + white-space: nowrap; + position: absolute; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } +} + +.shippingContainer { + position: relative; + :global(.vtex-input__label) { + margin-top: 16px; + &::before { + content: "CALCULAR FRETE:"; + background-color: white; + white-space: nowrap; + position: absolute; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + :global(.vtex-button) { + z-index: 1000; + border-radius: 0; + border: unset; + position: absolute; + background-color: black; + color: transparent; + left: 231px; + top: 24px; + width: 49px; + height: 49px; + &::before { + content: "OK"; + white-space: nowrap; + position: absolute; + width: 100%; + height: 100%; + justify-content: center; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #ffffff; + } + } + :global(.vtex-address-form-4-x-input) { + &:focus { + z-index: 999; + } + &:not(:empty) { + z-index: 999; + } + width: 100%; + } + :global(.vtex-input-prefix__group) { + &::before { + content: "Digite seu CEP"; + position: absolute; + padding: 16px 16.5px 0; + white-space: nowrap; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; + } + border-radius: 0; + color: #cccccc; + width: 280px; + height: 49px; + } + :global(.vtex-address-form__postalCode-forgottenURL) { + position: absolute; + top: 24px; + left: 312px; + :first-child { + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; + color: #000000; + } + } + :global(.vtex__icon-external-link) { + display: none; + } +} + +.shippingTable { + display: grid; + flex-direction: column; + border: unset; + padding: unset; + margin: unset; + gap: 15px; + :global(.vtex-store-components-3-x-shippingTableRow) { + display: grid; + text-align: left; + grid-template-columns: 110px 110px 110px; + :nth-child(even) { + order: 4; + } + } +} + +.shippingTableHead { + display: grid; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; +} + +.shippingTableRadioBtn { + display: none; +} + +.shippingTableCellDeliveryName { + display: grid; + margin-bottom: 15px; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: unset; +} + +.shippingTableCellDeliveryEstimate { + display: grid; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: unset; +} + +.shippingTableCellDeliveryPrice { + display: grid; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: unset; +} + +// Produto indisponivel + +.title { + color: transparent; + position: relative; + &::before { + content: "Digite seu CEP"; + background-color: #ffffff; + position: absolute; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; + } +} + +.subscribeLabel { + color: transparent; + position: relative; + &::before { + content: "Deseja saber quando estiver disponível?"; + background-color: #ffffff; + position: absolute; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; + } +} + +.submit :global(.vtex-button) { + width: 100%; + color: transparent; + position: relative; + background-color: black; + border-radius: 0; + border-color: black; + height: 49px; + &::before { + content: "AVISE-ME"; + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #ffffff; + } +} + +.content :global(.vtex-styleguide-9-x-input) { + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #989898; +} +.content :global(.vtex-input-prefix__group) { + border-radius: 0; +} + +.content :global(.vtex-store-components-3-x-submit) { + position: absolute; + top: 100%; + left: 0; + right: 0; +} + +.content :global(.vtex-store-components-3-x-input) { + margin: unset; + margin-bottom: 15px; +} + +.content { + :first-child { + margin-right: 8px; + } + position: relative; + max-width: unset; + display: flex; + justify-content: center; + align-items: center; +}