From c97effb187a1b1a2fec5161d6380a37e36903c88 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Fri, 3 Feb 2023 21:50:51 -0300 Subject: [PATCH 01/16] =?UTF-8?q?feat:=20retirada=20prateleira=20antiga=20?= =?UTF-8?q?e=20adicionada=20a=20mais=20atualizada,=20descri=C3=A7=C3=A3o?= =?UTF-8?q?=20do=20produto=20adicionada,=20newsletter=20adicionada?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 160 ++++++++++++++++++++++++++++++++- styles/css/vtex.tab-layout.css | 12 +++ 2 files changed, 168 insertions(+), 4 deletions(-) create mode 100644 styles/css/vtex.tab-layout.css diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..ecf4595 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,10 +3,16 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", + // "flex-layout.row#description", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", + "tab-layout#product", + "list-context.product-list#carousel-list", + // "product-summary.shelf", + // "list-context.product-list", + // "slider-layout", + // "shelf.relatedProducts", + "newsletter", "product-questions-and-answers" ] }, @@ -181,5 +187,151 @@ "Pinterest": true } } + }, + + "tab-layout#product":{ + "children": [ + "tab-list#product", + "tab-content#product" + ], + "props": { + "blockClass": "product", + "defaultActiveTabId": "product1" + } + }, + + "tab-list#product": { + "children": [ + "tab-list.item#product1", + "tab-list.item#product2", + "tab-list.item#product3", + "tab-list.item#product4", + "tab-list.item#product5" + ] + }, + "tab-list.item#product1": { + "props": { + "tabId": "product1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#product2": { + "props": { + "tabId": "product2", + "label": "Descrição" + } + }, + "tab-list.item#product3": { + "props": { + "tabId": "product3", + "label": "Descrição" + } + }, + "tab-list.item#product4": { + "props": { + "tabId": "product4", + "label": "Descrição" + } + }, + "tab-list.item#product5": { + "props": { + "tabId": "product5", + "label": "Descrição" + } + }, + + "tab-content#product": { + "children": [ + "tab-content.item#product1", + "tab-content.item#product2", + "tab-content.item#product3", + "tab-content.item#product4", + "tab-content.item#product5" + ] + }, + "tab-content.item#product1": { + "children": [ + "product-images#description", + "product-description" + ], + "props": { + "tabId": "product1" + } + }, + + "tab-content.item#product2": { + "children": [ + "product-images#description", + "product-description" + ], + "props": { + "tabId": "product2" + } + }, + "tab-content.item#product3": { + "children": [ + "product-images#description", + "product-description" + ], + "props": { + "tabId": "product3" + } + }, + "tab-content.item#product4": { + "children": [ + "product-images#description", + "product-description" + ], + "props": { + "tabId": "product4" + } + }, + "tab-content.item#product5": { + "children": [ + "product-images#description", + "product-description" + ], + "props": { + "tabId": "product5" + } + }, + + "product-images#description": { + "props": { + "displayMode": "first-image", + "blockClass": "description-imagem" + } + }, + + + + + "list-context.product-list#carousel-list": { + "blocks": ["product-summary.shelf#carousel-shelf"], + "children": ["slider-layout#carousel"] + }, + + "product-summary.shelf#carousel-shelf": { + "children": [ + "product-summary-image", + "product-summary-name", + "product-summary-space", + "product-summary-price" + ] + }, + + "slider-layout#carousel": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 1 + }, + "infinite": true, + "showNavigationArrows": "desktopOnly", + "blockClass": "carousel" + } } + } diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..3a575de --- /dev/null +++ b/styles/css/vtex.tab-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 */ +.vtex-button { + background-color: red; +} \ No newline at end of file -- 2.34.1 From 2f56cc39142ab76ad77b282e4e386ac693bbc0e7 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Mon, 6 Feb 2023 10:48:52 -0300 Subject: [PATCH 02/16] =?UTF-8?q?feat:=20descri=C3=A7=C3=A3o=20do=20produt?= =?UTF-8?q?o=20estilizada,=20retirada=20o=20zoom=20da=20imagem,=20algumas?= =?UTF-8?q?=20margens?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 3 +- styles/css/vtex.store-components.css | 7 +++- styles/css/vtex.tab-layout.css | 28 +++++++++++++-- .../pages/product/vtex.store-components.scss | 13 +++++-- .../sass/pages/product/vtex.tab-layout.scss | 35 +++++++++++++++++++ 5 files changed, 80 insertions(+), 6 deletions(-) create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index ecf4595..4c1037c 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -300,7 +300,8 @@ "product-images#description": { "props": { "displayMode": "first-image", - "blockClass": "description-imagem" + "blockClass": "description-imagem", + "zoomFactor": 0 } }, diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..084b54a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,11 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.productDescriptionContainer { + margin: 0 32px; +} + .newsletter { - background: red; + color: #FFFFFF; + background: #000000; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 3a575de..81dcf87 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -7,6 +7,30 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.vtex-button { - background-color: red; +.listContainer { + align-items: center; + margin-bottom: 64px; + justify-content: space-around; + border-bottom: 1px solid #BFBFBF; +} + +.listItem { + margin: 0; + padding: 0; +} +.listItem :global(.vtex-button) { + border-radius: 0; + background-color: #FFFFFF; + color: #BFBFBF; +} + +.listItemActive :global(.vtex-button) { + border: 0; + border-bottom: 1px solid #000000 !important; +} + +.contentItem { + display: flex; + padding: 0px 40px; + margin-bottom: 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 36d0f22..a27bab1 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,12 @@ + +.productDescriptionContainer{ + margin: 0 32px; +} + + + + .newsletter{ - background: red; -} \ No newline at end of file + color: #FFFFFF; + background: #000000; +} 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..7e50f0e --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,35 @@ +.listContainer{ + align-items: center; + margin-bottom: 64px; + justify-content: space-around; + border-bottom: 1px solid #BFBFBF; +} + +.listItem{ + margin: 0; + padding: 0; + :global(.vtex-button){ + border-radius: 0; + background-color: #FFFFFF; + color: #BFBFBF; + } +} + +.listItemActive { + :global(.vtex-button) { + border: 0; + border-bottom: 1px solid #000000 !important; + + } +} + +.contentItem{ + display: flex; + padding: 0px 40px; + margin-bottom: 16px; +} + + + + + -- 2.34.1 From d7c663659bbbe38fe1934bb8893f9d288c3edd9d Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Mon, 6 Feb 2023 15:22:01 -0300 Subject: [PATCH 03/16] =?UTF-8?q?ajustes=20na=20descri=C3=A7=C3=A3o=20do?= =?UTF-8?q?=20produto,=20adi=C3=A7=C3=A3o=20do=20rich=20text=20acima=20do?= =?UTF-8?q?=20carrossel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 21 +++++++++++++++++++ styles/css/vtex.store-components.css | 11 +++++++++- styles/css/vtex.tab-layout.css | 4 ++++ .../pages/product/vtex.store-components.scss | 9 +++++++- .../sass/pages/product/vtex.tab-layout.scss | 4 ++++ 5 files changed, 47 insertions(+), 2 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 4c1037c..376d391 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,6 +7,7 @@ // "flex-layout.row#specifications-title", // "product-specification-group#table", "tab-layout#product", + "rich-text#carrossel-message", "list-context.product-list#carousel-list", // "product-summary.shelf", // "list-context.product-list", @@ -306,6 +307,24 @@ }, + "rich-text#carrossel-message": { + "props": { + "textAlignment": "CENTER", + "textPosition": "CENTER", + "text": "Você tambem pode gostar:", + "blockClass": "carrossel-message" + } + }, + + + + + + + + + + "list-context.product-list#carousel-list": { @@ -335,4 +354,6 @@ } } + + } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 084b54a..7f69f05 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,7 +8,16 @@ /* Media Query M3 */ /* Grid breakpoints */ .productDescriptionContainer { - margin: 0 32px; + width: 43.89%; +} + +.productImagesContainer { + width: 43.89%; + margin-right: 32px; +} + +.productImage { + display: flex; } .newsletter { diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 81dcf87..746e3a9 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -7,6 +7,10 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.container { + padding: 0 40px; +} + .listContainer { align-items: center; margin-bottom: 64px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index a27bab1..bc690e6 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,9 +1,16 @@ .productDescriptionContainer{ - margin: 0 32px; + width: 43.89%; } +.productImagesContainer{ + width: 43.89%; + margin-right: 32px; +} +.productImage{ + display: flex; +} .newsletter{ diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 7e50f0e..fc7c793 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,3 +1,7 @@ +.container{ + padding: 0 40px; +} + .listContainer{ align-items: center; margin-bottom: 64px; -- 2.34.1 From 6505aaea6fecd00a1b15f18c702cef882af50acf Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Wed, 8 Feb 2023 16:22:43 -0300 Subject: [PATCH 04/16] =?UTF-8?q?feat:=20ajustes=20na=20prateleira=20de=20?= =?UTF-8?q?produtos,=20ajustes=20na=20newsletter,=20come=C3=A7ando=20a=20e?= =?UTF-8?q?stilizar=20o=20produto=20individual?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manifest.json | 1 - store/blocks/pdp/product.jsonc | 42 ++++--- styles/css/vtex.flex-layout.css | 110 +++--------------- styles/css/vtex.product-identifier.css | 15 ++- ...tore-theme.css => vtex.product-sumary.css} | 9 +- styles/css/vtex.product-summary.css | 53 +++------ styles/css/vtex.slider-layout.css | 47 ++++---- styles/css/vtex.store-components.css | 17 ++- .../product/agenciamagma.store-theme.scss | 8 -- .../sass/pages/product/vtex.flex-layout.scss | 13 +++ .../pages/product/vtex.product-summary.scss | 10 ++ .../pages/product/vtex.slider-layout.scss | 24 ++++ .../pages/product/vtex.store-components.scss | 19 ++- 13 files changed, 172 insertions(+), 196 deletions(-) rename styles/css/{agenciamagma.store-theme.css => vtex.product-sumary.css} (69%) delete mode 100644 styles/sass/pages/product/agenciamagma.store-theme.scss create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss create mode 100644 styles/sass/pages/product/vtex.product-summary.scss create mode 100644 styles/sass/pages/product/vtex.slider-layout.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/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 376d391..751300f 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -13,7 +13,7 @@ // "list-context.product-list", // "slider-layout", // "shelf.relatedProducts", - "newsletter", + "newsletter#footer", "product-questions-and-answers" ] }, @@ -85,7 +85,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "45%", "rowGap": 0 } }, @@ -98,9 +98,15 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "thumbnailsOrientation": "horizontal", + "showNavigationArrows": false, + "showPaginationDots": false, + "displayThumbnailsArrows": false, + "blockClass": "produto-carrossel" } }, + + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, @@ -108,12 +114,12 @@ }, "children": [ "flex-layout.row#product-name", - "product-rating-summary", - "flex-layout.row#list-price-savings", + // "product-rating-summary", + + // "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", "product-installments", - "product-separator", - "product-identifier.product", + // "product-separator", "sku-selector", "product-quantity", "product-assembly-options", @@ -127,9 +133,10 @@ "flex-layout.row#product-name": { "props": { - "marginBottom": 3 + "marginBottom": 3, + "blockClass": "identifier" }, - "children": ["vtex.store-components:product-name"] + "children": ["vtex.store-components:product-name", "product-identifier.product"] }, "sku-selector": { @@ -319,14 +326,6 @@ - - - - - - - - "list-context.product-list#carousel-list": { "blocks": ["product-summary.shelf#carousel-shelf"], "children": ["slider-layout#carousel"] @@ -352,8 +351,15 @@ "showNavigationArrows": "desktopOnly", "blockClass": "carousel" } + }, + + + "newsletter#footer": { + "props": { + "label": "Assine nossa newsletter", + "placeholder": "Digite seu e-mail" + } } - } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..f505c51 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,18 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.stretchChildrenWidth { + padding: 0; } -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; - } -} - -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; - } -} - -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; -} - -.flexRowContent--main-header { - background-color: #f0f0f0; -} - -.flexRowContent--main-header-mobile { - align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; -} - -.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { - color: #ffffff; - font-size: 14px; -} - -.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { - color: #727273; - font-size: 14px; -} - -.flexRow--deals { - background-color: #0F3E99; - padding: 14px 0px; -} - -.flexRow--deals .stretchChildrenWidth { - align-items: center; -} - -.flexRow--deals .flexCol { - align-items: center; - margin-bottom: 5px; - padding-top: 5px; -} - -.flexCol--filterCol { - max-width: 500px; - min-width: 230px; -} - -.flexCol--productCountCol { - align-items: flex-start; -} - -.flexCol--orderByCol { - align-items: flex-end; -} - -.flexCol--orderByMobileCol { - width: 42%; -} - -.flexCol--filterMobileCol { - width: 38%; -} - -.flexRow--quickviewMainRow { +.flexRowContent--identifier { 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; -} + flex-direction: column; + align-items: end; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..c37b733 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,12 @@ -.product-identifier--productReference { - margin-bottom: 1rem; -} +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.product-identifier { + text-align: end; +} \ No newline at end of file diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/vtex.product-sumary.css similarity index 69% rename from styles/css/agenciamagma.store-theme.css rename to styles/css/vtex.product-sumary.css index 5e37ba5..9b58164 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/vtex.product-sumary.css @@ -7,10 +7,7 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; +.element { + align-items: center; + text-align: center; } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..34860b0 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,17 @@ -.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 { +/* +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 */ +.element { + align-items: center; text-align: center; } -.image { - border-radius: 0.25rem; -} +.imageContainer { + height: 60%; +} \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..c98799e 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,30 @@ +/* +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 */ +.slideChildrenContainer { + text-align: center; + margin-bottom: 67px; +} + .sliderLayoutContainer { - justify-content: center; + padding: 0 40px; } -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.slide { + background-color: #FFFFFF; } -.sliderTrackContainer { - max-width: 100%; +.paginationDot { + background-color: #000000; } -.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--carousel--isActive { + background-color: #Fff; + border: 0.5px solid #000000; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 7f69f05..567fbca 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,19 +7,34 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.container { + padding: 0 40px; +} + +.productNameContainer { + text-align: end; +} + .productDescriptionContainer { width: 43.89%; } .productImagesContainer { width: 43.89%; - margin-right: 32px; } .productImage { display: flex; } +.produto-carrossel .swiper-wrapper { + gap: 16px; +} + +.discountInsideContainer { + display: none; +} + .newsletter { color: #FFFFFF; background: #000000; diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss deleted file mode 100644 index ea7d5b9..0000000 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ /dev/null @@ -1,8 +0,0 @@ -.html { - background-color: red; -} - -.html--pdp-breadcrumb { - background-color: green; -} - 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..40b284f --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,13 @@ + +.stretchChildrenWidth{ + padding: 0; +} + + +.flexRowContent--identifier{ + display: flex; + flex-direction: column; + align-items: end; + +} + 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..83a4fab --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,10 @@ + +.element{ + align-items: center; + text-align: center; +} + +.imageContainer{ + height: 60%; +} + 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..1cf414b --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,24 @@ + +.slideChildrenContainer{ + text-align: center; + margin-bottom: 67px; +} + +.sliderLayoutContainer{ + padding: 0 40px; +} + +.slide{ + background-color: #FFFFFF; +} + +.paginationDot{ + background-color: #000000; +} + +.paginationDot--carousel--isActive{ + background-color: #Fff; + border: 0.5px solid #000000; +} + + diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index bc690e6..42d6696 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,17 +1,34 @@ +.container { + padding: 0 40px; +} + +.productNameContainer{ + text-align: end; +} + .productDescriptionContainer{ width: 43.89%; } .productImagesContainer{ width: 43.89%; - margin-right: 32px; } .productImage{ display: flex; } +.produto-carrossel{ + .swiper-wrapper{ + gap: 16px + } +} + + +.discountInsideContainer{ + display: none; +} .newsletter{ color: #FFFFFF; -- 2.34.1 From 1008540a7730178c8897ccb3afbb6484b7b50419 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Thu, 9 Feb 2023 14:22:11 -0300 Subject: [PATCH 05/16] feat: Componente customizado feito e implementado, 3 testes ids adicionados --- react/Pix.ts | 4 ++++ react/components/Pix/Pix.tsx | 32 +++++++++++++++++++++++++ react/components/Pix/pix-ramon.svg | 38 ++++++++++++++++++++++++++++++ store/blocks/pdp/product.jsonc | 26 ++++++++++++++++++-- 4 files changed, 98 insertions(+), 2 deletions(-) create mode 100644 react/Pix.ts create mode 100644 react/components/Pix/Pix.tsx create mode 100644 react/components/Pix/pix-ramon.svg diff --git a/react/Pix.ts b/react/Pix.ts new file mode 100644 index 0000000..06f972d --- /dev/null +++ b/react/Pix.ts @@ -0,0 +1,4 @@ +import Pix from "./components/Pix/Pix"; + + +export default Pix; diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx new file mode 100644 index 0000000..4265913 --- /dev/null +++ b/react/components/Pix/Pix.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; + +const Pix = () => { + const productContextValue = useProduct()?.product?.priceRange?.sellingPrice + ?.highPrice; + + return ( + <> +
+ Pix +
+

+ {`R$ ${(productContextValue! - productContextValue! * 0.1) + .toFixed(2) + .replace(".", ",")}` + } +

+

+ 10% de desconto +

+
+
+ + + + ); +}; + +export default Pix; + + diff --git a/react/components/Pix/pix-ramon.svg b/react/components/Pix/pix-ramon.svg new file mode 100644 index 0000000..a132f66 --- /dev/null +++ b/react/components/Pix/pix-ramon.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 751300f..c47a827 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -117,8 +117,9 @@ // "product-rating-summary", // "flex-layout.row#list-price-savings", - "flex-layout.row#selling-price", - "product-installments", + "html#price", + "html#installments", + "html#pix", // "product-separator", "sku-selector", "product-quantity", @@ -131,6 +132,27 @@ ] }, + "html#installments": { + "props": { + "testId": "product-installments" + }, + "children": ["product-installments"] + }, + + "html#pix": { + "props": { + "testId": "pix-price" + }, + "children": ["Pix"] + }, + + "html#price": { + "props": { + "testId": "product-price" + }, + "children": ["flex-layout.row#selling-price"] + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3, -- 2.34.1 From 6db84d3a85bffd0ff2c6ec8f974bfa404bc89c56 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Thu, 9 Feb 2023 15:59:16 -0300 Subject: [PATCH 06/16] feat: infertace do pix adicionada --- store/interfaces.json | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..f91d537 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,9 @@ "html": { "component": "html", "composition": "children" + }, + "Pix": { + "component": "Pix" } } + -- 2.34.1 From 9dc80539b15713713806cffd1a3a6ff13db21c99 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Fri, 10 Feb 2023 08:38:52 -0300 Subject: [PATCH 07/16] feat: sccs atualizado com novas classes, mais organizado. --- store/blocks/pdp/product.jsonc | 3 +- styles/css/vtex.flex-layout.css | 5 + styles/css/vtex.product-quantity.css | 12 + styles/css/vtex.rich-text.css | 3 +- styles/css/vtex.store-components.css | 300 +++++++++++++++++- styles/css/vtex.tab-layout.css | 1 - .../sass/pages/product/vtex.flex-layout.scss | 6 +- .../pages/product/vtex.product-quantity.scss | 5 + styles/sass/pages/product/vtex.rich-text.scss | 2 + .../pages/product/vtex.store-components.scss | 274 ++++++++++++++-- .../sass/pages/product/vtex.tab-layout.scss | 6 +- 11 files changed, 570 insertions(+), 47 deletions(-) create mode 100644 styles/css/vtex.product-quantity.css 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 c47a827..252cd98 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -122,7 +122,6 @@ "html#pix", // "product-separator", "sku-selector", - "product-quantity", "product-assembly-options", "product-gifts", "flex-layout.row#buy-button", @@ -173,7 +172,7 @@ "marginTop": 4, "marginBottom": 7 }, - "children": ["add-to-cart-button"] + "children": ["product-quantity", "add-to-cart-button"] }, "flex-layout.row#product-availability": { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index f505c51..9970461 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -11,6 +11,11 @@ padding: 0; } +.flexRowContent { + margin: 0; + padding: 0; +} + .flexRowContent--identifier { display: flex; flex-direction: column; diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css new file mode 100644 index 0000000..e0f5ca1 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,12 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.quantitySelectorContainer .quantitySelectorTitle { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..e484bd9 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,5 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap%22"); \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 567fbca..7b3b0a0 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,35 +7,301 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.container { - padding: 0 40px; -} - .productNameContainer { - text-align: end; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #292929; } -.productDescriptionContainer { - width: 43.89%; +.productNameContainer--quickview { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; } -.productImagesContainer { - width: 43.89%; -} - -.productImage { +.skuSelectorContainer { display: flex; + flex-direction: column-reverse; } -.produto-carrossel .swiper-wrapper { - gap: 16px; +.skuSelectorContainer .frameAround { + border-radius: 50%; + border-color: #000; + z-index: 2; } -.discountInsideContainer { +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; +} + +.skuSelectorItem { + height: 50px; + width: 50px; +} + +.shippingContainer { + display: flex; + position: relative; +} + +.shippingContainer :global(.vtex-button) { + background-color: #000; + width: 70px; + height: 45px; + color: #fff; + margin-top: 23px; + margin-left: -4px; +} + +.shippingContainer :global(.vtex-input__label) { + font-size: 0px; +} + +.shippingContainer :global(.vtex-input__label)::before { + content: "calcular frete:"; + font-size: 14px; + text-transform: uppercase; +} + +.shippingContainer :global(.vtex-button__label) { + font-size: 0px; +} + +.shippingContainer :global(.vtex-button__label)::after { + content: "OK"; + font-size: 14px; +} + +.shippingContainer :global(.vtex-address-form__postalCode) { + width: 280px; +} + +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + color: #000; + position: absolute; + right: 32px; + top: 25px; +} + +.shareContainer { display: none; } +.shippingTable { + border: none; + bottom: 110px; + position: relative; + font-size: 14px; + font-family: "Open Sans", sans-serif; + text-transform: uppercase; +} + +.shippingTable .shippingTableRadioBtn { + display: none; +} + +.shippingTable .shippingTableHead { + display: contents; +} + +.shippingTable .shippingTableCell { + padding: 7px 0; + font-family: "Open Sans", sans-serif; + color: #afafaf; +} + +.shippingTable .shippingTableRow { + text-align: left; +} + +.shippingTable .shippingTableRadioBtn { + display: none; +} + +.shippingTable .shippingTableHeadDeliveryName, +.shippingTable .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableHeadDeliveryPrice { + font-weight: 400; +} + +.content--imagem-descricao { + margin-right: 16px; + width: 50%; +} + +.productDescriptionContainer { + width: 50%; + margin-left: 16px; +} + +.carouselGaleryThumbs { + height: 200px; +} + +.carouselGaleryThumbs .productImagesThumb { + margin: 0px 10px; +} + +.carouselGaleryThumbs .thumbImg { + border-radius: 8px; +} + +.discountInsideContainer, +.installmentsPrice { + display: none; +} + +.sellingPriceLabel { + display: none; +} + +.sellingPrice { + font-weight: bolder; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} + +.skuSelectorContainer .frameAround { + border-radius: 50%; + border-color: #000; + z-index: 2; + margin: 2px; +} + +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; +} + +.skuSelectorContainer .skuSelectorItemTextValue { + padding: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} + +.skuSelectorContainer .diagonalCross { + background-image: linear-gradient(to top left, transparent 44%, rgb(213, 213, 213) 48%, currentColor 48%, currentColor 52%, transparent 52%); + z-index: 2; + width: 32px; + height: 33px; + position: absolute; + top: 4px; + left: 4px; +} + +.skuSelectorItem { + height: 40px; + width: 40px; + position: relative; +} + +.skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0px; +} + +.skuSelectorSubcontainer--tamanho .skuSelectorName::after { + content: "OUTROS TAMANHOS:"; + font-size: 14px; + color: #989898; +} + +.skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0px; +} + +.skuSelectorSubcontainer--cor .skuSelectorName::after { + content: "OUTRAS CORES:"; + font-size: 14px; + color: #B9B9B9; +} + +.productImagesContainer { + width: 45%; +} + .newsletter { - color: #FFFFFF; - background: #000000; + background: #000; + color: #fff; + margin-top: 50px; + border-bottom: 2px solid #929292; +} + +.newsletter .container { + margin: auto; + padding: 32px; + padding-bottom: 16px; +} + +.newsletter .form { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} + +.newsletter .label { + display: flex; + flex-direction: column; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #ffffff; +} + +.newsletter .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans", sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 25px; + letter-spacing: 0em; + text-align: center; + color: #929292; + margin: 16px; +} + +.newsletter .inputGroup { + width: 774px; +} + +.newsletter .inputGroup :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px solid #929292; + border-radius: 0; +} + +.newsletter .inputGroup :global(.vtex-styleguide-9-x-input) { + background-color: #000; +} + +.newsletter .inputGroup .buttonContainer { + padding: 0; +} + +.newsletter .inputGroup .buttonContainer :global(.vtex-button) { + background-color: #000; + border: none; + border-bottom: 2px solid #fff; + border-radius: 0; +} + +.newsletter .inputGroup .buttonContainer :global(.vtex-button):hover { + background-color: #000; + border-bottom: 4px solid #fff; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 746e3a9..770fb6b 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -35,6 +35,5 @@ .contentItem { display: flex; - padding: 0px 40px; margin-bottom: 16px; } \ 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 40b284f..fe8f3bd 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -4,10 +4,14 @@ } +.flexRowContent{ + margin: 0; + padding: 0; +} + .flexRowContent--identifier{ display: flex; flex-direction: column; align-items: end; } - 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..b723602 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,5 @@ +.quantitySelectorContainer { + .quantitySelectorTitle { + display: none; + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..3c1295a 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,2 @@ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap%22"); + diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 42d6696..7df76b6 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,36 +1,268 @@ -.container { - padding: 0 40px; +.productNameContainer { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #292929; } -.productNameContainer{ - text-align: end; +.productNameContainer--quickview { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; } -.productDescriptionContainer{ - width: 43.89%; -} - -.productImagesContainer{ - width: 43.89%; -} - -.productImage{ +.skuSelectorContainer { display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .frameAround { + border-radius: 50%; + border-color: #000; + z-index: 2; +} +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; } -.produto-carrossel{ - .swiper-wrapper{ - gap: 16px - } +.skuSelectorItem { + height: 50px; + width: 50px; } +.shippingContainer { + display: flex; + position: relative; +} +.shippingContainer :global(.vtex-button) { + background-color: #000; + width: 70px; + height: 45px; + color: #fff; + margin-top: 23px; + margin-left: -4px; +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0px; +} -.discountInsideContainer{ +.shippingContainer :global(.vtex-input__label)::before { + content: "calcular frete:"; + font-size: 14px; + text-transform: uppercase; +} +.shippingContainer :global(.vtex-button__label) { + font-size: 0px; +} +.shippingContainer :global(.vtex-button__label)::after { + content: "OK"; + font-size: 14px; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + width: 280px; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + color: #000; + position: absolute; + right: 32px; + top: 25px; +} + +.shareContainer { display: none; } -.newsletter{ - color: #FFFFFF; - background: #000000; +.shippingTable { + border: none; + bottom: 110px; + position: relative; + font-size: 14px; + font-family: "Open Sans", sans-serif; + text-transform: uppercase; +} +.shippingTable .shippingTableRadioBtn { + display: none; +} +.shippingTable .shippingTableHead { + display: contents; +} +.shippingTable .shippingTableCell { + padding: 7px 0; + font-family: "Open Sans", sans-serif; + color: #afafaf; +} +.shippingTable .shippingTableRow { + text-align: left; +} +.shippingTable .shippingTableRadioBtn { + display: none; +} +.shippingTable .shippingTableHeadDeliveryName, +.shippingTable .shippingTableHeadDeliveryEstimate, +.shippingTable .shippingTableHeadDeliveryPrice { + font-weight: 400; +} + +.content--imagem-descricao { + margin-right: 16px; + width: 50%; +} + +.productDescriptionContainer { + width: 50%; + margin-left: 16px; +} + +.carouselGaleryThumbs { + height: 200px; +} +.carouselGaleryThumbs .productImagesThumb { + margin: 0px 10px; +} +.carouselGaleryThumbs .thumbImg { + border-radius: 8px; +} + +.discountInsideContainer, +.installmentsPrice { + display: none; +} + +.sellingPriceLabel { + display: none; +} + +.sellingPrice { + font-weight: bolder; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .frameAround { + border-radius: 50%; + border-color: #000; + z-index: 2; + margin: 2px; +} +.skuSelectorContainer .skuSelectorInternalBox { + border-radius: 50%; +} +.skuSelectorContainer .skuSelectorItemTextValue { + padding: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorContainer .diagonalCross { + background-image: linear-gradient(to top left, transparent 44%, rgb(213, 213, 213) 48%, currentColor 48%, currentColor 52%, transparent 52%); + z-index: 2; + width: 32px; + height: 33px; + position: absolute; + top: 4px; + left: 4px; +} + +.skuSelectorItem { + height: 40px; + width: 40px; + position: relative; +} + +.skuSelectorSubcontainer--tamanho .skuSelectorName { + font-size: 0px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorName::after { + content: "OUTROS TAMANHOS:"; + font-size: 14px; + color: #989898; +} + +.skuSelectorSubcontainer--cor .skuSelectorName { + font-size: 0px; +} +.skuSelectorSubcontainer--cor .skuSelectorName::after { + content: "OUTRAS CORES:"; + font-size: 14px; + color: #B9B9B9; +} + +.productImagesContainer{ + width: 45%; +} + + +.newsletter { + background: #000; + color: #fff; + margin-top: 50px; + border-bottom: 2px solid #929292; +} +.newsletter .container { + margin: auto; + padding: 32px; + padding-bottom: 16px; +} +.newsletter .form { + width: 100%; + display: flex; + flex-direction: column; + align-items: center; +} +.newsletter .label { + display: flex; + flex-direction: column; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #ffffff; +} +.newsletter .label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans", sans-serif; + font-size: 18px; + font-weight: 400; + line-height: 25px; + letter-spacing: 0em; + text-align: center; + color: #929292; + margin: 16px; +} +.newsletter .inputGroup { + width: 774px; +} +.newsletter .inputGroup :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px solid #929292; + border-radius: 0; +} +.newsletter .inputGroup :global(.vtex-styleguide-9-x-input) { + background-color: #000; +} +.newsletter .inputGroup .buttonContainer { + padding: 0; +} +.newsletter .inputGroup .buttonContainer :global(.vtex-button) { + background-color: #000; + border: none; + border-bottom: 2px solid #fff; + border-radius: 0; +} +.newsletter .inputGroup .buttonContainer :global(.vtex-button):hover { + background-color: #000; + border-bottom: 4px solid #fff; } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index fc7c793..c44a9cd 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -19,17 +19,15 @@ } } -.listItemActive { - :global(.vtex-button) { +.listItemActive :global(.vtex-button) { border: 0; border-bottom: 1px solid #000000 !important; } -} + .contentItem{ display: flex; - padding: 0px 40px; margin-bottom: 16px; } -- 2.34.1 From 586a6b9903f5214c24791d2fa2f2aaa7d8feda24 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Fri, 10 Feb 2023 09:05:16 -0300 Subject: [PATCH 08/16] =?UTF-8?q?fix:=20ajuste=20na=20imagem=20da=20descri?= =?UTF-8?q?=C3=A7=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.store-components.css | 4 ++++ styles/sass/pages/product/vtex.store-components.scss | 7 +++++++ 2 files changed, 11 insertions(+) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 7b3b0a0..d07aa15 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -233,6 +233,10 @@ width: 45%; } +.productImageTag--description-imagem { + max-height: 100% !important; +} + .newsletter { background: #000; color: #fff; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 7df76b6..1cb840b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -204,6 +204,11 @@ } +.productImageTag--description-imagem{ + max-height: 100% !important; +} + + .newsletter { background: #000; color: #fff; @@ -266,3 +271,5 @@ background-color: #000; border-bottom: 4px solid #fff; } + + -- 2.34.1 From 5e1daa70b3f801f6d25a064db4a4e18810ee01dd Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Fri, 10 Feb 2023 10:58:38 -0300 Subject: [PATCH 09/16] =?UTF-8?q?fix:=20ajuste=20no=20espa=C3=A7amento=20d?= =?UTF-8?q?as=20arrow=20da=20prateleira?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- styles/css/vtex.slider-layout.css | 5 +++++ styles/sass/pages/product/vtex.slider-layout.scss | 5 +++++ 2 files changed, 10 insertions(+) diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index c98799e..79ee5ab 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -27,4 +27,9 @@ .paginationDot--carousel--isActive { background-color: #Fff; border: 0.5px solid #000000; +} + +.sliderArrows--carousel { + padding: 0; + margin: 40px; } \ 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 1cf414b..c7409ee 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -21,4 +21,9 @@ border: 0.5px solid #000000; } +.sliderArrows--carousel { + padding: 0; + margin: 40px; + +} -- 2.34.1 From 63ed0972825806adb31a34c50beecb6efeafe2d0 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Fri, 10 Feb 2023 11:22:03 -0300 Subject: [PATCH 10/16] feat: testId add-to-cart-button adicionado --- store/blocks/pdp/product-assembly.jsonc | 2 +- store/blocks/pdp/product.jsonc | 24 ++++++++++++++++-------- 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 43ad04e..726e24a 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -3,7 +3,7 @@ "props": { "position": "bottom" }, - "children": ["flex-layout.row#buy-button"] + "children": ["html#add-to-cart-button"] }, "product-assembly-options": { "children": [ diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 252cd98..c924844 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -124,7 +124,7 @@ "sku-selector", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", + "html#add-to-cart-button", "availability-subscriber", "shipping-simulator", "share#default" @@ -152,6 +152,14 @@ "children": ["flex-layout.row#selling-price"] }, + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button", + "blockClass": "cart-button" + }, + "children": ["product-quantity", "add-to-cart-button"] + }, + "flex-layout.row#product-name": { "props": { "marginBottom": 3, @@ -167,13 +175,13 @@ } }, - "flex-layout.row#buy-button": { - "props": { - "marginTop": 4, - "marginBottom": 7 - }, - "children": ["product-quantity", "add-to-cart-button"] - }, + // "flex-layout.row#buy-button": { + // "props": { + // "marginTop": 4, + // "marginBottom": 7 + // }, + // "children": ["product-quantity", "add-to-cart-button"] + // }, "flex-layout.row#product-availability": { "props": { -- 2.34.1 From ca07cdb06c5350eac84764c576feed64f8cf4410 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Fri, 10 Feb 2023 15:07:00 -0300 Subject: [PATCH 11/16] feat: todos os testes ids adicionados --- store/blocks/pdp/product-assembly.jsonc | 2 +- store/blocks/pdp/product.jsonc | 99 +++++++++++++++++++++---- 2 files changed, 86 insertions(+), 15 deletions(-) diff --git a/store/blocks/pdp/product-assembly.jsonc b/store/blocks/pdp/product-assembly.jsonc index 726e24a..0811152 100644 --- a/store/blocks/pdp/product-assembly.jsonc +++ b/store/blocks/pdp/product-assembly.jsonc @@ -3,7 +3,7 @@ "props": { "position": "bottom" }, - "children": ["html#add-to-cart-button"] + "children": ["html#add-to-cart-container"] }, "product-assembly-options": { "children": [ diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index c924844..0d7ab70 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -6,7 +6,7 @@ // "flex-layout.row#description", // "flex-layout.row#specifications-title", // "product-specification-group#table", - "tab-layout#product", + "html#product-description", "rich-text#carrossel-message", "list-context.product-list#carousel-list", // "product-summary.shelf", @@ -57,7 +57,8 @@ "marginTop": 4, "marginBottom": 7, "paddingTop": 7, - "paddingBottom": 7 + "paddingBottom": 7, + "blockClass": "product-main" }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] }, @@ -90,8 +91,16 @@ } }, "flex-layout.row#product-image": { + "children": ["html#product-image"] + }, + + "html#product-image": { + "props": { + "testId": "product-images" + }, "children": ["product-images"] }, + "product-images": { "props": { "aspectRatio": { @@ -113,7 +122,7 @@ "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", + "html#product-name", // "product-rating-summary", // "flex-layout.row#list-price-savings", @@ -121,16 +130,23 @@ "html#installments", "html#pix", // "product-separator", - "sku-selector", + "html#sku-selector", "product-assembly-options", "product-gifts", - "html#add-to-cart-button", + "html#add-to-cart-container", "availability-subscriber", - "shipping-simulator", + "html#shipping-simulator", "share#default" ] }, + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + "html#installments": { "props": { "testId": "product-installments" @@ -152,12 +168,28 @@ "children": ["flex-layout.row#selling-price"] }, - "html#add-to-cart-button": { + "html#add-to-cart-container": { "props": { "testId": "add-to-cart-button", "blockClass": "cart-button" }, - "children": ["product-quantity", "add-to-cart-button"] + "children": ["html#product-quantity", "add-to-cart-button"] + }, + + "html#product-quantity": { + "props": { + "testId": "product-quantity", + "blockClass": "cart-button" + }, + "children": ["product-quantity"] + }, + + + "html#product-name": { + "props": { + "testId": "product-name" + }, + "children": ["flex-layout.row#product-name"] }, "flex-layout.row#product-name": { @@ -165,7 +197,21 @@ "marginBottom": 3, "blockClass": "identifier" }, - "children": ["vtex.store-components:product-name", "product-identifier.product"] + "children": ["vtex.store-components:product-name", "html#codigo"] + }, + + "html#codigo": { + "props": { + "testId": "product-code" + }, + "children": ["product-identifier.product"] + }, + + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": ["sku-selector"] }, "sku-selector": { @@ -226,6 +272,13 @@ } }, + "html#product-description": { + "props": { + "testId": "product-description" + }, + "children": ["tab-layout#product"] + }, + "tab-layout#product":{ "children": [ "tab-list#product", @@ -357,18 +410,36 @@ "list-context.product-list#carousel-list": { "blocks": ["product-summary.shelf#carousel-shelf"], - "children": ["slider-layout#carousel"] + "children": ["html#product-summary-list"] }, "product-summary.shelf#carousel-shelf": { "children": [ - "product-summary-image", - "product-summary-name", - "product-summary-space", - "product-summary-price" + "html#vtex-product-summary" ] }, + "html#vtex-product-summary": { + "props": { + "testId": "vtex-product-summary" + }, + "children": ["product-summary-image", + "product-summary-name", + "product-summary-space", + "product-list-price", + "product-selling-price"] + }, + + + + "html#product-summary-list": { + "props": { + "testId": "product-summary-list" + }, + "children": ["slider-layout#carousel"] + }, + + "slider-layout#carousel": { "props": { "itemsPerPage": { -- 2.34.1 From ea2feeb4af0fd0166835b0e149577547f9dcf784 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Fri, 10 Feb 2023 16:29:31 -0300 Subject: [PATCH 12/16] =?UTF-8?q?fix:=20ajustes=20scss,=20adi=C3=A7=C3=B5e?= =?UTF-8?q?s=20de=20classes=20e=20ajustes=20dos=20blocks=20custom?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/index.tsx | 2 +- react/components/Html/styles.css | 12 +++ react/components/Pix/Pix.tsx | 4 +- store/blocks/pdp/product.jsonc | 11 +-- styles/css/vtex.flex-layout.css | 5 ++ styles/css/vtex.product-price.css | 89 +++---------------- styles/css/vtex.product-summary.css | 8 +- styles/css/vtex.slider-layout.css | 5 -- styles/css/vtex.store-components.css | 14 +-- styles/css/vtex.tab-layout.css | 2 +- .../sass/pages/product/vtex.flex-layout.scss | 9 ++ .../pages/product/vtex.product-price.scss | 3 + .../pages/product/vtex.product-summary.scss | 7 +- .../pages/product/vtex.slider-layout.scss | 5 -- .../pages/product/vtex.store-components.scss | 13 +-- .../sass/pages/product/vtex.tab-layout.scss | 4 +- 16 files changed, 76 insertions(+), 117 deletions(-) create mode 100644 react/components/Html/styles.css create mode 100644 styles/sass/pages/product/vtex.product-price.scss diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx index d60d7f5..86da4df 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; - +import "./styles.css" const CSS_HANDLES = ["html"] as const; type HtmlProps = { diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..89df3a6 --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,12 @@ +[class*="html--pix"] { + display: flex; + } + + [class*="html--cart-button"] { + display: flex; + gap: 10px; + + } vtex-button{ + background-color: black; + } + diff --git a/react/components/Pix/Pix.tsx b/react/components/Pix/Pix.tsx index 4265913..db4b817 100644 --- a/react/components/Pix/Pix.tsx +++ b/react/components/Pix/Pix.tsx @@ -7,7 +7,7 @@ const Pix = () => { return ( <> -
+ Pix

@@ -20,7 +20,7 @@ const Pix = () => { 10% de desconto

-
+ diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0d7ab70..8a21b0b 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -156,7 +156,8 @@ "html#pix": { "props": { - "testId": "pix-price" + "testId": "pix-price", + "blockClass": "pix" }, "children": ["Pix"] }, @@ -221,14 +222,6 @@ } }, - // "flex-layout.row#buy-button": { - // "props": { - // "marginTop": 4, - // "marginBottom": 7 - // }, - // "children": ["product-quantity", "add-to-cart-button"] - // }, - "flex-layout.row#product-availability": { "props": { "colGap": 7, diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 9970461..6121656 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -17,7 +17,12 @@ } .flexRowContent--identifier { + text-align: end; display: flex; flex-direction: column; align-items: end; +} + +.flexRow--product-main { + padding: 0 40px; } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..fe99018 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +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: .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: .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; -} + display: block; +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 34860b0..852b8d6 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -12,6 +12,10 @@ text-align: center; } -.imageContainer { - height: 60%; +.imageWrapper { + height: 70%; +} + +.nameContainer { + padding: 16px; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 79ee5ab..22c444e 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -7,11 +7,6 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.slideChildrenContainer { - text-align: center; - margin-bottom: 67px; -} - .sliderLayoutContainer { padding: 0 40px; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d07aa15..f11b178 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,10 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.productImagesGallerySlide--produto-carrossel { + width: 100% !important; +} + .productNameContainer { font-family: "Open Sans", sans-serif; font-style: normal; @@ -97,8 +101,6 @@ .shippingTable { border: none; - bottom: 110px; - position: relative; font-size: 14px; font-family: "Open Sans", sans-serif; text-transform: uppercase; @@ -229,14 +231,14 @@ color: #B9B9B9; } -.productImagesContainer { - width: 45%; -} - .productImageTag--description-imagem { max-height: 100% !important; } +.content--description-imagem { + width: 45%; +} + .newsletter { background: #000; color: #fff; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 770fb6b..8e5ffff 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -13,7 +13,7 @@ .listContainer { align-items: center; - margin-bottom: 64px; + margin-bottom: 32px; justify-content: space-around; border-bottom: 1px solid #BFBFBF; } diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index fe8f3bd..ae2a598 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -10,8 +10,17 @@ } .flexRowContent--identifier{ + text-align: end; display: flex; flex-direction: column; align-items: end; } + +.flexRow--product-main{ + 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..7944be9 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,3 @@ +.listPrice { + display: block; +} diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 83a4fab..6fef6d3 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -4,7 +4,10 @@ text-align: center; } -.imageContainer{ - height: 60%; +.imageWrapper{ + height: 70%; } +.nameContainer{ + padding: 16px; +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index c7409ee..dfae7d9 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -1,9 +1,4 @@ -.slideChildrenContainer{ - text-align: center; - margin-bottom: 67px; -} - .sliderLayoutContainer{ padding: 0 40px; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 1cb840b..e08f49c 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,6 @@ +.productImagesGallerySlide--produto-carrossel{ + width: 100% !important; +} .productNameContainer { font-family: "Open Sans", sans-serif; @@ -49,6 +52,7 @@ margin-top: 23px; margin-left: -4px; } + .shippingContainer :global(.vtex-input__label) { font-size: 0px; } @@ -81,8 +85,6 @@ .shippingTable { border: none; - bottom: 110px; - position: relative; font-size: 14px; font-family: "Open Sans", sans-serif; text-transform: uppercase; @@ -130,6 +132,7 @@ border-radius: 8px; } + .discountInsideContainer, .installmentsPrice { display: none; @@ -199,15 +202,15 @@ color: #B9B9B9; } -.productImagesContainer{ - width: 45%; -} .productImageTag--description-imagem{ max-height: 100% !important; } +.content--description-imagem{ + width: 45%; +} .newsletter { background: #000; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index c44a9cd..a24f8b0 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -2,9 +2,11 @@ padding: 0 40px; } + + .listContainer{ align-items: center; - margin-bottom: 64px; + margin-bottom: 32px; justify-content: space-around; border-bottom: 1px solid #BFBFBF; } -- 2.34.1 From 5bc6c420190bb13a0e8972224c0dd9c2f9b5f4f4 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Fri, 10 Feb 2023 17:28:06 -0300 Subject: [PATCH 13/16] =?UTF-8?q?fix:=20ajuste=20nas=20imagens=20da=20prat?= =?UTF-8?q?eleira,=20colo=C3=A7=C3=A3o=20do=20but=C3=A3o=20de=20adicionar?= =?UTF-8?q?=20ao=20carrinho?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 3 ++- styles/css/vtex.flex-layout.css | 9 +++++++++ styles/css/vtex.product-quantity.css | 3 +++ styles/css/vtex.product-summary.css | 8 ++++---- styles/css/vtex.slider-layout.css | 2 +- styles/sass/pages/product/vtex.flex-layout.scss | 8 ++++++++ styles/sass/pages/product/vtex.product-quantity.scss | 3 +++ styles/sass/pages/product/vtex.product-summary.scss | 8 ++++---- styles/sass/pages/product/vtex.slider-layout.scss | 2 +- 9 files changed, 35 insertions(+), 11 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 8a21b0b..e02df9b 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -119,7 +119,8 @@ "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, - "rowGap": 0 + "rowGap": 0, + "blockClass": "infos" }, "children": [ "html#product-name", diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 6121656..cb245e8 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -11,6 +11,10 @@ padding: 0; } +.flexCol--infos { + padding-left: 32px; +} + .flexRowContent { margin: 0; padding: 0; @@ -25,4 +29,9 @@ .flexRow--product-main { padding: 0 40px; +} + +.flexColChild--infos :global(.vtex-button) { + background-color: black !important; + border: none; } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index e0f5ca1..c804fac 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -7,6 +7,9 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.quantitySelectorContainer { + margin: 0; +} .quantitySelectorContainer .quantitySelectorTitle { display: none; } \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 852b8d6..9db2684 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -12,10 +12,10 @@ text-align: center; } -.imageWrapper { - height: 70%; -} - .nameContainer { padding: 16px; +} + +.imageNormal { + height: 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 22c444e..ef37916 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -8,7 +8,7 @@ /* Media Query M3 */ /* Grid breakpoints */ .sliderLayoutContainer { - padding: 0 40px; + padding: 36px 40px; } .slide { diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index ae2a598..d4dedde 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -3,6 +3,9 @@ padding: 0; } +.flexCol--infos{ + padding-left: 32px; +} .flexRowContent{ margin: 0; @@ -21,6 +24,11 @@ padding: 0 40px; } +.flexColChild--infos :global(.vtex-button){ + background-color: black !important; + border: none; +} + diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index b723602..709a4cf 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -1,5 +1,8 @@ .quantitySelectorContainer { + margin: 0; .quantitySelectorTitle { display: none; } } + + diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 6fef6d3..a0a8cc7 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -4,10 +4,10 @@ text-align: center; } -.imageWrapper{ - height: 70%; -} - .nameContainer{ padding: 16px; } + +.imageNormal{ + height: 314px !important; +} diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index dfae7d9..4047b08 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -1,6 +1,6 @@ .sliderLayoutContainer{ - padding: 0 40px; + padding: 36px 40px; } .slide{ -- 2.34.1 From e897a62fedc40508f793fffd3653dcfe56998a45 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Fri, 10 Feb 2023 18:27:55 -0300 Subject: [PATCH 14/16] =?UTF-8?q?feat:=20estiliza=C3=A7=C3=A3o=20do=20bot?= =?UTF-8?q?=C3=A3o=20de=20quantidade=20feita?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 4 ++-- styles/css/vtex.product-quantity.css | 11 +++++++++++ .../pages/product/vtex.product-quantity.scss | 18 +++++++++++++++++- 3 files changed, 30 insertions(+), 3 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 89df3a6..306ef9b 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -1,12 +1,12 @@ [class*="html--pix"] { display: flex; + align-items: center; + gap: 26px; } [class*="html--cart-button"] { display: flex; gap: 10px; - } vtex-button{ - background-color: black; } diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index c804fac..4c63623 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -12,4 +12,15 @@ } .quantitySelectorContainer .quantitySelectorTitle { display: none; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__input) { + border-left: none; + border-right: none; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) { + background-color: #fff; + color: #000; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button) { + color: #000; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index 709a4cf..c8ab155 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -3,6 +3,22 @@ .quantitySelectorTitle { display: none; } -} + .quantitySelectorStepper :global(.vtex-numeric-stepper__input){ + border-left: none; + border-right: none; + } + + .quantitySelectorStepper :global(.vtex-numeric-stepper__minus-button) { + background-color: #fff; + color: #000; + } + + .quantitySelectorStepper :global(.vtex-numeric-stepper__plus-button) { + color: #000; + } + + + } + -- 2.34.1 From c117e3be4ccdcb721a292821dd7c324052e6d8e2 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Fri, 10 Feb 2023 22:23:54 -0300 Subject: [PATCH 15/16] feat: responsividade feita --- store/blocks/pdp/product.jsonc | 18 +------ styles/css/vtex.flex-layout.css | 22 ++++++++ styles/css/vtex.product-price.css | 5 ++ styles/css/vtex.store-components.css | 54 ++++++++++++++++++- styles/css/vtex.tab-layout.css | 28 ++++++++++ .../sass/pages/product/vtex.flex-layout.scss | 24 +++++++++ .../pages/product/vtex.product-price.scss | 7 +++ .../pages/product/vtex.store-components.scss | 41 +++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 22 +++++++- 9 files changed, 199 insertions(+), 22 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index e02df9b..eebff39 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -52,12 +52,6 @@ }, "flex-layout.row#product-main": { "props": { - "colGap": 7, - "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7, - "paddingBottom": 7, "blockClass": "product-main" }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] @@ -86,7 +80,6 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "45%", "rowGap": 0 } }, @@ -104,13 +97,10 @@ "product-images": { "props": { "aspectRatio": { - "desktop": "auto", - "phone": "16:9" + "desktop": "auto" }, "thumbnailsOrientation": "horizontal", "showNavigationArrows": false, - "showPaginationDots": false, - "displayThumbnailsArrows": false, "blockClass": "produto-carrossel" } }, @@ -224,12 +214,6 @@ }, "flex-layout.row#product-availability": { - "props": { - "colGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7 - }, "children": [ "flex-layout.col#stack", "flex-layout.col#right-col-availability" diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index cb245e8..638c999 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -19,6 +19,17 @@ margin: 0; padding: 0; } +@media screen and (max-width: 1024px) { + .flexRowContent .stretchChildrenWidth { + width: initial; + } +} + +@media screen and (max-width: 1024px) { + .flexRowContent--product-main { + flex-direction: column; + } +} .flexRowContent--identifier { text-align: end; @@ -26,10 +37,21 @@ flex-direction: column; align-items: end; } +@media screen and (max-width: 1024px) { + .flexRowContent--identifier { + text-align: start; + } +} .flexRow--product-main { padding: 0 40px; } +@media screen and (max-width: 1024px) { + .flexRow--product-main .stretchChildrenWidth { + width: 100% !important; + padding-bottom: 24px; + } +} .flexColChild--infos :global(.vtex-button) { background-color: black !important; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index fe99018..e502035 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -9,4 +9,9 @@ /* Grid breakpoints */ .listPrice { display: block; +} + +.sellingPriceValue { + font-weight: bold; + font-size: 25px; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f11b178..6ef40b4 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,10 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +.container { + display: contents; +} + .productImagesGallerySlide--produto-carrossel { width: 100% !important; } @@ -30,6 +34,12 @@ text-align: right; color: #575757; } +@media screen and (max-width: 1024px) { + .productNameContainer--quickview { + text-align: left; + padding-bottom: 8px; + } +} .skuSelectorContainer { display: flex; @@ -89,11 +99,30 @@ } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { - color: #000; position: absolute; - right: 32px; + right: 0px; top: 25px; } +@media screen and (max-width: 1120px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + right: -20px; + } +} +@media screen and (max-width: 1100px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + right: -30px; + } +} +@media screen and (max-width: 1035px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + right: -35px; + } +} +@media screen and (max-width: 1024px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + right: 0px; + } +} .shareContainer { display: none; @@ -143,10 +172,20 @@ width: 50%; margin-left: 16px; } +@media screen and (max-width: 1024px) { + .productDescriptionContainer { + width: 100%; + } +} .carouselGaleryThumbs { height: 200px; } +@media screen and (max-width: 1024px) { + .carouselGaleryThumbs { + display: block; + } +} .carouselGaleryThumbs .productImagesThumb { margin: 0px 10px; @@ -238,6 +277,11 @@ .content--description-imagem { width: 45%; } +@media screen and (max-width: 1024px) { + .content--description-imagem { + width: 100%; + } +} .newsletter { background: #000; @@ -285,6 +329,12 @@ .newsletter .inputGroup { width: 774px; } +@media screen and (max-width: 1024px) { + .newsletter .inputGroup { + display: flex; + width: 100%; + } +} .newsletter .inputGroup :global(.vtex-input-prefix__group) { border: none; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 8e5ffff..2a45ac9 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -17,23 +17,51 @@ justify-content: space-around; border-bottom: 1px solid #BFBFBF; } +@media screen and (max-width: 1024px) { + .listContainer { + flex-direction: column; + align-content: baseline; + border-bottom: none; + } +} .listItem { margin: 0; padding: 0; } +@media screen and (max-width: 1024px) { + .listItem { + width: 100%; + } +} .listItem :global(.vtex-button) { border-radius: 0; background-color: #FFFFFF; color: #BFBFBF; } +@media screen and (max-width: 1024px) { + .listItem :global(.vtex-button) { + display: flex; + width: 100%; + } +} .listItemActive :global(.vtex-button) { border: 0; border-bottom: 1px solid #000000 !important; } +@media screen and (max-width: 1024px) { + .listItemActive :global(.vtex-button) { + border-bottom: none !important; + } +} .contentItem { display: flex; margin-bottom: 16px; +} +@media screen and (max-width: 1024px) { + .contentItem { + flex-direction: column; + } } \ 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 d4dedde..1a90b4d 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -10,18 +10,42 @@ .flexRowContent{ margin: 0; padding: 0; + + + .stretchChildrenWidth{ + @media screen and (max-width: 1024px) { + width: initial; + } + } } +.flexRowContent--product-main{ + @media screen and (max-width: 1024px) { + flex-direction: column; + } +} + + .flexRowContent--identifier{ text-align: end; display: flex; flex-direction: column; align-items: end; + @media screen and (max-width: 1024px) { + text-align: start; + } } .flexRow--product-main{ padding: 0 40px; + + .stretchChildrenWidth{ + @media screen and (max-width: 1024px) { + width: 100% !important; + padding-bottom: 24px; + } + } } .flexColChild--infos :global(.vtex-button){ diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 7944be9..7cb544e 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -1,3 +1,10 @@ .listPrice { display: block; } + + +.sellingPriceValue{ + font-weight: bold; + font-size: 25px; +} + diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index e08f49c..6d68d2d 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,7 @@ +.container{ + display: contents; +} + .productImagesGallerySlide--produto-carrossel{ width: 100% !important; } @@ -20,6 +24,12 @@ line-height: 34px; text-align: right; color: #575757; + @media screen and (max-width: 1024px) { + text-align: left; + padding-bottom: 8px; + } + + } .skuSelectorContainer { @@ -73,10 +83,21 @@ width: 280px; } .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { - color: #000; position: absolute; - right: 32px; + right: 0px; top: 25px; + @media screen and (max-width: 1120px) { + right: -20px; + } + @media screen and (max-width: 1100px) { + right: -30px; + } + @media screen and (max-width: 1035px) { + right: -35px; + } + @media screen and (max-width: 1024px) { + right: 0px; + } } .shareContainer { @@ -120,10 +141,18 @@ .productDescriptionContainer { width: 50%; margin-left: 16px; + + @media screen and (max-width: 1024px) { + width: 100%; + } } .carouselGaleryThumbs { height: 200px; + @media screen and (max-width: 1024px) { + display: block; + } + } .carouselGaleryThumbs .productImagesThumb { margin: 0px 10px; @@ -210,6 +239,10 @@ .content--description-imagem{ width: 45%; + @media screen and (max-width: 1024px) { + width: 100%; + } + } .newsletter { @@ -252,6 +285,10 @@ } .newsletter .inputGroup { width: 774px; + @media screen and (max-width: 1024px) { + display: flex; + width: 100%; + } } .newsletter .inputGroup :global(.vtex-input-prefix__group) { border: none; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index a24f8b0..692ffbe 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -9,28 +9,48 @@ margin-bottom: 32px; justify-content: space-around; border-bottom: 1px solid #BFBFBF; + + @media screen and (max-width: 1024px) { + flex-direction: column; + align-content: baseline; + border-bottom: none; + } } .listItem{ margin: 0; padding: 0; + @media screen and (max-width: 1024px) { + width: 100%; + } + :global(.vtex-button){ border-radius: 0; background-color: #FFFFFF; color: #BFBFBF; + @media screen and (max-width: 1024px) { + display: flex; + width: 100%; + } + } } .listItemActive :global(.vtex-button) { border: 0; border-bottom: 1px solid #000000 !important; - + @media screen and (max-width: 1024px) { + border-bottom: none !important; + } } .contentItem{ display: flex; margin-bottom: 16px; + @media screen and (max-width: 1024px) { + flex-direction: column; + } } -- 2.34.1 From 0b41e3deaeea75a2c3711b8220e77be9dbfa14e0 Mon Sep 17 00:00:00 2001 From: Ramon Dias Ferreira Date: Fri, 10 Feb 2023 23:32:55 -0300 Subject: [PATCH 16/16] feat: breadcrumb alterado, ajustes no responsivo --- react/components/Html/styles.css | 6 ++++ styles/css/vtex.breadcrumb.css | 36 +++++++++++++++++++ styles/css/vtex.store-components.css | 9 +++++ .../sass/pages/product/vtex.breadcrumb.scss | 32 +++++++++++++++++ .../pages/product/vtex.store-components.scss | 6 ++++ 5 files changed, 89 insertions(+) create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 306ef9b..0a7c193 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -10,3 +10,9 @@ } + @media screen and (max-width: 375px) { + + [class*="html--cart-button"] { + flex-direction: column; + } + } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..fb924c3 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,36 @@ +/* +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 { + padding: 0 40px; +} + +.homeLink .homeIcon { + display: none; +} +.homeLink::before { + content: "Home"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.link--1, +.link--2, +.link--3 { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 6ef40b4..80f58d7 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -123,6 +123,11 @@ right: 0px; } } +@media screen and (max-width: 600px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + position: inherit; + } +} .shareContainer { display: none; @@ -270,6 +275,10 @@ color: #B9B9B9; } +.productImageTag--produto-carrossel--main { + max-height: inherit !important; +} + .productImageTag--description-imagem { max-height: 100% !important; } diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..cbd2cd5 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,32 @@ +.container{ + padding: 0 40px; +} + +.homeLink { + .homeIcon { + display: none; + } + + &::before { + content: "Home"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: #929292; + } +} + +.link--1, +.link--2, +.link--3 { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: #929292; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 6d68d2d..79c06d8 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -98,6 +98,9 @@ @media screen and (max-width: 1024px) { right: 0px; } + @media screen and (max-width: 600px) { + position: inherit; + } } .shareContainer { @@ -231,6 +234,9 @@ color: #B9B9B9; } +.productImageTag--produto-carrossel--main{ + max-height: inherit !important; +} .productImageTag--description-imagem{ -- 2.34.1