From c224ff691062dca572d60d858a1bd303ea39394a Mon Sep 17 00:00:00 2001 From: Samuel Date: Wed, 25 Jan 2023 18:23:17 -0300 Subject: [PATCH 01/22] feat: adiciona breadcrumbs e product description --- manifest.json | 1 - react/components/Html/index.tsx | 1 + react/components/Html/style.css | 3 + store/blocks/pdp/product.jsonc | 102 +++++++++++++++++- styles/css/agenciamagma.store-theme.css | 2 +- styles/css/vtex.breadcrumb.css | 30 ++++++ styles/css/vtex.store-components.css | 19 ++++ .../product/agenciamagma.store-theme.scss | 2 +- .../sass/pages/product/vtex.breadcrumb.scss | 24 +++++ .../pages/product/vtex.store-components.scss | 21 +++- 10 files changed, 200 insertions(+), 5 deletions(-) create mode 100644 react/components/Html/style.css create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/sass/pages/product/vtex.breadcrumb.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..47dc783 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,5 +1,6 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; +import "./style.css" const CSS_HANDLES = ["html"] as const; diff --git a/react/components/Html/style.css b/react/components/Html/style.css new file mode 100644 index 0000000..a57dcbd --- /dev/null +++ b/react/components/Html/style.css @@ -0,0 +1,3 @@ +[class*="html--pdp-breadcrumb"] { + margin-left: 40px; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..eb0fe37 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,13 +3,113 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", + "tab-layout#desc", "flex-layout.row#specifications-title", "product-specification-group#table", "shelf.relatedProducts", "product-questions-and-answers" ] }, + "tab-layout#desc":{ + "children": [ + "tab-list#home", + "tab-content#desc" + ], + "props": { + "blockClass": "desc", + "defaultActiveTabId": "desc1" + } +}, +"tab-list#home": { + "children": [ + "tab-list.item#desc1", + "tab-list.item#desc2", + "tab-list.item#desc3", + "tab-list.item#desc4", + "tab-list.item#desc5" + ] +}, +"tab-list.item#desc1": { + "props": { + "tabId": "desc1", + "label": "Descrição", + "defaultActiveTab": true + } +}, +"tab-list.item#desc2": { + "props": { + "tabId": "desc2", + "label": "Descrição" + } +}, +"tab-list.item#desc3": { + "props": { + "tabId": "desc3", + "label": "Descrição" + } +}, +"tab-list.item#desc4": { + "props": { + "tabId": "desc4", + "label": "Descrição" + } +}, +"tab-list.item#desc5": { + "props": { + "tabId": "desc5", + "label": "Descrição" + } +}, + "tab-content#desc": { + "children": [ + "tab-content.item#desc1", + "tab-content.item#desc2", + "tab-content.item#desc3", + "tab-content.item#desc4", + "tab-content.item#desc5" + ] + }, + "tab-content.item#desc1": { + "children": [ + + "flex-layout.row#description" + ], + "props": { + "tabId": "desc1" + } + }, + "tab-content.item#desc2": { + "children": [ + + ], + "props": { + "tabId": "desc2" + } + }, + "tab-content.item#desc3": { + "children": [ + + ], + "props": { + "tabId": "desc2" + } +}, +"tab-content.item#desc4": { + "children": [ + + ], + "props": { + "tabId": "desc2" + } +}, +"tab-content.item#desc5": { + "children": [ + + ], + "props": { + "tabId": "desc2" + } +}, "html#breadcrumb": { "props": { "tag": "section", diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..2e96d06 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -12,5 +12,5 @@ } .html--pdp-breadcrumb { - background-color: green; + background-color: white; } \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..61c0e47 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +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 */ +.container { + display: flex; + align-items: center; +} +.container .homeLink .homeIcon { + display: none; +} +.container .homeLink::before { + content: "Home"; + font-size: 16px; +} +.container .arrow--1 { + display: none; +} +.container .arrow--1 .Link { + font-size: 0px; +} +.container .arrow--1 .Link::before { + content: "Sapatos"; + font-size: 16px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..9470a1a 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,25 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap"); .newsletter { background: red; +} + +.productNameContainer { + display: flex; + justify-content: right; +} +.productNameContainer .productBrand--quickview { + font-family: "Open Sans"; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; +} + +.productDescriptionContainer { + width: 50% !important; } \ 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..8d604c0 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -3,6 +3,6 @@ } .html--pdp-breadcrumb { - background-color: green; + background-color: white; } diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..a15d849 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,24 @@ +.container{ + display: flex; + align-items: center; + + .homeLink{ + .homeIcon{ + display: none; + } + } + .homeLink::before{ + content: "Home"; + font-size: 16px; + } + .arrow--1 { + display: none; + .Link{ + font-size: 0px; + } + .Link::before{ + content: "Sapatos"; + font-size: 16px; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..143ae93 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,22 @@ +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap'); + .newsletter{ background: red; -} \ No newline at end of file +} +.productNameContainer{ + display: flex; + justify-content: right; + + .productBrand--quickview{ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + text-align: right; + color: #575757; + } +} +.productDescriptionContainer{ + width: 50% !important; +} From b1e1f349dc3de9d21b7cdd040d2a161ed02f3c1d Mon Sep 17 00:00:00 2001 From: Samuel Date: Thu, 26 Jan 2023 15:23:31 -0300 Subject: [PATCH 02/22] feat: adiciona product description e seu css --- store/blocks/pdp/product.jsonc | 272 ++++++++++-------- styles/css/vtex.button.css | 12 + styles/css/vtex.flex-layout.css | 109 +------ styles/css/vtex.store-components.css | 5 + styles/css/vtex.tab-layout.css | 43 +++ .../product/agenciamagma.store-theme.scss | 1 - styles/sass/pages/product/vtex.button.scss | 3 + .../sass/pages/product/vtex.flex-layout.scss | 7 + .../pages/product/vtex.store-components.scss | 7 + .../sass/pages/product/vtex.tab-layout.scss | 35 +++ 10 files changed, 278 insertions(+), 216 deletions(-) create mode 100644 styles/css/vtex.button.css create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.button.scss create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss 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 eb0fe37..a1a4fd3 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -10,127 +10,153 @@ "product-questions-and-answers" ] }, - "tab-layout#desc":{ - "children": [ - "tab-list#home", - "tab-content#desc" - ], - "props": { - "blockClass": "desc", - "defaultActiveTabId": "desc1" - } -}, -"tab-list#home": { - "children": [ - "tab-list.item#desc1", - "tab-list.item#desc2", - "tab-list.item#desc3", - "tab-list.item#desc4", - "tab-list.item#desc5" - ] -}, -"tab-list.item#desc1": { - "props": { - "tabId": "desc1", - "label": "Descrição", - "defaultActiveTab": true - } -}, -"tab-list.item#desc2": { - "props": { - "tabId": "desc2", - "label": "Descrição" - } -}, -"tab-list.item#desc3": { - "props": { - "tabId": "desc3", - "label": "Descrição" - } -}, -"tab-list.item#desc4": { - "props": { - "tabId": "desc4", - "label": "Descrição" - } -}, -"tab-list.item#desc5": { - "props": { - "tabId": "desc5", - "label": "Descrição" - } -}, - "tab-content#desc": { - "children": [ - "tab-content.item#desc1", - "tab-content.item#desc2", - "tab-content.item#desc3", - "tab-content.item#desc4", - "tab-content.item#desc5" - ] - }, - "tab-content.item#desc1": { - "children": [ - - "flex-layout.row#description" - ], - "props": { - "tabId": "desc1" - } - }, - "tab-content.item#desc2": { - "children": [ - - ], - "props": { - "tabId": "desc2" - } - }, - "tab-content.item#desc3": { - "children": [ - - ], - "props": { - "tabId": "desc2" - } -}, -"tab-content.item#desc4": { - "children": [ - - ], - "props": { - "tabId": "desc2" - } -}, -"tab-content.item#desc5": { - "children": [ - - ], - "props": { - "tabId": "desc2" - } -}, + "tab-layout#desc": { + "children": [ + "tab-list#home", + "tab-content#desc" + ], + "props": { + "blockClass": "desc", + "defaultActiveTabId": "desc1" + } + }, + "tab-list#home": { + "children": [ + "tab-list.item#desc1", + "tab-list.item#desc2", + "tab-list.item#desc3", + "tab-list.item#desc4", + "tab-list.item#desc5" + ] + }, + "tab-list.item#desc1": { + "props": { + "tabId": "desc1", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#desc2": { + "props": { + "tabId": "desc2", + "label": "Descrição" + } + }, + "tab-list.item#desc3": { + "props": { + "tabId": "desc3", + "label": "Descrição" + } + }, + "tab-list.item#desc4": { + "props": { + "tabId": "desc4", + "label": "Descrição" + } + }, + "tab-list.item#desc5": { + "props": { + "tabId": "desc5", + "label": "Descrição" + } + }, + "tab-content#desc": { + "children": [ + "tab-content.item#desc1", + "tab-content.item#desc2", + "tab-content.item#desc3", + "tab-content.item#desc4", + "tab-content.item#desc5" + ] + }, + "tab-content.item#desc1": { + "children": [ + "flex-layout.row#description-row" + ], + "props": { + "tabId": "desc1" + } + }, + "tab-content.item#desc2": { + "children": [], + "props": { + "tabId": "desc2" + } + }, + "tab-content.item#desc3": { + "children": [], + "props": { + "tabId": "desc2" + } + }, + "tab-content.item#desc4": { + "children": [], + "props": { + "tabId": "desc2" + } + }, + "tab-content.item#desc5": { + "children": [], + "props": { + "tabId": "desc2" + } + }, "html#breadcrumb": { "props": { "tag": "section", "testId": "breadcrumbs", "blockClass": "pdp-breadcrumb" }, - "children": ["breadcrumb"] + "children": [ + "breadcrumb" + ] }, "flex-layout.row#specifications-title": { - "children": ["rich-text#specifications"] + "children": [ + "rich-text#specifications" + ] }, "rich-text#specifications": { "props": { "text": "##### Product Specifications" } }, - "flex-layout.row#description": { + "flex-layout.row#description-row": { "props": { - "marginBottom": 7 + "blockClass": "description-row" }, - "children": ["product-description"] + "children": [ + "flex-layout.col#image-description", + "flex-layout.col#description" + ] + }, + "flex-layout.col#description": { + "props": { + "blockClass": "description" + }, + "children": [ + "product-description" + ] + }, + "product-description": { + "props": { + "blockClass": "product-description-m3" + } + }, + "flex-layout.col#image-description": { + "props": { + "blockClass": "image-description" + }, + "children": [ + "image#img-descricao" + ] + }, + "image#img-descricao": { + "props": { + "blockClass":"img-descricao", + "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true" + // "blockClass":"img-descricao" + } }, "condition-layout.product#availability": { "props": { @@ -152,9 +178,11 @@ "paddingTop": 7, "paddingBottom": 7 }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "children": [ + "flex-layout.col#stack", + "flex-layout.col#right-col" + ] }, - "stack-layout": { "props": { "blockClass": "product" @@ -165,7 +193,6 @@ "product-specification-badges" ] }, - "product-specification-badges": { "props": { "specificationGroupName": "Group", @@ -174,16 +201,19 @@ "displayValue": "SPECIFICATION_NAME" } }, - "flex-layout.col#stack": { - "children": ["stack-layout"], + "children": [ + "stack-layout" + ], "props": { "width": "60%", "rowGap": 0 } }, "flex-layout.row#product-image": { - "children": ["product-images"] + "children": [ + "product-images" + ] }, "product-images": { "props": { @@ -217,29 +247,30 @@ "share#default" ] }, - "flex-layout.row#product-name": { "props": { - "marginBottom": 3 + "marginBottom": 3, + "blockClass": "product-name" }, - "children": ["vtex.store-components:product-name"] + "children": [ + "vtex.store-components:product-name" + ] }, - "sku-selector": { "props": { "variationsSpacing": 3, "showValueNameForImageVariation": true } }, - "flex-layout.row#buy-button": { "props": { "marginTop": 4, "marginBottom": 7 }, - "children": ["add-to-cart-button"] + "children": [ + "add-to-cart-button" + ] }, - "flex-layout.row#product-availability": { "props": { "colGap": 7, @@ -269,9 +300,10 @@ "props": { "blockClass": "message-availability" }, - "children": ["availability-subscriber"] + "children": [ + "availability-subscriber" + ] }, - "share#default": { "props": { "social": { diff --git a/styles/css/vtex.button.css b/styles/css/vtex.button.css new file mode 100644 index 0000000..f3eadae --- /dev/null +++ b/styles/css/vtex.button.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 */ +.bg-action-primary { + background-color: black; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..24adda2 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,17 @@ -.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 */ +.flexRowContent :global(.vtex-button) { + background-color: black; } -@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--description-row { 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; -} + justify-content: center; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 9470a1a..5d78632 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -28,4 +28,9 @@ .productDescriptionContainer { width: 50% !important; + margin-left: 32px; +} + +.pointerEventsNone { + display: none; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..2287928 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,43 @@ +/* +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 */ +.listContainer { + margin-bottom: 32px; + display: flex; + gap: 197px; +} + +.listItem :global(.vtex-button) { + background-color: white; + color: #BFBFBF; + border: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + border-radius: 0; +} + +.listItemActive :global(.vtex-button) { + background-color: white; + color: black; + border: 0; + border-bottom: 2px black solid; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; +} + +.bg--primary-action { + background-color: red; +} \ 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 8d604c0..f7710ca 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -5,4 +5,3 @@ .html--pdp-breadcrumb { background-color: white; } - diff --git a/styles/sass/pages/product/vtex.button.scss b/styles/sass/pages/product/vtex.button.scss new file mode 100644 index 0000000..47490ab --- /dev/null +++ b/styles/sass/pages/product/vtex.button.scss @@ -0,0 +1,3 @@ +.bg-action-primary{ + background-color: black; +} 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..6cc4e56 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,7 @@ +.flexRowContent :global(.vtex-button){ + background-color: black; +} +.flexRowContent--description-row{ + display: flex; + justify-content: center; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 143ae93..47170fa 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -19,4 +19,11 @@ } .productDescriptionContainer{ width: 50% !important; + margin-left: 32px; +} +.container--product-description-m3{ + +} +.pointerEventsNone{ + display: none; } 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..79bc257 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,35 @@ +.listContainer{ + margin-bottom: 32px; + display: flex; + gap: 197px; +} +.listItem :global(.vtex-button){ + background-color: white; + color: #BFBFBF; + border: 0; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + text-transform: capitalize; + border-radius: 0; +} +.listItemActive :global(.vtex-button){ + background-color: white; + color: black; + border: 0; + border-bottom: 2px black solid; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; +} +// .listContainer :global(.b--action-primary){ +// background-color: black; +// } +.bg--primary-action{ + background-color: red; +} + From 04859639ed97647481b07ef07ea16ae78e798fd8 Mon Sep 17 00:00:00 2001 From: Samuel Date: Thu, 26 Jan 2023 17:02:41 -0300 Subject: [PATCH 03/22] =?UTF-8?q?feat:=20edita=20tamanho=20da=20descri?= =?UTF-8?q?=C3=A7=C3=A3o=20do=20produto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 6 +++--- styles/css/vtex.flex-layout.css | 7 +++++++ styles/css/vtex.product-identifier.css | 14 +++++++++++-- styles/css/vtex.store-components.css | 2 +- styles/css/vtex.tab-layout.css | 16 ++++++++++----- styles/sass/pages/product/vtex.button.scss | 3 --- .../sass/pages/product/vtex.flex-layout.scss | 6 ++++++ .../product/vtex.product-identifier.scss | 4 ++++ .../pages/product/vtex.store-components.scss | 5 +---- .../sass/pages/product/vtex.tab-layout.scss | 20 +++++++++++-------- 10 files changed, 57 insertions(+), 26 deletions(-) delete mode 100644 styles/sass/pages/product/vtex.button.scss create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index a1a4fd3..8925ddd 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -153,7 +153,7 @@ }, "image#img-descricao": { "props": { - "blockClass":"img-descricao", + "blockClass": "img-descricao", "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true" // "blockClass":"img-descricao" } @@ -231,13 +231,13 @@ }, "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-separator", "product-quantity", "product-assembly-options", "product-gifts", diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 24adda2..c4748ce 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -9,9 +9,16 @@ /* Grid breakpoints */ .flexRowContent :global(.vtex-button) { background-color: black; + border-radius: 0; + border: 0; } .flexRowContent--description-row { display: flex; justify-content: center; +} + +.product-identifier--productReference { + display: flex; + justify-content: right; } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..d60e859 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,13 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ .product-identifier--productReference { - margin-bottom: 1rem; -} + display: flex; + justify-content: right; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 5d78632..67077cb 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -27,7 +27,7 @@ } .productDescriptionContainer { - width: 50% !important; + width: 632px; margin-left: 32px; } diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 2287928..ac373b8 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -10,7 +10,17 @@ .listContainer { margin-bottom: 32px; display: flex; - gap: 197px; + flex-direction: row; + column-gap: 197.5px; +} +.listContainer::after { + content: ""; + background-color: #BFBFBF; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + bottom: 9px; } .listItem :global(.vtex-button) { @@ -36,8 +46,4 @@ font-weight: 400; font-size: 18px; line-height: 38px; -} - -.bg--primary-action { - background-color: red; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.button.scss b/styles/sass/pages/product/vtex.button.scss deleted file mode 100644 index 47490ab..0000000 --- a/styles/sass/pages/product/vtex.button.scss +++ /dev/null @@ -1,3 +0,0 @@ -.bg-action-primary{ - background-color: black; -} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 6cc4e56..ba46aa0 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,7 +1,13 @@ .flexRowContent :global(.vtex-button){ background-color: black; + border-radius: 0; + border: 0; } .flexRowContent--description-row{ display: flex; justify-content: center; } +.product-identifier--productReference{ + display: flex; + justify-content: right; +} 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..3edfefd --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,4 @@ +.product-identifier--productReference{ + display: flex; + justify-content: right; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 47170fa..0baa00a 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -18,11 +18,8 @@ } } .productDescriptionContainer{ - width: 50% !important; + width: 632px; margin-left: 32px; -} -.container--product-description-m3{ - } .pointerEventsNone{ display: none; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 79bc257..4bf0de6 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,7 +1,17 @@ .listContainer{ margin-bottom: 32px; display: flex; - gap: 197px; + flex-direction: row; + column-gap: 197.5px; + &::after{ + content: ""; + background-color: #BFBFBF; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + bottom: 9px; + } } .listItem :global(.vtex-button){ background-color: white; @@ -14,6 +24,7 @@ line-height: 38px; text-transform: capitalize; border-radius: 0; + } .listItemActive :global(.vtex-button){ background-color: white; @@ -26,10 +37,3 @@ font-size: 18px; line-height: 38px; } -// .listContainer :global(.b--action-primary){ -// background-color: black; -// } -.bg--primary-action{ - background-color: red; -} - From c17daba1c32f4d8e7efed5400abc60e3b2052002 Mon Sep 17 00:00:00 2001 From: Samuel Date: Mon, 30 Jan 2023 11:21:15 -0300 Subject: [PATCH 04/22] feat: adiciona o parcelamento --- assets/pix-106 1.svg | 38 +++++++++++++++++++ assets/pix.svg | 38 +++++++++++++++++++ react/parcelamento.tsx | 23 +++++++++++ store/blocks/pdp/product.jsonc | 6 +-- store/interfaces.json | 3 ++ 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 | 5 +++ 9 files changed, 126 insertions(+), 4 deletions(-) create mode 100644 assets/pix-106 1.svg create mode 100644 assets/pix.svg create mode 100644 react/parcelamento.tsx diff --git a/assets/pix-106 1.svg b/assets/pix-106 1.svg new file mode 100644 index 0000000..42e5799 --- /dev/null +++ b/assets/pix-106 1.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/pix.svg b/assets/pix.svg new file mode 100644 index 0000000..bcf46c3 --- /dev/null +++ b/assets/pix.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/react/parcelamento.tsx b/react/parcelamento.tsx new file mode 100644 index 0000000..4d9548c --- /dev/null +++ b/react/parcelamento.tsx @@ -0,0 +1,23 @@ +import React from 'react' +import { useProduct } from 'vtex.product-context' + + +const Parcelamento = () => { + const product = useProduct() + + const Installments = { + numberOfInstallments: + product?.selectedItem?.sellers[0].commertialOffer.Installments[3] + .NumberOfInstallments, + } + const Price = { + numberOfInstallments: product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value + } + console.log(product); + return

+ {Installments.numberOfInstallments} x de R$  + {Price.numberOfInstallments?.toFixed(2).toString().replace(".", ",")} sem juros +

+}; + +export default Parcelamento diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 8925ddd..6456dbe 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -233,9 +233,8 @@ "flex-layout.row#product-name", "product-identifier.product", "product-rating-summary", - "flex-layout.row#list-price-savings", "flex-layout.row#selling-price", - "product-installments", + "Parcelamento", "sku-selector", "product-separator", "product-quantity", @@ -243,8 +242,7 @@ "product-gifts", "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" ] }, "flex-layout.row#product-name": { diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..2f56585 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,8 @@ "html": { "component": "html", "composition": "children" + }, + "Parcelamento": { + "component": "parcelamento" } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c4748ce..55cfa5e 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -21,4 +21,10 @@ .product-identifier--productReference { display: flex; justify-content: right; + color: rgba(146, 146, 146, 0.48); + font-family: "Open Sans"; + 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 67077cb..9ed635d 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -33,4 +33,9 @@ .pointerEventsNone { display: none; +} + +.skuSelectorContainer { + display: flex; + 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 ba46aa0..b6b0a20 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -10,4 +10,10 @@ .product-identifier--productReference{ display: flex; justify-content: right; + color: rgba(146, 146, 146, 0.48); + font-family: 'Open Sans'; + 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 0baa00a..a140b3d 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -24,3 +24,8 @@ .pointerEventsNone{ display: none; } +.skuSelectorContainer{ + display: flex; + flex-direction: column; + +} From 4a32541a4bde4c54678210cd3ea970d599a48aba Mon Sep 17 00:00:00 2001 From: Samuel Date: Mon, 30 Jan 2023 15:01:27 -0300 Subject: [PATCH 05/22] feat: adiciona pix --- assets/pix-106 1.svg | 38 ------------------- assets/{pix.svg => pix-samuelcondack} | 0 react/imagempix.css | 17 +++++++++ react/imagempix.tsx | 31 +++++++++++++++ ...{parcelamento.tsx => parcelamentoPage.tsx} | 0 store/blocks/pdp/product.jsonc | 6 +++ store/interfaces.json | 5 ++- styles/css/vtex.flex-layout.css | 9 +++++ styles/css/vtex.store-components.css | 2 +- .../sass/pages/product/vtex.flex-layout.scss | 7 ++++ .../pages/product/vtex.store-components.scss | 3 +- 11 files changed, 76 insertions(+), 42 deletions(-) delete mode 100644 assets/pix-106 1.svg rename assets/{pix.svg => pix-samuelcondack} (100%) create mode 100644 react/imagempix.css create mode 100644 react/imagempix.tsx rename react/{parcelamento.tsx => parcelamentoPage.tsx} (100%) diff --git a/assets/pix-106 1.svg b/assets/pix-106 1.svg deleted file mode 100644 index 42e5799..0000000 --- a/assets/pix-106 1.svg +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/assets/pix.svg b/assets/pix-samuelcondack similarity index 100% rename from assets/pix.svg rename to assets/pix-samuelcondack diff --git a/react/imagempix.css b/react/imagempix.css new file mode 100644 index 0000000..c8231f1 --- /dev/null +++ b/react/imagempix.css @@ -0,0 +1,17 @@ +.pixwrapper{ + display: flex; + flex-direction: row; + align-items: center; +} +.priceandp{ + margin-left: 26px; +} +.priceandp>p{ + margin: 0; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/react/imagempix.tsx b/react/imagempix.tsx new file mode 100644 index 0000000..a4fc5cb --- /dev/null +++ b/react/imagempix.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import { useProduct } from 'vtex.product-context' +import { useCssHandles } from 'vtex.css-handles' +import "./imagempix.css" + +const piximgacademy = () => { + + const CSS_HANDLES = [ + "pixwrapper", + "priceandp" + ] + const handles = useCssHandles(CSS_HANDLES) + const product = useProduct() + const productPrice = product?.selectedItem?.sellers[0].commertialOffer.Price + const discount = Number(productPrice) * 0.1 + const pixprice = Number(productPrice) - discount + return ( + <> +
+
+ imagem pix +
+
+ R$ {pixprice.toFixed(2).toString().replace(".",",")} +

10 % de desconto

+
+
+ + ) +} +export default piximgacademy; diff --git a/react/parcelamento.tsx b/react/parcelamentoPage.tsx similarity index 100% rename from react/parcelamento.tsx rename to react/parcelamentoPage.tsx diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6456dbe..33d5cfb 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -10,6 +10,11 @@ "product-questions-and-answers" ] }, + "Pix-academy": { + "props": { + "blockClass": "pix-wrapper" + } + }, "tab-layout#desc": { "children": [ "tab-list#home", @@ -235,6 +240,7 @@ "product-rating-summary", "flex-layout.row#selling-price", "Parcelamento", + "Pix-academy", "sku-selector", "product-separator", "product-quantity", diff --git a/store/interfaces.json b/store/interfaces.json index 2f56585..2c40f7f 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -7,6 +7,9 @@ "composition": "children" }, "Parcelamento": { - "component": "parcelamento" + "component": "parcelamentoPage" + }, + "Pix-academy": { + "component": "imagempix" } } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 55cfa5e..7906aba 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -27,4 +27,13 @@ font-weight: 400; font-size: 14px; line-height: 19px; +} + +.pixWrapper { + display: flex; + flex-direction: row; +} + +.pix-wrapper { + display: none; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 9ed635d..713be36 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -37,5 +37,5 @@ .skuSelectorContainer { display: flex; - flex-direction: column; + flex-direction: column-reverse; } \ 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 b6b0a20..1f299f3 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -17,3 +17,10 @@ font-size: 14px; line-height: 19px; } +.pixWrapper{ + display: flex; + flex-direction: row; + } +.pix-wrapper{ + display: none; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index a140b3d..5b51ed8 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -26,6 +26,5 @@ } .skuSelectorContainer{ display: flex; - flex-direction: column; - + flex-direction: column-reverse; } From 904f5a4149fddf367fcbc836a6f98ae9ab5cd48c Mon Sep 17 00:00:00 2001 From: Samuel Date: Mon, 30 Jan 2023 16:47:51 -0300 Subject: [PATCH 06/22] feat: adiciona css de frameAround --- react/imagempix.css | 6 ++++ styles/css/vtex.store-components.css | 28 +++++++++++++++++ .../pages/product/vtex.store-components.scss | 31 +++++++++++++++++++ 3 files changed, 65 insertions(+) diff --git a/react/imagempix.css b/react/imagempix.css index c8231f1..2872097 100644 --- a/react/imagempix.css +++ b/react/imagempix.css @@ -5,6 +5,12 @@ } .priceandp{ margin-left: 26px; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); } .priceandp>p{ margin: 0; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 713be36..21c3deb 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -38,4 +38,32 @@ .skuSelectorContainer { display: flex; flex-direction: column-reverse; +} + +.frameAround, +.skuSelectorInternalBox { + border-radius: 1.5rem; + z-index: 3; + padding: 0; +} + +.skuSelectorSubcontainer--tamanho .skuSelectorItem { + height: 43px; +} +.skuSelectorSubcontainer--tamanho .frameAround { + width: 40px; + height: 40px; + bottom: -0.25rem; + top: 0rem; + left: 0rem; + right: -0.25rem; +} +.skuSelectorSubcontainer--tamanho .valueWrapper { + padding: 10px 11px; + width: 40px; + height: 40px; +} + +.frameAround { + border-color: #000; } \ 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 5b51ed8..9a51e15 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -28,3 +28,34 @@ display: flex; flex-direction: column-reverse; } +.frameAround, +.skuSelectorInternalBox { + border-radius: 1.5rem; + z-index: 3; + padding: 0; +} + +.skuSelectorSubcontainer--tamanho { + .skuSelectorItem { + height: 43px; + } + + .frameAround { + width: 40px; + height: 40px; + + bottom: -0.25rem; + top: 0rem; + left: 0rem; + right: -0.25rem; + } + .valueWrapper { + padding: 10px 11px; + width: 40px; + height: 40px; + } +} + +.frameAround { + border-color: #000; +} From 8e5bed3e6da691593c95dc4bc264ac218d2da06a Mon Sep 17 00:00:00 2001 From: Samuel Date: Mon, 30 Jan 2023 17:00:14 -0300 Subject: [PATCH 07/22] =?UTF-8?q?feat:=20altera=20a=20navega=C3=A7=C3=A3o?= =?UTF-8?q?=20do=20produto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- store/blocks/pdp/product.jsonc | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 33d5cfb..dbb4f60 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -211,7 +211,7 @@ "stack-layout" ], "props": { - "width": "60%", + "width": "54%", "rowGap": 0 } }, @@ -226,7 +226,10 @@ "desktop": "auto", "phone": "16:9" }, - "displayThumbnailsArrows": true + "thumbnailsOrientation": "horizontal", + "displayThumbnailsArrows": false, + "showNavigationArrows": false, + "showPaginationDots": false } }, "flex-layout.col#right-col": { From 558dbe128bb7c842222fba385326ad9048a557b9 Mon Sep 17 00:00:00 2001 From: Samuel Date: Tue, 31 Jan 2023 17:39:32 -0300 Subject: [PATCH 08/22] feat: adiciona scss de quantity button, adicionar ao carrinho e calcular frete --- react/components/Html/style.css | 26 +++++ store/blocks/pdp/product.jsonc | 12 ++- styles/css/vtex.product-identifier.css | 16 ++- styles/css/vtex.product-quantity.css | 45 ++++++++ styles/css/vtex.store-components.css | 86 +++++++++++++++ .../product/vtex.product-identifier.scss | 19 +++- .../pages/product/vtex.product-quantity.scss | 42 ++++++++ .../pages/product/vtex.store-components.scss | 102 ++++++++++++++++++ 8 files changed, 340 insertions(+), 8 deletions(-) create mode 100644 styles/css/vtex.product-quantity.css create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/react/components/Html/style.css b/react/components/Html/style.css index a57dcbd..adf64a4 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -1,3 +1,29 @@ [class*="html--pdp-breadcrumb"] { margin-left: 40px; } + +[class*="html"] { + display: flex; + align-items: center; + gap: 10px; +} +[class*='html'] > [class*='button'] { + width: 100%; + height: 49px; + margin-right: 40px; + background: #000; + border: #000; +} + +[class*="html"]>[class*='flexRow'] { + width: 100%; + height: 49px; + display: flex; + align-items: center; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #FFFFFF; +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index dbb4f60..d0f2b77 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -10,9 +10,15 @@ "product-questions-and-answers" ] }, + "html#quantityAndButton": { + "children": [ + "product-quantity", + "add-to-cart-button" + ] + }, "Pix-academy": { "props": { - "blockClass": "pix-wrapper" + "blockClass": "pix-wrapper" } }, "tab-layout#desc": { @@ -245,11 +251,9 @@ "Parcelamento", "Pix-academy", "sku-selector", - "product-separator", - "product-quantity", + "html#quantityAndButton", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", "availability-subscriber", "shipping-simulator" ] diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index d60e859..c752b47 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -7,7 +7,19 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.product-identifier--productReference { +.product-identifier { display: flex; - justify-content: right; + justify-content: flex-end; + margin-right: 40px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + color: rgba(146, 146, 146, 0.48); +} +.product-identifier .product-identifier__label, +.product-identifier .product-identifier__separator { + display: none; } \ 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..4bfb790 --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,45 @@ +/* +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 { + margin: 0; +} +.quantitySelectorContainer .quantitySelectorTitle { + display: none; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) { + width: 128px; + border: solid 1px #ccc; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button-container) :global(.vtex-numeric-stepper__plus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) { + width: 100%; + height: 49px; + border: none; + background: #fff; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button-container) :global(.vtex-numeric-stepper__minus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 21c3deb..d1b9b59 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -12,6 +12,11 @@ background: red; } +.carouselGaleryThumbs { + width: 59.24%; + padding-left: 40px; +} + .productNameContainer { display: flex; justify-content: right; @@ -35,6 +40,18 @@ display: none; } +.productBrand { + display: flex; + justify-content: flex-end; + margin-right: 37px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + color: #575757; +} + .skuSelectorContainer { display: flex; flex-direction: column-reverse; @@ -66,4 +83,73 @@ .frameAround { border-color: #000; +} + +.shippingContainer { + display: flex; + margin: 0; + align-items: center; + position: relative; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { + display: flex; + flex-direction: column; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input__label)::before { + content: "CALCULAR FRETE:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { + width: 231px; + height: 49px; + margin: 0; + padding: 16.5px 0 16.5px 16px; + border: 1px solid #cccccc; + border-radius: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + position: absolute; + padding: 0; + left: 312px; + top: 41.5px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex-address-form__postalCode-forgottenURL):first-child { + color: #000; +} +.shippingContainer :global(.vtex-button) { + display: flex; + width: 49px; + height: 49px; + margin-bottom: 5px; + background: #000; + border: 1px solid #000; + border-radius: 0; + cursor: pointer; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + padding: 0; + font-size: 0; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::before { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #fff; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 3edfefd..cc3986e 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -1,4 +1,19 @@ -.product-identifier--productReference{ +.product-identifier { display: flex; - justify-content: right; + justify-content: flex-end; + margin-right: 40px; + + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + + color: rgba(146, 146, 146, 0.48); + + .product-identifier__label, + .product-identifier__separator { + display: none; + } } 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..8b339ef --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,42 @@ +.quantitySelectorContainer { + margin: 0; + + .quantitySelectorTitle { + display: none; + } + :global(.vtex-numeric-stepper-wrapper) { + :global(.vtex-numeric-stepper-container) { + width: 128px; + border: solid 1px #ccc; + + :global(.vtex-numeric-stepper__plus-button-container) { + height: 49px; + + :global(.vtex-numeric-stepper__plus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; + } + } + :global(.vtex-numeric-stepper__input) { + width: 100%; + height: 49px; + border: none; + background: #fff; + } + :global(.vtex-numeric-stepper__minus-button-container) { + height: 49px; + + :global(.vtex-numeric-stepper__minus-button) { + width: 100%; + height: 49px; + color: #000; + border: none; + background: #fff; + } + } + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 9a51e15..f67308b 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -3,6 +3,10 @@ .newsletter{ background: red; } +.carouselGaleryThumbs { + width: 59.24%; + padding-left: 40px; +} .productNameContainer{ display: flex; justify-content: right; @@ -24,6 +28,19 @@ .pointerEventsNone{ display: none; } +.productBrand { + display: flex; + justify-content: flex-end; + margin-right: 37px; + + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + + color: #575757; +} .skuSelectorContainer{ display: flex; flex-direction: column-reverse; @@ -59,3 +76,88 @@ .frameAround { border-color: #000; } + +.shippingContainer { + display: flex; + margin: 0; + align-items: center; + position: relative; + + :global(.vtex-address-form__postalCode) { + display: flex; + + :global(.vtex-input) { + display: flex; + flex-direction: column; + + :global(.vtex-input__label) { + font-size: 0; + } + + :global(.vtex-input__label)::before { + content: 'CALCULAR FRETE:'; + + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + + :global(.vtex-input-prefix__group) { + width: 231px; + height: 49px; + margin: 0; + padding: 16.5px 0 16.5px 16px; + + border: 1px solid #cccccc; + border-radius: 0; + } + } + + :global(.vtex-address-form__postalCode-forgottenURL) { + display: flex; + position: absolute; + padding: 0; + left: 312px; + top: 41.5px; + + :global(.vtex-address-form__postalCode-forgottenURL):first-child { + color: #000; + } + } + } + + :global(.vtex-button) { + display: flex; + width: 49px; + height: 49px; + margin-bottom: 5px; + + background: #000; + border: 1px solid #000; + border-radius: 0; + + cursor: pointer; + + :global(.vtex-button__label) { + padding: 0; + font-size: 0; + } + + :global(.vtex-button__label)::before { + content: 'OK'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + + display: flex; + align-items: center; + + color: #fff; + } + } +} From f2ab58a2b85b90527b43ac3435ce1cf2d0a3fc22 Mon Sep 17 00:00:00 2001 From: Samuel Date: Tue, 31 Jan 2023 18:26:49 -0300 Subject: [PATCH 09/22] feat: adiciona css do parcelamento --- react/components/Html/style.css | 1 + react/parcelamentoPage.css | 6 ++++ react/parcelamentoPage.tsx | 23 ++++++++++----- store/blocks/pdp/product.jsonc | 1 - styles/css/vtex.breadcrumb.css | 16 ++++++---- styles/css/vtex.store-components.css | 3 ++ .../sass/pages/product/vtex.breadcrumb.scss | 29 ++++++++++++------- .../pages/product/vtex.store-components.scss | 3 ++ 8 files changed, 59 insertions(+), 23 deletions(-) create mode 100644 react/parcelamentoPage.css diff --git a/react/components/Html/style.css b/react/components/Html/style.css index adf64a4..0b2bebb 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -6,6 +6,7 @@ display: flex; align-items: center; gap: 10px; + margin-bottom: 16px; } [class*='html'] > [class*='button'] { width: 100%; diff --git a/react/parcelamentoPage.css b/react/parcelamentoPage.css new file mode 100644 index 0000000..44c7d53 --- /dev/null +++ b/react/parcelamentoPage.css @@ -0,0 +1,6 @@ +.ParcelaWrapper { + margin: 0 0 8px 0; +} +.ParcelaWrapper > { + color: #929292; +} diff --git a/react/parcelamentoPage.tsx b/react/parcelamentoPage.tsx index 4d9548c..75fbeaa 100644 --- a/react/parcelamentoPage.tsx +++ b/react/parcelamentoPage.tsx @@ -1,8 +1,13 @@ import React from 'react' import { useProduct } from 'vtex.product-context' +import { useCssHandles } from 'vtex.css-handles' +import "./parcelamentoPage.css" const Parcelamento = () => { + const CSS_HANDLES = ['ParcelaWrapper'] + + const handles = useCssHandles(CSS_HANDLES) const product = useProduct() const Installments = { @@ -11,13 +16,17 @@ const Parcelamento = () => { .NumberOfInstallments, } const Price = { - numberOfInstallments: product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value + numberOfInstallments: + product?.selectedItem?.sellers[0].commertialOffer.Installments[3].Value, } - console.log(product); - return

- {Installments.numberOfInstallments} x de R$  - {Price.numberOfInstallments?.toFixed(2).toString().replace(".", ",")} sem juros -

-}; + console.log(product) + return ( +

+ {Installments.numberOfInstallments} x de R$  + {Price.numberOfInstallments?.toFixed(2).toString().replace('.', ',')} sem + juros +

+ ) +} export default Parcelamento diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index d0f2b77..b33fb21 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -166,7 +166,6 @@ "props": { "blockClass": "img-descricao", "src": "https://agenciamagma.vtexassets.com/arquivos/ids/164491-800-auto?v=637781133812700000&width=800&height=auto&aspect=true" - // "blockClass":"img-descricao" } }, "condition-layout.product#availability": { diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 61c0e47..006fdc2 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -8,6 +8,7 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { + padding-left: 40px; display: flex; align-items: center; } @@ -17,14 +18,19 @@ .container .homeLink::before { content: "Home"; font-size: 16px; + color: #929292; } -.container .arrow--1 { - display: none; +.container .homeLink:hover::before { + color: #0f3e99; } -.container .arrow--1 .Link { - font-size: 0px; +.container .arrow--1 .link { + font-size: 0; } -.container .arrow--1 .Link::before { +.container .arrow--1 .link::before { content: "Sapatos"; font-size: 16px; + color: #929292; +} +.container .arrow--1 .link:hover::before { + color: #0f3e99; } \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index d1b9b59..2367fdf 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -125,6 +125,9 @@ left: 312px; top: 41.5px; } +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + color: black; +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex-address-form__postalCode-forgottenURL):first-child { color: #000; } diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index a15d849..a7074cb 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,24 +1,33 @@ -.container{ +.container { + padding-left: 40px; display: flex; align-items: center; - .homeLink{ - .homeIcon{ + .homeLink { + .homeIcon { display: none; } } - .homeLink::before{ - content: "Home"; + .homeLink::before { + content: 'Home'; font-size: 16px; + color: #929292; + } + + .homeLink:hover::before { + color: #0f3e99; } .arrow--1 { - display: none; - .Link{ - font-size: 0px; + .link { + font-size: 0; } - .Link::before{ - content: "Sapatos"; + .link::before { + content: 'Sapatos'; font-size: 16px; + color: #929292; + } + .link:hover::before { + color: #0f3e99; } } } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index f67308b..1aea565 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -123,6 +123,9 @@ left: 312px; top: 41.5px; + :last-child{ + color: black; + } :global(.vtex-address-form__postalCode-forgottenURL):first-child { color: #000; } From 969ffc873e319881ab5f1fbe532a288dbaa4f9f9 Mon Sep 17 00:00:00 2001 From: Samuel Date: Fri, 3 Feb 2023 15:33:31 -0300 Subject: [PATCH 10/22] feat: adiciona o newsletter --- react/components/Html/style.css | 6 +- store/blocks/home/home.jsonc | 23 +++--- store/blocks/pdp/product.jsonc | 60 +++++++++++--- styles/css/vtex.breadcrumb.css | 8 ++ styles/css/vtex.flex-layout.css | 6 -- styles/css/vtex.product-costumizer.css | 12 +++ styles/css/vtex.product-customizer.css | 24 ++++++ styles/css/vtex.rich-text.css | 21 ++++- styles/css/vtex.store-components.css | 73 ++++++++++++++++- .../sass/pages/product/vtex.breadcrumb.scss | 6 ++ .../sass/pages/product/vtex.flex-layout.scss | 5 -- .../product/vtex.product-customizer.scss | 12 +++ styles/sass/pages/product/vtex.rich-text.scss | 18 +++++ .../pages/product/vtex.store-components.scss | 80 ++++++++++++++++++- 14 files changed, 315 insertions(+), 39 deletions(-) create mode 100644 styles/css/vtex.product-costumizer.css create mode 100644 styles/css/vtex.product-customizer.css create mode 100644 styles/sass/pages/product/vtex.product-customizer.scss diff --git a/react/components/Html/style.css b/react/components/Html/style.css index 0b2bebb..9d16c13 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -4,13 +4,15 @@ [class*="html"] { display: flex; - align-items: center; + width: 100%; gap: 10px; margin-bottom: 16px; } -[class*='html'] > [class*='button'] { + +[class*='html']>[class*='button'] { width: 100%; height: 49px; + border-radius: 0; margin-right: 40px; background: #000; border: #000; diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..04555c6 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,7 +2,7 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "example-component", /* You can make references to blocks defined in other files. + "example-component", /* You can make references to blocks defined in other files. * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals", "__fold__", @@ -14,9 +14,10 @@ "newsletter" ] }, - "list-context.image-list#demo": { - "children": ["slider-layout#demo-images"], + "children": [ + "slider-layout#demo-images" + ], "props": { "height": 570, "preload": true, @@ -44,7 +45,6 @@ "blockClass": "carousel" } }, - "rich-text#shelf-title": { "props": { "text": "## Summer", @@ -52,11 +52,17 @@ } }, "flex-layout.row#shelf": { - "children": ["list-context.product-list#demo1"] + "children": [ + "list-context.product-list#demo1" + ] }, "list-context.product-list#demo1": { - "blocks": ["product-summary.shelf"], - "children": ["slider-layout#demo-products"], + "blocks": [ + "product-summary.shelf" + ], + "children": [ + "slider-layout#demo-products" + ], "props": { "orderBy": "OrderByTopSaleDESC" } @@ -73,7 +79,6 @@ "blockClass": "shelf" } }, - "info-card#home": { "props": { "id": "info-card-home", @@ -87,14 +92,12 @@ "textAlignment": "center" } }, - "rich-text#question": { "props": { "text": "**This is an example store built using the VTEX platform.\nWant to know more?**", "blockClass": "question" } }, - "rich-text#link": { "props": { "text": "\n**Reach us at**\nwww.vtex.com.br", diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index b33fb21..eaba3af 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -5,15 +5,47 @@ "condition-layout.product#availability", "tab-layout#desc", "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", - "product-questions-and-answers" + // "product-specification-group#table", + "list-context.product-list#demo1", + "product-questions-and-answers", + "newsletter" + ] }, + "list-context.product-list#demo1": { + "blocks": [ + "product-summary.shelf#demo1" + ], + "children": [ + "slider-layout#demo-products" + ] + }, + "product-summary.shelf#demo1": { + "children": [ + "product-summary-name", + "product-summary-description", + "product-summary-image", + "product-summary-price", + "product-summary-sku-selector", + "product-summary-buy-button" + ] + }, + "slider-layout#demo-products": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": true, + "showNavigationArrows": "desktopOnly", + "blockClass": "carousel" + } + }, "html#quantityAndButton": { "children": [ "product-quantity", - "add-to-cart-button" + "html#add-to-cart-button" ] }, "Pix-academy": { @@ -89,27 +121,27 @@ } }, "tab-content.item#desc2": { - "children": [], + "children": ["flex-layout.row#description-row"], "props": { "tabId": "desc2" } }, "tab-content.item#desc3": { - "children": [], + "children": ["flex-layout.row#description-row"], "props": { - "tabId": "desc2" + "tabId": "desc3" } }, "tab-content.item#desc4": { - "children": [], + "children": ["flex-layout.row#description-row"], "props": { - "tabId": "desc2" + "tabId": "desc4" } }, "tab-content.item#desc5": { "children": [], "props": { - "tabId": "desc2" + "tabId": "desc5" } }, "html#breadcrumb": { @@ -281,6 +313,14 @@ "add-to-cart-button" ] }, + "html#add-to-cart-button": { + "props": { + "testId": "add-to-cart-button" + }, + "children": [ + "add-to-cart-button" + ] + }, "flex-layout.row#product-availability": { "props": { "colGap": 7, diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 006fdc2..fcfcfef 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -33,4 +33,12 @@ } .container .arrow--1 .link:hover::before { color: #0f3e99; +} + +.termArrow { + display: none; +} + +.term { + display: none; } \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 7906aba..b954f6d 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -7,12 +7,6 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.flexRowContent :global(.vtex-button) { - background-color: black; - border-radius: 0; - border: 0; -} - .flexRowContent--description-row { display: flex; justify-content: center; diff --git a/styles/css/vtex.product-costumizer.css b/styles/css/vtex.product-costumizer.css new file mode 100644 index 0000000..1da8082 --- /dev/null +++ b/styles/css/vtex.product-costumizer.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 */ +.productAssemblyGroupNameRow { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-customizer.css b/styles/css/vtex.product-customizer.css new file mode 100644 index 0000000..84eb573 --- /dev/null +++ b/styles/css/vtex.product-customizer.css @@ -0,0 +1,24 @@ +/* +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 */ +.productAssemblyGroupName { + display: none; +} + +.productAssemblyGroupRequiredTag { + display: none; +} + +.textInputValue { + display: none; +} + +.flexColChild { + 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..c665577 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -1,3 +1,4 @@ +@charset "UTF-8"; /* 0 - 600PX: Phone 600 - 900px: Table portrait @@ -6,4 +7,22 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container { + justify-content: center; + padding: 16px 0; +} +.container .heading { + font-size: 0; + text-align: center; +} +.container .heading::before { + content: "Você também pode gostar:"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 2367fdf..9ef056d 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,7 +9,71 @@ /* Grid breakpoints */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap"); .newsletter { - background: red; + background: black; +} +.newsletter .container .form .label { + font-size: 0; + display: flex; + flex-direction: column; + gap: 16px; +} +.newsletter .container .form .label::before { + content: "Assine nossa newsletter"; + font-size: 24px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #FFFFFF; +} +.newsletter .container .form .label::after { + content: "Receba ofertas e novidades por e-mail"; + white-space: pre; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +.newsletter .container .form .inputGroup { + display: flex; + justify-content: center; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: none; + border-bottom: 1px #929292 solid; + border-radius: 0; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + background: black; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + width: 774px; +} +.newsletter .container .form .inputGroup :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input)::before { + content: "Digite seu e-mail"; + font-size: 16px; + color: white; +} +.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) { + padding: 0; +} +.newsletter .container .form .inputGroup :global(.vtex-store-components-3-x-buttonContainer) :global(.vtex-button) { + background: black; + border: none; + border-bottom: 3px gray solid; + border-radius: 0; + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; } .carouselGaleryThumbs { @@ -17,6 +81,11 @@ padding-left: 40px; } +.productImageTag { + width: unset !important; + margin-left: 40px; +} + .productNameContainer { display: flex; justify-content: right; @@ -32,7 +101,7 @@ } .productDescriptionContainer { - width: 632px; + max-width: 632px; margin-left: 32px; } diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index a7074cb..7de01b8 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -31,3 +31,9 @@ } } } +.termArrow{ + display: none; +} +.term{ + display: none; +} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 1f299f3..ad6d203 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,8 +1,3 @@ -.flexRowContent :global(.vtex-button){ - background-color: black; - border-radius: 0; - border: 0; -} .flexRowContent--description-row{ display: flex; justify-content: center; diff --git a/styles/sass/pages/product/vtex.product-customizer.scss b/styles/sass/pages/product/vtex.product-customizer.scss new file mode 100644 index 0000000..2e3102b --- /dev/null +++ b/styles/sass/pages/product/vtex.product-customizer.scss @@ -0,0 +1,12 @@ +.productAssemblyGroupName{ + display: none; +} +.productAssemblyGroupRequiredTag{ + display: none; +} +.textInputValue{ + display: none; +} +.flexColChild{ + display: none; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..ed9970d 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,18 @@ +.container{ + justify-content: center; + padding: 16px 0; + .heading{ + font-size: 0; + text-align: center; + &::before{ + content: 'Você também pode gostar:'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 1aea565..5ce3af0 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,12 +1,86 @@ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap'); .newsletter{ - background: red; -} + background: black; + .container{ + .form{ + .label{ + font-size: 0; + display: flex; + flex-direction: column; + gap: 16px; + &::before{ + content: 'Assine nossa newsletter'; + font-size: 24px; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #FFFFFF; + } + &::after{ + content: 'Receba ofertas e novidades por e-mail'; + white-space: pre; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + } + } + .inputGroup{ + display: flex; + justify-content: center; + :global(.vtex-input){ + :global(.vtex-input-prefix__group){ + border: none; + border-bottom: 1px #929292 solid; + border-radius: 0; + :global(.vtex-styleguide-9-x-input){ + background: black; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + width: 774px; + &::before{ + content: 'Digite seu e-mail'; + font-size: 16px; + color: white; + } + } + } + } + :global(.vtex-store-components-3-x-buttonContainer){ + padding: 0; + :global(.vtex-button){ + background: black; + border: none; + border-bottom: 3px gray solid; + border-radius: 0; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + } + } + } + } + } + } .carouselGaleryThumbs { width: 59.24%; padding-left: 40px; } +.productImageTag{ + width: unset !important; + margin-left: 40px; +} .productNameContainer{ display: flex; justify-content: right; @@ -22,7 +96,7 @@ } } .productDescriptionContainer{ - width: 632px; + max-width: 632px; margin-left: 32px; } .pointerEventsNone{ From fbe0abb61ed9d0e63d5b29586cf56ccdb372eb10 Mon Sep 17 00:00:00 2001 From: Samuel Date: Tue, 7 Feb 2023 11:40:28 -0300 Subject: [PATCH 11/22] feat: adiciona css da shelf --- react/components/Html/style.css | 13 +- react/parcelamentoPage.tsx | 4 +- store/blocks/pdp/product.jsonc | 160 +++++++++-- styles/css/vtex.product-identifier.css | 4 + styles/css/vtex.slider-layout.css | 168 +++++++++-- styles/css/vtex.store-components.css | 240 +++++++++++++++- styles/css/vtex.tab-layout.css | 4 +- .../product/vtex.product-identifier.scss | 3 + .../pages/product/vtex.slider-layout.scss | 171 +++++++++++ .../pages/product/vtex.store-components.scss | 267 +++++++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 4 +- 11 files changed, 981 insertions(+), 57 deletions(-) create mode 100644 styles/sass/pages/product/vtex.slider-layout.scss diff --git a/react/components/Html/style.css b/react/components/Html/style.css index 9d16c13..3237d8a 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -1,14 +1,17 @@ -[class*="html--pdp-breadcrumb"] { - margin-left: 40px; -} - -[class*="html"] { +[class*="html--quantityAndButton"] { display: flex; width: 100%; gap: 10px; margin-bottom: 16px; } +[class*="html--prate"] { + display: flex; + flex-direction: column; +} +[class*="add-to-cart-button"] { + width: 100%; +} [class*='html']>[class*='button'] { width: 100%; height: 49px; diff --git a/react/parcelamentoPage.tsx b/react/parcelamentoPage.tsx index 75fbeaa..c82aa97 100644 --- a/react/parcelamentoPage.tsx +++ b/react/parcelamentoPage.tsx @@ -21,11 +21,11 @@ const Parcelamento = () => { } console.log(product) return ( -

+ {Installments.numberOfInstallments} x de R$  {Price.numberOfInstallments?.toFixed(2).toString().replace('.', ',')} sem juros -

+ ) } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index eaba3af..6790509 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,13 +3,12 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "tab-layout#desc", + "html#product-description", "flex-layout.row#specifications-title", // "product-specification-group#table", - "list-context.product-list#demo1", + "html#slider", "product-questions-and-answers", "newsletter" - ] }, "list-context.product-list#demo1": { @@ -21,6 +20,15 @@ ] }, "product-summary.shelf#demo1": { + "children": [ + "html#prateleira" + ] + }, + "html#prateleira": { + "props": { + "blockClass": "prate", + "testId": "vtex-product-summary" + }, "children": [ "product-summary-name", "product-summary-description", @@ -30,6 +38,13 @@ "product-summary-buy-button" ] }, + "product-summary-image": { + "props": { + "aspectRatio": { + "desktop": "1:1" + } + } + }, "slider-layout#demo-products": { "props": { "itemsPerPage": { @@ -42,12 +57,39 @@ "blockClass": "carousel" } }, - "html#quantityAndButton": { + "html#slider": { + "props": { + "testId": "product-summary-list" + }, "children": [ - "product-quantity", + "list-context.product-list#demo1" + ] + }, + "html#quantityAndButton": { + "props": { + "blockClass": "quantityAndButton" + }, + "children": [ + "html#product-quantity", "html#add-to-cart-button" ] }, + "html#product-quantity": { + "props": { + "testId": "product-quantity" + }, + "children": [ + "product-quantity" + ] + }, + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator" + }, + "children": [ + "shipping-simulator" + ] + }, "Pix-academy": { "props": { "blockClass": "pix-wrapper" @@ -121,25 +163,33 @@ } }, "tab-content.item#desc2": { - "children": ["flex-layout.row#description-row"], + "children": [ + "flex-layout.row#description-row" + ], "props": { "tabId": "desc2" } }, "tab-content.item#desc3": { - "children": ["flex-layout.row#description-row"], + "children": [ + "flex-layout.row#description-row" + ], "props": { "tabId": "desc3" } }, "tab-content.item#desc4": { - "children": ["flex-layout.row#description-row"], + "children": [ + "flex-layout.row#description-row" + ], "props": { "tabId": "desc4" } }, "tab-content.item#desc5": { - "children": [], + "children": [ + "flex-layout.row#description-row" + ], "props": { "tabId": "desc5" } @@ -181,6 +231,14 @@ "product-description" ] }, + "html#product-description": { + "props": { + "testId": "product-description" + }, + "children": [ + "tab-layout#desc" + ] + }, "product-description": { "props": { "blockClass": "product-description-m3" @@ -230,7 +288,7 @@ "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#imagens", "product-bookmark", "product-specification-badges" ] @@ -252,6 +310,14 @@ "rowGap": 0 } }, + "html#imagens": { + "props": { + "testId": "product-images" + }, + "children": [ + "product-images" + ] + }, "flex-layout.row#product-image": { "children": [ "product-images" @@ -275,29 +341,71 @@ "rowGap": 0 }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", + "html#product-name", + "html#codigo", "product-rating-summary", - "flex-layout.row#selling-price", - "Parcelamento", - "Pix-academy", - "sku-selector", + "html#selling-price", + "html#product-installments", + "html#pixacademy", + "html#sku-selector", "html#quantityAndButton", "product-assembly-options", "product-gifts", "availability-subscriber", - "shipping-simulator" + "html#shipping-simulator" + ] + }, + "html#selling-price": { + "props": { + "testId": "product-price" + }, + "children": [ + "product-selling-price" + ] + }, + "html#pixacademy": { + "props": { + "testId": "pix-price", + "blockClass": "pix-wrapper" + }, + "children": [ + "Pix-academy" + ] + }, + "html#product-installments": { + "props": { + "testId": "product-installments" + }, + "children": [ + "product-installments" + ] + }, + "html#product-name": { + "props": { + "testId": "product-name" + }, + "children": [ + "vtex.store-components:product-name" ] }, "flex-layout.row#product-name": { "props": { "marginBottom": 3, - "blockClass": "product-name" + "blockClass": "product-name", + "testId": "product-name" }, "children": [ "vtex.store-components:product-name" ] }, + "html#sku-selector": { + "props": { + "testId": "sku-selector" + }, + "children": [ + "sku-selector" + ] + }, "sku-selector": { "props": { "variationsSpacing": 3, @@ -315,6 +423,7 @@ }, "html#add-to-cart-button": { "props": { + "blockClass": "add-to-cart-button", "testId": "add-to-cart-button" }, "children": [ @@ -340,12 +449,21 @@ "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", - "sku-selector", + "html#product-name", + "html#codigo", + "html#sku-selector", "flex-layout.row#availability" ] }, + "html#codigo": { + "props": { + "blockClass": "codigo", + "testId": "product-code" + }, + "children": [ + "product-identifier.product" + ] + }, "flex-layout.row#availability": { "props": { "blockClass": "message-availability" diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index c752b47..74151ee 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -22,4 +22,8 @@ .product-identifier .product-identifier__label, .product-identifier .product-identifier__separator { display: none; +} + +.product-identifier__value { + text-align: right; } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 55f431f..5f00f47 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -1,31 +1,153 @@ +/* +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 */ .sliderLayoutContainer { + padding: 0 40px 32px; + margin-bottom: 32px; +} +.sliderLayoutContainer .sliderLeftArrow { + left: 36px; + margin: 0; + padding: 0; +} +.sliderLayoutContainer .sliderRightArrow { + right: 36px; + margin: 0; + padding: 0; +} +.sliderLayoutContainer .sliderTrackContainer { + margin: 0 auto; + width: 94%; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack { + gap: 16px; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) { + margin: 0; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) { + padding: 0; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { + display: flex; + order: 1; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-store-components-3-x-discountInsideContainer) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { + width: 100%; + height: 100%; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) { + display: flex; + order: 2; + padding: 0; justify-content: center; } - -.sliderLayoutContainer--carousel { - background-color: #F0F0F0; - min-height: 450px; +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + display: flex; + max-width: 282.4px; + height: 50px; + align-items: center; + order: 4; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; } - -.sliderTrackContainer { - max-width: 100%; +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) { + display: flex; + order: 3; + padding: 0; } - -.paginationDotsContainer { - margin-top: .5rem; - margin-bottom: .5rem; +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) { + display: flex; + justify-content: center; + align-items: center; + text-decoration-line: line-through; + gap: 1px; } - -.layoutContainer--shelf { - margin-top: 20px; - margin-bottom: 20px; - max-width: 96rem; - min-height: 550px; +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-transform: lowercase; + text-decoration: none; + padding: 0; } - -.slide--shelf { - margin-bottom: 25px; - padding-left: .5rem; - padding-right: .5rem; - min-height: 550px; +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-decoration: none; + padding: 0; } +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice)::after { + content: "por"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-product-summary-2-x-currencyContainer) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-installmentsPrice) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-buyButtonContainer) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-description) { + display: none; +} +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-SKUSelectorContainer) { + display: none; +} +.sliderLayoutContainer .paginationDotsContainer { + align-items: center; +} +.sliderLayoutContainer .paginationDotsContainer .paginationDot { + width: 10px; + height: 10px; + background-color: #000; +} +.sliderLayoutContainer .paginationDotsContainer .paginationDot--isActive { + background-color: #fff; + width: 17px !important; + height: 17px !important; + border: 0.5px solid #000; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 9ef056d..22d225f 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 @@ -8,6 +9,14 @@ /* Media Query M3 */ /* Grid breakpoints */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap"); +.container--product-description-m3 { + padding: 0 !important; +} + +.container { + padding: 0 40px; +} + .newsletter { background: black; } @@ -76,14 +85,16 @@ line-height: 19px; } +.shippingTable { + display: block; +} + .carouselGaleryThumbs { width: 59.24%; - padding-left: 40px; } .productImageTag { width: unset !important; - margin-left: 40px; } .productNameContainer { @@ -154,6 +165,168 @@ border-color: #000; } +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue { + font-size: 0; +} +.skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::before { + content: "OUTRAS CORES"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer { + margin-top: 21px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName { + font-size: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "OUTROS TAMANHOS: "; + color: #929292; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList { + margin: 0; + margin-left: 0; + column-gap: 16px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + border: 1px solid #989898; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .skuSelectorItemTextValue { + color: #000000; +} + +.subscriberContainer .title { + font-size: 0; + margin-bottom: 0; +} +.subscriberContainer .title::before { + content: "Produto indisponível"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} +.subscriberContainer .subscribeLabel { + font-size: 0; +} +.subscriberContainer .subscribeLabel::before { + content: "Deseja saber quando estiver disponível?"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #868686; +} +.subscriberContainer .form .content { + position: relative; + display: flex; + height: 40px; + gap: 8px; +} +.subscriberContainer .form .content .input { + margin: 0; +} +.subscriberContainer .form .content .input :global(.vtex-input) :global(.vtex-input-prefix__group) { + border: 0.6px solid #989898; + border-radius: 0; +} +.subscriberContainer .form .content .input :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-styleguide-9-x-input) { + border-radius: 0; +} +.subscriberContainer .form .content .submit { + width: 100%; + position: absolute; + bottom: calc(-100% - 27px); + margin: 0 !important; +} +.subscriberContainer .form .content .submit :global(.vtex-button) { + width: 100%; + background: #000; + border: 0.6px solid #000; + border-radius: 0; + color: #fff; +} +.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label) { + padding: 12px; + font-size: 0; +} +.subscriberContainer .form .content .submit :global(.vtex-button) :global(.vtex-button__label)::before { + content: "avise-me"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + padding: 12px; +} + .shippingContainer { display: flex; margin: 0; @@ -224,4 +397,67 @@ display: flex; align-items: center; color: #fff; +} + +.shippingTable { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + border: none; +} +.shippingTable .shippingTableHead { + display: flex; +} +.shippingTable .shippingTableHead .shippingTableRow { + display: flex; + gap: 62px; + margin-bottom: 15px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { + order: 2; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice { + font-size: 0; +} +.shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryPrice::before { + content: "FRETE"; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 19px; +} +.shippingTable .shippingTableBody .shippingTableRow { + display: flex; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + align-items: center; + color: #afafaf; + margin-bottom: 15px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryEstimate { + order: 2; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryPrice { + width: 108px; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName { + width: 95px; + margin-right: 32px; + padding: 0; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn { + display: none; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index ac373b8..9f7095e 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -11,7 +11,9 @@ margin-bottom: 32px; display: flex; flex-direction: row; - column-gap: 197.5px; + padding-right: 40px; + padding-left: 40px; + justify-content: space-around; } .listContainer::after { content: ""; diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index cc3986e..52af7c3 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -17,3 +17,6 @@ display: none; } } +.product-identifier__value{ + text-align: right; +} 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..9a9e5e6 --- /dev/null +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -0,0 +1,171 @@ +.sliderLayoutContainer { + padding: 0 40px 32px; + margin-bottom: 32px; + + .sliderLeftArrow { + left: 36px; + margin: 0; + padding: 0; + } + + .sliderRightArrow { + right: 36px; + margin: 0; + padding: 0; + } + + .sliderTrackContainer { + margin: 0 auto; + width: 94%; + + .sliderTrack { + gap: 16px; + + .slide { + .slideChildrenContainer { + :global(.vtex-product-summary-2-x-container) { + margin: 0; + + :global(.vtex-product-summary-2-x-element) { + padding: 0; + :global(.vtex-product-summary-2-x-imageContainer) { + display: flex; + order: 1; + + :global(.vtex-store-components-3-x-discountContainer) { + :global(.vtex-store-components-3-x-discountInsideContainer) { + display: none; + } + :global(.vtex-product-summary-2-x-imageContainer) { + :global(.vtex-product-summary-2-x-imageNormal) { + width: 100%; + height: 100%; + } + } + } + } + :global(.vtex-product-summary-2-x-nameContainer) { + display: flex; + order: 2; + padding: 0; + justify-content: center; + + :global(.vtex-product-summary-2-x-productBrand) { + display: flex; + max-width: 282.4px; + height: 50px; + align-items: center; + order: 4; + + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; + } + } + :global(.vtex-product-summary-2-x-priceContainer) { + display: flex; + order: 3; + padding: 0; + + :global(.vtex-store-components-3-x-listPrice) { + display: flex; + justify-content: center; + align-items: center; + text-decoration-line: line-through; + gap: 1px; + + :global(.vtex-store-components-3-x-listPriceLabel) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-transform: lowercase; + text-decoration: none; + padding: 0; + } + :global(.vtex-store-components-3-x-listPriceValue) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + text-decoration: none; + padding: 0; + } + } + :global(.vtex-store-components-3-x-listPrice)::after { + content: 'por'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; + } + + :global(.vtex-store-components-3-x-sellingPrice) { + padding: 0; + + :global(.vtex-product-summary-2-x-currencyContainer) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000; + } + + :global(.vtex-store-components-3-x-sellingPriceLabel) { + display: none; + } + } + + :global(.vtex-store-components-3-x-installmentsPrice) { + display: none; + } + } + + :global(.vtex-product-summary-2-x-buyButtonContainer) { + display: none; + } + :global(.vtex-product-summary-2-x-description) { + display: none; + } + :global(.vtex-product-summary-2-x-SKUSelectorContainer) { + display: none; + } + } + } + } + } + } + } + .paginationDotsContainer { + align-items: center; + // bottom: -32px; + + .paginationDot { + width: 10px; + height: 10px; + background-color: #000; + } + + .paginationDot--isActive { + background-color: #fff; + width: 17px !important; + height: 17px !important; + border: 0.5px solid #000; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 5ce3af0..a43efed 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,5 +1,11 @@ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;700&display=swap'); +.container--product-description-m3{ + padding: 0 !important; +} +.container{ + padding: 0 40px; +} .newsletter{ background: black; .container{ @@ -73,13 +79,14 @@ } } } + .shippingTable{ + display: block; + } .carouselGaleryThumbs { width: 59.24%; - padding-left: 40px; } .productImageTag{ width: unset !important; - margin-left: 40px; } .productNameContainer{ display: flex; @@ -150,7 +157,190 @@ .frameAround { border-color: #000; } +.skuSelectorSubcontainer--cor { + .skuSelectorNameContainer { + .skuSelectorTextContainer { + .skuSelectorName, + .skuSelectorSelectorImageValue { + font-size: 0; + } + .skuSelectorName::before { + content: 'OUTRAS CORES'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + } + } +} +.skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; + .skuSelectorNameContainer { + margin: 0; + .skuSelectorTextContainer { + margin-top: 21px; + .skuSelectorName { + font-size: 0; + &::after { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + content: "OUTROS TAMANHOS: "; + color: #929292; + } + } + } + .skuSelectorOptionsList { + margin: 0; + margin-left: 0; + column-gap: 16px; + .skuSelectorItem { + border-radius: 100%; + width: 40px; + height: 40px; + margin: 0; + // border: 1px solid #989898; + .frameAround--sku-selector { + border-color: #000000; + border-width: 2px; + width: 40px; + height: 40px; + border-radius: 24px; + top: 0; + bottom: 0; + right: 0; + left: 0; + z-index: 5; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + .skuSelectorInternalBox { + border-radius: 100%; + width: 40px; + height: 40px; + border: 1px solid #989898; + .diagonalCross { + width: 30px; + height: 30px; + transform: rotate(274deg); + left: 4px; + top: 5px; + } + .skuSelectorItemTextValue { + padding: 0; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); + } + } + } + .skuSelectorItem--selected { + .skuSelectorInternalBox { + .skuSelectorItemTextValue { + color: #000000; + } + } + } + } + } +} +.subscriberContainer { + .title { + font-size: 0; + margin-bottom: 0; + } + .title::before { + content: 'Produto indisponível'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + + color: #868686; + } + .subscribeLabel { + font-size: 0; + } + .subscribeLabel::before { + content: 'Deseja saber quando estiver disponível?'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + + color: #868686; + } + .form { + .content { + position: relative; + display: flex; + height: 40px; + gap: 8px; + + .input { + margin: 0; + + :global(.vtex-input) { + :global(.vtex-input-prefix__group) { + border: 0.6px solid #989898; + border-radius: 0; + + :global(.vtex-styleguide-9-x-input) { + border-radius: 0; + } + } + } + } + .submit { + width: 100%; + position: absolute; + bottom: calc(-100% - 27px); + margin: 0 !important; + + :global(.vtex-button) { + width: 100%; + background: #000; + border: 0.6px solid #000; + border-radius: 0; + color: #fff; + + :global(.vtex-button__label) { + padding: 12px; + font-size: 0; + } + :global(.vtex-button__label)::before { + content: 'avise-me'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-size: 18px; + line-height: 25px; + text-transform: uppercase; + padding: 12px; + } + } + } + } + } +} .shippingContainer { display: flex; margin: 0; @@ -238,3 +428,76 @@ } } } +.shippingTable { + display: flex; + flex-direction: column; + padding: 0; + margin: 0; + border: none; + + .shippingTableHead { + display: flex; + .shippingTableRow { + display: flex; + gap: 62px; + margin-bottom: 15px; + + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + + .shippingTableHeadDeliveryEstimate { + order: 2; + } + .shippingTableHeadDeliveryPrice { + font-size: 0; + } + .shippingTableHeadDeliveryPrice::before { + content: 'FRETE'; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 19px; + } + } + } + + .shippingTableBody { + .shippingTableRow { + display: flex; + + .shippingTableCell { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + align-items: center; + color: #afafaf; + margin-bottom: 15px; + } + + .shippingTableCellDeliveryEstimate { + order: 2; + } + .shippingTableCellDeliveryPrice { + width: 108px; + } + .shippingTableCellDeliveryName { + width: 95px; + margin-right: 32px; + padding: 0; + + .shippingTableLabel { + .shippingTableRadioBtn { + display: none; + } + } + } + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 4bf0de6..e23d405 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -2,7 +2,9 @@ margin-bottom: 32px; display: flex; flex-direction: row; - column-gap: 197.5px; + padding-right: 40px; + padding-left: 40px; + justify-content: space-around; &::after{ content: ""; background-color: #BFBFBF; From c61e4da93474d5a8466d439ed596f21b884d4be1 Mon Sep 17 00:00:00 2001 From: Samuel Date: Tue, 7 Feb 2023 15:37:46 -0300 Subject: [PATCH 12/22] feat: adiciona layout mobile --- store/blocks/pdp/product.jsonc | 12 +++++----- styles/css/vtex.product-identifier.css | 6 +++++ styles/css/vtex.slider-layout.css | 4 ---- styles/css/vtex.store-components.css | 22 +++++++++++++++++++ styles/css/vtex.tab-layout.css | 12 ++++++++++ .../product/vtex.product-identifier.scss | 5 ++++- .../pages/product/vtex.slider-layout.scss | 4 ---- .../pages/product/vtex.store-components.scss | 16 ++++++++++++++ .../sass/pages/product/vtex.tab-layout.scss | 8 +++++++ 9 files changed, 74 insertions(+), 15 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6790509..cd95aa8 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -30,12 +30,12 @@ "testId": "vtex-product-summary" }, "children": [ - "product-summary-name", - "product-summary-description", "product-summary-image", - "product-summary-price", - "product-summary-sku-selector", - "product-summary-buy-button" + "product-summary-name", + "product-list-price", + "product-selling-price", + "product-summary-description" + // "product-summary-price", ] }, "product-summary-image": { @@ -482,4 +482,4 @@ } } } -} +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 74151ee..609d299 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -19,6 +19,12 @@ text-align: right; color: rgba(146, 146, 146, 0.48); } +@media (max-width: 1024px) { + .product-identifier { + text-align: left; + justify-content: left; + } +} .product-identifier .product-identifier__label, .product-identifier .product-identifier__separator { display: none; diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 5f00f47..6ecad89 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -36,7 +36,6 @@ } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) { display: flex; - order: 1; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-store-components-3-x-discountInsideContainer) { display: none; @@ -47,7 +46,6 @@ } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) { display: flex; - order: 2; padding: 0; justify-content: center; } @@ -56,7 +54,6 @@ max-width: 282.4px; height: 50px; align-items: center; - order: 4; font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; @@ -67,7 +64,6 @@ } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) { display: flex; - order: 3; padding: 0; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) { diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 22d225f..ff44029 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -16,6 +16,12 @@ .container { padding: 0 40px; } +@media (max-width: 1024px) { + .container :global(.vtex-flex-layout-0-x-flexRowContent) { + display: flex; + flex-direction: column; + } +} .newsletter { background: black; @@ -101,6 +107,11 @@ display: flex; justify-content: right; } +@media (max-width: 1024px) { + .productNameContainer { + justify-content: left; + } +} .productNameContainer .productBrand--quickview { font-family: "Open Sans"; font-style: normal; @@ -110,11 +121,22 @@ text-align: right; color: #575757; } +@media (max-width: 1024px) { + .productNameContainer .productBrand--quickview { + text-align: left; + } +} .productDescriptionContainer { max-width: 632px; margin-left: 32px; } +@media (max-width: 1024px) { + .productDescriptionContainer { + max-width: 100%; + margin-left: 0; + } +} .pointerEventsNone { display: none; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 9f7095e..7ae5c2f 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -15,6 +15,13 @@ padding-left: 40px; justify-content: space-around; } +@media (max-width: 1024px) { + .listContainer { + flex-direction: column; + border-top: #BFBFBF 1px solid; + border-spacing: 40px; + } +} .listContainer::after { content: ""; background-color: #BFBFBF; @@ -48,4 +55,9 @@ font-weight: 400; font-size: 18px; line-height: 38px; +} +@media (max-width: 1024px) { + .listItemActive :global(.vtex-button) { + border: 0; + } } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 52af7c3..1b17b64 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -2,13 +2,16 @@ display: flex; justify-content: flex-end; margin-right: 40px; - font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; font-size: 14px; line-height: 19px; text-align: right; + @media (max-width: 1024px){ + text-align: left; + justify-content: left; + } color: rgba(146, 146, 146, 0.48); diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 9a9e5e6..af7bab8 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -30,7 +30,6 @@ padding: 0; :global(.vtex-product-summary-2-x-imageContainer) { display: flex; - order: 1; :global(.vtex-store-components-3-x-discountContainer) { :global(.vtex-store-components-3-x-discountInsideContainer) { @@ -46,7 +45,6 @@ } :global(.vtex-product-summary-2-x-nameContainer) { display: flex; - order: 2; padding: 0; justify-content: center; @@ -55,7 +53,6 @@ max-width: 282.4px; height: 50px; align-items: center; - order: 4; font-family: 'Open Sans', sans-serif; font-style: normal; @@ -68,7 +65,6 @@ } :global(.vtex-product-summary-2-x-priceContainer) { display: flex; - order: 3; padding: 0; :global(.vtex-store-components-3-x-listPrice) { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index a43efed..4cc8d8e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -5,6 +5,12 @@ } .container{ padding: 0 40px; + :global(.vtex-flex-layout-0-x-flexRowContent){ + @media (max-width: 1024px){ + display: flex; + flex-direction: column; + } + } } .newsletter{ background: black; @@ -91,6 +97,9 @@ .productNameContainer{ display: flex; justify-content: right; + @media (max-width: 1024px){ + justify-content: left; + } .productBrand--quickview{ font-family: 'Open Sans'; @@ -100,11 +109,18 @@ line-height: 34px; text-align: right; color: #575757; + @media (max-width: 1024px){ + text-align: left; + } } } .productDescriptionContainer{ max-width: 632px; margin-left: 32px; + @media (max-width: 1024px){ + max-width: 100%; + margin-left: 0; + } } .pointerEventsNone{ display: none; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index e23d405..50787c4 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -5,6 +5,11 @@ padding-right: 40px; padding-left: 40px; justify-content: space-around; + @media (max-width: 1024px){ + flex-direction: column; + border-top: #BFBFBF 1px solid; + border-spacing: 40px; + } &::after{ content: ""; background-color: #BFBFBF; @@ -38,4 +43,7 @@ font-weight: 400; font-size: 18px; line-height: 38px; + @media (max-width: 1024px){ + border: 0; + } } From 4c312a10cc68fe26e9c9ee8b91929b1d84fae818 Mon Sep 17 00:00:00 2001 From: Samuel Date: Tue, 7 Feb 2023 17:41:00 -0300 Subject: [PATCH 13/22] feat: adiciona scss no carouselGallery --- styles/css/vtex.product-price.css | 97 +++++-------------- styles/css/vtex.store-components.css | 24 ++++- .../pages/product/vtex.product-price.scss | 18 ++++ .../pages/product/vtex.store-components.scss | 29 +++++- 4 files changed, 92 insertions(+), 76 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-price.scss diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..386cdca 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,28 @@ +/* +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; + text-align: center; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #BABABA; } .sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; + text-align: center; + font-family: "Open Sans"; + font-style: normal; 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; -} + font-size: 24px; + line-height: 33px; + 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 ff44029..41c0303 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -25,6 +25,7 @@ .newsletter { background: black; + padding: 32px 0; } .newsletter .container .form .label { font-size: 0; @@ -96,7 +97,12 @@ } .carouselGaleryThumbs { - width: 59.24%; + width: 70%; +} +@media (max-width: 1024px) { + .carouselGaleryThumbs { + width: 95%; + } } .productImageTag { @@ -482,4 +488,20 @@ } .shippingTable .shippingTableBody .shippingTableRow .shippingTableCellDeliveryName .shippingTableLabel .shippingTableRadioBtn { display: none; +} + +.carouselGaleryThumbs :first-child { + height: 90px; +} +.carouselGaleryThumbs :first-child :first-child { + gap: 16px !important; +} +.carouselGaleryThumbs :first-child :first-child .productImagesThumb { + width: 20%; + height: fit-content !important; + max-height: 90px; + margin: 0; +} +.carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg { + border-radius: 8px; } \ No newline at end of file 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..78b37cc --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,18 @@ +.listPrice{ + text-align: center; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #BABABA; +} +.sellingPrice{ + text-align: center; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 4cc8d8e..649d424 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -14,6 +14,7 @@ } .newsletter{ background: black; + padding: 32px 0; .container{ .form{ .label{ @@ -89,7 +90,10 @@ display: block; } .carouselGaleryThumbs { - width: 59.24%; + width: 70%; + @media (max-width: 1024px){ + width: 95%; + } } .productImageTag{ width: unset !important; @@ -101,6 +105,7 @@ justify-content: left; } + .productBrand--quickview{ font-family: 'Open Sans'; font-style: normal; @@ -517,3 +522,25 @@ } } } +.carouselGaleryThumbs { + :first-child { + height: 90px; + + :first-child { + gap: 16px !important; + + .productImagesThumb { + width: 20%; + height: fit-content !important; + max-height: 90px; + margin: 0; + + .figure { + .thumbImg { + border-radius: 8px; + } + } + } + } + } +} From 040980ec234166c77273638bb08feac5f24464ad Mon Sep 17 00:00:00 2001 From: Samuel Date: Tue, 7 Feb 2023 21:22:01 -0300 Subject: [PATCH 14/22] feat: adiciona css responsivo mobile --- react/components/Html/style.css | 8 ++++ react/imagempix.css | 11 +++-- styles/css/vtex.breadcrumb.css | 5 +++ styles/css/vtex.flex-layout.css | 16 +++++++ styles/css/vtex.product-identifier.css | 2 + styles/css/vtex.store-components.css | 45 ++++++++++++++++--- styles/css/vtex.tab-layout.css | 16 ++++++- .../sass/pages/product/vtex.breadcrumb.scss | 3 ++ .../sass/pages/product/vtex.flex-layout.scss | 13 ++++++ .../product/vtex.product-identifier.scss | 2 + .../pages/product/vtex.store-components.scss | 42 ++++++++++++++--- .../sass/pages/product/vtex.tab-layout.scss | 20 +++++++-- 12 files changed, 161 insertions(+), 22 deletions(-) diff --git a/react/components/Html/style.css b/react/components/Html/style.css index 3237d8a..90f3940 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -5,13 +5,21 @@ margin-bottom: 16px; } +@media (max-width: 576px) { + [class*="html--quantityAndButton"] { + flex-direction: column; + } +} + [class*="html--prate"] { display: flex; flex-direction: column; } + [class*="add-to-cart-button"] { width: 100%; } + [class*='html']>[class*='button'] { width: 100%; height: 49px; diff --git a/react/imagempix.css b/react/imagempix.css index 2872097..73947fd 100644 --- a/react/imagempix.css +++ b/react/imagempix.css @@ -1,9 +1,10 @@ -.pixwrapper{ +.pixwrapper { display: flex; flex-direction: row; align-items: center; } -.priceandp{ + +.priceandp { margin-left: 26px; font-family: 'Open Sans'; font-style: normal; @@ -11,8 +12,10 @@ font-size: 18px; line-height: 25px; color: rgba(0, 0, 0, 0.58); + margin-top: 6px; } -.priceandp>p{ + +.priceandp>p { margin: 0; font-family: 'Open Sans'; font-style: normal; @@ -20,4 +23,4 @@ font-size: 13px; line-height: 18px; color: #929292; -} +} \ No newline at end of file diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index fcfcfef..af118ef 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -12,6 +12,11 @@ display: flex; align-items: center; } +@media (max-width: 1024px) { + .container { + margin-bottom: 16px; + } +} .container .homeLink .homeIcon { display: none; } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index b954f6d..60b1b71 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -30,4 +30,20 @@ .pix-wrapper { display: none; +} + +:global(.vtex__icon-external-link) { + display: none; +} + +:global(.vtex-store-components-3-x-productImageTag) { + max-height: none !important; +} + +@media (max-width: 1024px) { + .stretchChildrenWidth { + width: 100% !important; + padding: 0; + margin-bottom: 32px; + } } \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 609d299..f229f50 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -17,12 +17,14 @@ font-size: 14px; line-height: 19px; text-align: right; + margin-bottom: 24px; color: rgba(146, 146, 146, 0.48); } @media (max-width: 1024px) { .product-identifier { text-align: left; justify-content: left; + margin-bottom: 24px; } } .product-identifier .product-identifier__label, diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 41c0303..b0eb6b3 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -20,9 +20,20 @@ .container :global(.vtex-flex-layout-0-x-flexRowContent) { display: flex; flex-direction: column; + margin: 0; + padding: 0; } } +:global(.vtex-store-components-3-x-imageElement--img-descricao) { + width: 100%; +} + +:global(.vtex-flex-layout-0-x-flexRow) :global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) { + padding: 0; + margin: 16px 0; +} + .newsletter { background: black; padding: 32px 0; @@ -105,13 +116,10 @@ } } -.productImageTag { - width: unset !important; -} - .productNameContainer { display: flex; justify-content: right; + margin-bottom: 8px; } @media (max-width: 1024px) { .productNameContainer { @@ -130,6 +138,8 @@ @media (max-width: 1024px) { .productNameContainer .productBrand--quickview { text-align: left; + margin-top: 32px; + margin-bottom: 8px; } } @@ -193,6 +203,10 @@ border-color: #000; } +.skuSelectorSubcontainer { + margin-bottom: 16px; +} + .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue { font-size: 0; @@ -214,7 +228,7 @@ margin: 0; } .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer { - margin-top: 21px; + margin-top: 16px; } .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName { font-size: 0; @@ -364,6 +378,11 @@ .shippingContainer :global(.vtex-address-form__postalCode) { display: flex; } +@media (max-width: 376px) { + .shippingContainer :global(.vtex-address-form__postalCode) { + flex-direction: column; + } +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { display: flex; flex-direction: column; @@ -395,11 +414,18 @@ left: 312px; top: 41.5px; } +@media (max-width: 376px) { + .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { + position: unset; + justify-content: right; + } +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { color: black; + text-decoration: underline; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :global(.vtex-address-form__postalCode-forgottenURL):first-child { - color: #000; + display: none; } .shippingContainer :global(.vtex-button) { display: flex; @@ -497,11 +523,16 @@ gap: 16px !important; } .carouselGaleryThumbs :first-child :first-child .productImagesThumb { - width: 20%; + width: 19%; height: fit-content !important; max-height: 90px; margin: 0; } +@media (max-width: 1024px) { + .carouselGaleryThumbs :first-child :first-child .productImagesThumb { + width: 10%; + } +} .carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg { border-radius: 8px; } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 7ae5c2f..7ac6c86 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -18,8 +18,20 @@ @media (max-width: 1024px) { .listContainer { flex-direction: column; - border-top: #BFBFBF 1px solid; - border-spacing: 40px; + padding: 0 40px 16px; + margin-bottom: 0px; + } + .listContainer::before { + content: ""; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + top: 0px; + } + .listContainer::after { + bottom: 0px; } } .listContainer::after { diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 7de01b8..2e378da 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -2,6 +2,9 @@ padding-left: 40px; display: flex; align-items: center; + @media (max-width: 1024px){ + margin-bottom: 16px; + } .homeLink { .homeIcon { diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index ad6d203..1522126 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -19,3 +19,16 @@ .pix-wrapper{ display: none; } +:global(.vtex__icon-external-link){ + display: none; +} +:global(.vtex-store-components-3-x-productImageTag){ + max-height: none !important; +} +.stretchChildrenWidth { + @media (max-width: 1024px) { + width: 100% !important; + padding: 0; + margin-bottom: 32px; + } +} diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss index 1b17b64..02de0c5 100644 --- a/styles/sass/pages/product/vtex.product-identifier.scss +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -8,9 +8,11 @@ font-size: 14px; line-height: 19px; text-align: right; + margin-bottom: 24px; @media (max-width: 1024px){ text-align: left; justify-content: left; + margin-bottom: 24px; } color: rgba(146, 146, 146, 0.48); diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 649d424..37088c0 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -9,6 +9,19 @@ @media (max-width: 1024px){ display: flex; flex-direction: column; + margin: 0; + padding: 0; + } + } +} +:global(.vtex-store-components-3-x-imageElement--img-descricao){ + width: 100%; +} +:global(.vtex-flex-layout-0-x-flexRow){ + :global(.vtex-store-components-3-x-container){ + :global(.vtex-flex-layout-0-x-flexRowContent){ + padding: 0; + margin: 16px 0; } } } @@ -95,12 +108,13 @@ width: 95%; } } -.productImageTag{ - width: unset !important; -} +// .productImageTag{ +// width: unset !important; +// } .productNameContainer{ display: flex; justify-content: right; + margin-bottom: 8px; @media (max-width: 1024px){ justify-content: left; } @@ -116,6 +130,8 @@ color: #575757; @media (max-width: 1024px){ text-align: left; + margin-top: 32px; + margin-bottom: 8px; } } } @@ -178,6 +194,9 @@ .frameAround { border-color: #000; } +.skuSelectorSubcontainer{ + margin-bottom: 16px; +} .skuSelectorSubcontainer--cor { .skuSelectorNameContainer { .skuSelectorTextContainer { @@ -202,7 +221,7 @@ .skuSelectorNameContainer { margin: 0; .skuSelectorTextContainer { - margin-top: 21px; + margin-top: 16px; .skuSelectorName { font-size: 0; &::after { @@ -370,6 +389,9 @@ :global(.vtex-address-form__postalCode) { display: flex; + @media (max-width: 376px){ + flex-direction: column; + } :global(.vtex-input) { display: flex; @@ -407,12 +429,17 @@ padding: 0; left: 312px; top: 41.5px; + @media (max-width: 376px){ + position: unset; + justify-content: right; + } :last-child{ color: black; + text-decoration: underline; } :global(.vtex-address-form__postalCode-forgottenURL):first-child { - color: #000; + display: none; } } } @@ -530,11 +557,14 @@ gap: 16px !important; .productImagesThumb { - width: 20%; + width: 19%; height: fit-content !important; max-height: 90px; margin: 0; + @media (max-width: 1024px){ + width: 10%; + } .figure { .thumbImg { border-radius: 8px; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 50787c4..e84d721 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -5,10 +5,24 @@ padding-right: 40px; padding-left: 40px; justify-content: space-around; - @media (max-width: 1024px){ + @media (max-width: 1024px) { flex-direction: column; - border-top: #BFBFBF 1px solid; - border-spacing: 40px; + padding: 0 40px 16px; + margin-bottom: 0px; + + &::before { + content: ''; + background-color: #bfbfbf; + display: inline-block; + width: 100%; + height: 1px; + position: relative; + top: 0px; + } + + &::after { + bottom: 0px; + } } &::after{ content: ""; From 7e3f872d055806b0f4afab35886169829831c0dc Mon Sep 17 00:00:00 2001 From: Samuel Date: Tue, 7 Feb 2023 22:08:40 -0300 Subject: [PATCH 15/22] feat: adiciona css mobile layout --- styles/css/vtex.tab-layout.css | 14 ++++++++++++++ styles/sass/pages/product/vtex.tab-layout.scss | 13 +++++++++++++ 2 files changed, 27 insertions(+) diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 7ac6c86..0ce7b3e 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -44,6 +44,20 @@ bottom: 9px; } +@media (max-width: 1024px) { + .listItem { + margin: 0; + padding: 0; + } + .listItem :global(.vtex-button) { + margin: 0; + padding: 0; + } + .listItem :global(.vtex-button) :global(.vtex-button__label) { + padding: 0; + } +} + .listItem :global(.vtex-button) { background-color: white; color: #BFBFBF; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index e84d721..c98d287 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -34,6 +34,19 @@ bottom: 9px; } } +.listItem { + @media (max-width: 1024px) { + margin: 0; + padding: 0; + :global(.vtex-button) { + margin: 0; + padding: 0; + :global(.vtex-button__label) { + padding: 0; + } + } + } +} .listItem :global(.vtex-button){ background-color: white; color: #BFBFBF; From 456d617a98c8d0b7a5229180f65a4af51f70bc1c Mon Sep 17 00:00:00 2001 From: Samuel Date: Wed, 8 Feb 2023 13:33:21 -0300 Subject: [PATCH 16/22] feat: adiciona css para layout mobile --- react/Placeholder.css | 0 react/Placeholder.tsx | 9 +++++ store/blocks/pdp/product.jsonc | 3 +- store/interfaces.json | 3 ++ styles/css/vtex.store-components.css | 35 ++++++++++++------- .../pages/product/vtex.store-components.scss | 35 ++++++++++++------- 6 files changed, 58 insertions(+), 27 deletions(-) create mode 100644 react/Placeholder.css create mode 100644 react/Placeholder.tsx diff --git a/react/Placeholder.css b/react/Placeholder.css new file mode 100644 index 0000000..e69de29 diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx new file mode 100644 index 0000000..8fc6add --- /dev/null +++ b/react/Placeholder.tsx @@ -0,0 +1,9 @@ +const Placeholder = () => { + if (typeof document !== 'undefined') { + const InputCep = document.querySelector('.vtex-address-form-4-x-input') + InputCep?.setAttribute('placeholder', 'Digite seu CEP') + } + + return null +} +export default Placeholder diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index cd95aa8..7f16ef7 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -349,6 +349,7 @@ "html#pixacademy", "html#sku-selector", "html#quantityAndButton", + "Placeholder", "product-assembly-options", "product-gifts", "availability-subscriber", @@ -482,4 +483,4 @@ } } } -} \ No newline at end of file +} diff --git a/store/interfaces.json b/store/interfaces.json index 2c40f7f..e028d6b 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -11,5 +11,8 @@ }, "Pix-academy": { "component": "imagempix" + }, + "Placeholder": { + "component": "Placeholder" } } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index b0eb6b3..ce9d4b1 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -56,7 +56,6 @@ } .newsletter .container .form .label::after { content: "Receba ofertas e novidades por e-mail"; - white-space: pre; font-family: "Open Sans"; font-style: normal; font-weight: 400; @@ -110,9 +109,9 @@ .carouselGaleryThumbs { width: 70%; } -@media (max-width: 1024px) { +@media (max-width: 639px) { .carouselGaleryThumbs { - width: 95%; + display: flex; } } @@ -400,13 +399,27 @@ color: #929292; } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { - width: 231px; + width: 100%; height: 49px; margin: 0; padding: 16.5px 0 16.5px 16px; border: 1px solid #cccccc; border-radius: 0; } +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form-4-x-input) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + padding: 8px 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input__error) { + position: absolute; + bottom: 0; +} .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { display: flex; position: absolute; @@ -414,10 +427,10 @@ left: 312px; top: 41.5px; } -@media (max-width: 376px) { +@media (max-width: 476px) { .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) { - position: unset; - justify-content: right; + left: 120px; + top: 85px; } } .shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-address-form__postalCode-forgottenURL) :last-child { @@ -432,6 +445,7 @@ width: 49px; height: 49px; margin-bottom: 5px; + padding: 0 14.5px; background: #000; border: 1px solid #000; border-radius: 0; @@ -523,16 +537,11 @@ gap: 16px !important; } .carouselGaleryThumbs :first-child :first-child .productImagesThumb { - width: 19%; + max-width: 90px; height: fit-content !important; max-height: 90px; margin: 0; } -@media (max-width: 1024px) { - .carouselGaleryThumbs :first-child :first-child .productImagesThumb { - width: 10%; - } -} .carouselGaleryThumbs :first-child :first-child .productImagesThumb .figure .thumbImg { border-radius: 8px; } \ 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 37088c0..650e22c 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -47,7 +47,6 @@ } &::after{ content: 'Receba ofertas e novidades por e-mail'; - white-space: pre; font-family: 'Open Sans'; font-style: normal; font-weight: 400; @@ -104,8 +103,8 @@ } .carouselGaleryThumbs { width: 70%; - @media (max-width: 1024px){ - width: 95%; + @media (max-width: 639px){ + display: flex; } } // .productImageTag{ @@ -413,7 +412,7 @@ } :global(.vtex-input-prefix__group) { - width: 231px; + width: 100%; height: 49px; margin: 0; padding: 16.5px 0 16.5px 16px; @@ -422,16 +421,29 @@ border-radius: 0; } } - + :global(.vtex-address-form-4-x-input) { + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + padding: 8px 0; + } + :global(.vtex-input__error) { + position: absolute; + bottom: 0; + } :global(.vtex-address-form__postalCode-forgottenURL) { display: flex; position: absolute; padding: 0; left: 312px; top: 41.5px; - @media (max-width: 376px){ - position: unset; - justify-content: right; + @media (max-width: 476px){ + left: 120px; + top: 85px; } :last-child{ @@ -449,6 +461,7 @@ width: 49px; height: 49px; margin-bottom: 5px; + padding: 0 14.5px; background: #000; border: 1px solid #000; @@ -557,14 +570,10 @@ gap: 16px !important; .productImagesThumb { - width: 19%; + max-width: 90px; height: fit-content !important; max-height: 90px; margin: 0; - - @media (max-width: 1024px){ - width: 10%; - } .figure { .thumbImg { border-radius: 8px; From eeb2aa9b99700a8d12f797dc1723e73913e3e8a8 Mon Sep 17 00:00:00 2001 From: Samuel Date: Wed, 8 Feb 2023 16:26:28 -0300 Subject: [PATCH 17/22] feat: adiciona css mobile --- store/blocks/pdp/product.jsonc | 4 +- styles/css/vtex.breadcrumb.css | 5 ++ styles/css/vtex.flex-layout.css | 46 ++++++++++++++++++- styles/css/vtex.product-price.css | 22 ++++++++- styles/css/vtex.slider-layout.css | 7 ++- styles/css/vtex.store-components.css | 13 ++++++ styles/css/vtex.tab-layout.css | 19 ++++++++ .../sass/pages/product/vtex.breadcrumb.scss | 5 ++ .../sass/pages/product/vtex.flex-layout.scss | 39 +++++++++++++++- .../pages/product/vtex.product-price.scss | 18 +++++++- .../pages/product/vtex.slider-layout.scss | 3 +- .../pages/product/vtex.store-components.scss | 16 ++++++- .../sass/pages/product/vtex.tab-layout.scss | 16 ++++++- 13 files changed, 196 insertions(+), 17 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 7f16ef7..f06f012 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -53,7 +53,7 @@ "phone": 2 }, "infinite": true, - "showNavigationArrows": "desktopOnly", + "showNavigationArrows": "always", "blockClass": "carousel" } }, @@ -327,7 +327,7 @@ "props": { "aspectRatio": { "desktop": "auto", - "phone": "16:9" + "phone": "1:1" }, "thumbnailsOrientation": "horizontal", "displayThumbnailsArrows": false, diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index af118ef..3141fc5 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -24,6 +24,11 @@ content: "Home"; font-size: 16px; color: #929292; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; } .container .homeLink:hover::before { color: #0f3e99; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 60b1b71..c00b473 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -44,6 +44,50 @@ .stretchChildrenWidth { width: 100% !important; padding: 0; - margin-bottom: 32px; + } +} + +:global(.vtex-product-price-1-x-installments) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} + +:global(.vtex-store-components-3-x-productDescriptionTitle) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; +} +@media (min-width: 2500px) { + :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + } +} + +:global(.vtex-store-components-3-x-productDescriptionText) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +@media (min-width: 2500px) { + :global(.vtex-store-components-3-x-productDescriptionText) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; } } \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 386cdca..b5da121 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -16,13 +16,31 @@ line-height: 19px; color: #BABABA; } +@media (max-width: 376px) { + .listPrice { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + } +} .sellingPrice { text-align: center; font-family: "Open Sans"; font-style: normal; font-weight: 700; - font-size: 24px; - line-height: 33px; + font-size: 25px; + line-height: 38px; color: #000000; +} +@media (max-width: 376px) { + .sellingPrice { + font-family: "Open Sans"; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + } } \ No newline at end of file diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 6ecad89..0b772c7 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -52,7 +52,6 @@ .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { display: flex; max-width: 282.4px; - height: 50px; align-items: center; font-family: "Open Sans", sans-serif; font-style: normal; @@ -66,14 +65,14 @@ display: flex; padding: 0; } -.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) { +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-product-or-x-listPrice) { display: flex; justify-content: center; align-items: center; text-decoration-line: line-through; gap: 1px; } -.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-product-or-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) { font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; @@ -85,7 +84,7 @@ text-decoration: none; padding: 0; } -.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) { +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-priceContainer) :global(.vtex-product-or-x-listPrice) :global(.vtex-store-components-3-x-listPriceValue) { font-family: "Open Sans", sans-serif; font-style: normal; font-weight: 400; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index ce9d4b1..0257d99 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -112,6 +112,7 @@ @media (max-width: 639px) { .carouselGaleryThumbs { display: flex; + width: 73%; } } @@ -489,6 +490,11 @@ color: #202020; text-transform: uppercase; } +@media (max-width: 376px) { + .shippingTable .shippingTableHead .shippingTableRow { + margin-top: 16px; + } +} .shippingTable .shippingTableHead .shippingTableRow .shippingTableHeadDeliveryEstimate { order: 2; } @@ -505,6 +511,12 @@ .shippingTable .shippingTableBody .shippingTableRow { display: flex; } +@media (max-width: 376px) { + .shippingTable .shippingTableBody .shippingTableRow { + justify-content: center; + align-items: center; + } +} .shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { font-family: "Open Sans", sans-serif; font-style: normal; @@ -539,6 +551,7 @@ .carouselGaleryThumbs :first-child :first-child .productImagesThumb { max-width: 90px; height: fit-content !important; + width: fit-content !important; max-height: 90px; margin: 0; } diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 0ce7b3e..84ea166 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -70,6 +70,15 @@ text-transform: capitalize; border-radius: 0; } +@media (min-width: 2500px) { + .listItem :global(.vtex-button) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + } +} .listItemActive :global(.vtex-button) { background-color: white; @@ -82,6 +91,16 @@ font-size: 18px; line-height: 38px; } +@media (min-width: 2500px) { + .listItemActive :global(.vtex-button) { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #000; + } +} @media (max-width: 1024px) { .listItemActive :global(.vtex-button) { border: 0; diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 2e378da..22c5d3a 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -15,6 +15,11 @@ content: 'Home'; font-size: 16px; color: #929292; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; } .homeLink:hover::before { diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 1522126..f9e0dc6 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -29,6 +29,43 @@ @media (max-width: 1024px) { width: 100% !important; padding: 0; - margin-bottom: 32px; + } +} +:global(.vtex-product-price-1-x-installments){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} +:global(.vtex-store-components-3-x-productDescriptionTitle){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + } +} +:global(.vtex-store-components-3-x-productDescriptionText){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; } } diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 78b37cc..10d191d 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -6,13 +6,27 @@ font-size: 14px; line-height: 19px; color: #BABABA; + @media (max-width: 376px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + } } .sellingPrice{ text-align: center; font-family: 'Open Sans'; font-style: normal; font-weight: 700; - font-size: 24px; - line-height: 33px; + font-size: 25px; + line-height: 38px; color: #000000; + @media (max-width: 376px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + } } diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index af7bab8..94b6eb1 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -51,7 +51,6 @@ :global(.vtex-product-summary-2-x-productBrand) { display: flex; max-width: 282.4px; - height: 50px; align-items: center; font-family: 'Open Sans', sans-serif; @@ -67,7 +66,7 @@ display: flex; padding: 0; - :global(.vtex-store-components-3-x-listPrice) { + :global(.vtex-product-or-x-listPrice) { display: flex; justify-content: center; align-items: center; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 650e22c..a6a5ccb 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -105,6 +105,7 @@ width: 70%; @media (max-width: 639px){ display: flex; + width: 73%; } } // .productImageTag{ @@ -149,14 +150,13 @@ display: flex; justify-content: flex-end; margin-right: 37px; - font-family: 'Open Sans', sans-serif; font-style: normal; font-weight: 300; font-size: 20px; line-height: 34px; - color: #575757; + } .skuSelectorContainer{ display: flex; @@ -510,6 +510,9 @@ line-height: 19px; color: #202020; text-transform: uppercase; + @media (max-width: 376px){ + margin-top: 16px; + } .shippingTableHeadDeliveryEstimate { order: 2; @@ -530,6 +533,10 @@ .shippingTableBody { .shippingTableRow { display: flex; + @media (max-width: 376px){ + justify-content: center; + align-items: center; + } .shippingTableCell { font-family: 'Open Sans', sans-serif; @@ -572,8 +579,13 @@ .productImagesThumb { max-width: 90px; height: fit-content !important; + width: fit-content !important; max-height: 90px; margin: 0; + // @media (max-width: 639px){ + // height: 90px; + // width: 90px; + // } .figure { .thumbImg { border-radius: 8px; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index c98d287..3a6a12b 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -58,7 +58,13 @@ line-height: 38px; text-transform: capitalize; border-radius: 0; - + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + } } .listItemActive :global(.vtex-button){ background-color: white; @@ -70,6 +76,14 @@ font-weight: 400; font-size: 18px; line-height: 38px; + @media (min-width: 2500px){ + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #000; + } @media (max-width: 1024px){ border: 0; } From 33291593226ceb115217121755c7dcaf9df134ce Mon Sep 17 00:00:00 2001 From: Samuel Date: Wed, 8 Feb 2023 17:50:50 -0300 Subject: [PATCH 18/22] feat: Adiciona responsividade ultrawide --- react/components/Html/style.css | 11 +++++++++++ styles/css/vtex.flex-layout.css | 4 ++-- styles/css/vtex.tab-layout.css | 4 ++-- styles/sass/pages/product/vtex.flex-layout.scss | 4 ++-- styles/sass/pages/product/vtex.product-price.scss | 1 + styles/sass/pages/product/vtex.slider-layout.scss | 3 +-- styles/sass/pages/product/vtex.tab-layout.scss | 4 ++-- 7 files changed, 21 insertions(+), 10 deletions(-) diff --git a/react/components/Html/style.css b/react/components/Html/style.css index 90f3940..756d659 100644 --- a/react/components/Html/style.css +++ b/react/components/Html/style.css @@ -4,6 +4,17 @@ gap: 10px; margin-bottom: 16px; } +[class*="vtex-add-to-cart-button-0-x-buttonText"]{ + font-size: 0; +} +[class*="vtex-add-to-cart-button-0-x-buttonText"]::before{ + content: 'ADICIONAR À SACOLA'; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; +} @media (max-width: 576px) { [class*="html--quantityAndButton"] { diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c00b473..7c5f074 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -64,7 +64,7 @@ line-height: 32px; color: #575757; } -@media (min-width: 2500px) { +@media (min-width: 1920px) { :global(.vtex-store-components-3-x-productDescriptionTitle) { font-family: "Open Sans"; font-style: normal; @@ -82,7 +82,7 @@ line-height: 22px; color: #929292; } -@media (min-width: 2500px) { +@media (min-width: 1920px) { :global(.vtex-store-components-3-x-productDescriptionText) { font-family: "Open Sans"; font-style: normal; diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 84ea166..cf41abe 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -70,7 +70,7 @@ text-transform: capitalize; border-radius: 0; } -@media (min-width: 2500px) { +@media (min-width: 1920px) { .listItem :global(.vtex-button) { font-family: "Open Sans"; font-style: normal; @@ -91,7 +91,7 @@ font-size: 18px; line-height: 38px; } -@media (min-width: 2500px) { +@media (min-width: 1920px) { .listItemActive :global(.vtex-button) { font-family: "Open Sans"; font-style: normal; diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index f9e0dc6..76f599c 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -46,7 +46,7 @@ font-size: 24px; line-height: 32px; color: #575757; - @media (min-width: 2500px){ + @media (min-width: 1920px){ font-family: 'Open Sans'; font-style: normal; font-weight: 400; @@ -61,7 +61,7 @@ font-size: 16px; line-height: 22px; color: #929292; - @media (min-width: 2500px){ + @media (min-width: 1920px){ font-family: 'Open Sans'; font-style: normal; font-weight: 400; diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 10d191d..8c2aefb 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -13,6 +13,7 @@ font-size: 12px; line-height: 16px; } + } .sellingPrice{ text-align: center; diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 94b6eb1..75509fb 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -25,12 +25,10 @@ .slideChildrenContainer { :global(.vtex-product-summary-2-x-container) { margin: 0; - :global(.vtex-product-summary-2-x-element) { padding: 0; :global(.vtex-product-summary-2-x-imageContainer) { display: flex; - :global(.vtex-store-components-3-x-discountContainer) { :global(.vtex-store-components-3-x-discountInsideContainer) { display: none; @@ -121,6 +119,7 @@ color: #000; } + :global(.vtex-store-components-3-x-sellingPriceLabel) { display: none; } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 3a6a12b..4c2fcda 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -58,7 +58,7 @@ line-height: 38px; text-transform: capitalize; border-radius: 0; - @media (min-width: 2500px){ + @media (min-width: 1920px){ font-family: 'Open Sans'; font-style: normal; font-weight: 400; @@ -76,7 +76,7 @@ font-weight: 400; font-size: 18px; line-height: 38px; - @media (min-width: 2500px){ + @media (min-width: 1920px){ font-family: 'Open Sans'; font-style: normal; font-weight: 400; From db362ddb08f9b5daa0e1cfb8fa29eccfe4a17637 Mon Sep 17 00:00:00 2001 From: Samuel Date: Wed, 8 Feb 2023 18:12:20 -0300 Subject: [PATCH 19/22] feat: adiciona css no carouselGaleryThumbs --- styles/css/vtex.store-components.css | 12 +++++++++++- styles/sass/pages/product/vtex.store-components.scss | 8 +++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 0257d99..192614e 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -33,6 +33,11 @@ padding: 0; margin: 16px 0; } +@media (max-width: 1024px) { + :global(.vtex-flex-layout-0-x-flexRow) :global(.vtex-store-components-3-x-container) :global(.vtex-flex-layout-0-x-flexRowContent) { + margin-bottom: 50px; + } +} .newsletter { background: black; @@ -112,7 +117,7 @@ @media (max-width: 639px) { .carouselGaleryThumbs { display: flex; - width: 73%; + width: 100%; } } @@ -545,6 +550,11 @@ .carouselGaleryThumbs :first-child { height: 90px; } +@media (max-width: 639px) { + .carouselGaleryThumbs :first-child { + margin: 0; + } +} .carouselGaleryThumbs :first-child :first-child { gap: 16px !important; } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index a6a5ccb..3b754a7 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -22,6 +22,9 @@ :global(.vtex-flex-layout-0-x-flexRowContent){ padding: 0; margin: 16px 0; + @media (max-width: 1024px){ + margin-bottom: 50px; + } } } } @@ -105,7 +108,7 @@ width: 70%; @media (max-width: 639px){ display: flex; - width: 73%; + width: 100%; } } // .productImageTag{ @@ -572,6 +575,9 @@ .carouselGaleryThumbs { :first-child { height: 90px; + @media (max-width:639px){ + margin: 0; + } :first-child { gap: 16px !important; From c46226c691dc11fc01263b1597e21c59efc3c26d Mon Sep 17 00:00:00 2001 From: Samuel Date: Thu, 9 Feb 2023 11:11:20 -0300 Subject: [PATCH 20/22] feat: adiciona css layout ultrawide --- store/blocks/pdp/product.jsonc | 9 +++---- styles/css/vtex.breadcrumb.css | 9 +++---- styles/css/vtex.slider-layout.css | 4 +++ styles/css/vtex.store-components.css | 4 +++ styles/css/vtex.tab-layout.css | 26 +++++++++++++++++-- .../sass/pages/product/vtex.breadcrumb.scss | 8 +++--- .../pages/product/vtex.slider-layout.scss | 4 +++ .../pages/product/vtex.store-components.scss | 3 +++ .../sass/pages/product/vtex.tab-layout.scss | 21 +++++++++++++-- 9 files changed, 68 insertions(+), 20 deletions(-) diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index f06f012..e099dc2 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -347,15 +347,14 @@ "html#selling-price", "html#product-installments", "html#pixacademy", + "availability-subscriber", "html#sku-selector", "html#quantityAndButton", "Placeholder", - "product-assembly-options", - "product-gifts", - "availability-subscriber", "html#shipping-simulator" ] }, + "html#selling-price": { "props": { "testId": "product-price" @@ -452,8 +451,8 @@ "children": [ "html#product-name", "html#codigo", - "html#sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "html#sku-selector" ] }, "html#codigo": { diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 3141fc5..28c7d54 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -8,15 +8,12 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { - padding-left: 40px; + padding: 16px 40px; + margin: 0 auto; + max-width: 96rem; display: flex; align-items: center; } -@media (max-width: 1024px) { - .container { - margin-bottom: 16px; - } -} .container .homeLink .homeIcon { display: none; } diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 0b772c7..803aeb2 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -10,6 +10,10 @@ .sliderLayoutContainer { padding: 0 40px 32px; margin-bottom: 32px; + padding: 16px 40px; + margin-left: auto; + margin-right: auto; + max-width: 96rem; } .sliderLayoutContainer .sliderLeftArrow { left: 36px; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 192614e..69442c7 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -547,6 +547,10 @@ display: none; } +.subscriberContainer { + margin-bottom: 56px; +} + .carouselGaleryThumbs :first-child { height: 90px; } diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index cf41abe..b661ae9 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -14,6 +14,9 @@ padding-right: 40px; padding-left: 40px; justify-content: space-around; + padding: 16px 40px; + margin: 0 auto; + max-width: 96rem; } @media (max-width: 1024px) { .listContainer { @@ -30,6 +33,13 @@ position: relative; top: 0px; } +} +@media (max-width: 1024px) and (max-width: 1024px) { + .listContainer::before { + margin-bottom: 8px; + } +} +@media (max-width: 1024px) { .listContainer::after { bottom: 0px; } @@ -43,10 +53,17 @@ position: relative; bottom: 9px; } +@media (max-width: 1024px) { + .listContainer::after { + bottom: 0 !important; + margin-top: 8px !important; + } +} @media (max-width: 1024px) { .listItem { - margin: 0; + margin-top: 8px; + margin-bottom: 8px; padding: 0; } .listItem :global(.vtex-button) { @@ -54,7 +71,12 @@ padding: 0; } .listItem :global(.vtex-button) :global(.vtex-button__label) { - padding: 0; + padding: 0 !important; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; } } diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 22c5d3a..bbf6964 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,11 +1,9 @@ .container { - padding-left: 40px; + padding: 16px 40px; + margin: 0 auto; + max-width: 96rem; display: flex; align-items: center; - @media (max-width: 1024px){ - margin-bottom: 16px; - } - .homeLink { .homeIcon { display: none; diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 75509fb..9ddd4b3 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -1,6 +1,10 @@ .sliderLayoutContainer { padding: 0 40px 32px; margin-bottom: 32px; + padding: 16px 40px; + margin-left: auto; + margin-right: auto; + max-width: 96rem; .sliderLeftArrow { left: 36px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 3b754a7..0619692 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -572,6 +572,9 @@ } } } +.subscriberContainer{ + margin-bottom: 56px; +} .carouselGaleryThumbs { :first-child { height: 90px; diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 4c2fcda..581e8f9 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -5,6 +5,9 @@ padding-right: 40px; padding-left: 40px; justify-content: space-around; + padding: 16px 40px; + margin: 0 auto; + max-width: 96rem; @media (max-width: 1024px) { flex-direction: column; padding: 0 40px 16px; @@ -18,6 +21,9 @@ height: 1px; position: relative; top: 0px; + @media (max-width: 1024px){ + margin-bottom: 8px; + } } &::after { @@ -32,17 +38,28 @@ height: 1px; position: relative; bottom: 9px; + @media (max-width: 1024px){ + bottom: 0 !important; + margin-top: 8px !important; + } } } .listItem { @media (max-width: 1024px) { - margin: 0; + margin-top: 8px; + margin-bottom: 8px; padding: 0; + :global(.vtex-button) { margin: 0; padding: 0; :global(.vtex-button__label) { - padding: 0; + padding: 0 !important; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; } } } From 4f1f29cd85c0bf79243cba7626fec86230e6b880 Mon Sep 17 00:00:00 2001 From: Samuel Date: Thu, 9 Feb 2023 11:41:22 -0300 Subject: [PATCH 21/22] feat: adiciona css no slider layout mobile --- styles/css/vtex.breadcrumb.css | 6 ++++-- styles/css/vtex.slider-layout.css | 10 ++++++++++ styles/sass/pages/product/vtex.breadcrumb.scss | 7 +++++-- styles/sass/pages/product/vtex.slider-layout.scss | 6 ++++++ 4 files changed, 25 insertions(+), 4 deletions(-) diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 28c7d54..c0a25ad 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -11,12 +11,14 @@ padding: 16px 40px; margin: 0 auto; max-width: 96rem; - display: flex; align-items: center; } .container .homeLink .homeIcon { display: none; } +.container :global(.vtex-breadcrumb-1-x-link) { + font-size: 14px; +} .container .homeLink::before { content: "Home"; font-size: 16px; @@ -35,7 +37,7 @@ } .container .arrow--1 .link::before { content: "Sapatos"; - font-size: 16px; + font-size: 14px; color: #929292; } .container .arrow--1 .link:hover::before { diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index 803aeb2..eb4866b 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -20,11 +20,21 @@ margin: 0; padding: 0; } +@media (max-width: 320px) { + .sliderLayoutContainer .sliderLeftArrow { + left: 10px; + } +} .sliderLayoutContainer .sliderRightArrow { right: 36px; margin: 0; padding: 0; } +@media (max-width: 320px) { + .sliderLayoutContainer .sliderRightArrow { + right: 10px; + } +} .sliderLayoutContainer .sliderTrackContainer { margin: 0 auto; width: 94%; diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index bbf6964..e5df527 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -2,13 +2,15 @@ padding: 16px 40px; margin: 0 auto; max-width: 96rem; - display: flex; align-items: center; .homeLink { .homeIcon { display: none; } } +:global(.vtex-breadcrumb-1-x-link){ + font-size: 14px; +} .homeLink::before { content: 'Home'; font-size: 16px; @@ -29,8 +31,9 @@ } .link::before { content: 'Sapatos'; - font-size: 16px; + font-size: 14px; color: #929292; + } .link:hover::before { color: #0f3e99; diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 9ddd4b3..6c97656 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -10,12 +10,18 @@ left: 36px; margin: 0; padding: 0; + @media (max-width: 320px){ + left: 10px; + } } .sliderRightArrow { right: 36px; margin: 0; padding: 0; + @media (max-width: 320px){ + right: 10px; + } } .sliderTrackContainer { From 4751a56682ba4c27f8b02617a12a1c41fb86ba5c Mon Sep 17 00:00:00 2001 From: Samuel Date: Fri, 10 Feb 2023 11:07:40 -0300 Subject: [PATCH 22/22] feat: adiciona css responsivo mobile --- styles/css/vtex.slider-layout.css | 36 ++++++++++++++++++- .../pages/product/vtex.slider-layout.scss | 28 ++++++++++++++- 2 files changed, 62 insertions(+), 2 deletions(-) diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css index eb4866b..fdde16e 100644 --- a/styles/css/vtex.slider-layout.css +++ b/styles/css/vtex.slider-layout.css @@ -40,7 +40,17 @@ width: 94%; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack { - gap: 16px; + gap: 2px; +} +@media (min-width: 300px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack { + gap: 8px; + } +} +@media (min-width: 500px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack { + gap: 16px; + } } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) { margin: 0; @@ -57,12 +67,36 @@ .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-store-components-3-x-discountContainer) :global(.vtex-product-summary-2-x-imageContainer) :global(.vtex-product-summary-2-x-imageNormal) { width: 100%; height: 100%; + min-height: 94px; } .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) { display: flex; padding: 0; justify-content: center; } +.sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + display: flex; + max-width: 282.4px; + height: 132px; + align-items: center; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; +} +@media (min-width: 500px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + height: 50px; + } +} +@media (max-width: 300px) { + .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { + font-size: 16px; + } +} .sliderLayoutContainer .sliderTrackContainer .sliderTrack .slide .slideChildrenContainer :global(.vtex-product-summary-2-x-container) :global(.vtex-product-summary-2-x-element) :global(.vtex-product-summary-2-x-nameContainer) :global(.vtex-product-summary-2-x-productBrand) { display: flex; max-width: 282.4px; diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss index 6c97656..318e68a 100644 --- a/styles/sass/pages/product/vtex.slider-layout.scss +++ b/styles/sass/pages/product/vtex.slider-layout.scss @@ -29,7 +29,13 @@ width: 94%; .sliderTrack { - gap: 16px; + gap: 2px; + @media (min-width: 300px){ + gap: 8px; + } + @media (min-width: 500px){ + gap: 16px; + } .slide { .slideChildrenContainer { @@ -47,6 +53,7 @@ :global(.vtex-product-summary-2-x-imageNormal) { width: 100%; height: 100%; + min-height: 94px; } } } @@ -55,6 +62,25 @@ display: flex; padding: 0; justify-content: center; + :global(.vtex-product-summary-2-x-productBrand) { + display: flex; + max-width: 282.4px; + height: 132px; + align-items: center; + font-family: 'Open Sans', sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #000; + @media (min-width: 500px) { + height: 50px; + } + @media (max-width: 300px) { + font-size: 16px; + } + } :global(.vtex-product-summary-2-x-productBrand) { display: flex;