From 9652f91f6ec298cf509c23e75af29ecb6c290f6d Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Mon, 23 Jan 2023 08:01:25 -0300 Subject: [PATCH 01/32] feat: adiciona estilos breadcrumb --- styles/css/vtex.breadcrumb.css | 39 ++++++++++++++++++++++++++++ styles/css/vtex.store-components.css | 10 ++++++- 2 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 styles/css/vtex.breadcrumb.css diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..b4ad530 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,39 @@ +.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: 18%; +} + +.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/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..accae94 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,4 +9,12 @@ /* Grid breakpoints */ .newsletter { background: red; -} \ No newline at end of file +} + +.caretIcon { + display: none; +} + +.swiper-pagination { + display: none; +} -- 2.34.1 From ad2294c565d55d7bea36235e2422b69488a494b1 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Mon, 23 Jan 2023 16:35:52 -0300 Subject: [PATCH 02/32] feat: adiciona estilos nome-referencia-parcelamento --- manifest.json | 1 - store/blocks/pdp/product.jsonc | 23 +++++++++++++++++------ store/blocks/product-price.jsonc | 9 ++------- styles/css/vtex.breadcrumb.css | 2 +- styles/css/vtex.flex-layout.css | 2 +- styles/css/vtex.product-price.css | 16 ++++++++-------- styles/css/vtex.store-components.css | 5 +++++ 7 files changed, 34 insertions(+), 24 deletions(-) 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/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..4acbb57 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -101,12 +101,10 @@ }, "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", @@ -125,6 +123,19 @@ "children": ["vtex.store-components:product-name"] }, + "product-identifier.product": { + "props": { + "label": "hide", + "idField": "productReference" + } + }, + + "product-installments": { + "props": { + "message": "36 x de R$ 2,17 sem juros" + } + }, + "sku-selector": { "props": { "variationsSpacing": 3, @@ -175,10 +186,10 @@ "share#default": { "props": { "social": { - "Facebook": true, - "WhatsApp": true, + "Facebook": false, + "WhatsApp": false, "Twitter": false, - "Pinterest": true + "Pinterest": false } } } diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..779175f 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -6,9 +6,7 @@ "preventHorizontalStretch": true, "marginBottom": 4 }, - "children": [ - "product-selling-price" - ] + "children": ["product-selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +17,6 @@ "marginBottom": 2, "marginTop": 5 }, - "children": [ - "product-list-price", - "product-price-savings" - ] + "children": ["product-list-price", "product-price-savings"] } } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index b4ad530..6c71bfa 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -15,7 +15,7 @@ content: "Home"; font-size: 16px; position: absolute; - top: 18%; + top: 20%; } .link--1 { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..8edbfc4 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; } diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..6b5431c 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; } @@ -21,17 +21,17 @@ .savings { 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 +41,21 @@ font-size: 0.875rem; font-weight: 600; vertical-align: baseline; - color: #FFFFFF; + color: #ffffff; } .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 +74,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.store-components.css b/styles/css/vtex.store-components.css index accae94..94af4c8 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -18,3 +18,8 @@ .swiper-pagination { display: none; } + +.productNameContainer--quickview { + display: flex; + justify-content: end; +} -- 2.34.1 From 202e5b9d9665cb2625c7022cbea9e77cb36ed90b Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Mon, 23 Jan 2023 16:52:30 -0300 Subject: [PATCH 03/32] refactor: ajsuta css referencia do produto --- styles/css/vtex.product-identifier.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..ea941ac 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,5 @@ .product-identifier--productReference { - margin-bottom: 1rem; + margin-bottom: 24px; + display: flex; + justify-content: end; } -- 2.34.1 From 8d59c70a9439588ead8ed8cc5f78622b6b6c4bad Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Tue, 24 Jan 2023 17:01:15 -0300 Subject: [PATCH 04/32] =?UTF-8?q?feat/estilos-iniciais-carousel-bot=C3=A3o?= =?UTF-8?q?-add-carrinho?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/minicart.jsonc | 3 +- store/blocks/pdp/product.jsonc | 12 +++++--- .../{quickview.json => quickview.jsonc} | 28 +++++-------------- styles/css/vtex.flex-layout.css | 4 +++ styles/css/vtex.store-components.css | 26 +++++++++++------ 5 files changed, 38 insertions(+), 35 deletions(-) rename store/blocks/product-summary/{quickview.json => quickview.jsonc} (85%) diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 5c797c2..09b9b31 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -1,6 +1,7 @@ { - "add-to-cart-button": { + "add-to-cart-button#addToCart": { "props": { + "blockClass": "addToCart", "addToCartFeedback": "customEvent", "customPixelEventId": "add-to-cart-button" } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 4acbb57..1630fbc 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -78,7 +78,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + // "width": "644px", "rowGap": 0 } }, @@ -91,7 +91,11 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "showNavigationArrows": false, + "showPaginationDots": false, + "maxHeight": 664, + "thumbnailsOrientation": "horizontal", + "thumbnailMaxHeight": 90 } }, "flex-layout.col#right-col": { @@ -106,7 +110,6 @@ "flex-layout.row#selling-price", "product-installments", "sku-selector", - "product-quantity", "product-assembly-options", "product-gifts", "flex-layout.row#buy-button", @@ -145,10 +148,11 @@ "flex-layout.row#buy-button": { "props": { + "blockClass": "buy-button", "marginTop": 4, "marginBottom": 7 }, - "children": ["add-to-cart-button"] + "children": ["product-quantity", "add-to-cart-button#addToCart"] }, "flex-layout.row#product-availability": { diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.jsonc similarity index 85% rename from store/blocks/product-summary/quickview.json rename to store/blocks/product-summary/quickview.jsonc index 723d4a0..2224337 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.jsonc @@ -1,9 +1,6 @@ { "modal-trigger#quickview": { - "children": [ - "icon-expand", - "modal-layout#quickview" - ], + "children": ["icon-expand", "modal-layout#quickview"], "props": { "blockClass": "quickview" } @@ -63,9 +60,7 @@ }, "flex-layout.col#quickview-product-quantity": { - "children": [ - "product-summary-quantity#quickview" - ] + "children": ["product-summary-quantity#quickview"] }, "product-summary-quantity#quickview": { "props": { @@ -74,18 +69,14 @@ } }, "flex-layout.col#quickview-add-to-card-button": { - "children": [ - "add-to-cart-button" - ], + "children": ["add-to-cart-button"], "props": { "width": "grow" } }, "flex-layout.row#quickview-actions-2": { - "children": [ - "link.product#button-pdp" - ] + "children": ["link.product#button-pdp"] }, "link.product#button-pdp": { "props": { @@ -107,15 +98,10 @@ } }, "flex-layout.col#quickview-images": { - "children": [ - "product-images#quickview" - ] + "children": ["product-images#quickview"] }, "flex-layout.col#quickview-product-details": { - "children": [ - "modal-content#quickview", - "modal-actions#quickview" - ], + "children": ["modal-content#quickview", "modal-actions#quickview"], "props": { "preventVerticalStretch": true, "blockClass": "quickviewDetails" @@ -134,7 +120,7 @@ "blockClass": "quickview" } }, - "product-images#quickview" : { + "product-images#quickview": { "props": { "blockClass": "quickview", "showNavigationArrows": true diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 8edbfc4..f1720d1 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -42,6 +42,10 @@ font-size: 14px; } +.flexRowContent--buy-button { + height: 49px; +} + .flexRow--deals { background-color: #0f3e99; padding: 14px 0px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 94af4c8..91a1b12 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -11,15 +11,23 @@ background: red; } -.caretIcon { - display: none; -} - -.swiper-pagination { - display: none; -} - -.productNameContainer--quickview { +.productBrand--quickview { display: flex; justify-content: end; } + +.carouselGaleryThumbs { + max-height: 90px; +} + +.productImageTag--main { + max-width: 664px; +} + +.carouselThumbBorder { + display: none; +} + +.thumbImg { + width: 90px; +} -- 2.34.1 From d25e7b790d0ca0bb9fba92d7109c5c94fb24db99 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Wed, 25 Jan 2023 18:01:47 -0300 Subject: [PATCH 05/32] feat: adiciona estilos iniciais sku --- store/blocks/minicart.jsonc | 4 +- store/blocks/pdp/product.jsonc | 16 ++- styles/css/vtex-add-to-cart-button.css | 9 ++ styles/css/vtex.address-form.css | 0 styles/css/vtex.fle-layout.css | 12 +++ styles/css/vtex.flex-layout.css | 13 ++- styles/css/vtex.product-quantity.css | 3 + styles/css/vtex.store-components.css | 42 +++++++- styles/css/vtex.styleguide.css | 4 + .../sass/pages/product/vtex.flex-layout.scss | 102 ++++++++++++++++++ .../pages/product/vtex.store-components.scss | 68 +++++++++++- 11 files changed, 260 insertions(+), 13 deletions(-) create mode 100644 styles/css/vtex-add-to-cart-button.css create mode 100644 styles/css/vtex.address-form.css create mode 100644 styles/css/vtex.fle-layout.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.flex-layout.scss diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 09b9b31..f1d920a 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -3,7 +3,9 @@ "props": { "blockClass": "addToCart", "addToCartFeedback": "customEvent", - "customPixelEventId": "add-to-cart-button" + "customPixelEventId": "add-to-cart-button", + "width": "73%", + "text": "ADICIONAR À SACOLA" } }, diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 1630fbc..81c8333 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -100,6 +100,7 @@ }, "flex-layout.col#right-col": { "props": { + "blockClass": "right-col", "preventVerticalStretch": true, "rowGap": 0 }, @@ -110,7 +111,6 @@ "flex-layout.row#selling-price", "product-installments", "sku-selector", - "product-assembly-options", "product-gifts", "flex-layout.row#buy-button", "availability-subscriber", @@ -141,8 +141,7 @@ "sku-selector": { "props": { - "variationsSpacing": 3, - "showValueNameForImageVariation": true + "variationsSpacing": 3 } }, @@ -152,7 +151,16 @@ "marginTop": 4, "marginBottom": 7 }, - "children": ["product-quantity", "add-to-cart-button#addToCart"] + "children": ["product-quantity#addToCart", "add-to-cart-button#addToCart"] + }, + + "product-quantity#addToCart": { + "props": { + "blockClass": "addToCartQuantity", + "showLabel": false, + "size": "large", + "width": "24%" + } }, "flex-layout.row#product-availability": { 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.address-form.css b/styles/css/vtex.address-form.css new file mode 100644 index 0000000..e69de29 diff --git a/styles/css/vtex.fle-layout.css b/styles/css/vtex.fle-layout.css new file mode 100644 index 0000000..2c86776 --- /dev/null +++ b/styles/css/vtex.fle-layout.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 */ +.flexRowContent--buy-button .pr7 { + width: 22%; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index f1720d1..f755429 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,3 +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 */ .flexRowContent--menu-link, .flexRowContent--main-header { padding: 0 0.5rem; @@ -9,14 +18,12 @@ 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; @@ -99,4 +106,4 @@ .flexRow--addToCartRow { padding-bottom: 1rem; -} +} \ 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..ecf0f5a --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,3 @@ +/* .quantitySelectorSteper--addToCart { + border-radius: 0; +} */ diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 91a1b12..023f573 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -28,6 +28,44 @@ display: none; } -.thumbImg { - width: 90px; +.shareLabel { + display: none; } + +.skuSelectorContainer { + display: flex; + flex-direction: column; +} + +.skuSelectorItem { + height: 40px !important; + width: 40px; +} + +.frameAround { + border-radius: 50%; +} + +.diagonalCross { + transform: rotate(90deg); +} + +.skuSelectorInternalBox { + border-radius: 50%; + display: flex; + justify-content: center; +} + +.skuSelectorSubcontainer--cor { + order: 2; +} + +.skuSelectorSubcontainer--tamanho { + order: 1; +} + +.productImagesThumb .figure .thumbImg { + width: 90px; + height: 90px; + border-radius: 8px; +} \ 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..11b5662 --- /dev/null +++ b/styles/css/vtex.styleguide.css @@ -0,0 +1,4 @@ +.hideDecorators { + border-left: 0; + border-right: 0; +} 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..f1720d1 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,102 @@ +.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; +} + +.flexRowContent--buy-button { + height: 49px; +} + +.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; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..fd48980 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,65 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.newsletter { + background: red; +} + +.productBrand--quickview { + display: flex; + justify-content: end; +} + +.carouselGaleryThumbs { + max-height: 90px; +} + +.productImageTag--main { + max-width: 664px; +} + +.carouselThumbBorder { + display: none; +} + +.shareLabel { + display: none; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column; +} + +.skuSelectorItem { + height: 40px !important; + width: 40px; +} + +.frameAround { + border-radius: 50%; +} + +.diagonalCross { + transform: rotate(90deg); +} + +.skuSelectorInternalBox { + border-radius: 50%; + display: flex; + justify-content: center; +} + +.skuSelectorSubcontainer--cor { + order: 2; +} +.skuSelectorSubcontainer--tamanho { + order: 1; +} + +.productImagesThumb { + .figure { + .thumbImg { + width: 90px; + height: 90px; + border-radius: 8px; + } + } +} -- 2.34.1 From 16b2a368e240571d0b992870c7c6aa38871dabb8 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Wed, 25 Jan 2023 21:57:57 -0300 Subject: [PATCH 06/32] feat: adiciona estilos quantity botao add carrinho 1440px --- store/blocks/pdp/product.jsonc | 1 + styles/css/vtex.flex-layout.css | 6 ++++ styles/css/vtex.product-quantity.css | 29 +++++++++++++++++-- styles/css/vtex.store-components.css | 24 +++++++++++++++ .../sass/pages/product/vtex.flex-layout.scss | 6 ++++ .../pages/product/vtex.product-quantity.scss | 22 ++++++++++++++ .../pages/product/vtex.store-components.scss | 29 +++++++++++++++++++ styles/sass/utils/_vars.scss | 23 ++++++++------- 8 files changed, 127 insertions(+), 13 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 81c8333..d6bacba 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -135,6 +135,7 @@ "product-installments": { "props": { + "markers": ["parcelas", "valor"], "message": "36 x de R$ 2,17 sem juros" } }, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index f755429..35319c2 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -106,4 +106,10 @@ .flexRow--addToCartRow { padding-bottom: 1rem; +} + +.flexRowContent--buy-button :global(.vtex-button) { + background: black; + border: none; + border-radius: 0; } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index ecf0f5a..e05f762 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -1,3 +1,28 @@ -/* .quantitySelectorSteper--addToCart { +/* +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 */ +.quantitySelectorStepper--addToCartQuantity :global(.vtex-numeric-stepper__plus-button) { border-radius: 0; -} */ + border: 1px solid #cccccc; + border-left: none; +} + +.quantitySelectorStepper--addToCartQuantity :global(.vtex-numeric-stepper__minus-button) { + border-radius: 0; + border: 1px solid #cccccc; + border-right: none; + background: transparent; +} + +.quantitySelectorStepper--addToCartQuantity :global(.vtex-numeric-stepper__input) { + border-radius: 0; + border: 1px solid #cccccc; + border-left: 0; + border-right: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 023f573..2ed6ef4 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -18,6 +18,7 @@ .carouselGaleryThumbs { max-height: 90px; + width: 80%; } .productImageTag--main { @@ -44,10 +45,17 @@ .frameAround { border-radius: 50%; + border-color: black; } .diagonalCross { transform: rotate(90deg); + top: 4px; + left: 6px; + bottom: 0px; + z-index: 2; + width: 28px; + height: 28px; } .skuSelectorInternalBox { @@ -59,10 +67,26 @@ .skuSelectorSubcontainer--cor { order: 2; } +.skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorName::after { + display: block; + content: "OUTRAS CORES:"; + font-size: 16px; +} .skuSelectorSubcontainer--tamanho { order: 1; } +.skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorName::after { + display: block; + content: "OUTROS TAMANHOS:"; + font-size: 16px; +} .productImagesThumb .figure .thumbImg { width: 90px; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index f1720d1..8ab9fec 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -100,3 +100,9 @@ .flexRow--addToCartRow { padding-bottom: 1rem; } + +.flexRowContent--buy-button :global(.vtex-button) { + background: black; + border: none; + border-radius: 0; +} 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..4086ed4 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,22 @@ +.quantitySelectorStepper--addToCartQuantity + :global(.vtex-numeric-stepper__plus-button) { + border-radius: 0; + border: 1px solid $color-gray6; + border-left: none; +} + +.quantitySelectorStepper--addToCartQuantity + :global(.vtex-numeric-stepper__minus-button) { + border-radius: 0; + border: 1px solid $color-gray6; + border-right: none; + background: transparent; +} + +.quantitySelectorStepper--addToCartQuantity + :global(.vtex-numeric-stepper__input) { + border-radius: 0; + border: 1px solid $color-gray6; + border-left: 0; + border-right: 0; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index fd48980..517f4df 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -9,6 +9,7 @@ .carouselGaleryThumbs { max-height: 90px; + width: 80%; } .productImageTag--main { @@ -35,10 +36,17 @@ .frameAround { border-radius: 50%; + border-color: black; } .diagonalCross { transform: rotate(90deg); + top: 4px; + left: 6px; + bottom: 0px; + z-index: 2; + width: 28px; + height: 28px; } .skuSelectorInternalBox { @@ -49,9 +57,30 @@ .skuSelectorSubcontainer--cor { order: 2; + + .skuSelectorName { + font-size: 0; + + &::after { + display: block; + content: "OUTRAS CORES:"; + font-size: 16px; + } + } } + .skuSelectorSubcontainer--tamanho { order: 1; + + .skuSelectorName { + font-size: 0; + + &::after { + display: block; + content: "OUTROS TAMANHOS:"; + font-size: 16px; + } + } } .productImagesThumb { diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..033dd14 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -7,6 +7,7 @@ $color-gray2: #7d7d7d; $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; +$color-gray6: #cccccc; $color-blue: #4267b2; @@ -14,18 +15,18 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default; -- 2.34.1 From 21ab5ef045fde78bf65048900546e1cb022695fc Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Thu, 26 Jan 2023 16:53:58 -0300 Subject: [PATCH 07/32] 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; +} -- 2.34.1 From cf4b91539db46c863216dbfaccaf88f09f209b9c Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Thu, 26 Jan 2023 20:57:16 -0300 Subject: [PATCH 08/32] feat: adiciona css product installments 1440px --- manifest.json | 1 - react/components/Html/index.tsx | 80 +++++++------ react/components/Html/styles.css | 5 + store/blocks/pdp/product.jsonc | 14 +-- store/blocks/product-price.jsonc | 9 +- styles/css/agenciamagma.store-theme.css | 7 +- styles/css/vtex.product-price.css | 37 +++++- styles/css/vtex.store-components.css | 2 +- .../product/agenciamagma.store-theme.scss | 6 - .../pages/product/vtex.product-price.scss | 106 ++++++++++++++++++ styles/sass/pages/product/vtex.rich-text.scss | 3 - .../pages/product/vtex.store-components.scss | 2 +- styles/sass/utils/_vars.scss | 1 + 13 files changed, 210 insertions(+), 63 deletions(-) create mode 100644 react/components/Html/styles.css create mode 100644 styles/sass/pages/product/vtex.product-price.scss delete mode 100644 styles/sass/pages/product/vtex.rich-text.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..082c0f0 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,41 +1,53 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; +import "./styles.css"; const CSS_HANDLES = ["html"] as const; type HtmlProps = { - children?: ReactNode, - /** - * Qual tag Html que deseja que seja usar - * - * @default div - */ - tag?: keyof React.ReactHTML - /** - * Classes CSS extras que deseja adicionar. - * Feito para uso de [classes do tachyons](https://tachyons.io/) - */ - tachyonsClasses?: string - /** - * Se caso quiser usar esse componente - * para adicinar um texto simples - */ - text?: string - /** - * Tag ID para - */ - testId?: string -} - -export const Html = ({ children = null, tag = "div", text = "", tachyonsClasses: classes = "", testId }: HtmlProps) => { - const { handles } = useCssHandles(CSS_HANDLES); - - const props = { - className: `${handles.html} ${classes}`, - "data-testid": testId - }; - const Children = <>{children}{text}; - const Element = React.createElement(tag, props, Children); - - return <>{Element}; + children?: ReactNode; + /** + * Qual tag Html que deseja que seja usar + * + * @default div + */ + tag?: keyof React.ReactHTML; + /** + * Classes CSS extras que deseja adicionar. + * Feito para uso de [classes do tachyons](https://tachyons.io/) + */ + tachyonsClasses?: string; + /** + * Se caso quiser usar esse componente + * para adicinar um texto simples + */ + text?: string; + /** + * Tag ID para + */ + testId?: string; +}; + +export const Html = ({ + children = null, + tag = "div", + text = "", + tachyonsClasses: classes = "", + testId, +}: HtmlProps) => { + const { handles } = useCssHandles(CSS_HANDLES); + + const props = { + className: `${handles.html} ${classes}`, + "data-testid": testId, + }; + const Children = ( + <> + {children} + {text} + + ); + const Element = React.createElement(tag, props, Children); + + return <>{Element}; }; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..7e71311 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,5 @@ +[class*="html--pdp-breadcrumb"] { + display: flex; + justify-content: center; + padding: 0 40px; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b0cdd95..8129c5d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -116,8 +116,7 @@ "product-identifier.product", "product-rating-summary", "flex-layout.row#selling-price", - // "product-installments", - "rich-text#product-installments", + "product-installments", "sku-selector", "product-gifts", "flex-layout.row#buy-button", @@ -141,14 +140,11 @@ } }, - // "product-installments": { - // "children": ["rich-text#product-installments"] - // }, - - "rich-text#product-installments": { + "product-installments": { "props": { - "text": "**36 x** de **R$ 2,17** sem juros", - "blockClass": "product-installments" + "markers": ["discount"], + "blockClass": "m3-custom-installments", + "message": "{installmentsNumber} x de {installmentValue} sem juros" } }, diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 779175f..be7bc35 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -6,7 +6,14 @@ "preventHorizontalStretch": true, "marginBottom": 4 }, - "children": ["product-selling-price"] + "children": ["product-selling-price#summary"] + }, + + "product-selling-price#summary": { + "props": { + "blockClass": "summary", + "message": "{sellingPriceValue}" + } }, "flex-layout.row#list-price-savings": { diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 8a18de0..34c4328 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,9 +6,4 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.html--pdp-breadcrumb { - display: flex; - justify-content: center; - padding: 0 40px; -} \ No newline at end of file +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 6b5431c..1d6ef7b 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,3 +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 */ .listPrice { color: #727273; margin-bottom: 0.25rem; @@ -35,7 +44,6 @@ border-radius: 1000px; align-items: center; display: flex; - padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.875rem; @@ -77,3 +85,30 @@ color: #ffffff; padding: 0.25rem 0.5rem 0.25rem 0.5rem; } + +.installments--m3-custom-installments { + font-style: normal; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +.installmentsNumber--m3-custom-installments--36, +.installments-discount--m3-custom-installments, +.currencyCode--m3-custom-installments, +.currencyInteger--m3-custom-installments, +.currencyDecimal--m3-custom-installments, +.currencyFraction--m3-custom-installments { + font-weight: 700; +} + +.currencyCode--summary, +.currencyInteger--summary, +.currencyDecimal--summary, +.currencyFraction--summary { + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #292929; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3d3a2bf..385e033 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -127,7 +127,7 @@ height: 49px; position: absolute; left: 33.4%; - top: 32%; + top: 33%; background: #292929; border: none; border-radius: 0; diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index 235cd8b..fa44192 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,9 +1,3 @@ // .html { // background-color: red; // } - -.html--pdp-breadcrumb { - display: flex; - justify-content: center; - padding: 0 40px; -} 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..7804407 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,106 @@ +.listPrice { + color: #727273; + margin-bottom: 0.25rem; + font-size: 1rem; +} + +.sellingPrice { + color: #3f3f40; + font-size: 1.25rem; +} + +.sellingPriceValue { + font-size: 2.25rem; + font-weight: 700; +} + +.installments { + color: #727273; + margin-bottom: 1rem; +} + +.savings { + font-weight: 500; + color: #79b03a; +} + +.sellingPriceValue--summary { + font-size: 1.25rem; + font-weight: 600; + color: #2e2e2e; +} + +.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: 0.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--m3-custom-installments { + font-style: normal; + font-size: 16px; + line-height: 22px; + color: $color-gray7; +} + +.installmentsNumber--m3-custom-installments--36, +.installments-discount--m3-custom-installments, +.currencyCode--m3-custom-installments, +.currencyInteger--m3-custom-installments, +.currencyDecimal--m3-custom-installments, +.currencyFraction--m3-custom-installments { + font-weight: 700; +} + +.currencyCode--summary, +.currencyInteger--summary, +.currencyDecimal--summary, +.currencyFraction--summary { + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: $color-black; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss deleted file mode 100644 index 4debf76..0000000 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ /dev/null @@ -1,3 +0,0 @@ -.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 2c49b0b..f1559ba 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -130,7 +130,7 @@ height: 49px; position: absolute; left: 33.4%; - top: 32%; + top: 33%; background: $color-black; border: none; border-radius: 0; diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 033dd14..4632a04 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -8,6 +8,7 @@ $color-gray3: #f0f0f0; $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; $color-gray6: #cccccc; +$color-gray7: #929292; $color-blue: #4267b2; -- 2.34.1 From a02d6e49bf185955dcbf6cd3327085100a4f0c61 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Fri, 27 Jan 2023 02:53:08 -0300 Subject: [PATCH 09/32] =?UTF-8?q?refactor:=20altera=20css=20bot=C3=A3o=20a?= =?UTF-8?q?dd=20carrinho?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 12 ++++++++++ store/blocks/pdp/product-assembly.jsonc | 24 +++++++------------ store/blocks/pdp/product.jsonc | 18 ++++++++++---- styles/css/vtex.flex-layout.css | 6 ----- styles/css/vtex.store-components.css | 5 +++- .../sass/pages/product/vtex.flex-layout.scss | 6 ----- .../pages/product/vtex.store-components.scss | 3 ++- 7 files changed, 40 insertions(+), 34 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 7e71311..c2f013e 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -3,3 +3,15 @@ justify-content: center; padding: 0 40px; } + +[class*="html--buy-button"] { + display: flex; + gap: 10px; +} + +[class*="html--buy-button"] :global(.vtex-button) { + height: 49px; + background: black; + border: none; + border-radius: 0; +} diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..34f4233 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -1,10 +1,10 @@ { - "sticky-layout#buy-button": { - "props": { - "position": "bottom" - }, - "children": ["flex-layout.row#buy-button"] - }, + // "sticky-layout#buy-button": { + // "props": { + // "position": "bottom" + // }, + // "children": ["flex-layout.row#buy-button"] + // }, "product-assembly-options": { "children": [ "flex-layout.row#product-assembly-options", @@ -32,17 +32,13 @@ "props": { "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "flex-layout.col#product-assembly-image": { "props": { "marginRight": 4 }, - "children": [ - "assembly-option-item-image" - ] + "children": ["assembly-option-item-image"] }, "flex-layout.col#product-assembly-middle": { "props": { @@ -96,9 +92,7 @@ "horizontalAlign": "right", "verticalAlign": "middle" }, - "children": [ - "assembly-option-item-quantity-selector" - ] + "children": ["assembly-option-item-quantity-selector"] }, "assembly-option-item-customize#sec-level": { "props": { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 8129c5d..a3de923 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -119,7 +119,8 @@ "product-installments", "sku-selector", "product-gifts", - "flex-layout.row#buy-button", + // "flex-layout.row#buy-button", + "html#buy-button", "availability-subscriber", "shipping-simulator", "share#default" @@ -154,15 +155,22 @@ } }, - "flex-layout.row#buy-button": { + "html#buy-button": { "props": { - "blockClass": "buy-button", - "marginTop": 4, - "marginBottom": 7 + "blockClass": "buy-button" }, "children": ["product-quantity#addToCart", "add-to-cart-button#addToCart"] }, + // "flex-layout.row#buy-button": { + // "props": { + // "blockClass": "buy-button", + // "marginTop": 4, + // "marginBottom": 7 + // }, + // "children": ["product-quantity#addToCart", "add-to-cart-button#addToCart"] + // }, + "product-quantity#addToCart": { "props": { "blockClass": "addToCartQuantity", diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 81488fe..c9874dd 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -112,12 +112,6 @@ padding-bottom: 1rem; } -.flexRowContent--buy-button :global(.vtex-button) { - 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.store-components.css b/styles/css/vtex.store-components.css index 385e033..a7c695f 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -19,7 +19,6 @@ .carouselGaleryThumbs { max-height: 90px; - width: 80%; } .productImageTag--main { @@ -89,6 +88,10 @@ font-size: 14px; } +.productImagesThumb { + max-width: 90px; + margin-right: 16px; +} .productImagesThumb .figure .thumbImg { width: 90px; height: 90px; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 05339c1..01563a9 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -105,12 +105,6 @@ padding-bottom: 1rem; } -.flexRowContent--buy-button :global(.vtex-button) { - background: black; - border: none; - border-radius: 0; -} - .flexRowContent--product-container { padding: 0 40px; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index f1559ba..8a7348a 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -14,7 +14,6 @@ .carouselGaleryThumbs { max-height: 90px; - width: 80%; } .productImageTag--main { @@ -89,6 +88,8 @@ } .productImagesThumb { + max-width: 90px; + margin-right: 16px; .figure { .thumbImg { width: 90px; -- 2.34.1 From d66e6440e9b251635dd4249beef072ffa16a6be7 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Fri, 27 Jan 2023 17:19:50 -0300 Subject: [PATCH 10/32] feat:adiciona componente desconto pix --- react/PixPrice.tsx | 3 + react/components/Html/styles.css | 1 + react/components/PixPrice/PixPrice.tsx | 35 + react/components/PixPrice/styles.module.css | 34 + react/typings/css.d.ts | 4 + react/typings/global.d.ts | 7 + react/typings/graphql.d.ts | 6 + react/typings/storefront.d.ts | 15 + react/typings/vtex.css-handles.ts | 1 + react/typings/vtex.order-manager.d.ts | 103 +++ react/typings/vtex.render-runtime.d.ts | 38 + react/typings/vtex.styleguide.d.ts | 9 + store/blocks/pdp/product.jsonc | 1 + store/interfaces.json | 4 + styles/configs/style.json | 688 +++++++++--------- styles/css/vtex.flex-layout.css | 1 + styles/css/vtex.product-identifier.css | 17 +- styles/css/vtex.store-components.css | 41 +- .../sass/pages/product/vtex.flex-layout.scss | 1 + .../product/vtex.product-identifier.scss | 11 + .../pages/product/vtex.store-components.scss | 40 +- styles/sass/utils/_vars.scss | 4 + 22 files changed, 710 insertions(+), 354 deletions(-) create mode 100644 react/PixPrice.tsx create mode 100644 react/components/PixPrice/PixPrice.tsx create mode 100644 react/components/PixPrice/styles.module.css create mode 100644 react/typings/css.d.ts create mode 100644 react/typings/global.d.ts create mode 100644 react/typings/graphql.d.ts create mode 100644 react/typings/storefront.d.ts create mode 100644 react/typings/vtex.css-handles.ts create mode 100644 react/typings/vtex.order-manager.d.ts create mode 100644 react/typings/vtex.render-runtime.d.ts create mode 100644 react/typings/vtex.styleguide.d.ts create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss diff --git a/react/PixPrice.tsx b/react/PixPrice.tsx new file mode 100644 index 0000000..7b6642a --- /dev/null +++ b/react/PixPrice.tsx @@ -0,0 +1,3 @@ +import PixPrice from "./components/PixPrice/PixPrice"; + +export default PixPrice; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index c2f013e..e62f510 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -7,6 +7,7 @@ [class*="html--buy-button"] { display: flex; gap: 10px; + margin-bottom: 5px; } [class*="html--buy-button"] :global(.vtex-button) { diff --git a/react/components/PixPrice/PixPrice.tsx b/react/components/PixPrice/PixPrice.tsx new file mode 100644 index 0000000..01a9ccd --- /dev/null +++ b/react/components/PixPrice/PixPrice.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; +import styles from "./styles.module.css"; + +const PixPrice = () => { + // document.getElementsByClassName("myText").placeholder = "Type name here.."; + + const productContextValue = useProduct(); + + const productPrice = + productContextValue?.product?.priceRange?.sellingPrice?.lowPrice; + + const descount = (Number(productPrice) * 10) / 100; + + const total = Number(productPrice) - Number(descount.toFixed(2)); + + return ( +
+
+
+ +
+
+

R$ {total.toFixed(2)}

+

10 % de desconto

+
+
+
+ ); +}; + +export default PixPrice; diff --git a/react/components/PixPrice/styles.module.css b/react/components/PixPrice/styles.module.css new file mode 100644 index 0000000..0ff58e3 --- /dev/null +++ b/react/components/PixPrice/styles.module.css @@ -0,0 +1,34 @@ +.pixPrice-container { + display: flex; + height: 39px; + margin-top: 8px; +} + +.pixPrice-content { + display: flex; + gap: 26px; +} + +.pixPrice-img { + display: flex; + align-items: center; +} + +.pixPrice-value, +.pixPrice-text { + margin: 0; +} + +.pixPrice-value { + font-style: normal; + font-weight: 700; + font-size: 18px; + color: rgba(0, 0, 0, 0.58); +} + +.pixPrice-text { + font-style: normal; + font-weight: 300; + font-size: 13px; + color: #929292; +} diff --git a/react/typings/css.d.ts b/react/typings/css.d.ts new file mode 100644 index 0000000..c5862b6 --- /dev/null +++ b/react/typings/css.d.ts @@ -0,0 +1,4 @@ +declare module "*.css" { + const css: any; + export default css; +} diff --git a/react/typings/global.d.ts b/react/typings/global.d.ts new file mode 100644 index 0000000..17b4165 --- /dev/null +++ b/react/typings/global.d.ts @@ -0,0 +1,7 @@ +export interface TimeSplit { + hours: string + minutes: string + seconds: string +} + +type GenericObject = Record diff --git a/react/typings/graphql.d.ts b/react/typings/graphql.d.ts new file mode 100644 index 0000000..84017d3 --- /dev/null +++ b/react/typings/graphql.d.ts @@ -0,0 +1,6 @@ +declare module "*.graphql" { + import { DocumentNode } from "graphql"; + + const value: DocumentNode; + export default value; +} diff --git a/react/typings/storefront.d.ts b/react/typings/storefront.d.ts new file mode 100644 index 0000000..4689dc6 --- /dev/null +++ b/react/typings/storefront.d.ts @@ -0,0 +1,15 @@ +import { FunctionComponent } from "react"; + +declare global { + interface StorefrontFunctionComponent

+ extends FunctionComponent

{ + getSchema?(props: P): GenericObject + schema?: GenericObject + } + + interface StorefrontComponent

+ extends Component { + getSchema?(props: P): GenericObject + schema: GenericObject + } +} diff --git a/react/typings/vtex.css-handles.ts b/react/typings/vtex.css-handles.ts new file mode 100644 index 0000000..4f191a0 --- /dev/null +++ b/react/typings/vtex.css-handles.ts @@ -0,0 +1 @@ +declare module "vtex.css-handles" diff --git a/react/typings/vtex.order-manager.d.ts b/react/typings/vtex.order-manager.d.ts new file mode 100644 index 0000000..b563ce5 --- /dev/null +++ b/react/typings/vtex.order-manager.d.ts @@ -0,0 +1,103 @@ +/* eslint-disable no-inner-declarations */ +declare module "vtex.order-manager/OrderQueue" { + export * from "vtex.order-manager/react/OrderQueue"; + export { default } from "vtex.order-manager/react/OrderQueue"; + + export const QueueStatus = { + PENDING: "Pending", + FULFILLED: "Fulfilled", + } as const; +} + +declare module "vtex.order-manager/OrderForm" { + import { createContext, useContext } from "react"; + import type { DEFAULT_ORDER_FORM } from "@vtex/order-manager/src/constants"; + import type { Context, OrderForm } from "@vtex/order-manager/src/typings"; + + type DefaultOrderForm = typeof DEFAULT_ORDER_FORM; + type DefaultOrderFormOmited = Omit; + type DefaultOrderFormUpdated = DefaultOrderFormOmited & { + items: OrderFormItem[] | null; + }; + + export const OrderFormContext = createContext>({ + orderForm: DefaultOrderFormUpdated, + setOrderForm: noop, + error: undefined, + loading: false, + }); + + function useOrderForm() { + const context = useContext(OrderFormContext); + + if (context === undefined) { + throw new Error( + "useOrderForm must be used within a OrderFormProvider" + ); + } + return context as Context; + } + + export type OrderFormItem = { + additionalInfo: { + brandName: string; + __typename: string; + }; + attachments: Array; + attachmentOfferings: Array; + bundleItems: Array; + parentAssemblyBinding: any; + parentItemIndex: any; + sellingPriceWithAssemblies: any; + options: any; + availability: string; + detailUrl: string; + id: string; + imageUrls: Record; + listPrice: number; + manualPrice: any; + measurementUnit: string; + modalType: any; + name: string; + offerings: Array; + price: number; + priceTags: Array; + productCategories: Record; + productCategoryIds: string; + productRefId: string; + productId: string; + quantity: number; + seller: string; + sellingPrice: number; + skuName: string; + skuSpecifications: Array; + unitMultiplier: number; + uniqueId: string; + refId: string; + isGift: boolean; + priceDefinition: { + calculatedSellingPrice: number; + total: number; + sellingPrices: Array<{ + quantity: number; + value: number; + __typename: string; + }>; + __typename: string; + }; + __typename: string; + }; + + export { OrderFormProvider, useOrderForm }; + declare const _default: { + OrderFormProvider: import("react").FC>; + useOrderForm: typeof useOrderForm; + }; + export default _default; +} + +declare module "vtex.order-manager/constants" { + export * from "vtex.order-manager/react/constants"; +} + + diff --git a/react/typings/vtex.render-runtime.d.ts b/react/typings/vtex.render-runtime.d.ts new file mode 100644 index 0000000..bfb1e97 --- /dev/null +++ b/react/typings/vtex.render-runtime.d.ts @@ -0,0 +1,38 @@ +/* Typings for `render-runtime` */ +declare module "vtex.render-runtime" { + import { ComponentType, ReactElement, ReactType } from "react"; + + export interface NavigationOptions { + page: string + params?: any + } + + export interface RenderContextProps { + runtime: { + navigate: (options: NavigationOptions) => void + } + } + + interface ExtensionPointProps { + id: string + [key: string]: any + } + + export const ExtensionPoint: ComponentType; + + interface ChildBlockProps { + id: string + } + + export const ChildBlock: ComponentType; + export const useChildBlock = () => GenericObject; + + export const Helmet: ReactElement; + export const Link: ReactType; + export const NoSSR: ReactElement; + export const RenderContextConsumer: ReactElement; + export const canUseDOM: boolean; + export const withRuntimeContext: ( + Component: ComponentType + ) => ComponentType; +} diff --git a/react/typings/vtex.styleguide.d.ts b/react/typings/vtex.styleguide.d.ts new file mode 100644 index 0000000..6f1f00a --- /dev/null +++ b/react/typings/vtex.styleguide.d.ts @@ -0,0 +1,9 @@ +declare module "vtex.styleguide" { + import { ComponentType } from "react"; + + export const Input: ComponentType; + + interface InputProps { + [key: string]: any + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index a3de923..0b03d0c 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -117,6 +117,7 @@ "product-rating-summary", "flex-layout.row#selling-price", "product-installments", + "PixPrice", "sku-selector", "product-gifts", // "flex-layout.row#buy-button", diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..aaa4ae2 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,9 @@ "html": { "component": "html", "composition": "children" + }, + + "PixPrice": { + "component": "PixPrice" } } diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..e729845 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -1,349 +1,351 @@ { - "typeScale": [ - 3, 2.25, 1.5, 1.25, 1, 0.875, 0.75 - ], - "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], - "customMedia": [ - { "s": 20 }, - { "ns": { - "value": 40, - "minWidth": true - } - }, - { "m": { - "value": 40, - "minWidth": true - } - }, - { "l": { - "value": 64, - "minWidth": true - } - }, - { "xl": { - "value": 80, - "minWidth": true - } - } - ], - "colors": { - "black-90": "rgba(0,0,0,.9)", - "black-80": "rgba(0,0,0,.8)", - "black-70": "rgba(0,0,0,.7)", - "black-60": "rgba(0,0,0,.6)", - "black-50": "rgba(0,0,0,.5)", - "black-40": "rgba(0,0,0,.4)", - "black-30": "rgba(0,0,0,.3)", - "black-20": "rgba(0,0,0,.2)", - "black-10": "rgba(0,0,0,.1)", - "black-05": "rgba(0,0,0,.05)", - "black-025": "rgba(0,0,0,.025)", - "black-0125": "rgba(0,0,0,.0125)", + "typeScale": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75], + "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], + "customMedia": [ + { "s": 20 }, + { + "ns": { + "value": 40, + "minWidth": true + } + }, + { + "m": { + "value": 40, + "minWidth": true + } + }, + { + "l": { + "value": 64, + "minWidth": true + } + }, + { + "xl": { + "value": 80, + "minWidth": true + } + } + ], + "colors": { + "black-90": "rgba(0,0,0,.9)", + "black-80": "rgba(0,0,0,.8)", + "black-70": "rgba(0,0,0,.7)", + "black-60": "rgba(0,0,0,.6)", + "black-50": "rgba(0,0,0,.5)", + "black-40": "rgba(0,0,0,.4)", + "black-30": "rgba(0,0,0,.3)", + "black-20": "rgba(0,0,0,.2)", + "black-10": "rgba(0,0,0,.1)", + "black-05": "rgba(0,0,0,.05)", + "black-025": "rgba(0,0,0,.025)", + "black-0125": "rgba(0,0,0,.0125)", - "white-90": "rgba(255,255,255,.9)", - "white-80": "rgba(255,255,255,.8)", - "white-70": "rgba(255,255,255,.7)", - "white-60": "rgba(255,255,255,.6)", - "white-50": "rgba(255,255,255,.5)", - "white-40": "rgba(255,255,255,.4)", - "white-30": "rgba(255,255,255,.3)", - "white-20": "rgba(255,255,255,.2)", - "white-10": "rgba(255,255,255,.1)", - "white-05": "rgba(255,255,255,.05)", - "white-025": "rgba(255,255,255,.025)", - "white-0125": "rgba(255,255,255,.0125)" + "white-90": "rgba(255,255,255,.9)", + "white-80": "rgba(255,255,255,.8)", + "white-70": "rgba(255,255,255,.7)", + "white-60": "rgba(255,255,255,.6)", + "white-50": "rgba(255,255,255,.5)", + "white-40": "rgba(255,255,255,.4)", + "white-30": "rgba(255,255,255,.3)", + "white-20": "rgba(255,255,255,.2)", + "white-10": "rgba(255,255,255,.1)", + "white-05": "rgba(255,255,255,.05)", + "white-025": "rgba(255,255,255,.025)", + "white-0125": "rgba(255,255,255,.0125)" + }, + "semanticColors": { + "background": { + "base": "#ffffff", + "base--inverted": "#03044e", + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#f2f4f5", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-background": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-background": { + "action-primary": "#0c389f", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "text": { + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "link": "#0F3E99", + "emphasis": "#f71963", + "disabled": "#979899", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "visited-text": { + "link": "#0c389f" + }, + "hover-text": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "link": "#0c389f", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "active-text": { + "link": "#0c389f", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "border": { + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#e3e4e6", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-border": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-border": { + "action-primary": "#0c389f", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "on": { + "base": "#3f3f40", + "base--inverted": "#ffffff", + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "disabled": "#979899", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a", + "muted-1": "#ffffff", + "muted-2": "#ffffff", + "muted-3": "#3f3f40", + "muted-4": "#3f3f40", + "muted-5": "#3f3f40" + }, + "hover-on": { + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + }, + "active-on": { + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + } + }, + "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], + "borderRadius": [0, 0.125, 0.25, 0.5, 1], + "widths": [1, 2, 4, 8, 16], + "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], + "heights": [1, 2, 4, 8, 16], + "sizes": [ + { "name": "small", "value": 2 }, + { "name": "regular", "value": 2.5 }, + { "name": "large", "value": 3 } + ], + "typography": { + "measure": [30, 34, 20], + "styles": { + "heading-1": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "700", + "fontSize": "3rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "semanticColors": { - "background": { - "base": "#ffffff", - "base--inverted": "#03044e", - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#f2f4f5", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-background": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-background": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "text": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "link": "#0F3E99", - "emphasis": "#f71963", - "disabled": "#979899", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "visited-text": { - "link": "#0c389f" - }, - "hover-text": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "active-text": { - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "border": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#e3e4e6", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-border": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-border": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "on": { - "base": "#3f3f40", - "base--inverted": "#ffffff", - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "disabled": "#979899", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a", - "muted-1": "#ffffff", - "muted-2": "#ffffff", - "muted-3": "#3f3f40", - "muted-4": "#3f3f40", - "muted-5": "#3f3f40" - }, - "hover-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - }, - "active-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - } + "heading-2": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "700", + "fontSize": "2.25rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], - "borderRadius": [0, 0.125, 0.25, 0.5, 1], - "widths": [1, 2, 4, 8, 16], - "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], - "heights": [1, 2, 4, 8, 16], - "sizes": [ - {"name": "small", "value": 2}, - {"name": "regular", "value": 2.5}, - {"name": "large", "value": 3} - ], - "typography":{ - "measure": [30, 34, 20], - "styles": { - "heading-1": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "3rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-2": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "2.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-3": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "1.75rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-4": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.5rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-5": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-6": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "body": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "0.875rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "mini": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "0.75rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "action": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "1rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "action--small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "0.875rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "action--large": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "1.25rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "code": { - "fontFamily": "Consolas, monaco, monospace", - "fontWeight": "normal", - "fontSize": "1rem", - "textTransform": "initial", - "letterSpacing": "0" - } - } + "heading-3": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "700", + "fontSize": "1.75rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] + "heading-4": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1.5rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-5": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-6": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "body": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "small": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "0.875rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "mini": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "normal", + "fontSize": "0.75rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "action": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "500", + "fontSize": "1rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--small": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "500", + "fontSize": "0.875rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--large": { + "fontFamily": "Open Sans, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", + "fontWeight": "500", + "fontSize": "1.25rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "code": { + "fontFamily": "Consolas, monaco, monospace", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + } + } + }, + "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c9874dd..8740479 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -9,6 +9,7 @@ /* Grid breakpoints */ .flexRowContent { padding: 0; + margin: 0; } .flexRowContent--menu-link, diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index ea941ac..bed04dd 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,5 +1,20 @@ +/* +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 { - margin-bottom: 24px; display: flex; justify-content: end; } + +.product-identifier__value { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index a7c695f..15cd3ad 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); /* Grid breakpoints */ .newsletter { background: red; @@ -15,6 +16,11 @@ .productBrand--quickview { display: flex; justify-content: end; + color: #575757; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; } .carouselGaleryThumbs { @@ -74,6 +80,7 @@ display: block; content: "OUTRAS CORES:"; font-size: 14px; + color: #929292; } .skuSelectorSubcontainer--tamanho { @@ -86,6 +93,7 @@ display: block; content: "OUTROS TAMANHOS:"; font-size: 14px; + color: #929292; } .productImagesThumb { @@ -117,6 +125,7 @@ font-size: 14px; display: block; content: "CALCULAR FRETE:"; + color: #929292; } .shippingContainer :global(.vtex-input-prefix__group) { @@ -129,7 +138,7 @@ width: 49px; height: 49px; position: absolute; - left: 33.4%; + left: 232px; top: 33%; background: #292929; border: none; @@ -152,7 +161,7 @@ font-size: 0; visibility: hidden; position: absolute; - left: 43%; + left: 302px; top: 36%; } @@ -167,6 +176,7 @@ .shippingTable { border: none; padding: 0; + max-width: 382px; } .shippingTableHead { @@ -175,7 +185,6 @@ .shippingTableRow { position: relative; - margin-bottom: 15px; } .shippingTableHeadDeliveryName { @@ -196,7 +205,7 @@ font-size: 0; position: absolute; top: 5%; - left: 242%; + left: 342%; } .shippingTableHeadDeliveryEstimate::after { @@ -213,7 +222,7 @@ font-size: 0; position: absolute; top: 5%; - left: 138%; + left: 198%; } .shippingTableHeadDeliveryPrice::after { @@ -228,4 +237,26 @@ .shippingTableRadioBtn { display: none; +} + +.shippingTableCellDeliveryName, +.shippingTableCellDeliveryEstimate, +.shippingTableCellDeliveryPrice { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; + padding: 0; + padding-top: 15px; +} + +.shippingTableCellDeliveryEstimate { + position: absolute; + left: 62%; +} + +.shippingTableCellDeliveryPrice { + position: absolute; + left: 36%; } \ 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 index 01563a9..9db07c2 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,5 +1,6 @@ .flexRowContent { padding: 0; + margin: 0; } .flexRowContent--menu-link, 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..a8d2879 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,11 @@ +.product-identifier--productReference { + display: flex; + justify-content: end; +} + +.product-identifier__value { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 8a7348a..e8c23b0 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -10,6 +10,11 @@ .productBrand--quickview { display: flex; justify-content: end; + color: $color-gray8; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; } .carouselGaleryThumbs { @@ -69,6 +74,7 @@ display: block; content: "OUTRAS CORES:"; font-size: 14px; + color: $color-gray7; } } } @@ -83,6 +89,7 @@ display: block; content: "OUTROS TAMANHOS:"; font-size: 14px; + color: $color-gray7; } } } @@ -118,6 +125,7 @@ font-size: 14px; display: block; content: "CALCULAR FRETE:"; + color: $color-gray7; } .shippingContainer :global(.vtex-input-prefix__group) { @@ -130,7 +138,7 @@ width: 49px; height: 49px; position: absolute; - left: 33.4%; + left: 232px; top: 33%; background: $color-black; border: none; @@ -153,7 +161,7 @@ font-size: 0; visibility: hidden; position: absolute; - left: 43%; + left: 302px; top: 36%; } @@ -168,6 +176,7 @@ .shippingTable { border: none; padding: 0; + max-width: 382px; } .shippingTableHead { @@ -176,7 +185,6 @@ .shippingTableRow { position: relative; - margin-bottom: 15px; } .shippingTableHeadDeliveryName { @@ -197,7 +205,7 @@ font-size: 0; position: absolute; top: 5%; - left: 242%; + left: 342%; } .shippingTableHeadDeliveryEstimate::after { @@ -214,7 +222,7 @@ font-size: 0; position: absolute; top: 5%; - left: 138%; + left: 198%; } .shippingTableHeadDeliveryPrice::after { @@ -230,3 +238,25 @@ .shippingTableRadioBtn { display: none; } + +.shippingTableCellDeliveryName, +.shippingTableCellDeliveryEstimate, +.shippingTableCellDeliveryPrice { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: $color-gray9; + padding: 0; + padding-top: 15px; +} + +.shippingTableCellDeliveryEstimate { + position: absolute; + left: 62%; +} + +.shippingTableCellDeliveryPrice { + position: absolute; + left: 36%; +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 4632a04..1f5de96 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); + $color-black: #292929; $color-white: #fff; @@ -9,6 +11,8 @@ $color-gray4: #c4c4c4; $color-gray5: #e5e5e5; $color-gray6: #cccccc; $color-gray7: #929292; +$color-gray8: #575757; +$color-gray9: #afafaf; $color-blue: #4267b2; -- 2.34.1 From 634d0e5a8c3d2531217c4fc0ff2efd8644810eba Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Sun, 29 Jan 2023 15:04:57 -0300 Subject: [PATCH 11/32] refactor: ajusta margem skus --- react/components/PixPrice/PixPrice.tsx | 6 +++++- styles/css/agenciamagma.store-theme.css | 1 + styles/css/vtex.breadcrumb.css | 1 + styles/css/vtex.flex-layout.css | 1 + styles/css/vtex.product-identifier.css | 1 + styles/css/vtex.product-price.css | 1 + styles/css/vtex.product-quantity.css | 1 + styles/css/vtex.store-components.css | 4 ++++ styles/sass/pages/product/vtex.store-components.scss | 4 ++++ 9 files changed, 19 insertions(+), 1 deletion(-) diff --git a/react/components/PixPrice/PixPrice.tsx b/react/components/PixPrice/PixPrice.tsx index 01a9ccd..792763b 100644 --- a/react/components/PixPrice/PixPrice.tsx +++ b/react/components/PixPrice/PixPrice.tsx @@ -3,7 +3,11 @@ import { useProduct } from "vtex.product-context"; import styles from "./styles.module.css"; const PixPrice = () => { - // document.getElementsByClassName("myText").placeholder = "Type name here.."; + const inputCep = document.querySelectorAll(".vtex-address-form-4-x-input"); + + console.log(inputCep); + + // .placeholder = "Type name here.."; const productContextValue = useProduct(); diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 34c4328..a3131a9 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,4 +6,5 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); /* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 6cb3361..5646f60 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -7,6 +7,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); /* Grid breakpoints */ .container { width: 100%; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 8740479..e1a856f 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); /* Grid breakpoints */ .flexRowContent { padding: 0; diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index bed04dd..ab33433 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); /* Grid breakpoints */ .product-identifier--productReference { display: flex; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 1d6ef7b..d87bf9e 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); /* Grid breakpoints */ .listPrice { color: #727273; diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index e05f762..1e87e7e 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -6,6 +6,7 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); /* Grid breakpoints */ .quantitySelectorStepper--addToCartQuantity :global(.vtex-numeric-stepper__plus-button) { border-radius: 0; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 15cd3ad..96baeef 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -259,4 +259,8 @@ .shippingTableCellDeliveryPrice { position: absolute; left: 36%; +} + +.skuSelectorOptionsList { + margin: 0; } \ 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 e8c23b0..5a72739 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -260,3 +260,7 @@ position: absolute; left: 36%; } + +.skuSelectorOptionsList { + margin: 0; +} -- 2.34.1 From c05964b4b9cd35d981d1266cc7d1f58714de081b Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Sun, 29 Jan 2023 21:02:42 -0300 Subject: [PATCH 12/32] =?UTF-8?q?feat:=20adiciona=20descri=C3=A7=C3=A3o=20?= =?UTF-8?q?produto=201440px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 4 + react/components/PixPrice/PixPrice.tsx | 4 +- store/blocks/pdp/product-description.jsonc | 110 ++++++++++++++++++ store/blocks/pdp/product.jsonc | 7 +- styles/css/vtex.tab-layout.css | 57 +++++++++ .../sass/pages/product/vtex.tab-layout.scss | 47 ++++++++ styles/sass/utils/_vars.scss | 1 + 7 files changed, 225 insertions(+), 5 deletions(-) create mode 100644 store/blocks/pdp/product-description.jsonc create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index e62f510..186743f 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -16,3 +16,7 @@ border: none; border-radius: 0; } + +[class*="html--descriptionText"] { + width: 50%; +} diff --git a/react/components/PixPrice/PixPrice.tsx b/react/components/PixPrice/PixPrice.tsx index 792763b..1909a52 100644 --- a/react/components/PixPrice/PixPrice.tsx +++ b/react/components/PixPrice/PixPrice.tsx @@ -3,9 +3,9 @@ import { useProduct } from "vtex.product-context"; import styles from "./styles.module.css"; const PixPrice = () => { - const inputCep = document.querySelectorAll(".vtex-address-form-4-x-input"); + // const inputCep = document.querySelectorAll(".vtex-address-form-4-x-input"); - console.log(inputCep); + // console.log(inputCep); // .placeholder = "Type name here.."; diff --git a/store/blocks/pdp/product-description.jsonc b/store/blocks/pdp/product-description.jsonc new file mode 100644 index 0000000..eddb3cf --- /dev/null +++ b/store/blocks/pdp/product-description.jsonc @@ -0,0 +1,110 @@ +{ + "tab-layout#productPage": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description", + "defaultActiveTabId": "description1" + } + }, + "tab-list#description": { + "children": [ + "tab-list.item#description1", + "tab-list.item#description2", + "tab-list.item#description3", + "tab-list.item#description4", + "tab-list.item#description5" + ] + }, + "tab-list.item#description1": { + "props": { + "tabId": "description1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#description2": { + "props": { + "tabId": "description2", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#description3": { + "props": { + "tabId": "description3", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#description4": { + "props": { + "tabId": "description4", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#description5": { + "props": { + "tabId": "description5", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-content#description": { + "children": [ + "tab-content.item#description1", + "tab-content.item#description2", + "tab-content.item#description3", + "tab-content.item#description4", + "tab-content.item#description5" + ] + }, + "tab-content.item#description1": { + "children": ["html#descriptionImage", "html#descriptionText"], + "props": { + "tabId": "description1" + } + }, + "tab-content.item#description2": { + "children": ["html#descriptionImage", "html#descriptionText"], + "props": { + "tabId": "description2" + } + }, + "tab-content.item#description3": { + "children": ["html#descriptionImage", "html#descriptionText"], + "props": { + "tabId": "description3" + } + }, + "tab-content.item#description4": { + "children": ["html#descriptionImage", "html#descriptionText"], + "props": { + "tabId": "description4" + } + }, + "tab-content.item#description5": { + "children": ["html#descriptionImage", "html#descriptionText"], + "props": { + "tabId": "description5" + } + }, + "html#descriptionImage": { + "props": { + "blockClass": "descriptionImage" + }, + "children": ["product-images#description"] + }, + "html#descriptionText": { + "props": { + "blockClass": "descriptionText" + }, + "children": ["product-description"] + }, + "product-images#description": { + "props": { + "displayMode": "first-image", + "zoomMode": "disabled" + } + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0b03d0c..d0e2bbf 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,9 +3,10 @@ "children": [ "html#breadcrumb", "flex-layout.row#product-container", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", + // "flex-layout.row#description", + "tab-layout#productPage", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", "shelf.relatedProducts", "product-questions-and-answers" ] diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..58dbc7d --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,57 @@ +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* Grid breakpoints */ +.container--description { + margin-top: 16px; +} + +.contentItem { + display: flex; + justify-content: center; + gap: 32px; + margin-top: 32px; +} + +.listContainer { + display: flex; + justify-content: space-evenly; + border-bottom: 1px solid #bfbfbf; +} + +.listItem { + padding-top: 0; + padding-bottom: 0; + margin: 0; +} + +.listItem :global(.vtex-button) { + border: none; + background: transparent; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #bfbfbf; + text-transform: capitalize; + margin: 0; +} + +.listItemActive :global(.vtex-button) { + border: none; + background: transparent; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #292929; + border-bottom: 2px solid #292929; + border-radius: 0; + text-transform: capitalize; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss new file mode 100644 index 0000000..24a8c41 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,47 @@ +.container--description { + margin-top: 16px; +} + +.contentItem { + display: flex; + justify-content: center; + gap: 32px; + margin-top: 32px; +} + +.listContainer { + display: flex; + justify-content: space-evenly; + border-bottom: 1px solid $color-gray10; +} + +.listItem { + padding-top: 0; + padding-bottom: 0; + margin: 0; +} + +.listItem :global(.vtex-button) { + border: none; + background: transparent; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: $color-gray10; + text-transform: capitalize; + margin: 0; +} + +.listItemActive :global(.vtex-button) { + border: none; + background: transparent; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: $color-black; + border-bottom: 2px solid $color-black; + border-radius: 0; + text-transform: capitalize; +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 1f5de96..0dd6147 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -13,6 +13,7 @@ $color-gray6: #cccccc; $color-gray7: #929292; $color-gray8: #575757; $color-gray9: #afafaf; +$color-gray10: #bfbfbf; $color-blue: #4267b2; -- 2.34.1 From ed41362db8a6ba1740a50314be8e05bf92343bb2 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Mon, 30 Jan 2023 09:35:29 -0300 Subject: [PATCH 13/32] =?UTF-8?q?feat:=20adiciona=20espa=C3=A7amento=20lat?= =?UTF-8?q?eral=20descri=C3=A7=C3=A3o=20produto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 4 ++++ react/components/PixPrice/PixPrice.tsx | 8 +++++--- store/blocks/pdp/product-description.jsonc | 8 +++++++- store/blocks/pdp/product.jsonc | 2 +- styles/css/vtex.breadcrumb.css | 2 +- styles/sass/pages/product/vtex.breadcrumb.scss | 2 +- 6 files changed, 19 insertions(+), 7 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 186743f..87194e8 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -20,3 +20,7 @@ [class*="html--descriptionText"] { width: 50%; } + +[class*="html--productDescription"] { + padding: 0 40px; +} diff --git a/react/components/PixPrice/PixPrice.tsx b/react/components/PixPrice/PixPrice.tsx index 1909a52..9336129 100644 --- a/react/components/PixPrice/PixPrice.tsx +++ b/react/components/PixPrice/PixPrice.tsx @@ -3,11 +3,13 @@ import { useProduct } from "vtex.product-context"; import styles from "./styles.module.css"; const PixPrice = () => { - // const inputCep = document.querySelectorAll(".vtex-address-form-4-x-input"); + // useEffect(() => { + // const inputCep = document.querySelectorAll(".vtex-address-form-4-x-input"); - // console.log(inputCep); + // // inputCep.setAttribute('placeholder', 'Digite seu CEP'); - // .placeholder = "Type name here.."; + // console.log(inputCep); + // }); const productContextValue = useProduct(); diff --git a/store/blocks/pdp/product-description.jsonc b/store/blocks/pdp/product-description.jsonc index eddb3cf..ee7f091 100644 --- a/store/blocks/pdp/product-description.jsonc +++ b/store/blocks/pdp/product-description.jsonc @@ -1,5 +1,11 @@ { - "tab-layout#productPage": { + "html#productDescription": { + "props": { + "blockClass": "productDescription" + }, + "children": ["tab-layout#productDescription"] + }, + "tab-layout#productDescription": { "children": ["tab-list#description", "tab-content#description"], "props": { "blockClass": "description", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index d0e2bbf..43b1702 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,7 +4,7 @@ "html#breadcrumb", "flex-layout.row#product-container", // "flex-layout.row#description", - "tab-layout#productPage", + "html#productDescription", // "flex-layout.row#specifications-title", // "product-specification-group#table", "shelf.relatedProducts", diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 5646f60..c787889 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -31,7 +31,7 @@ content: "Home"; font-size: 16px; position: absolute; - top: 20%; + top: 17%; } .link--1 { diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 6a94c37..5881ba1 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -20,7 +20,7 @@ content: "Home"; font-size: 16px; position: absolute; - top: 20%; + top: 17%; } .link--1 { -- 2.34.1 From 2fb64c583a71f7d378c6b7d86fa155f3906a1aa4 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Mon, 30 Jan 2023 11:44:56 -0300 Subject: [PATCH 14/32] feat: substitui ponto por virgula valor pix --- react/components/PixPrice/PixPrice.tsx | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/react/components/PixPrice/PixPrice.tsx b/react/components/PixPrice/PixPrice.tsx index 9336129..0dae1c6 100644 --- a/react/components/PixPrice/PixPrice.tsx +++ b/react/components/PixPrice/PixPrice.tsx @@ -1,15 +1,15 @@ -import React from "react"; +import React, { useEffect } from "react"; import { useProduct } from "vtex.product-context"; import styles from "./styles.module.css"; const PixPrice = () => { - // useEffect(() => { - // const inputCep = document.querySelectorAll(".vtex-address-form-4-x-input"); + useEffect(() => { + const inputCep = document.querySelectorAll(".vtex-address-form-4-x-input"); - // // inputCep.setAttribute('placeholder', 'Digite seu CEP'); + // inputCep.setAttribute('placeholder', 'Digite seu CEP'); - // console.log(inputCep); - // }); + console.log(inputCep); + }); const productContextValue = useProduct(); @@ -18,7 +18,7 @@ const PixPrice = () => { const descount = (Number(productPrice) * 10) / 100; - const total = Number(productPrice) - Number(descount.toFixed(2)); + const total = Number(productPrice) - Number(descount); return (

@@ -30,7 +30,9 @@ const PixPrice = () => { />
-

R$ {total.toFixed(2)}

+

+ R$ {total.toFixed(2).replace(".", ",")} +

10 % de desconto

-- 2.34.1 From 236fabddf66d0345b299a59484aee157b85219ff Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Mon, 30 Jan 2023 16:05:21 -0300 Subject: [PATCH 15/32] feat: adiciona prateleira --- react/components/PixPrice/PixPrice.tsx | 6 +- store/blocks/pdp/product.jsonc | 26 ++++++++- styles/css/vtex.product-summary.css | 58 +++++-------------- styles/css/vtex.rich-text.css | 8 ++- styles/css/vtex.slider-layout.css | 49 ++++++++-------- .../pages/product/vtex.product-summary.scss | 6 ++ styles/sass/pages/product/vtex.rich-text.scss | 6 ++ .../pages/product/vtex.slider-layout.scss | 18 ++++++ 8 files changed, 102 insertions(+), 75 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-summary.scss create mode 100644 styles/sass/pages/product/vtex.rich-text.scss create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss diff --git a/react/components/PixPrice/PixPrice.tsx b/react/components/PixPrice/PixPrice.tsx index 0dae1c6..6d393c4 100644 --- a/react/components/PixPrice/PixPrice.tsx +++ b/react/components/PixPrice/PixPrice.tsx @@ -4,11 +4,9 @@ import styles from "./styles.module.css"; const PixPrice = () => { useEffect(() => { - const inputCep = document.querySelectorAll(".vtex-address-form-4-x-input"); + const inputCep = document.querySelector(".vtex-address-form-4-x-input"); - // inputCep.setAttribute('placeholder', 'Digite seu CEP'); - - console.log(inputCep); + inputCep?.setAttribute("placeholder", "Digite seu CEP"); }); const productContextValue = useProduct(); diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 43b1702..e22ba85 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,7 +7,9 @@ "html#productDescription", // "flex-layout.row#specifications-title", // "product-specification-group#table", - "shelf.relatedProducts", + // "shelf.relatedProducts", + "rich-text#shelfTitle", + "list-context.product-list#shelfProducts", "product-questions-and-answers" ] }, @@ -223,5 +225,27 @@ "Pinterest": false } } + }, + + "rich-text#shelfTitle": { + "props": { + "textAlignment": "CENTER", + "textPosition": "CENTER", + "text": "# Você também pode gostar:", + "blockClass": "shelfTitleText" + } + }, + + "product-summary.shelf#shelfProducts": { + "children": [ + "product-summary-image", + "product-summary-name", + "product-price" + ] + }, + + "list-context.product-list#shelfProducts": { + "blocks": ["product-summary.shelf#shelfProducts"], + "children": ["slider-layout#demo-products"] } } diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..d813a22 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,16 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } -} - -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; -} - -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { - text-align: center; -} - -.image { - border-radius: 0.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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* Grid breakpoints */ +.imageWrapper { + height: 314px; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index d88705b..eb4c5eb 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,7 +6,11 @@ 1800px + : Big desktop */ /* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); /* Grid breakpoints */ -.paragraph--product-installments { - margin: 0; +.headingLevel1--shelfTitleText { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..6b45fd8 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,28 @@ -.sliderLayoutContainer { +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* Grid breakpoints */ +.paginationDotsContainer--shelf { + display: flex; justify-content: center; + align-items: center; } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.paginationDot--shelf { + background: #292929; + width: 10px !important; + height: 10px !important; } -.sliderTrackContainer { - max-width: 100%; -} - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; -} - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; -} - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; -} +.paginationDot--shelf--isActive { + width: 17px !important; + height: 17px !important; + border: 0.5px solid #292929; + background: transparent; +} \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..254a5bc --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,6 @@ +.imageWrapper { + height: 314px; + display: flex; + justify-content: center; + align-items: center; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss new file mode 100644 index 0000000..c025edb --- /dev/null +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,6 @@ +.headingLevel1--shelfTitleText { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss new file mode 100644 index 0000000..3850792 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,18 @@ +.paginationDotsContainer--shelf { + display: flex; + justify-content: center; + align-items: center; +} + +.paginationDot--shelf { + background: $color-black; + width: 10px !important; + height: 10px !important; +} + +.paginationDot--shelf--isActive { + width: 17px !important; + height: 17px !important; + border: 0.5px solid $color-black; + background: transparent; +} -- 2.34.1 From b47d213e265bcc8bfea7ad6b5cb90aed9c087105 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Mon, 30 Jan 2023 16:26:05 -0300 Subject: [PATCH 16/32] feat: adiciona placeholder input cep --- styles/css/vtex.store-components.css | 7 +++++++ styles/sass/pages/product/vtex.store-components.scss | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 96baeef..8c13475 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -263,4 +263,11 @@ .skuSelectorOptionsList { margin: 0; +} + +:global(.vtex-address-form-4-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; } \ 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 5a72739..9266456 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -264,3 +264,10 @@ .skuSelectorOptionsList { margin: 0; } + +:global(.vtex-address-form-4-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; +} -- 2.34.1 From b4b438b6290cdfb533ffdbd27cc8f7c8eae893c7 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Tue, 31 Jan 2023 09:35:17 -0300 Subject: [PATCH 17/32] feat: adiciona estilos prateleira --- store/blocks/pdp/product.jsonc | 6 ++++++ store/blocks/product-price.jsonc | 7 +++++++ styles/css/vtex.product-summary.css | 8 ++++++++ styles/css/vtex.store-components.css | 16 ++++++++++++++++ .../sass/pages/product/vtex.product-summary.scss | 8 ++++++++ .../pages/product/vtex.store-components.scss | 16 ++++++++++++++++ 6 files changed, 61 insertions(+) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index e22ba85..c60b2a1 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -244,6 +244,12 @@ ] }, + "product-summary-image": { + "props": { + "showBadge": false + } + }, + "list-context.product-list#shelfProducts": { "blocks": ["product-summary.shelf#shelfProducts"], "children": ["slider-layout#demo-products"] diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index be7bc35..8b2dfde 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -16,6 +16,13 @@ } }, + "product-selling-price#shelf": { + "props": { + "blockClass": "shelf", + "message": "{sellingPriceValue}" + } + }, + "flex-layout.row#list-price-savings": { "props": { "colGap": 2, diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index d813a22..979c318 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -13,4 +13,12 @@ display: flex; justify-content: center; align-items: center; +} + +.brandName { + font-style: normal; + font-weight: 400; + line-height: 25px; + text-align: center; + color: #292929; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8c13475..412cb80 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -270,4 +270,20 @@ font-weight: 400; font-size: 12px; line-height: 16px; +} + +.price_sellingPriceContainer { + margin-bottom: 32px; +} + +.price_sellingPriceLabel { + display: none; +} + +.price_sellingPrice { + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #292929; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 254a5bc..bf3149b 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -4,3 +4,11 @@ justify-content: center; align-items: center; } + +.brandName { + font-style: normal; + font-weight: 400; + line-height: 25px; + text-align: center; + color: $color-black; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 9266456..7f2cd6e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -271,3 +271,19 @@ font-size: 12px; line-height: 16px; } + +.price_sellingPriceContainer { + margin-bottom: 32px; +} + +.price_sellingPriceLabel { + display: none; +} + +.price_sellingPrice { + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: $color-black; +} -- 2.34.1 From d1992a1fee4e21bbfc399138f54f494de78d516f Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Tue, 31 Jan 2023 15:29:39 -0300 Subject: [PATCH 18/32] feat: adiciona newsletter 1440px --- store/blocks/pdp/product.jsonc | 8 ++ styles/css/vtex.store-components.css | 77 +++++++++++++++++-- styles/css/vtex.styleguide.css | 17 +++- .../pages/product/vtex.store-components.scss | 65 ++++++++++++++++ styles/sass/utils/_vars.scss | 3 +- 5 files changed, 159 insertions(+), 11 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index c60b2a1..058a122 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -10,6 +10,7 @@ // "shelf.relatedProducts", "rich-text#shelfTitle", "list-context.product-list#shelfProducts", + "newsletter#pageProduct", "product-questions-and-answers" ] }, @@ -253,5 +254,12 @@ "list-context.product-list#shelfProducts": { "blocks": ["product-summary.shelf#shelfProducts"], "children": ["slider-layout#demo-products"] + }, + "newsletter#pageProduct": { + "props": { + "blockClass": "pageProduct", + "label": "Assine nossa newsletter", + "placeholder": "Digite seu e-mail" + } } } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 412cb80..744ef10 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -140,7 +140,7 @@ position: absolute; left: 232px; top: 33%; - background: #292929; + background: #000000; border: none; border-radius: 0; } @@ -169,7 +169,7 @@ visibility: visible; content: "Não sei meu CEP"; font-size: 12px; - color: #292929; + color: #000000; text-decoration-line: underline; } @@ -198,7 +198,7 @@ content: "Entrega"; text-transform: uppercase; display: block; - color: #292929; + color: #000000; } .shippingTableHeadDeliveryEstimate { @@ -215,7 +215,7 @@ content: "Prazo"; text-transform: uppercase; display: block; - color: #292929; + color: #000000; } .shippingTableHeadDeliveryPrice { @@ -232,7 +232,7 @@ content: "Frete"; text-transform: uppercase; display: block; - color: #292929; + color: #000000; } .shippingTableRadioBtn { @@ -285,5 +285,70 @@ font-weight: 700; font-size: 24px; line-height: 33px; - color: #292929; + color: #000000; +} + +.newsletter--pageProduct { + height: 175px; + margin: 64px 0 32px 0; + background: #000000; + display: flex; +} + +.container--pageProduct { + padding: 0; + padding-top: 32px; + width: 53.75%; + max-width: unset; +} + +.form--pageProduct { + max-width: unset; +} + +.label--pageProduct { + display: flex; + flex-direction: column; + gap: 16px; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #fff; +} + +.label--pageProduct::after { + content: "Receba ofertas e novidades por e-mail"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} + +.buttonContainer--pageProduct { + padding: 0; +} + +.buttonContainer--pageProduct :global(.vtex-button) { + border: none; + border-bottom: 4px solid #ffffff; + border-radius: 0; + background: transparent; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #fff; +} + +.inputGroup--pageProduct :global(.vtex-input-prefix__group) { + border: none; + border-radius: 0; + border-bottom: 1px solid #ffffff; +} + +.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0; } \ No newline at end of file diff --git a/styles/css/vtex.styleguide.css b/styles/css/vtex.styleguide.css index 11b5662..99c1ef5 100644 --- a/styles/css/vtex.styleguide.css +++ b/styles/css/vtex.styleguide.css @@ -1,4 +1,13 @@ -.hideDecorators { - border-left: 0; - border-right: 0; -} +/* +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 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); +/* Grid breakpoints */ +.input { + border: none; +} \ 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 7f2cd6e..4042018 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -287,3 +287,68 @@ line-height: 33px; color: $color-black; } + +.newsletter--pageProduct { + height: 175px; + margin: 64px 0 32px 0; + background: $color-black; + display: flex; +} + +.container--pageProduct { + padding: 0; + padding-top: 32px; + width: 53.75%; + max-width: unset; +} + +.form--pageProduct { + max-width: unset; +} + +.label--pageProduct { + display: flex; + flex-direction: column; + gap: 16px; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: $color-white; +} + +.label--pageProduct::after { + content: "Receba ofertas e novidades por e-mail"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: $color-gray7; +} + +.buttonContainer--pageProduct { + padding: 0; +} + +.buttonContainer--pageProduct :global(.vtex-button) { + border: none; + border-bottom: 4px solid $color-gray11; + border-radius: 0; + background: transparent; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-white; +} + +.inputGroup--pageProduct :global(.vtex-input-prefix__group) { + border: none; + border-radius: 0; + border-bottom: 1px solid $color-gray11; +} + +.inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0; +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 0dd6147..f867a81 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -1,6 +1,6 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); -$color-black: #292929; +$color-black: #000000; $color-white: #fff; @@ -14,6 +14,7 @@ $color-gray7: #929292; $color-gray8: #575757; $color-gray9: #afafaf; $color-gray10: #bfbfbf; +$color-gray11: #ffffff; $color-blue: #4267b2; -- 2.34.1 From f5ea95ec1aaa3946fd749575ffa63e4b4fd8a0d8 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Tue, 31 Jan 2023 15:58:34 -0300 Subject: [PATCH 19/32] feat: adiciona arrows prateleira --- styles/css/vtex.product-summary.css | 2 +- styles/css/vtex.slider-layout.css | 20 +++++++++++++++++-- .../pages/product/vtex.slider-layout.scss | 18 +++++++++++++++++ 3 files changed, 37 insertions(+), 3 deletions(-) diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 979c318..d3ef137 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -20,5 +20,5 @@ font-weight: 400; line-height: 25px; text-align: center; - color: #292929; + color: #000000; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 6b45fd8..297fd6f 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -15,7 +15,7 @@ } .paginationDot--shelf { - background: #292929; + background: #000000; width: 10px !important; height: 10px !important; } @@ -23,6 +23,22 @@ .paginationDot--shelf--isActive { width: 17px !important; height: 17px !important; - border: 0.5px solid #292929; + border: 0.5px solid #000000; background: transparent; +} + +.sliderLeftArrow--shelf { + visibility: hidden; +} +.sliderLeftArrow--shelf::after { + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioLeftArrow.png"); +} + +.sliderRightArrow--shelf { + visibility: hidden; +} +.sliderRightArrow--shelf::before { + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png"); } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 3850792..940aa5c 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -16,3 +16,21 @@ border: 0.5px solid $color-black; background: transparent; } + +.sliderLeftArrow--shelf { + visibility: hidden; + + &::after { + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioLeftArrow.png"); + } +} + +.sliderRightArrow--shelf { + visibility: hidden; + + &::before { + visibility: visible; + content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png"); + } +} -- 2.34.1 From 6f5edc7f7771278add4025eae4bdba2285bde8ab Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Wed, 1 Feb 2023 10:20:54 -0300 Subject: [PATCH 20/32] feat: adiciona produto indisponivel 1440px --- store/blocks/pdp/product.jsonc | 6 +- styles/css/vtex.product-price.css | 2 +- styles/css/vtex.store-components.css | 97 +++++++++++++++ styles/css/vtex.tab-layout.css | 4 +- .../pages/product/vtex.store-components.scss | 114 ++++++++++++++++++ styles/sass/utils/_vars.scss | 2 + 6 files changed, 219 insertions(+), 6 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 058a122..b116723 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -126,7 +126,7 @@ "product-gifts", // "flex-layout.row#buy-button", "html#buy-button", - "availability-subscriber", + // "availability-subscriber", "shipping-simulator", "share#default" ] @@ -206,8 +206,8 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "sku-selector" ] }, "flex-layout.row#availability": { diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index d87bf9e..d3a0261 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -111,5 +111,5 @@ font-weight: 700; font-size: 25px; line-height: 38px; - color: #292929; + color: #000000; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 744ef10..3168fc3 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -351,4 +351,101 @@ .inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) { background: transparent; padding: 0; +} + +.subscriberContainer { + margin-top: 43px; +} +.subscriberContainer .title { + font-size: 0; + margin: 0; +} +.subscriberContainer .title::after { + content: "Produto indisponível"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .subscribeLabel { + font-size: 0; +} +.subscriberContainer .subscribeLabel::after { + content: "Deseja saber quando estiver disponível?"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #868686; +} + +.form { + width: 100%; + margin: 0; +} +.form .content { + display: grid; + grid-template-areas: "nm em" "sub sub"; + justify-content: inherit; + gap: 8px; + width: 100%; + max-width: 399px; +} +.form .content .inputName { + grid-area: nm; + width: 100%; + margin: 0; +} +.form .content .inputName :global(.vtex-input-prefix__group) { + border: 1px solid #868686; + border-radius: 0; +} +.form .content .inputName :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + color: #989898; +} +.form .content .inputEmail { + grid-area: em; + width: 100%; + margin: 0; +} +.form .content .inputEmail :global(.vtex-input-prefix__group) { + border: 1px solid #868686; + border-radius: 0; +} +.form .content .inputEmail :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + color: #989898; +} +.form .content .submit { + grid-area: sub; + width: 100%; + margin: 0; + margin-top: 7px; +} +.form .content .submit :global(.vtex-button) { + height: 49px; + background: #000000; + border: none; + border-radius: 0; +} +.form .content .submit :global(.vtex-button__label) { + font-size: 0; +} +.form .content .submit :global(.vtex-button__label)::after { + content: "avise-me"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #fff; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 58dbc7d..d8dbad8 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -50,8 +50,8 @@ font-weight: 400; font-size: 18px; line-height: 38px; - color: #292929; - border-bottom: 2px solid #292929; + color: #000000; + border-bottom: 2px solid #000000; border-radius: 0; text-transform: capitalize; } \ 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 4042018..adf25ab 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -352,3 +352,117 @@ background: transparent; padding: 0; } + +.subscriberContainer { + margin-top: 43px; + + .title { + font-size: 0; + margin: 0; + + &::after { + content: "Produto indisponível"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: $color-gray12; + } + } + + .subscribeLabel { + font-size: 0; + + &::after { + content: "Deseja saber quando estiver disponível?"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-gray12; + } + } +} + +.form { + width: 100%; + margin: 0; + + .content { + display: grid; + grid-template-areas: + "nm em" + "sub sub"; + justify-content: inherit; + gap: 8px; + width: 100%; + max-width: 399px; + + .inputName { + grid-area: nm; + width: 100%; + margin: 0; + + & :global(.vtex-input-prefix__group) { + border: 1px solid $color-gray12; + border-radius: 0; + } + + & :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + color: $color-gray13; + } + } + + .inputEmail { + grid-area: em; + width: 100%; + margin: 0; + + & :global(.vtex-input-prefix__group) { + border: 1px solid $color-gray12; + border-radius: 0; + } + + & :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + color: $color-gray13; + } + } + + .submit { + grid-area: sub; + width: 100%; + margin: 0; + margin-top: 7px; + + & :global(.vtex-button) { + height: 49px; + background: $color-black; + border: none; + border-radius: 0; + } + + & :global(.vtex-button__label) { + font-size: 0; + + &::after { + content: "avise-me"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: $color-white; + } + } + } + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index f867a81..b38d9da 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -15,6 +15,8 @@ $color-gray8: #575757; $color-gray9: #afafaf; $color-gray10: #bfbfbf; $color-gray11: #ffffff; +$color-gray12: #868686; +$color-gray13: #989898; $color-blue: #4267b2; -- 2.34.1 From 9cb1beacc2848c17963e97615b848720aa063a0c Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Wed, 1 Feb 2023 10:52:02 -0300 Subject: [PATCH 21/32] refactor: ajusta css prateleira 1440px --- styles/css/vtex.product-summary.css | 4 ++++ styles/css/vtex.slider-layout.css | 13 +++++++++++++ styles/sass/pages/product/vtex.product-summary.scss | 4 ++++ styles/sass/pages/product/vtex.slider-layout.scss | 13 +++++++++++++ 4 files changed, 34 insertions(+) diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index d3ef137..e8bf9af 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -21,4 +21,8 @@ line-height: 25px; text-align: center; color: #000000; +} + +.containerNormal { + max-width: 314px !important; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 297fd6f..2b7ad81 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -27,8 +27,20 @@ background: transparent; } +.sliderLayoutContainer--shelf { + padding-left: 40px !important; + padding-right: 40px !important; + display: flex; + justify-content: center; +} + +.sliderTrackContainer--shelf { + max-width: 1304px; +} + .sliderLeftArrow--shelf { visibility: hidden; + margin-left: 17px; } .sliderLeftArrow--shelf::after { visibility: visible; @@ -37,6 +49,7 @@ .sliderRightArrow--shelf { visibility: hidden; + margin-right: 17px; } .sliderRightArrow--shelf::before { visibility: visible; diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index bf3149b..8fd4851 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -12,3 +12,7 @@ text-align: center; color: $color-black; } + +.containerNormal { + max-width: 314px !important; +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 940aa5c..8812274 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -17,8 +17,20 @@ background: transparent; } +.sliderLayoutContainer--shelf { + padding-left: 40px !important; + padding-right: 40px !important; + display: flex; + justify-content: center; +} + +.sliderTrackContainer--shelf { + max-width: 1304px; +} + .sliderLeftArrow--shelf { visibility: hidden; + margin-left: 17px; &::after { visibility: visible; @@ -28,6 +40,7 @@ .sliderRightArrow--shelf { visibility: hidden; + margin-right: 17px; &::before { visibility: visible; -- 2.34.1 From 9c9fc3fb5a86b91e940af6c2384290ccebe3e723 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Wed, 1 Feb 2023 17:12:55 -0300 Subject: [PATCH 22/32] feat: adiciona css product main 1024px --- store/blocks/pdp/product.jsonc | 15 +++++-- styles/css/vtex.flex-layout.css | 12 ++++- styles/css/vtex.product-identifier.css | 7 +++ styles/css/vtex.slider-layout.css | 2 +- styles/css/vtex.store-components.css | 38 +++++++++++++--- .../sass/pages/product/vtex.flex-layout.scss | 15 ++++++- .../product/vtex.product-identifier.scss | 7 +++ .../pages/product/vtex.slider-layout.scss | 2 +- .../pages/product/vtex.store-components.scss | 44 ++++++++++++++----- 9 files changed, 116 insertions(+), 26 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b116723..cc6c843 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -99,12 +99,11 @@ "product-images": { "props": { "aspectRatio": { - "desktop": "auto", - "phone": "16:9" + "desktop": "auto" + // "phone": "16:9" }, "showNavigationArrows": false, "showPaginationDots": false, - "maxHeight": 664, "thumbnailsOrientation": "horizontal", "thumbnailMaxHeight": 90 } @@ -206,10 +205,18 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "flex-layout.row#availability", + "html#availability", "sku-selector" ] }, + + "html#availability": { + "props": { + "blockClass": "availability" + }, + "children": ["flex-layout.row#availability"] + }, + "flex-layout.row#availability": { "props": { "blockClass": "message-availability" diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index e1a856f..13e2085 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -115,5 +115,15 @@ } .flexRowContent--product-container { - padding: 0 40px; + width: 94.973%; +} + +@media (max-width: 1024px) { + .flexRowContent--product-container .flexRowContent { + flex-direction: column; + } + .flexRowContent--product-container .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index ab33433..878c3fd 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -11,6 +11,7 @@ .product-identifier--productReference { display: flex; justify-content: end; + margin-bottom: 24px; } .product-identifier__value { @@ -18,4 +19,10 @@ font-weight: 400; font-size: 14px; line-height: 19px; +} + +@media (max-width: 1024px) { + .product-identifier--productReference { + justify-content: flex-start; + } } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 2b7ad81..cc09d05 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -35,7 +35,7 @@ } .sliderTrackContainer--shelf { - max-width: 1304px; + width: 95.883%; } .sliderLeftArrow--shelf { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 3168fc3..ef2892a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -13,6 +13,11 @@ background: red; } +.container { + display: flex; + justify-content: center; +} + .productBrand--quickview { display: flex; justify-content: end; @@ -28,7 +33,10 @@ } .productImageTag--main { - max-width: 664px; + width: 100%; + max-height: max-content !important; + max-width: 100%; + object-fit: contain; } .carouselThumbBorder { @@ -85,6 +93,7 @@ .skuSelectorSubcontainer--tamanho { order: 1; + margin: 0; } .skuSelectorSubcontainer--tamanho .skuSelectorName { font-size: 0; @@ -332,7 +341,7 @@ .buttonContainer--pageProduct :global(.vtex-button) { border: none; - border-bottom: 4px solid #ffffff; + border-bottom: 4px solid #cccccc; border-radius: 0; background: transparent; font-style: normal; @@ -345,7 +354,7 @@ .inputGroup--pageProduct :global(.vtex-input-prefix__group) { border: none; border-radius: 0; - border-bottom: 1px solid #ffffff; + border-bottom: 1px solid #cccccc; } .inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) { @@ -389,8 +398,7 @@ grid-template-areas: "nm em" "sub sub"; justify-content: inherit; gap: 8px; - width: 100%; - max-width: 399px; + width: 59.024%; } .form .content .inputName { grid-area: nm; @@ -400,13 +408,13 @@ .form .content .inputName :global(.vtex-input-prefix__group) { border: 1px solid #868686; border-radius: 0; + padding-bottom: 5px; } .form .content .inputName :global(.vtex-styleguide-9-x-input)::placeholder { font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; - display: flex; color: #989898; } .form .content .inputEmail { @@ -417,13 +425,13 @@ .form .content .inputEmail :global(.vtex-input-prefix__group) { border: 1px solid #868686; border-radius: 0; + padding-bottom: 5px; } .form .content .inputEmail :global(.vtex-styleguide-9-x-input)::placeholder { font-style: normal; font-weight: 400; font-size: 12px; line-height: 16px; - display: flex; color: #989898; } .form .content .submit { @@ -437,6 +445,7 @@ background: #000000; border: none; border-radius: 0; + width: 100%; } .form .content .submit :global(.vtex-button__label) { font-size: 0; @@ -448,4 +457,19 @@ font-size: 18px; line-height: 25px; color: #fff; +} + +.productImagesGallerySlide { + width: 100% !important; +} + +@media (max-width: 1024px) { + .productBrand--quickview { + justify-content: flex-start; + margin-top: 32px; + } + .form .content { + width: 100%; + max-width: 100%; + } } \ 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 index 9db07c2..87b9233 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -107,5 +107,18 @@ } .flexRowContent--product-container { - padding: 0 40px; + width: 94.973%; +} + +@media (max-width: 1024px) { + .flexRowContent--product-container { + .flexRowContent { + flex-direction: column; + } + + .stretchChildrenWidth { + width: 100% !important; + padding: 0; + } + } } diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index a8d2879..b6b3265 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -1,6 +1,7 @@ .product-identifier--productReference { display: flex; justify-content: end; + margin-bottom: 24px; } .product-identifier__value { @@ -9,3 +10,9 @@ font-size: 14px; line-height: 19px; } + +@media (max-width: 1024px) { + .product-identifier--productReference { + justify-content: flex-start; + } +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 8812274..9019e7c 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -25,7 +25,7 @@ } .sliderTrackContainer--shelf { - max-width: 1304px; + width: 95.883%; } .sliderLeftArrow--shelf { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index adf25ab..fa9c49e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -2,10 +2,10 @@ background: red; } -// .container { -// display: flex; -// justify-content: center; -// } +.container { + display: flex; + justify-content: center; +} .productBrand--quickview { display: flex; @@ -22,7 +22,10 @@ } .productImageTag--main { - max-width: 664px; + width: 100%; + max-height: max-content !important; + max-width: 100%; + object-fit: contain; } .carouselThumbBorder { @@ -81,6 +84,7 @@ .skuSelectorSubcontainer--tamanho { order: 1; + margin: 0; .skuSelectorName { font-size: 0; @@ -332,7 +336,7 @@ .buttonContainer--pageProduct :global(.vtex-button) { border: none; - border-bottom: 4px solid $color-gray11; + border-bottom: 4px solid $color-gray6; border-radius: 0; background: transparent; font-style: normal; @@ -345,7 +349,7 @@ .inputGroup--pageProduct :global(.vtex-input-prefix__group) { border: none; border-radius: 0; - border-bottom: 1px solid $color-gray11; + border-bottom: 1px solid $color-gray6; } .inputGroup--pageProduct :global(.vtex-styleguide-9-x-input) { @@ -395,8 +399,7 @@ "sub sub"; justify-content: inherit; gap: 8px; - width: 100%; - max-width: 399px; + width: 59.024%; .inputName { grid-area: nm; @@ -406,6 +409,7 @@ & :global(.vtex-input-prefix__group) { border: 1px solid $color-gray12; border-radius: 0; + padding-bottom: 5px; } & :global(.vtex-styleguide-9-x-input)::placeholder { @@ -413,7 +417,6 @@ font-weight: 400; font-size: 12px; line-height: 16px; - display: flex; color: $color-gray13; } } @@ -426,6 +429,7 @@ & :global(.vtex-input-prefix__group) { border: 1px solid $color-gray12; border-radius: 0; + padding-bottom: 5px; } & :global(.vtex-styleguide-9-x-input)::placeholder { @@ -433,7 +437,6 @@ font-weight: 400; font-size: 12px; line-height: 16px; - display: flex; color: $color-gray13; } } @@ -449,6 +452,7 @@ background: $color-black; border: none; border-radius: 0; + width: 100%; } & :global(.vtex-button__label) { @@ -466,3 +470,21 @@ } } } + +.productImagesGallerySlide { + width: 100% !important; +} + +@media (max-width: 1024px) { + .productBrand--quickview { + justify-content: flex-start; + margin-top: 32px; + } + + .form { + .content { + width: 100%; + max-width: 100%; + } + } +} -- 2.34.1 From 591cc072b765cbd63d6f51b0d6284e95bd2f0f49 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Thu, 2 Feb 2023 10:00:32 -0300 Subject: [PATCH 23/32] =?UTF-8?q?feat:=20adiciona=20descri=C3=A7=C3=A3o=20?= =?UTF-8?q?1024px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 4 +++ styles/css/vtex.rich-text.css | 6 +++++ styles/css/vtex.tab-layout.css | 22 ++++++++++++++++ styles/sass/pages/product/vtex.rich-text.scss | 6 +++++ .../sass/pages/product/vtex.tab-layout.scss | 26 +++++++++++++++++++ 5 files changed, 64 insertions(+) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 87194e8..0131dd6 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -24,3 +24,7 @@ [class*="html--productDescription"] { padding: 0 40px; } + +[class*="html--descriptionText"] { + width: 100%; +} diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index eb4c5eb..1668279 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -13,4 +13,10 @@ font-weight: 400; font-size: 24px; line-height: 38px; +} + +@media (max-width: 1024px) { + .headingLevel1--shelfTitleText { + margin-top: 32px; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index d8dbad8..102cf7d 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -54,4 +54,26 @@ border-bottom: 2px solid #000000; border-radius: 0; text-transform: capitalize; +} + +@media (max-width: 1024px) { + .listContainer { + flex-direction: column; + border-top: 1px solid #bfbfbf; + } + .listItem :global(.vtex-button) { + display: flex; + width: 100%; + } + .listItem :global(.vtex-button__label) { + padding: 0; + } + .listItemActive :global(.vtex-button) { + border: none; + } + .contentItem { + flex-direction: column; + margin-top: 15px; + gap: 16px; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index c025edb..49f1389 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -4,3 +4,9 @@ font-size: 24px; line-height: 38px; } + +@media (max-width: 1024px) { + .headingLevel1--shelfTitleText { + margin-top: 32px; + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 24a8c41..4014da8 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -45,3 +45,29 @@ border-radius: 0; text-transform: capitalize; } + +@media (max-width: 1024px) { + .listContainer { + flex-direction: column; + border-top: 1px solid $color-gray10; + } + + .listItem :global(.vtex-button) { + display: flex; + width: 100%; + } + + .listItem :global(.vtex-button__label) { + padding: 0; + } + + .listItemActive :global(.vtex-button) { + border: none; + } + + .contentItem { + flex-direction: column; + margin-top: 15px; + gap: 16px; + } +} -- 2.34.1 From 3f1c097836fa928ff01b5ffe5bb4545ccad92cac Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Thu, 2 Feb 2023 10:43:54 -0300 Subject: [PATCH 24/32] feat: adiciona css prateleira e newsletter 1024px --- store/blocks/pdp/product.jsonc | 12 ++++++++++++ styles/css/vtex.flex-layout.css | 3 +++ styles/css/vtex.store-components.css | 7 +++++++ styles/sass/pages/product/vtex.flex-layout.scss | 1 + styles/sass/pages/product/vtex.store-components.scss | 8 ++++++++ 5 files changed, 31 insertions(+) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index cc6c843..0d802e0 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -262,6 +262,18 @@ "blocks": ["product-summary.shelf#shelfProducts"], "children": ["slider-layout#demo-products"] }, + + "slider-layout#demo-products": { + "props": { + "blockClass": "shelf", + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + } + } + }, + "newsletter#pageProduct": { "props": { "blockClass": "pageProduct", diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 13e2085..d48d387 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -119,6 +119,9 @@ } @media (max-width: 1024px) { + .flexRowContent--product-container { + width: 100%; + } .flexRowContent--product-container .flexRowContent { flex-direction: column; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index ef2892a..2d3b657 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -30,6 +30,7 @@ .carouselGaleryThumbs { max-height: 90px; + display: block; } .productImageTag--main { @@ -464,10 +465,16 @@ } @media (max-width: 1024px) { + .container { + padding: 0 40px; + } .productBrand--quickview { justify-content: flex-start; margin-top: 32px; } + .container--pageProduct { + width: 96%; + } .form .content { width: 100%; max-width: 100%; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 87b9233..cbdd8db 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -112,6 +112,7 @@ @media (max-width: 1024px) { .flexRowContent--product-container { + width: 100%; .flexRowContent { flex-direction: column; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index fa9c49e..0c2f72c 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -19,6 +19,7 @@ .carouselGaleryThumbs { max-height: 90px; + display: block; } .productImageTag--main { @@ -476,11 +477,18 @@ } @media (max-width: 1024px) { + .container { + padding: 0 40px; + } .productBrand--quickview { justify-content: flex-start; margin-top: 32px; } + .container--pageProduct { + width: 96%; + } + .form { .content { width: 100%; -- 2.34.1 From a08f527d28e4cf45f9bd1ae481cf7a3165973223 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Thu, 2 Feb 2023 15:43:33 -0300 Subject: [PATCH 25/32] feat: adiciona css 375px --- react/components/Html/styles.css | 22 +++++++- store/blocks/pdp/product-description.jsonc | 5 ++ store/blocks/pdp/product.jsonc | 10 ++-- styles/css/vtex.flex-layout.css | 20 +++++++- styles/css/vtex.product-summary.css | 27 +++++++++- styles/css/vtex.slider-layout.css | 22 ++++++++ styles/css/vtex.store-components.css | 48 +++++++++++++---- .../sass/pages/product/vtex.flex-layout.scss | 36 +++++++++---- .../pages/product/vtex.product-summary.scss | 30 ++++++++++- .../pages/product/vtex.slider-layout.scss | 25 +++++++++ .../pages/product/vtex.store-components.scss | 51 +++++++++++++++---- 11 files changed, 255 insertions(+), 41 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 0131dd6..3f4a754 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -25,6 +25,24 @@ padding: 0 40px; } -[class*="html--descriptionText"] { - width: 100%; +@media (max-width: 1024px) { + [class*="html--buy-button"] { + margin-bottom: 16px; + } + + [class*="html--descriptionText"] { + width: 100%; + } +} + +@media (max-width: 463px) { + [class*="html--buy-button"] { + flex-direction: column; + gap: 0; + } + + [class*="html--buy-button"] :global(.vtex-button) { + height: 74px; + padding: 0 64px; + } } diff --git a/store/blocks/pdp/product-description.jsonc b/store/blocks/pdp/product-description.jsonc index ee7f091..320ddf3 100644 --- a/store/blocks/pdp/product-description.jsonc +++ b/store/blocks/pdp/product-description.jsonc @@ -112,5 +112,10 @@ "displayMode": "first-image", "zoomMode": "disabled" } + }, + "product-description": { + "props": { + "collapseContent": false + } } } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0d802e0..f24a6f2 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -252,11 +252,11 @@ ] }, - "product-summary-image": { - "props": { - "showBadge": false - } - }, + // "product-summary-image": { + // "props": { + // "showBadge": false + // } + // }, "list-context.product-list#shelfProducts": { "blocks": ["product-summary.shelf#shelfProducts"], diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index d48d387..8b17523 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -114,11 +114,29 @@ padding-bottom: 1rem; } +.flexRowContent { + gap: 32px; +} + .flexRowContent--product-container { - width: 94.973%; + width: 94.445%; +} + +.flexRow--product-container :global(.vtex-store-components-3-x-container) { + display: flex; + justify-content: center; + margin: 0; + padding: 0; + max-width: 100%; +} +.flexRow--product-container :global(.vtex-store-components-3-x-container) .stretchChildrenWidth { + padding: 0; } @media (max-width: 1024px) { + .flexRow--product-container :global(.vtex-store-components-3-x-container) { + padding: 0 40px; + } .flexRowContent--product-container { width: 100%; } diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index e8bf9af..093e0b5 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -9,20 +9,45 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); /* Grid breakpoints */ .imageWrapper { - height: 314px; display: flex; justify-content: center; align-items: center; } +.image { + width: 314.4px; + height: 314.4px; +} + .brandName { font-style: normal; font-weight: 400; + font-size: 18px; line-height: 25px; text-align: center; color: #000000; } +.nameContainer { + padding: 16px 0 0 0; +} + .containerNormal { max-width: 314px !important; +} + +@media (max-width: 1024px) { + .brandName { + font-size: 14px; + } + .image { + width: 291.2px; + height: 291.2px; + } +} +@media (min-width: 375px) and (max-width: 768px) { + .image { + width: 124.8px; + height: 124.8px; + } } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index cc09d05..815dddb 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -27,6 +27,11 @@ background: transparent; } +.sliderTrack--shelf { + display: flex; + gap: 16px; +} + .sliderLayoutContainer--shelf { padding-left: 40px !important; padding-right: 40px !important; @@ -54,4 +59,21 @@ .sliderRightArrow--shelf::before { visibility: visible; content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png"); +} + +@media (max-width: 1024px) { + .sliderTrack--shelf { + gap: 12px !important; + } +} +@media (min-width: 375px) and (max-width: 755px) { + .sliderLeftArrow--shelf { + margin-left: 0; + } + .sliderRightArrow--shelf { + margin-right: 0; + } + .sliderTrack--shelf { + gap: 8px !important; + } } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 2d3b657..d8af38a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -13,11 +13,6 @@ background: red; } -.container { - display: flex; - justify-content: center; -} - .productBrand--quickview { display: flex; justify-content: end; @@ -30,6 +25,7 @@ .carouselGaleryThumbs { max-height: 90px; + width: 150%; display: block; } @@ -195,6 +191,7 @@ .shippingTableRow { position: relative; + width: 100%; } .shippingTableHeadDeliveryName { @@ -215,7 +212,7 @@ font-size: 0; position: absolute; top: 5%; - left: 342%; + left: 61%; } .shippingTableHeadDeliveryEstimate::after { @@ -232,7 +229,7 @@ font-size: 0; position: absolute; top: 5%; - left: 198%; + left: 36%; } .shippingTableHeadDeliveryPrice::after { @@ -263,7 +260,7 @@ .shippingTableCellDeliveryEstimate { position: absolute; - left: 62%; + left: 61%; } .shippingTableCellDeliveryPrice { @@ -275,6 +272,10 @@ margin: 0; } +.skuSelectorNameContainer { + margin-bottom: 0; +} + :global(.vtex-address-form-4-x-input)::placeholder { font-style: normal; font-weight: 400; @@ -352,6 +353,10 @@ color: #fff; } +.inputGroup--pageProduct { + display: flex; +} + .inputGroup--pageProduct :global(.vtex-input-prefix__group) { border: none; border-radius: 0; @@ -363,6 +368,10 @@ padding: 0; } +.inputGroup--pageProduct :global(.vtex-input__error) { + margin-top: 8px; +} + .subscriberContainer { margin-top: 43px; } @@ -464,14 +473,19 @@ width: 100% !important; } +:global(.vtex-input__error) { + position: absolute; + margin: 0; +} + @media (max-width: 1024px) { - .container { - padding: 0 40px; - } .productBrand--quickview { justify-content: flex-start; margin-top: 32px; } + .price_sellingPrice { + font-size: 18px; + } .container--pageProduct { width: 96%; } @@ -479,4 +493,16 @@ width: 100%; max-width: 100%; } +} +@media (max-width: 492px) { + .shippingContainer { + margin-bottom: 22px; + } + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + left: 170px; + top: 95%; + } + .shippingTable { + margin-top: 32px; + } } \ 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 index cbdd8db..79d8d4e 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -106,20 +106,38 @@ padding-bottom: 1rem; } +.flexRowContent { + gap: 32px; +} + .flexRowContent--product-container { - width: 94.973%; + width: 94.445%; +} + +.flexRow--product-container :global(.vtex-store-components-3-x-container) { + display: flex; + justify-content: center; + margin: 0; + padding: 0; + max-width: 100%; + + .stretchChildrenWidth { + padding: 0; + } } @media (max-width: 1024px) { + .flexRow--product-container :global(.vtex-store-components-3-x-container) { + padding: 0 40px; + } .flexRowContent--product-container { width: 100%; - .flexRowContent { - flex-direction: column; - } - - .stretchChildrenWidth { - width: 100% !important; - padding: 0; - } + } + .flexRowContent--product-container .flexRowContent { + flex-direction: column; + } + .flexRowContent--product-container .stretchChildrenWidth { + width: 100% !important; + padding: 0; } } diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 8fd4851..8218452 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -1,18 +1,46 @@ .imageWrapper { - height: 314px; + // height: 245px; display: flex; justify-content: center; align-items: center; } +.image { + width: 314.4px; + height: 314.4px; +} + .brandName { font-style: normal; font-weight: 400; + font-size: 18px; line-height: 25px; text-align: center; color: $color-black; } +.nameContainer { + padding: 16px 0 0 0; +} + .containerNormal { max-width: 314px !important; } + +@media (max-width: 1024px) { + .brandName { + font-size: 14px; + } + + .image { + width: 291.2px; + height: 291.2px; + } +} + +@media (min-width: 375px) and (max-width: 768px) { + .image { + width: 124.8px; + height: 124.8px; + } +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 9019e7c..9e3e4e1 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -17,6 +17,11 @@ background: transparent; } +.sliderTrack--shelf { + display: flex; + gap: 16px; +} + .sliderLayoutContainer--shelf { padding-left: 40px !important; padding-right: 40px !important; @@ -47,3 +52,23 @@ content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png"); } } + +@media (max-width: 1024px) { + .sliderTrack--shelf { + gap: 12px !important; + } +} + +@media (min-width: 375px) and (max-width: 755px) { + .sliderLeftArrow--shelf { + margin-left: 0; + } + + .sliderRightArrow--shelf { + margin-right: 0; + } + + .sliderTrack--shelf { + gap: 8px !important; + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 0c2f72c..eeee669 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -2,11 +2,6 @@ background: red; } -.container { - display: flex; - justify-content: center; -} - .productBrand--quickview { display: flex; justify-content: end; @@ -19,6 +14,7 @@ .carouselGaleryThumbs { max-height: 90px; + width: 150%; display: block; } @@ -190,6 +186,7 @@ .shippingTableRow { position: relative; + width: 100%; } .shippingTableHeadDeliveryName { @@ -210,7 +207,7 @@ font-size: 0; position: absolute; top: 5%; - left: 342%; + left: 61%; } .shippingTableHeadDeliveryEstimate::after { @@ -227,7 +224,7 @@ font-size: 0; position: absolute; top: 5%; - left: 198%; + left: 36%; } .shippingTableHeadDeliveryPrice::after { @@ -258,7 +255,7 @@ .shippingTableCellDeliveryEstimate { position: absolute; - left: 62%; + left: 61%; } .shippingTableCellDeliveryPrice { @@ -270,6 +267,10 @@ margin: 0; } +.skuSelectorNameContainer { + margin-bottom: 0; +} + :global(.vtex-address-form-4-x-input)::placeholder { font-style: normal; font-weight: 400; @@ -347,6 +348,10 @@ color: $color-white; } +.inputGroup--pageProduct { + display: flex; +} + .inputGroup--pageProduct :global(.vtex-input-prefix__group) { border: none; border-radius: 0; @@ -358,6 +363,10 @@ padding: 0; } +.inputGroup--pageProduct :global(.vtex-input__error) { + margin-top: 8px; +} + .subscriberContainer { margin-top: 43px; @@ -476,15 +485,21 @@ width: 100% !important; } +:global(.vtex-input__error) { + position: absolute; + margin: 0; +} + @media (max-width: 1024px) { - .container { - padding: 0 40px; - } .productBrand--quickview { justify-content: flex-start; margin-top: 32px; } + .price_sellingPrice { + font-size: 18px; + } + .container--pageProduct { width: 96%; } @@ -496,3 +511,17 @@ } } } + +@media (max-width: 492px) { + .shippingContainer { + margin-bottom: 22px; + } + + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + left: 170px; + top: 95%; + } + .shippingTable { + margin-top: 32px; + } +} -- 2.34.1 From df837f04bf092632b378962e13ab4ff36e7da07f Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Fri, 3 Feb 2023 07:21:02 -0300 Subject: [PATCH 26/32] =?UTF-8?q?refactor:=20altera=20css=20imagem=20descr?= =?UTF-8?q?i=C3=A7=C3=A3o=201440px=201024px?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 8 ++++++++ styles/css/vtex.product-summary.css | 2 ++ styles/css/vtex.slider-layout.css | 6 +++--- .../sass/pages/product/vtex.product-summary.scss | 3 ++- styles/sass/pages/product/vtex.slider-layout.scss | 14 +++++++++++--- 5 files changed, 26 insertions(+), 7 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 3f4a754..4a8df70 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -17,6 +17,10 @@ border-radius: 0; } +[class*="html--descriptionImage"] { + width: 46.471%; +} + [class*="html--descriptionText"] { width: 50%; } @@ -30,6 +34,10 @@ margin-bottom: 16px; } + [class*="html--descriptionImage"] { + width: 100%; + } + [class*="html--descriptionText"] { width: 100%; } diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 093e0b5..594edc1 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -9,6 +9,8 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); /* Grid breakpoints */ .imageWrapper { + height: 100%; + width: 100%; display: flex; justify-content: center; align-items: center; diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 815dddb..d58b060 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -40,12 +40,12 @@ } .sliderTrackContainer--shelf { - width: 95.883%; + width: 100%; } .sliderLeftArrow--shelf { visibility: hidden; - margin-left: 17px; + margin-left: 10px; } .sliderLeftArrow--shelf::after { visibility: visible; @@ -54,7 +54,7 @@ .sliderRightArrow--shelf { visibility: hidden; - margin-right: 17px; + margin-right: 8px; } .sliderRightArrow--shelf::before { visibility: visible; diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 8218452..4f8d227 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -1,5 +1,6 @@ .imageWrapper { - // height: 245px; + height: 100%; + width: 100%; display: flex; justify-content: center; align-items: center; diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 9e3e4e1..d7e1c6a 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -30,12 +30,12 @@ } .sliderTrackContainer--shelf { - width: 95.883%; + width: 100%; } .sliderLeftArrow--shelf { visibility: hidden; - margin-left: 17px; + margin-left: 10px; &::after { visibility: visible; @@ -45,7 +45,7 @@ .sliderRightArrow--shelf { visibility: hidden; - margin-right: 17px; + margin-right: 8px; &::before { visibility: visible; @@ -53,6 +53,14 @@ } } +// .slide--shelf--visible { +// width: 5.1308% !important; +// } + +// .slide--shelf--hidden { +// visibility: hidden; +// } + @media (max-width: 1024px) { .sliderTrack--shelf { gap: 12px !important; -- 2.34.1 From 418a86100d23b07990ced12ec7be62bea663dc40 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Fri, 3 Feb 2023 08:21:49 -0300 Subject: [PATCH 27/32] feat: adiciona css 2560px --- react/components/Html/styles.css | 12 ++++++++++++ store/blocks/pdp/product.jsonc | 9 ++++++++- styles/css/vtex.breadcrumb.css | 6 ++++++ styles/css/vtex.flex-layout.css | 5 +++++ styles/css/vtex.product-summary.css | 6 ++++++ styles/css/vtex.slider-layout.css | 9 +++++++++ styles/css/vtex.store-components.css | 6 ++++++ styles/css/vtex.tab-layout.css | 10 ++++++++++ styles/sass/pages/product/vtex.breadcrumb.scss | 6 ++++++ styles/sass/pages/product/vtex.flex-layout.scss | 6 ++++++ .../sass/pages/product/vtex.product-summary.scss | 7 +++++++ styles/sass/pages/product/vtex.slider-layout.scss | 15 +++++++++------ .../sass/pages/product/vtex.store-components.scss | 7 +++++++ styles/sass/pages/product/vtex.tab-layout.scss | 11 +++++++++++ 14 files changed, 108 insertions(+), 7 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 4a8df70..d0fd5b3 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -27,6 +27,18 @@ [class*="html--productDescription"] { padding: 0 40px; + width: 100%; +} + +[class*="html--shelf"] { + display: flex; + justify-content: center; +} + +@media (min-width: 1921px) { + [class*="html--descriptionImage"] { + width: 47.392%; + } } @media (max-width: 1024px) { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index f24a6f2..00e7240 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -9,7 +9,7 @@ // "product-specification-group#table", // "shelf.relatedProducts", "rich-text#shelfTitle", - "list-context.product-list#shelfProducts", + "html#shelf", "newsletter#pageProduct", "product-questions-and-answers" ] @@ -258,6 +258,13 @@ // } // }, + "html#shelf": { + "props": { + "blockClass": "shelf" + }, + "children": ["list-context.product-list#shelfProducts"] + }, + "list-context.product-list#shelfProducts": { "blocks": ["product-summary.shelf#shelfProducts"], "children": ["slider-layout#demo-products"] diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index c787889..4494087 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -52,4 +52,10 @@ display: block; content: "Sandálias"; font-size: 16px; +} + +@media (min-width: 1921px) { + .container { + max-width: 1840px; + } } \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 8b17523..b104457 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -133,6 +133,11 @@ padding: 0; } +@media (min-width: 1921px) { + .flexRowContent--product-container { + max-width: 1840px; + } +} @media (max-width: 1024px) { .flexRow--product-container :global(.vtex-store-components-3-x-container) { padding: 0 40px; diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 594edc1..3a8da6f 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -38,6 +38,12 @@ max-width: 314px !important; } +@media (min-width: 1921px) { + .image { + width: 434.4px; + height: 434.4px; + } +} @media (max-width: 1024px) { .brandName { font-size: 14px; diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index d58b060..dfbf40f 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -61,6 +61,15 @@ content: url("https://agenciamagma.vtexassets.com/arquivos/rafaelSampaioRightArrow.png"); } +@media (min-width: 1921px) { + .sliderLayoutContainer--shelf { + max-width: 1840px; + } + .sliderTrackContainer--shelf { + width: 100%; + max-width: 1840px; + } +} @media (max-width: 1024px) { .sliderTrack--shelf { gap: 12px !important; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d8af38a..2dd0ffa 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -478,6 +478,12 @@ margin: 0; } +@media (min-width: 1921px) { + .container--pageProduct { + width: 100%; + max-width: 774px; + } +} @media (max-width: 1024px) { .productBrand--quickview { justify-content: flex-start; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 102cf7d..5fc03aa 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -10,6 +10,10 @@ /* Grid breakpoints */ .container--description { margin-top: 16px; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; } .contentItem { @@ -56,6 +60,12 @@ text-transform: capitalize; } +@media (min-width: 1921px) { + .listContainer, + .contentContainer { + max-width: 1840px; + } +} @media (max-width: 1024px) { .listContainer { flex-direction: column; diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 5881ba1..98f2ef1 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -42,3 +42,9 @@ content: "Sandálias"; font-size: 16px; } + +@media (min-width: 1921px) { + .container { + max-width: 1840px; + } +} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 79d8d4e..8f999cb 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -126,6 +126,12 @@ } } +@media (min-width: 1921px) { + .flexRowContent--product-container { + max-width: 1840px; + } +} + @media (max-width: 1024px) { .flexRow--product-container :global(.vtex-store-components-3-x-container) { padding: 0 40px; diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 4f8d227..a98d8da 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -28,6 +28,13 @@ max-width: 314px !important; } +@media (min-width: 1921px) { + .image { + width: 434.4px; + height: 434.4px; + } +} + @media (max-width: 1024px) { .brandName { font-size: 14px; diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index d7e1c6a..a844780 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -53,13 +53,16 @@ } } -// .slide--shelf--visible { -// width: 5.1308% !important; -// } +@media (min-width: 1921px) { + .sliderLayoutContainer--shelf { + max-width: 1840px; + } -// .slide--shelf--hidden { -// visibility: hidden; -// } + .sliderTrackContainer--shelf { + width: 100%; + max-width: 1840px; + } +} @media (max-width: 1024px) { .sliderTrack--shelf { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index eeee669..ce0ac31 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -490,6 +490,13 @@ margin: 0; } +@media (min-width: 1921px) { + .container--pageProduct { + width: 100%; + max-width: 774px; + } +} + @media (max-width: 1024px) { .productBrand--quickview { justify-content: flex-start; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 4014da8..9075fbd 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,5 +1,9 @@ .container--description { margin-top: 16px; + display: flex; + flex-direction: column; + align-items: center; + width: 100%; } .contentItem { @@ -46,6 +50,13 @@ text-transform: capitalize; } +@media (min-width: 1921px) { + .listContainer, + .contentContainer { + max-width: 1840px; + } +} + @media (max-width: 1024px) { .listContainer { flex-direction: column; -- 2.34.1 From 1dec297c58f11c5a44f0e1f62264f6198194eb69 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Fri, 3 Feb 2023 11:19:33 -0300 Subject: [PATCH 28/32] feat: adiciona testid --- react/components/Html/styles.css | 12 +++ react/components/PixPrice/styles.module.css | 1 + store/blocks/minicart.jsonc | 8 ++ store/blocks/pdp/product.jsonc | 83 +++++++++++++++---- styles/css/vtex.product-quantity.css | 4 + styles/css/vtex.product-summary.css | 1 - .../pages/product/vtex.product-quantity.scss | 5 ++ .../pages/product/vtex.product-summary.scss | 1 - 8 files changed, 98 insertions(+), 17 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index d0fd5b3..dcedc6d 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -4,6 +4,14 @@ padding: 0 40px; } +[class*="html--product-quantity"] { + width: 24.335%; +} + +[class*="html--add-to-cart"] { + width: 100%; +} + [class*="html--buy-button"] { display: flex; gap: 10px; @@ -36,6 +44,10 @@ } @media (min-width: 1921px) { + [class*="html--product-quantity"] { + width: 16.712%; + } + [class*="html--descriptionImage"] { width: 47.392%; } diff --git a/react/components/PixPrice/styles.module.css b/react/components/PixPrice/styles.module.css index 0ff58e3..5f5a6d1 100644 --- a/react/components/PixPrice/styles.module.css +++ b/react/components/PixPrice/styles.module.css @@ -7,6 +7,7 @@ .pixPrice-content { display: flex; gap: 26px; + width: 197px; } .pixPrice-img { diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc index 335c267..0caa02a 100644 --- a/store/blocks/minicart.jsonc +++ b/store/blocks/minicart.jsonc @@ -1,4 +1,12 @@ { + "html#add-to-cart": { + "props": { + "testId": "add-to-cart-button", + "blockClass": "add-to-cart" + }, + "children": ["add-to-cart-button#addToCart"] + }, + "add-to-cart-button#addToCart": { "props": { "blockClass": "addToCart", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 00e7240..7e4edfa 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -94,6 +94,13 @@ } }, "flex-layout.row#product-image": { + "children": ["html#product-images"] + }, + "html#product-images": { + "props": { + "testId": "product-images", + "blockClass": "product-images" + }, "children": ["product-images"] }, "product-images": { @@ -120,17 +127,33 @@ "product-rating-summary", "flex-layout.row#selling-price", "product-installments", - "PixPrice", - "sku-selector", + "html#pix", + "html#sku-selector", "product-gifts", // "flex-layout.row#buy-button", "html#buy-button", // "availability-subscriber", - "shipping-simulator", + "html#shipping-simulator", "share#default" ] }, + "html#pix": { + "props": { + "blockClass": "pix", + "testId": "pix-price" + }, + "children": ["PixPrice"] + }, + + "html#shipping-simulator": { + "props": { + "blockClass": "shipping-simulator", + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3 @@ -153,6 +176,14 @@ } }, + "html#sku-selector": { + "props": { + "blockClass": "sku-selector", + "testId": "sku-selector" + }, + "children": ["sku-selector"] + }, + "sku-selector": { "props": { "variationsSpacing": 3 @@ -163,7 +194,7 @@ "props": { "blockClass": "buy-button" }, - "children": ["product-quantity#addToCart", "add-to-cart-button#addToCart"] + "children": ["html#product-quantity", "html#add-to-cart"] }, // "flex-layout.row#buy-button": { @@ -175,12 +206,19 @@ // "children": ["product-quantity#addToCart", "add-to-cart-button#addToCart"] // }, + "html#product-quantity": { + "props": { + "testId": "product-quantity", + "blockClass": "product-quantity" + }, + "children": ["product-quantity#addToCart"] + }, + "product-quantity#addToCart": { "props": { "blockClass": "addToCartQuantity", "showLabel": false, - "size": "large", - "width": "25%" + "size": "large" } }, @@ -243,15 +281,6 @@ "blockClass": "shelfTitleText" } }, - - "product-summary.shelf#shelfProducts": { - "children": [ - "product-summary-image", - "product-summary-name", - "product-price" - ] - }, - // "product-summary-image": { // "props": { // "showBadge": false @@ -267,6 +296,30 @@ "list-context.product-list#shelfProducts": { "blocks": ["product-summary.shelf#shelfProducts"], + "children": ["html#slider-layout"] + }, + + "product-summary.shelf#shelfProducts": { + "children": ["html#product-summary"] + }, + + "html#product-summary": { + "props": { + "blockClass": "product-summary", + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image", + "product-summary-name", + "product-price" + ] + }, + + "html#slider-layout": { + "props": { + "blockClass": "shelf", + "testId": "product-summary-list" + }, "children": ["slider-layout#demo-products"] }, diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 1e87e7e..1a1f06e 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -26,4 +26,8 @@ border: 1px solid #cccccc; border-left: 0; border-right: 0; +} + +.quantitySelectorStepper--addToCartQuantity :global(.vtex-numeric-stepper__input) { + width: 100%; } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 3a8da6f..eec33f5 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -9,7 +9,6 @@ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap%27"); /* Grid breakpoints */ .imageWrapper { - height: 100%; width: 100%; display: flex; justify-content: center; diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 4086ed4..257cdb9 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -20,3 +20,8 @@ border-left: 0; border-right: 0; } + +.quantitySelectorStepper--addToCartQuantity + :global(.vtex-numeric-stepper__input) { + width: 100%; +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index a98d8da..7f396f9 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -1,5 +1,4 @@ .imageWrapper { - height: 100%; width: 100%; display: flex; justify-content: center; -- 2.34.1 From 676dd1e71e03daec820fafae710d8307a31bc885 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Fri, 3 Feb 2023 15:39:27 -0300 Subject: [PATCH 29/32] refactor: ajuste css sku e preteleira --- react/components/Html/styles.css | 20 ++++++++++++------ styles/css/vtex.store-components.css | 19 +++++++++++++++-- .../pages/product/vtex.store-components.scss | 21 +++++++++++++++++-- 3 files changed, 50 insertions(+), 10 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index dcedc6d..7669a87 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -5,7 +5,7 @@ } [class*="html--product-quantity"] { - width: 24.335%; + width: 161.58px; } [class*="html--add-to-cart"] { @@ -38,11 +38,6 @@ width: 100%; } -[class*="html--shelf"] { - display: flex; - justify-content: center; -} - @media (min-width: 1921px) { [class*="html--product-quantity"] { width: 16.712%; @@ -51,9 +46,18 @@ [class*="html--descriptionImage"] { width: 47.392%; } + + [class*="html--shelf"] { + display: flex; + justify-content: center; + } } @media (max-width: 1024px) { + [class*="html--product-quantity"] { + width: 149.91px; + } + [class*="html--buy-button"] { margin-bottom: 16px; } @@ -73,6 +77,10 @@ gap: 0; } + [class*="html--product-quantity"] { + width: 128px; + } + [class*="html--buy-button"] :global(.vtex-button) { height: 74px; padding: 0 64px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 2dd0ffa..e2b36b4 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -53,6 +53,21 @@ height: 40px !important; width: 40px; } +.skuSelectorItem .skuSelectorItemTextValue { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} + +.skuSelectorItem--selected .skuSelectorItemTextValue { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #000000; +} .frameAround { border-radius: 50%; @@ -65,8 +80,8 @@ left: 6px; bottom: 0px; z-index: 2; - width: 28px; - height: 28px; + width: 30px; + height: 33px; } .skuSelectorInternalBox { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index ce0ac31..43c498b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -41,6 +41,23 @@ .skuSelectorItem { height: 40px !important; width: 40px; + .skuSelectorItemTextValue { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #b9b9b999; + } +} + +.skuSelectorItem--selected { + .skuSelectorItemTextValue { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $color-black; + } } .frameAround { @@ -54,8 +71,8 @@ left: 6px; bottom: 0px; z-index: 2; - width: 28px; - height: 28px; + width: 30px; + height: 33px; } .skuSelectorInternalBox { -- 2.34.1 From 0e16209b4da3926bde4e5a09fb7041b98c2e4009 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Fri, 3 Feb 2023 16:03:35 -0300 Subject: [PATCH 30/32] feat: adiciona cor cruz diagonal sku --- styles/css/vtex.store-components.css | 3 +++ styles/sass/pages/product/vtex.store-components.scss | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index e2b36b4..5ed6155 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -61,6 +61,9 @@ color: rgba(185, 185, 185, 0.6); } +.skuSelectorItem--selected .diagonalCross { + color: #000000; +} .skuSelectorItem--selected .skuSelectorItemTextValue { font-style: normal; font-weight: 400; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 43c498b..4386dbe 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -51,6 +51,10 @@ } .skuSelectorItem--selected { + .diagonalCross { + color: $color-black; + } + .skuSelectorItemTextValue { font-style: normal; font-weight: 400; -- 2.34.1 From 31940259cb0f11dd337762c6167ff372eccc1ec2 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Fri, 3 Feb 2023 16:22:11 -0300 Subject: [PATCH 31/32] refactor: ajusta borda sku --- styles/css/vtex.store-components.css | 3 +++ styles/sass/pages/product/vtex.store-components.scss | 4 ++++ 2 files changed, 7 insertions(+) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 5ed6155..24b1cdf 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -64,6 +64,9 @@ .skuSelectorItem--selected .diagonalCross { color: #000000; } +.skuSelectorItem--selected .skuSelectorInternalBox { + border: none; +} .skuSelectorItem--selected .skuSelectorItemTextValue { font-style: normal; font-weight: 400; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4386dbe..0a741c2 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -55,6 +55,10 @@ color: $color-black; } + .skuSelectorInternalBox { + border: none; + } + .skuSelectorItemTextValue { font-style: normal; font-weight: 400; -- 2.34.1 From d5d3fdaa11a7edcb3bd99e56c1846a9852ba3b39 Mon Sep 17 00:00:00 2001 From: Rafael Sampaio Date: Fri, 3 Feb 2023 16:41:43 -0300 Subject: [PATCH 32/32] feat: adiciona testId tab-layout --- store/blocks/pdp/product-description.jsonc | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/store/blocks/pdp/product-description.jsonc b/store/blocks/pdp/product-description.jsonc index 320ddf3..437419b 100644 --- a/store/blocks/pdp/product-description.jsonc +++ b/store/blocks/pdp/product-description.jsonc @@ -1,7 +1,8 @@ { "html#productDescription": { "props": { - "blockClass": "productDescription" + "blockClass": "productDescription", + "testId": "tab-layout" }, "children": ["tab-layout#productDescription"] }, -- 2.34.1