From 7ab2ffd812b681a6c0baca7500a4dfb7bcdca397 Mon Sep 17 00:00:00 2001 From: Rhayllon Date: Wed, 8 Feb 2023 16:16:42 -0300 Subject: [PATCH] Feat(Pdp): Cria layout de imagens de produto e elementos para efetuar a compra --- manifest.json | 3 +- react/components/Html/index.tsx | 1 + react/components/Html/styles.css | 4 + store/blocks/minicart.jsonc | 7 + store/blocks/pdp/product.jsonc | 152 ++++++++++++++++-- styles/css/vtex-product-identifier.css | 13 ++ styles/css/vtex.flex-layout.css | 113 +++---------- styles/css/vtex.product-identifier.css | 12 +- styles/css/vtex.product-quantity.css | 32 ++++ styles/css/vtex.shipping-simulator.css | 12 ++ styles/css/vtex.store-components.css | 66 ++++++++ .../sass/pages/product/vtex.flex-layout.scss | 15 ++ .../pages/product/vtex.product-quantity.scss | 24 +++ .../pages/product/vtex.store-components.scss | 70 ++++++++ 14 files changed, 408 insertions(+), 116 deletions(-) create mode 100644 react/components/Html/styles.css create mode 100644 styles/css/vtex-product-identifier.css create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/css/vtex.shipping-simulator.css create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/manifest.json b/manifest.json index 9ee3cc5..42cb234 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", @@ -34,10 +33,10 @@ "vtex.my-account": "1.x", "vtex.flex-layout": "0.x", "vtex.rich-text": "0.x", + "vtex.product-identifier": "0.x", "vtex.store-drawer": "0.x", "vtex.locale-switcher": "0.x", "vtex.product-quantity": "1.x", - "vtex.product-identifier": "0.x", "vtex.breadcrumb": "1.x", "vtex.sticky-layout": "0.x", "vtex.product-customizer": "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..4a31bf8 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,4 @@ +[class*="html--wrapperQuantity"] { + display: flex; + margin-bottom: 16px; +} \ No newline at end of file diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 5c797c2..ee81246 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -5,6 +5,13 @@ "customPixelEventId": "add-to-cart-button" } }, + "add-to-cart-button#addSacola": { + "props": { + "addToCartFeedback": "customEvent", + "customPixelEventId": "add-to-cart-button", + "text": "Adicionar à sacola" + } + }, "minicart.v2": { "props": { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..1838c5d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,9 +3,10 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", + // "flex-layout.row#description", + "tab-layout#AA323", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", "shelf.relatedProducts", "product-questions-and-answers" ] @@ -50,10 +51,30 @@ "marginTop": 4, "marginBottom": 7, "paddingTop": 7, - "paddingBottom": 7 + "paddingBottom": 7, + "blockClass": "productMainWrapper" }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] }, + "flex-layout.row#descriptionRow": { + "props": { + // "colGap": 7, + // "rowGap": 7, + // "marginTop": 4, + // "marginBottom": 7, + // "paddingTop": 7, + // "paddingBottom": 7, + "blockClass": "descriptionRow" + }, + "children": ["image#example111", "flex-layout.row#description"] + }, + + "image#example111": { + "props": { + "src": "https://storecomponents.vteximg.com.br/arquivos/box.png", + "maxHeight": 100 + } + }, "stack-layout": { "props": { @@ -66,6 +87,88 @@ ] }, + "html#wrapperQuantity": { + "props": { + "blockClass": "wrapperQuantity" + }, + "children": ["product-quantity#quantityPdpItens", "flex-layout.row#buy-button"] + }, + + "product-quantity#quantityPdpItens": { + "props": { + "blockClass": "quantityPdpItens", + "showLabel": false, + "size": "large" + } + }, + + "tab-layout#AA323": { + "children": [ + "tab-list#AA555", + "tab-content#AA555" + ] + }, + + "tab-list#AA555": { + "children": [ + "tab-list.item#1", + "tab-list.item#2" + ] + }, + + "tab-content#AA555": { + "children": [ + "tab-content.item#1", + "tab-content.item#2" + ] + }, + + "tab-list.item#1": { + "props": { + "tabId": "majorAppliances", + "label": "Major Appliances", + "defaultActiveTab": true + } + }, + "tab-list.item#2": { + "props": { + "tabId": "electronics", + "label": "Electronics" + } + }, + + "tab-content.item#1": { + "children": [ + "rich-text#1" + ], + "props": { + "tabId": "majorAppliances" + } + }, + "tab-content.item#2": { + "children": [ + "flex-layout.row#descriptionRow" + ], + "props": { + "tabId": "electronics" + } + }, + + "rich-text#1": { + "props": { + "text": "Texto para Major Appliances", + "textPosition": "CENTER", + "font": "t-heading-3" + } + }, + "rich-text#2": { + "props": { + "text": "Texto para Electronics", + "textPosition": "CENTER", + "font": "t-heading-3" + } + }, + "product-specification-badges": { "props": { "specificationGroupName": "Group", @@ -78,7 +181,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "51%", "rowGap": 0 } }, @@ -91,7 +194,11 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "showNavigationArrows": false, + "showPaginationDots": false, + "thumbnailsOrientation": "horizontal", + "thumbnailMaxHeight": 90, + "maxHeight": 664 } }, "flex-layout.col#right-col": { @@ -102,19 +209,14 @@ "children": [ "flex-layout.row#product-name", "product-rating-summary", - "flex-layout.row#list-price-savings", + "product-identifier.product#identifierMain", "flex-layout.row#selling-price", "product-installments", "product-separator", - "product-identifier.product", - "sku-selector", - "product-quantity", - "product-assembly-options", - "product-gifts", - "flex-layout.row#buy-button", + "sku-selector#inverseOrder", + "html#wrapperQuantity", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" ] }, @@ -131,13 +233,22 @@ "showValueNameForImageVariation": true } }, + + "sku-selector#inverseOrder": { + "props": { + "variationsSpacing": 3, + "showValueNameForImageVariation": true, + "blockClass": "inverseOrder" + } + }, "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "buyButton" }, - "children": ["add-to-cart-button"] + "children": ["add-to-cart-button#addSacola"] }, "flex-layout.row#product-availability": { @@ -172,6 +283,13 @@ "children": ["availability-subscriber"] }, + "product-identifier.product#identifierMain": { + "props": { + "label": "hide", + "idField": "productReference" + } + }, + "share#default": { "props": { "social": { diff --git a/styles/css/vtex-product-identifier.css b/styles/css/vtex-product-identifier.css new file mode 100644 index 0000000..28cdba5 --- /dev/null +++ b/styles/css/vtex-product-identifier.css @@ -0,0 +1,13 @@ +/* +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--productReference { + display: flex; + justify-content: end; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..118ea4d 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,23 @@ -.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 */ +.flexRow--productMainWrapper { + padding: 0 36px; } -@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 { +.flexRow--buyButton { 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; + align-items: center; + width: 100%; + margin-left: 10px; } +.flexRow--buyButton .flexRowContent--buyButton { + margin: 0; + height: 49px; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..34c4328 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,9 @@ -.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 */ \ 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..383a7e1 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,32 @@ +/* +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--quantityPdpItens { + margin: 0; +} +.quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__input) { + border: 1px solid #CCCCCC; + border-left: 0; + border-right: 0; + width: 3rem; +} +.quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__plus-button) { + border: 1px solid #CCCCCC; + border-left: 0; + border-radius: 0; + width: 2.5em !important; + color: black; +} +.quantitySelectorContainer--quantityPdpItens :global(.vtex-numeric-stepper__minus-button) { + border: 1px solid #CCCCCC; + border-right: 0; + border-radius: 0; + width: 2.5em !important; + color: black; +} \ No newline at end of file diff --git a/styles/css/vtex.shipping-simulator.css b/styles/css/vtex.shipping-simulator.css new file mode 100644 index 0000000..c2fe208 --- /dev/null +++ b/styles/css/vtex.shipping-simulator.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 */ +.shippingTableBody { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..bcb877b 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,4 +9,70 @@ /* Grid breakpoints */ .newsletter { background: red; +} + +.productImageTag--main { + object-fit: unset !important; +} + +.productImagesThumb { + width: 13.605% !important; + margin: 0 16px 0 0; +} + +.productNameContainer--quickview { + display: flex; + justify-content: end; +} + +:global(.vtex-product-identifier-0-x-product-identifier--productReference) { + display: flex; + justify-content: end; + margin-bottom: 24px; +} + +.skuSelectorContainer--inverseOrder { + display: flex; + flex-direction: column-reverse; +} + +.shippingContainer { + display: flex; +} +.shippingContainer :global(.vtex-address-form__field--small) { + display: flex; +} +.shippingContainer :global(.vtex-input-prefix__group) { + height: 49px; + border: 1px solid #CCCCCC; + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + position: relative; + left: 150px; + align-items: center; + padding-top: 16.1px; +} +.shippingContainer :global(.vtex__icon-external-link) { + display: none; +} +.shippingContainer :global(.vtex-button) { + display: flex; + width: 49px; + height: 49px; + position: relative; + right: 129px; + margin-top: 24px; + background-color: black; + font-size: 0; + border: none; + border-radius: 0; +} +.shippingContainer :global(.vtex-button) ::before { + content: "Ok"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: white; } \ No newline at end of file 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..2cd9927 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,15 @@ +.flexRow--productMainWrapper{ + padding: 0 36px; +} +.flexRow--buyButton{ + display: flex; + align-items: center; + width: 100%; + margin-left: 10px; + + .flexRowContent--buyButton{ + margin: 0; + height: 49px; + } + +} \ No newline at end of file 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..76d3fc0 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,24 @@ +.quantitySelectorContainer--quantityPdpItens{ + margin: 0; + + :global(.vtex-numeric-stepper__input ){ + border: 1px solid #CCCCCC; + border-left: 0; + border-right: 0; + width: 3rem; + } + :global(.vtex-numeric-stepper__plus-button){ + border: 1px solid #CCCCCC; + border-left: 0; + border-radius: 0; + width: 2.5em !important; + color: black; + } + :global(.vtex-numeric-stepper__minus-button){ + border: 1px solid #CCCCCC; + border-right: 0; + border-radius: 0; + width: 2.5em !important; + color: black; + } +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..530375f 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,73 @@ .newsletter{ background: red; +} + +.productImageTag--main{ + object-fit: unset !important; +} + +.productImagesThumb{ + width: 13.605% !important; + margin: 0 16px 0 0; +} + +.productNameContainer--quickview{ + display: flex; + justify-content: end; +} + +:global(.vtex-product-identifier-0-x-product-identifier--productReference){ + display: flex; + justify-content: end; + margin-bottom: 24px; +} + +.skuSelectorContainer--inverseOrder{ + display: flex; + flex-direction: column-reverse; +} + +.shippingContainer{ + display: flex; + + :global(.vtex-address-form__field--small){ + display: flex; + } + :global(.vtex-input-prefix__group){ + height: 49px; + border: 1px solid #CCCCCC; + border-radius: 0; + } + :global(.vtex-address-form__postalCode-forgottenURL){ + display: flex; + position: relative; + left: 150px; + align-items: center; + padding-top: 16.1px; + + } + :global(.vtex__icon-external-link){ + display: none; + + } + :global(.vtex-button){ + display: flex; + width: 49px; + height: 49px; + position: relative; + right: 129px; + margin-top: 24px; + background-color: black; + font-size: 0; + border: none; + border-radius: 0; + + ::before{ + content: "Ok"; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: white; + } + } } \ No newline at end of file