From c32372103b002fe18a2662bc8c5da1a8e4e20aff Mon Sep 17 00:00:00 2001 From: Leonardo Date: Thu, 26 Jan 2023 22:34:05 -0300 Subject: [PATCH] =?UTF-8?q?feat:=20estiliza=20as=20informa=C3=A7=C3=B5es?= =?UTF-8?q?=20sobre=20o=20produto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manifest.json | 1 - react/components/Html/index.tsx | 1 + react/components/Html/styles.css | 3 ++ store/blocks/minicart.jsonc | 3 +- store/blocks/pdp/product.jsonc | 16 +++++-- styles/css/agenciamagma.store-theme.css | 9 ++-- styles/css/vtex.add-to-cart-button.css | 44 +++++++++++++++++++ styles/css/vtex.breadcrumb.css | 35 +++++++++++++++ styles/css/vtex.flex-layout.css | 3 +- styles/css/vtex.product-identifier.css | 26 +++++++++++ styles/css/vtex.product-price.css | 26 +++++++---- styles/css/vtex.product-quantity.css | 4 ++ styles/css/vtex.store-components.css | 15 ++++++- styles/css/vtex.styleguide.css | 4 ++ .../product/agenciamagma.store-theme.scss | 9 ++-- .../product/vtex.add-to-cart-button.scss | 0 16 files changed, 172 insertions(+), 27 deletions(-) create mode 100644 react/components/Html/styles.css create mode 100644 styles/css/vtex.add-to-cart-button.css create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/css/vtex.styleguide.css create mode 100644 styles/sass/pages/product/vtex.add-to-cart-button.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/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..0a215b6 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 "./styles.css" const CSS_HANDLES = ["html"] as const; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..4603396 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,3 @@ +[data-testeid="breadcrumb"] { + background-color: yellow; +} diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 5c797c2..9963b7c 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", + "blockClass": "button-add" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..dfbf931 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -91,7 +91,7 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "displayThumbnailsArrows": false } }, "flex-layout.col#right-col": { @@ -101,12 +101,11 @@ }, "children": [ "flex-layout.row#product-name", + "product-identifier.product", "product-rating-summary", "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", - "product-installments", - "product-separator", - "product-identifier.product", + "product-installments#m3-academy", "sku-selector", "product-quantity", "product-assembly-options", @@ -118,6 +117,15 @@ ] }, + "product-installments#m3-academy": { + "props": { + "installmentsCriteria": "max-quantity-without-interest", + "markers": ["discount", "vezes"], + "blockClass": "m3-custom-installments", + "message": "ou {installmentsNumber}x de {installmentValue} sem juros" + } + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3 diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..5e1eb80 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -7,10 +7,9 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.html { +/*.html { background-color: red; -} - -.html--pdp-breadcrumb { +}*/ +/*.html--pdp-breadcrumb { background-color: green; -} \ No newline at end of file +}*/ \ 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..d2a9697 --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,44 @@ +.add-to-cart-button { + background-color: black; + color: white; +} + +.buttonText { + visibility: hidden; +} + +.button-add { + background-color: black; +} + + +.__label { + padding: 0; + padding-top: 0; + padding-bottom: 0; +} + +.buttonText::after { + width: 398px; + height: 25px; + content: "Adicionar à sacola"; + visibility: visible; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #ffffff; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} +.buttonDataContainer { + background: black; + position: relative; + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..3c6a137 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,35 @@ +.homeIcon { + visibility: hidden; +} + +.arrow--1 { + visibility: hidden; + content: ""; +} + +.arrow--1::after { + visibility: visible; + content: "Home"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.link--2 { + visibility: hidden; + content: ""; +} + +.link--2::after { + visibility: visible; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + content: "Sapatos"; +} diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..35cef48 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -43,7 +43,7 @@ } .flexRow--deals { - background-color: #0F3E99; + background-color: #0f3e99; padding: 14px 0px; } @@ -83,6 +83,7 @@ max-height: 100%; } + .flexColChild--quickviewDetails:first-child { overflow-y: auto; height: 66% !important; diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..83188ac 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; } + +.product-identifier__label, +.product-identifier__separator { + display: none; +} + +.product-identifier__value { + text-align: right; + position: absolute; + right: 0; + margin-right: 40px; +} + +.product-identifier--productReference { + position: relative; + font-family: "Open Sans"; + text-align: right; + display: flex; + align-self: flex-end; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + color: rgba(146, 146, 146, 0.48); +} diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..c29586b 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,6 +1,6 @@ .listPrice { color: #727273; - margin-bottom: .25rem; + margin-bottom: 0.25rem; font-size: 1rem; } @@ -10,8 +10,12 @@ } .sellingPriceValue { - font-size: 2.25rem; + font-family: "Open Sans"; + font-style: normal; font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; } .installments { @@ -20,18 +24,19 @@ } .savings { + display: none; font-weight: 500; - color: #79B03A; + color: #79b03a; } .sellingPriceValue--summary { font-size: 1.25rem; font-weight: 600; - color: #2E2E2E; + color: #2e2e2e; } .savings--summary { - background: #8BC34A; + background: #8bc34a; border-radius: 1000px; align-items: center; display: flex; @@ -41,21 +46,24 @@ font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; +} +.listPrice { + display: none; } .savings-discount--summary { font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; padding-left: 0.5rem; padding-right: 0.5rem; } .listPrice--summary { margin-bottom: 0.25rem; - font-size: .875rem; + font-size: 0.875rem; } .installments--summary { @@ -74,6 +82,6 @@ font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; padding: 0.25rem 0.5rem 0.25rem 0.5rem; } diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..ae06188 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,4 @@ +.quantitySelectorTitle { + display: none; +} + diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..1162e3a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,4 +9,17 @@ /* Grid breakpoints */ .newsletter { background: red; -} \ No newline at end of file +} + +.productNameContainer { + width: 664px; + height: 34px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; + margin-right: 40px; +} diff --git a/styles/css/vtex.styleguide.css b/styles/css/vtex.styleguide.css new file mode 100644 index 0000000..02a5904 --- /dev/null +++ b/styles/css/vtex.styleguide.css @@ -0,0 +1,4 @@ +.hideDecorators { + border-left: none; + border-right: none; +} diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index ea7d5b9..f45d7fb 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,7 @@ -.html { +/*.html { background-color: red; -} +}*/ -.html--pdp-breadcrumb { +/*.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..e69de29