From 21ab5ef045fde78bf65048900546e1cb022695fc Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Thu, 26 Jan 2023 16:53:58 -0300 Subject: [PATCH] feat: adiciona css breadcrumb 1440px --- manifest.json | 1 + store/blocks/minicart.jsonc | 2 +- store/blocks/pdp/product.jsonc | 24 ++- styles/css/agenciamagma.store-theme.css | 8 +- styles/css/vtex-rich-text.css | 12 ++ styles/css/vtex.breadcrumb.css | 17 ++- styles/css/vtex.flex-layout.css | 8 + styles/css/vtex.rich-text.css | 5 +- styles/css/vtex.store-components.css | 137 ++++++++++++++++- .../product/agenciamagma.store-theme.scss | 11 +- .../sass/pages/product/vtex.breadcrumb.scss | 44 ++++++ .../sass/pages/product/vtex.flex-layout.scss | 8 + styles/sass/pages/product/vtex.rich-text.scss | 3 + .../pages/product/vtex.store-components.scss | 141 +++++++++++++++++- 14 files changed, 398 insertions(+), 23 deletions(-) create mode 100644 styles/css/vtex-rich-text.css create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss diff --git a/manifest.json b/manifest.json index a2cde0d..9ee3cc5 100644 --- a/manifest.json +++ b/manifest.json @@ -15,6 +15,7 @@ "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/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index f1d920a..335c267 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -4,7 +4,7 @@ "blockClass": "addToCart", "addToCartFeedback": "customEvent", "customPixelEventId": "add-to-cart-button", - "width": "73%", + "width": "75%", "text": "ADICIONAR À SACOLA" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index d6bacba..b0cdd95 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -2,7 +2,7 @@ "store.product": { "children": [ "html#breadcrumb", - "condition-layout.product#availability", + "flex-layout.row#product-container", "flex-layout.row#description", "flex-layout.row#specifications-title", "product-specification-group#table", @@ -32,6 +32,13 @@ }, "children": ["product-description"] }, + + "flex-layout.row#product-container": { + "props": { + "blockClass": "product-container" + }, + "children": ["condition-layout.product#availability"] + }, "condition-layout.product#availability": { "props": { "conditions": [ @@ -109,7 +116,8 @@ "product-identifier.product", "product-rating-summary", "flex-layout.row#selling-price", - "product-installments", + // "product-installments", + "rich-text#product-installments", "sku-selector", "product-gifts", "flex-layout.row#buy-button", @@ -133,10 +141,14 @@ } }, - "product-installments": { + // "product-installments": { + // "children": ["rich-text#product-installments"] + // }, + + "rich-text#product-installments": { "props": { - "markers": ["parcelas", "valor"], - "message": "36 x de R$ 2,17 sem juros" + "text": "**36 x** de **R$ 2,17** sem juros", + "blockClass": "product-installments" } }, @@ -160,7 +172,7 @@ "blockClass": "addToCartQuantity", "showLabel": false, "size": "large", - "width": "24%" + "width": "25%" } }, diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..8a18de0 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -7,10 +7,8 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.html { - background-color: red; -} - .html--pdp-breadcrumb { - background-color: green; + display: flex; + justify-content: center; + padding: 0 40px; } \ No newline at end of file diff --git a/styles/css/vtex-rich-text.css b/styles/css/vtex-rich-text.css new file mode 100644 index 0000000..d88705b --- /dev/null +++ b/styles/css/vtex-rich-text.css @@ -0,0 +1,12 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.paragraph--product-installments { + margin: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 6c71bfa..6cb3361 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -1,3 +1,18 @@ +@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 */ +.container { + width: 100%; + max-width: 1920px; +} + .termArrow, .term { display: none; @@ -36,4 +51,4 @@ display: block; content: "Sandálias"; font-size: 16px; -} +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 35319c2..81488fe 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -7,6 +7,10 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.flexRowContent { + padding: 0; +} + .flexRowContent--menu-link, .flexRowContent--main-header { padding: 0 0.5rem; @@ -112,4 +116,8 @@ background: black; border: none; border-radius: 0; +} + +.flexRowContent--product-container { + padding: 0 40px; } \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..d88705b 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.paragraph--product-installments { + margin: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 2ed6ef4..3d3a2bf 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 @@ -73,7 +74,7 @@ .skuSelectorSubcontainer--cor .skuSelectorName::after { display: block; content: "OUTRAS CORES:"; - font-size: 16px; + font-size: 14px; } .skuSelectorSubcontainer--tamanho { @@ -85,11 +86,143 @@ .skuSelectorSubcontainer--tamanho .skuSelectorName::after { display: block; content: "OUTROS TAMANHOS:"; - font-size: 16px; + font-size: 14px; } .productImagesThumb .figure .thumbImg { width: 90px; height: 90px; border-radius: 8px; +} + +.shippingContainer { + display: flex; + position: relative; + max-width: 664px; +} + +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + padding: 0; +} + +.shippingContainer :global(.vtex-input__label) { + font-size: 0; +} + +.shippingContainer :global(.vtex-input__label)::after { + font-size: 14px; + display: block; + content: "CALCULAR FRETE:"; +} + +.shippingContainer :global(.vtex-input-prefix__group) { + border: 1px solid #cccccc; + border-radius: 0; + height: 49px; +} + +.shippingContainer :global(.vtex-button) { + width: 49px; + height: 49px; + position: absolute; + left: 33.4%; + top: 32%; + background: #292929; + border: none; + border-radius: 0; +} + +.shippingContainer :global(.vtex-button__label) { + font-size: 0; +} + +.shippingContainer :global(.vtex-button__label)::after { + font-size: 14px; + font-weight: 600; + color: #fff; + display: block; + content: "OK"; +} + +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + font-size: 0; + visibility: hidden; + position: absolute; + left: 43%; + top: 36%; +} + +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL)::after { + visibility: visible; + content: "Não sei meu CEP"; + font-size: 12px; + color: #292929; + text-decoration-line: underline; +} + +.shippingTable { + border: none; + padding: 0; +} + +.shippingTableHead { + display: flex; +} + +.shippingTableRow { + position: relative; + margin-bottom: 15px; +} + +.shippingTableHeadDeliveryName { + font-size: 0; +} + +.shippingTableHeadDeliveryName::after { + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "Entrega"; + text-transform: uppercase; + display: block; + color: #292929; +} + +.shippingTableHeadDeliveryEstimate { + font-size: 0; + position: absolute; + top: 5%; + left: 242%; +} + +.shippingTableHeadDeliveryEstimate::after { + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "Prazo"; + text-transform: uppercase; + display: block; + color: #292929; +} + +.shippingTableHeadDeliveryPrice { + font-size: 0; + position: absolute; + top: 5%; + left: 138%; +} + +.shippingTableHeadDeliveryPrice::after { + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "Frete"; + text-transform: uppercase; + display: block; + color: #292929; +} + +.shippingTableRadioBtn { + display: none; } \ 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..235cd8b 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,9 @@ -.html { - background-color: red; -} +// .html { +// background-color: red; +// } .html--pdp-breadcrumb { - background-color: green; + display: flex; + justify-content: center; + padding: 0 40px; } - diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..6a94c37 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,44 @@ +.container { + width: 100%; + max-width: 1920px; +} + +.termArrow, +.term { + display: none; +} + +.homeLink { + visibility: hidden; + position: relative; + margin-right: 15px; +} + +.homeLink::after { + visibility: visible; + display: block; + content: "Home"; + font-size: 16px; + position: absolute; + top: 20%; +} + +.link--1 { + font-size: 0; +} + +.link--1::after { + display: block; + content: "Sapatos"; + font-size: 16px; +} + +.link--2 { + font-size: 0; +} + +.link--2::after { + display: block; + content: "Sandálias"; + font-size: 16px; +} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 8ab9fec..05339c1 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,3 +1,7 @@ +.flexRowContent { + padding: 0; +} + .flexRowContent--menu-link, .flexRowContent--main-header { padding: 0 0.5rem; @@ -106,3 +110,7 @@ border: none; border-radius: 0; } + +.flexRowContent--product-container { + padding: 0 40px; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..4debf76 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,3 @@ +.paragraph--product-installments { + margin: 0; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 517f4df..2c49b0b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -2,6 +2,11 @@ background: red; } +// .container { +// display: flex; +// justify-content: center; +// } + .productBrand--quickview { display: flex; justify-content: end; @@ -64,7 +69,7 @@ &::after { display: block; content: "OUTRAS CORES:"; - font-size: 16px; + font-size: 14px; } } } @@ -78,7 +83,7 @@ &::after { display: block; content: "OUTROS TAMANHOS:"; - font-size: 16px; + font-size: 14px; } } } @@ -92,3 +97,135 @@ } } } + +.shippingContainer { + display: flex; + position: relative; + max-width: 664px; +} + +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + padding: 0; +} + +.shippingContainer :global(.vtex-input__label) { + font-size: 0; +} + +.shippingContainer :global(.vtex-input__label)::after { + font-size: 14px; + display: block; + content: "CALCULAR FRETE:"; +} + +.shippingContainer :global(.vtex-input-prefix__group) { + border: 1px solid $color-gray6; + border-radius: 0; + height: 49px; +} + +.shippingContainer :global(.vtex-button) { + width: 49px; + height: 49px; + position: absolute; + left: 33.4%; + top: 32%; + background: $color-black; + border: none; + border-radius: 0; +} + +.shippingContainer :global(.vtex-button__label) { + font-size: 0; +} + +.shippingContainer :global(.vtex-button__label)::after { + font-size: 14px; + font-weight: 600; + color: $color-white; + display: block; + content: "OK"; +} + +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + font-size: 0; + visibility: hidden; + position: absolute; + left: 43%; + top: 36%; +} + +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL)::after { + visibility: visible; + content: "Não sei meu CEP"; + font-size: 12px; + color: $color-black; + text-decoration-line: underline; +} + +.shippingTable { + border: none; + padding: 0; +} + +.shippingTableHead { + display: flex; +} + +.shippingTableRow { + position: relative; + margin-bottom: 15px; +} + +.shippingTableHeadDeliveryName { + font-size: 0; +} + +.shippingTableHeadDeliveryName::after { + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "Entrega"; + text-transform: uppercase; + display: block; + color: $color-black; +} + +.shippingTableHeadDeliveryEstimate { + font-size: 0; + position: absolute; + top: 5%; + left: 242%; +} + +.shippingTableHeadDeliveryEstimate::after { + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "Prazo"; + text-transform: uppercase; + display: block; + color: $color-black; +} + +.shippingTableHeadDeliveryPrice { + font-size: 0; + position: absolute; + top: 5%; + left: 138%; +} + +.shippingTableHeadDeliveryPrice::after { + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "Frete"; + text-transform: uppercase; + display: block; + color: $color-black; +} + +.shippingTableRadioBtn { + display: none; +}