diff --git a/assets/img-sapato.png b/assets/img-sapato.png new file mode 100644 index 0000000..8edaff2 Binary files /dev/null and b/assets/img-sapato.png differ diff --git a/manifest.json b/manifest.json index 9ee3cc5..accefa0 100644 --- a/manifest.json +++ b/manifest.json @@ -15,7 +15,7 @@ "postreleasy": "vtex publish --verbose" }, "dependencies": { - "agenciamagma.store-theme": "5.x", + "vtex.store-newsletter": "1.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/readme.md b/react/components/Html/readme.md index 3d97911..b97f76c 100644 --- a/react/components/Html/readme.md +++ b/react/components/Html/readme.md @@ -46,7 +46,7 @@ Basicamente esse componente
-
+
{children}
diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..05b62c9 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,257 @@ +[class*="productImageTag--main"] { + max-width: 80.25%; + object-fit: none; +} + +[class*="flexRow--button-cart"] :global(.vtex-button) { + background-color: black; + border-color: black; + width: 97.952%; + height: 49px; +} + +[class*="numeric-stepper__minus-button__text"] { + position: absolute !important; + left: 50%; + top: 85%; + transform: translate(-50%, -50%); +} + +[class*="numeric-stepper__plus-button__text"] { + position: absolute !important; + left: 50%; + top: 85%; + transform: translate(-50%, -50%); +} + +[class*="numeric-stepper__minus-button"] { + height: 49px; + position: relative; +} + +[class*="numeric-stepper__input"] { + height: 49px; + position: relative; +} + +[class*="numeric-stepper__plus-button"] { + height: 49px; + position: relative; +} + +[class*="skuSelectorInternalBox"] { + border-radius: 24px; + position: relative; + width: 40px; + height: 46px; +} + +[class*="frameAround"] { + border-radius: 24px; + width: 48px; + height: 48px; + border-color: black; +} + +[class*="skuSelectorItemTextValue"] { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +[class*="installments--m3-custom-installments"] { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +[class*="productNameContainer"] { + text-align: end; +} + +[class*="shippingContainer"] :global(.vtex-button) { + background-color: black; + color: white; + font-size: 0; + width: 49px; + height: 49px; + background-color: black; + color: white; + font-size: 0; + position: relative; + width: 49px; + height: 49px; + left: 45.5%; + bottom: 110px; +} + +[class*="shippingContainer"] :global(.vtex-button::after) { + content: "OK"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 30%; + left: 23%; +} + +[class*="shippingContainer"] :global(.vtex-input-prefix__group) { + width: 45.532%; + height: 49px; +} + +[class*="vtex-address-form__postalCode-forgottenURL"] { + position: relative; + color: black; + bottom: 44px; + left: 52%; + margin-left: 32px; +} + +[class*="productDescriptionTitle"] { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; +} + +[class*="productDescriptionContainer"] { + margin-left: 32px; +} + +[class*="productDescriptionContainer"]:global(.content) { + width: 632px; + height: 66px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +[class*="listContainer"] { + justify-content: space-between; + color: black; + background-color: transparent; + border-bottom: 1px solid #bfbfbf; + margin-bottom: 25px; +} + +[class*="listContainer"] :global(.vtex-button__label) { + text-transform: capitalize; + padding: 0; + margin: 0; +} + +[class*="listContainer"] :global(.vtex-button__label):hover { + background-color: transparent; +} + +[class*="listItemActive"] :global(.vtex-button) { + color: black !important; + background-color: transparent; + border: none; + border-bottom: 1px solid black; + border-radius: 0; + padding: 0; + margin: 0; +} + +[class*="listItem"] :global(.vtex-button) { + color: #bfbfbf; + border-radius: 0; +} + +[class*="listItem"] :global(.vtex-button):hover { + background-color: transparent; + border: none; + border-bottom: 1px solid black; +} + +[class*="listItemActive"] { + color: black; +} + +[class*="pv2"] { + padding-top: 0; + padding-bottom: 0; +} + +[class*="ma2"] { + margin-top: 0; + margin-bottom: 0; +} + +[class*="listItemActive"] :global(.vtex-button:hover) { + background-color: transparent; + border: none; +} + +[class*="listContainer"] :global(.vtex-button__label:hover) { + color: black; + background-color: transparent; + border: none; +} + +[class*="imageNormal"] { + max-width: 434.4px; + max-height: 434.4px; +} + +[class*="newsletter"] { + color: white; +} + +[id*="newsletter-input"] { + color: white; + background: black; + border: none; +} + +[class*="t-heading-3"] { + content: "Teste \n teste 2"; + margin-bottom: 57px; + font-size: 0; +} +[class*="t-heading-3"]::after { + content: "Assine nossa newsletter"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + position: relative; + bottom: 47px; +} + +[class*="textNewsletter"] { + color: white; + position: relative; + top: 38px; +} + +[class*="newsletter"]:global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px solid white; + border-radius: 0; +} + +[class*="buttonContainer"] :global(.vtex-button) { + border: none; + border-bottom: 2px solid white; + background-color: black; + border-radius: 0; + position: relative; + right: 12px; +} 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..e6ef024 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,13 +3,51 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", + "tab-layout#home", + "rich-text#textproducts", + "list-context.product-list#demo1", + "rich-text#textnewsletter", + "newsletter", "product-questions-and-answers" ] }, + + "newsletter": { + "props": { + "text": "Você também pode gostar:" + } + }, + + "rich-text#textnewsletter": { + "props": { + "textAlignment": "CENTER", + "textPosition": "CENTER", + "text": "Receba ofertas e novidades por e-mail", + "id": "textNewsletter", + "blockClass": "textNewsletter" + } + }, + + "rich-text#textproducts": { + "props": { + "textAlignment": "CENTER", + "textPosition": "CENTER", + "text": "Você também pode gostar:" + } + }, + + "product-summary.shelf#demo1": { + "children": [ + "product-summary-image", + "product-summary-name", + "product-summary-price" + ] + }, + "list-context.product-list#demo1": { + "blocks": ["product-summary.shelf#demo1"], + "children": ["slider-layout#demo-products"] + }, + "html#breadcrumb": { "props": { "tag": "section", @@ -30,7 +68,7 @@ "props": { "marginBottom": 7 }, - "children": ["product-description"] + "children": ["image#tab", "product-description"] }, "condition-layout.product#availability": { "props": { @@ -45,8 +83,6 @@ }, "flex-layout.row#product-main": { "props": { - "colGap": 7, - "rowGap": 7, "marginTop": 4, "marginBottom": 7, "paddingTop": 7, @@ -78,15 +114,20 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", "rowGap": 0 } }, "flex-layout.row#product-image": { - "children": ["product-images"] + "props": {}, + "children": ["html#product-images"] }, "product-images": { "props": { + "width": "40%", + "contentType": "images", + "showNavigationArrows": false, + "showPaginationDots": false, + "thumbnailsOrientation": "horizontal", "aspectRatio": { "desktop": "auto", "phone": "16:9" @@ -94,30 +135,147 @@ "displayThumbnailsArrows": true } }, + + "html#product-images": { + "props": { + "thumbnailsOrientation": "horizontal", + "tag": "section", + "infinite": "true", + "preventHorizontalStretch": "true", + "verticalAlign": "bottom", + "testId": "product-images" + }, + "children": ["product-images"] + }, + "flex-layout.col#right-col": { "props": { + "width": "60%", "preventVerticalStretch": true, "rowGap": 0 }, "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", "product-gifts", "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" ] }, + "image#tab": { + "props": { + "src": "assets/img-sapato.png" + } + }, + + "tab-layout#home": { + "children": ["tab-list#home", "tab-content#home"], + "props": { + "blockClass": "home", + "defaultActiveTabId": "home1" + } + }, + "tab-list#home": { + "children": [ + "tab-list.item#home1", + "tab-list.item#home2", + "tab-list.item#home3", + "tab-list.item#home4", + "tab-list.item#home5" + ] + }, + "tab-list.item#home1": { + "props": { + "tabId": "home1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#home2": { + "props": { + "tabId": "home2", + "label": "Descrição" + } + }, + "tab-list.item#home3": { + "props": { + "tabId": "home3", + "label": "Descrição" + } + }, + + "tab-list.item#home4": { + "props": { + "tabId": "home4", + "label": "Descrição" + } + }, + + "tab-list.item#home5": { + "props": { + "tabId": "home5", + "label": "Descrição" + } + }, + "tab-content#home": { + "children": [ + "tab-content.item#home1", + "tab-content.item#home2", + "tab-content.item#home3", + "tab-content.item#home4", + "tab-content.item#home5" + ] + }, + "tab-content.item#home1": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "home1" + } + }, + "tab-content.item#home2": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "home2" + } + }, + + "tab-content.item#home3": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "home3" + } + }, + + "tab-content.item#home4": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "home4" + } + }, + + "tab-content.item#home5": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "home5" + } + }, + + "product-installments#m3-academy": { + "props": { + "installmentsCriteria": "max-quantity-without-interest", + "markers": ["discount", "vezes"], + "blockClass": "m3-custom-installments", + "message": "{installmentsNumber}x de {installmentValue} sem juros" + } + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -134,8 +292,21 @@ "flex-layout.row#buy-button": { "props": { + "paddingTop": 0, "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "button-cart" + }, + "children": ["product-quantity", "html#add-to-cart-button"] + }, + + "product-quantity": { + "props": { "width": "25%" } + }, + + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button" }, "children": ["add-to-cart-button"] }, 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..34c4328 --- /dev/null +++ b/styles/css/vtex.add-to-cart-button.css @@ -0,0 +1,9 @@ +/* +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 */ \ 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..d0bd1f3 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,52 @@ +.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"; +} + +.term { + visibility: hidden; +} + +.term::after { + visibility: visible; + content: "Sandálias"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + position: relative; + right: 230px; +} diff --git a/styles/css/vtex.condition-layout.css b/styles/css/vtex.condition-layout.css new file mode 100644 index 0000000..e69de29 diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..d409ed4 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; } @@ -70,6 +70,10 @@ align-items: flex-end; } +.pr7.items-stretch.vtex-flex-layout-0-x-stretchChildrenWidth.flex { + width: 40%; +} + .flexCol--orderByMobileCol { width: 42%; } 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..11726ea 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,5 +8,5 @@ /* Media Query M3 */ /* Grid breakpoints */ .newsletter { - background: red; + background: black; } \ No newline at end of file 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/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..e69de29 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 diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..d59e587 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,3 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.newsletter { + background: black; +}