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..384d7d8 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..1713533 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,3 @@ +[class*=".html--breadcrumb"] { + background: red; +} diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 5c797c2..910f936 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-buy-product" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..ca34288 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,7 +7,8 @@ "flex-layout.row#specifications-title", "product-specification-group#table", "shelf.relatedProducts", - "product-questions-and-answers" + "product-questions-and-answers", + "newsletter" ] }, "html#breadcrumb": { @@ -91,7 +92,10 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "showNavigationArrows": false, + "showPaginationDots": false, + "displayThumbnailsArrows": false, + "thumbnailsOrientation": "horizontal" } }, "flex-layout.col#right-col": { @@ -101,20 +105,35 @@ }, "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", "sku-selector", - "product-quantity", - "product-assembly-options", + "flex-layout.row#quantity-buy-button", "product-gifts", - "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" + ] + }, + + "html#product-name": { + "props": { + "blockClass": "product-name" + }, + "children": [ + "product-identifier.product" + ] + }, + + "flex-layout.row#quantity-buy-button": { + "props": { + "blockClass": "quantity-buy-button" + }, + "children": [ + "product-quantity", + "flex-layout.row#buy-button" ] }, @@ -128,14 +147,17 @@ "sku-selector": { "props": { "variationsSpacing": 3, - "showValueNameForImageVariation": true + "showValueNameForImageVariation": true, + "blockClass": "sku-size" } }, "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "width": "73%", + "blockClass": "buy-button-row" }, "children": ["add-to-cart-button"] }, diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..299591f 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -139,5 +139,13 @@ "blockClass": "quickview", "showNavigationArrows": true } + }, + + "product-quantity": { + "props": { + "size": "large", + "width": "28%", + "showLabel": false + } } } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..7f9bd41 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -8,9 +8,13 @@ /* Media Query M3 */ /* Grid breakpoints */ .html { - background-color: red; + background-color: none; } .html--pdp-breadcrumb { - background-color: green; + background-color: none; +} + +.homeLink { + display: none; } \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..d5f8a99 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,41 @@ +/* +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 */ +.homeIcon { + display: none; +} + +.arrow--1 .caretIcon { + display: none; +} + +.link--1 { + font-size: 0px; +} +.link--1::after { + content: "Home"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.link--2 { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.term { + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..da613fe 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,13 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; -} - -@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 { - 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; -} +/* +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--buy-button-row :global(.vtex-button) { + background: #000000; + border: none; +} \ No newline at end of file diff --git a/styles/css/vtex.numeric-stepper-container.css b/styles/css/vtex.numeric-stepper-container.css new file mode 100644 index 0000000..5f0389d --- /dev/null +++ b/styles/css/vtex.numeric-stepper-container.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 */ +.numeric-stepper__input { + background: black; +} \ No newline at end of file diff --git a/styles/css/vtex.numeric-stepper.css b/styles/css/vtex.numeric-stepper.css new file mode 100644 index 0000000..5f0389d --- /dev/null +++ b/styles/css/vtex.numeric-stepper.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 */ +.numeric-stepper__input { + background: black; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..56d8b8b 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,23 @@ -.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__label { + display: none; } +.product-identifier__separator { + display: none; +} +.product-identifier__value { + display: flex; + justify-content: end; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..14a1626 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,45 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ .sellingPriceValue { - font-size: 2.25rem; font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; } .installments { - color: #727273; - margin-bottom: 1rem; + font-size: 0; } - -.savings { - font-weight: 500; - color: #79B03A; +.installments .installmentsNumber--36 { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } - -.sellingPriceValue--summary { - font-size: 1.25rem; - font-weight: 600; - color: #2E2E2E; +.installments .installmentsNumber--36::after { + content: " x de "; + font-weight: 400; + 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; -} - -.savings-discount--summary { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.listPrice--summary { - margin-bottom: 0.25rem; - font-size: .875rem; -} - -.installments--summary { - margin-bottom: 2rem; - font-size: 0.875rem; -} - -.savings--summaryPercentage { - background: #0f3e99; - border-radius: 1000px; - align-items: center; - display: flex; -} - -.savingsPercentage--summaryPercentage { - font-size: 0.875rem; - font-weight: 600; - vertical-align: baseline; - color: #FFFFFF; - padding: 0.25rem 0.5rem 0.25rem 0.5rem; +.installments .installmentValue { + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; } +.installments .installmentValue::after { + content: " sem juros"; + font-weight: 400; + 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..5f0389d --- /dev/null +++ b/styles/css/vtex.product-quantity.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 */ +.numeric-stepper__input { + background: black; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..54fb376 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,5 +8,114 @@ /* Media Query M3 */ /* Grid breakpoints */ .newsletter { - background: red; + background: #000000; + color: #fff; +} + +:global(.vtex-numeric-stepper__input) { + border-right: none; + border-left: none; +} + +:global(.vtex-numeric-stepper__minus-button) { + background: #fff; +} +:global(.vtex-numeric-stepper__minus-button) :global(.vtex-numeric-stepper__minus-button__text) { + font-size: 16px; + line-height: 22px; + color: #000000; +} + +:global(.vtex-numeric-stepper__plus-button) { + background: #fff; +} +:global(.vtex-numeric-stepper__plus-button) :global(.vtex-numeric-stepper__plus-button__text) { + font-size: 16px; + line-height: 22px; + color: #000000; +} + +.productNameContainer { + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor { + order: 2; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorImageValue, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox { + border-radius: 50%; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround { + border-color: #000000; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after { + content: "OUTRAS CORES"; + font-size: 14px; + line-height: 19px; + font-weight: 400; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue { + display: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue { + padding: 0; + margin: auto; + font-size: 14px; + line-height: 19px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox { + border-radius: 50%; + width: 40px; + height: 40px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround { + top: -2px; + bottom: 0; + left: 0; + right: 0; + z-index: 2; + border-color: #000000; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after { + content: "OUTROS TAMANHOS"; + font-size: 14px; + line-height: 19px; + font-weight: 400; + color: #929292; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorImageValue { + display: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross { + left: 3px; + top: 2px; + right: 5px; + bottom: 3px; + transform: rotateY(180deg); +} + +.skuSelectorItem--sku-size-selected .skuSelectorItemTextValue-sku-size { + color: #000000; +} + +.skuSelectorItemTextValue { + color: rgba(185, 185, 185, 0.6); } \ 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..53e0d02 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,11 @@ .html { - background-color: red; + background-color: none; } .html--pdp-breadcrumb { - background-color: green; + background-color: none; } +.homeLink { + display: none; +} 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..c7ac053 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,4 @@ +.flexRowContent--buy-button-row :global(.vtex-button) { + background: $black; + border: none; +} 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..91bc644 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,19 @@ +.product-identifier { + + &__label { + display: none; + } + + &__separator { + display: none; + } + + &__value { + display: flex; + justify-content: end; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.48); + } +} 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..cd9b429 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,45 @@ +.sellingPriceValue { + font-weight: 700; + font-size: 25px; + line-height: 38px; + + color: $black; +} + +.installments { + font-size: 0; + + .installmentsNumber--36 { + font-weight: 700; + font-size: 16px; + line-height: 22px; + + color: $gray; + + &::after { + content: " x de "; + font-weight: 400; + font-size: 16px; + line-height: 22px; + + color: $gray; + } + } + + .installmentValue { + font-weight: 700; + font-size: 16px; + line-height: 22px; + + color: $gray; + + &::after { + content: " sem juros"; + font-weight: 400; + font-size: 16px; + line-height: 22px; + + color: $gray; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..71d4e1d 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,140 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.newsletter { + background: $black; + color: $white; +} + +:global(.vtex-numeric-stepper__input) { + border-right: none; + border-left: none; +} + +:global(.vtex-numeric-stepper__minus-button) { + background: $white; + + :global(.vtex-numeric-stepper__minus-button__text) { + font-size: 16px; + line-height: 22px; + + color: $black; + } +} + +:global(.vtex-numeric-stepper__plus-button) { + background: $white; + + :global(.vtex-numeric-stepper__plus-button__text) { + font-size: 16px; + line-height: 22px; + + color: $black; + } +} + +.productNameContainer { + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: $gray-100; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column; + + .skuSelectorSubcontainer--cor { + order: 2; + + .frameAround, + .skuSelectorImageValue, + .skuSelectorInternalBox { + border-radius: 50%; + } + + .frameAround { + border-color: $black; + } + + .skuSelectorTextContainer { + .skuSelectorName { + font-size: 0; + + &::after { + content: "OUTRAS CORES"; + font-size: 14px; + line-height: 19px; + font-weight: 400; + + color: $gray; + } + } + + .skuSelectorSelectorImageValue { + display: none; + } + } + } + + .skuSelectorSubcontainer--tamanho { + .skuSelectorItemTextValue { + padding: 0; + margin: auto; + + font-size: 14px; + line-height: 19px; + } + + .frameAround, + .skuSelectorInternalBox { + border-radius: 50%; + width: 40px; + height: 40px; + } + + .frameAround { + top: -2px; + bottom: 0; + left: 0; + right: 0; + z-index: 2; + border-color: $black; + } + + .skuSelectorTextContainer { + .skuSelectorName { + font-size: 0; + + &::after { + content: "OUTROS TAMANHOS"; + font-size: 14px; + line-height: 19px; + font-weight: 400; + + color: $gray; + } + } + + .skuSelectorImageValue { + display: none; + } + } + + .diagonalCross { + left: 3px; + top: 2px; + right: 5px; + bottom: 3px; + transform: rotateY(180deg); + } + } +} + +.skuSelectorItem--sku-size-selected { + .skuSelectorItemTextValue-sku-size { + color: $black; + } +} + +.skuSelectorItemTextValue { + color: rgba(185, 185, 185, 0.6); +} diff --git a/styles/sass/pages/vtex.breadcrumb.scss b/styles/sass/pages/vtex.breadcrumb.scss new file mode 100644 index 0000000..6fa78c9 --- /dev/null +++ b/styles/sass/pages/vtex.breadcrumb.scss @@ -0,0 +1,38 @@ +.homeIcon { + display: none; +} + +.arrow--1 { + .caretIcon { + display: none; + } +} + +.link--1 { + font-size: 0px; + + &::after { + content: "Home"; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray; + } +} + +.link--2 { + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray; +} + +.term { + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: $gray; +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..b430298 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,6 +1,11 @@ $color-black: #292929; +$black: #000000; + +$white: #fff; + +$gray: #929292; +$gray-100: #575757; -$color-white: #fff; $color-gray: #6c6c6c; $color-gray2: #7d7d7d;