From 9feefdf7d7056cd20a0097da0872e04c597e8046 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Mon, 23 Jan 2023 15:19:52 -0300 Subject: [PATCH 01/11] feat(breadcrumb): estiliza o breadcrumb --- gulpfile.js | 12 +- store/blocks/pdp/product.jsonc | 1 + styles/configs/font-faces.css | 4 + styles/configs/style.json | 688 +++++++++--------- styles/css/agenciamagma.store-theme.css | 11 +- styles/css/vtex.breadcrumb.css | 26 + styles/css/vtex.flex-layout.css | 107 +-- .../product/agenciamagma.store-theme.scss | 13 +- .../sass/pages/product/vtex.breadcrumb.scss | 24 + .../sass/pages/product/vtex.flex-layout.scss | 3 + styles/sass/pages/product/vtex.rich-text.scss | 3 + styles/sass/utils/_vars.scss | 5 +- 12 files changed, 439 insertions(+), 458 deletions(-) create mode 100644 styles/configs/font-faces.css create mode 100644 styles/css/vtex.breadcrumb.css create mode 100644 styles/sass/pages/product/vtex.breadcrumb.scss create mode 100644 styles/sass/pages/product/vtex.flex-layout.scss diff --git a/gulpfile.js b/gulpfile.js index 4a85dd0..f5a5aa3 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -23,12 +23,12 @@ const pathsStore = { // Quick/efficient way to get the unique values from a array. function uniqValuesArray(a) { - var seen = {}; - var out = []; - var len = a.length; - var j = 0; - for (var i = 0; i < len; i++) { - var item = a[i]; + let seen = {}; + let out = []; + let len = a.length; + let j = 0; + for (let i = 0; i < len; i++) { + let item = a[i]; if (seen[item] !== 1) { seen[item] = 1; out[j++] = item; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..dea7449 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -18,6 +18,7 @@ }, "children": ["breadcrumb"] }, + "flex-layout.row#specifications-title": { "children": ["rich-text#specifications"] }, diff --git a/styles/configs/font-faces.css b/styles/configs/font-faces.css new file mode 100644 index 0000000..92a5494 --- /dev/null +++ b/styles/configs/font-faces.css @@ -0,0 +1,4 @@ +@font-face { + font-family: "Open Sans", sans-serif; + src: url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"); +} diff --git a/styles/configs/style.json b/styles/configs/style.json index 7b90b6b..64c4329 100644 --- a/styles/configs/style.json +++ b/styles/configs/style.json @@ -1,349 +1,351 @@ { - "typeScale": [ - 3, 2.25, 1.5, 1.25, 1, 0.875, 0.75 - ], - "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], - "customMedia": [ - { "s": 20 }, - { "ns": { - "value": 40, - "minWidth": true - } - }, - { "m": { - "value": 40, - "minWidth": true - } - }, - { "l": { - "value": 64, - "minWidth": true - } - }, - { "xl": { - "value": 80, - "minWidth": true - } - } - ], - "colors": { - "black-90": "rgba(0,0,0,.9)", - "black-80": "rgba(0,0,0,.8)", - "black-70": "rgba(0,0,0,.7)", - "black-60": "rgba(0,0,0,.6)", - "black-50": "rgba(0,0,0,.5)", - "black-40": "rgba(0,0,0,.4)", - "black-30": "rgba(0,0,0,.3)", - "black-20": "rgba(0,0,0,.2)", - "black-10": "rgba(0,0,0,.1)", - "black-05": "rgba(0,0,0,.05)", - "black-025": "rgba(0,0,0,.025)", - "black-0125": "rgba(0,0,0,.0125)", + "typeScale": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75], + "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16], + "customMedia": [ + { "s": 20 }, + { + "ns": { + "value": 40, + "minWidth": true + } + }, + { + "m": { + "value": 40, + "minWidth": true + } + }, + { + "l": { + "value": 64, + "minWidth": true + } + }, + { + "xl": { + "value": 80, + "minWidth": true + } + } + ], + "colors": { + "black-90": "rgba(0,0,0,.9)", + "black-80": "rgba(0,0,0,.8)", + "black-70": "rgba(0,0,0,.7)", + "black-60": "rgba(0,0,0,.6)", + "black-50": "rgba(0,0,0,.5)", + "black-40": "rgba(0,0,0,.4)", + "black-30": "rgba(0,0,0,.3)", + "black-20": "rgba(0,0,0,.2)", + "black-10": "rgba(0,0,0,.1)", + "black-05": "rgba(0,0,0,.05)", + "black-025": "rgba(0,0,0,.025)", + "black-0125": "rgba(0,0,0,.0125)", - "white-90": "rgba(255,255,255,.9)", - "white-80": "rgba(255,255,255,.8)", - "white-70": "rgba(255,255,255,.7)", - "white-60": "rgba(255,255,255,.6)", - "white-50": "rgba(255,255,255,.5)", - "white-40": "rgba(255,255,255,.4)", - "white-30": "rgba(255,255,255,.3)", - "white-20": "rgba(255,255,255,.2)", - "white-10": "rgba(255,255,255,.1)", - "white-05": "rgba(255,255,255,.05)", - "white-025": "rgba(255,255,255,.025)", - "white-0125": "rgba(255,255,255,.0125)" + "white-90": "rgba(255,255,255,.9)", + "white-80": "rgba(255,255,255,.8)", + "white-70": "rgba(255,255,255,.7)", + "white-60": "rgba(255,255,255,.6)", + "white-50": "rgba(255,255,255,.5)", + "white-40": "rgba(255,255,255,.4)", + "white-30": "rgba(255,255,255,.3)", + "white-20": "rgba(255,255,255,.2)", + "white-10": "rgba(255,255,255,.1)", + "white-05": "rgba(255,255,255,.05)", + "white-025": "rgba(255,255,255,.025)", + "white-0125": "rgba(255,255,255,.0125)" + }, + "semanticColors": { + "background": { + "base": "#ffffff", + "base--inverted": "#03044e", + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#f2f4f5", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-background": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-background": { + "action-primary": "#0c389f", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "text": { + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "link": "#0F3E99", + "emphasis": "#f71963", + "disabled": "#979899", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "visited-text": { + "link": "#0c389f" + }, + "hover-text": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "link": "#0c389f", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "active-text": { + "link": "#0c389f", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0" + }, + "border": { + "action-primary": "#0F3E99", + "action-secondary": "#eef3f7", + "emphasis": "#f71963", + "disabled": "#e3e4e6", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "hover-border": { + "action-primary": "#072c75", + "action-secondary": "#dbe9fd", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#e13232", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "active-border": { + "action-primary": "#0c389f", + "action-secondary": "#d2defc", + "emphasis": "#dd1659", + "success": "#8bc34a", + "success--faded": "#eafce3", + "danger": "#ff4c4c", + "danger--faded": "#ffe6e6", + "warning": "#ffb100", + "warning--faded": "#fff6e0", + "muted-1": "#727273", + "muted-2": "#979899", + "muted-3": "#cacbcc", + "muted-4": "#e3e4e6", + "muted-5": "#f2f4f5" + }, + "on": { + "base": "#3f3f40", + "base--inverted": "#ffffff", + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "disabled": "#979899", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a", + "muted-1": "#ffffff", + "muted-2": "#ffffff", + "muted-3": "#3f3f40", + "muted-4": "#3f3f40", + "muted-5": "#3f3f40" + }, + "hover-on": { + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + }, + "active-on": { + "action-primary": "#ffffff", + "action-secondary": "#0F3E99", + "emphasis": "#ffffff", + "success": "#ffffff", + "success--faded": "#3f3f40", + "danger": "#ffffff", + "danger--faded": "#3f3f40", + "warning": "#ffffff", + "warning--faded": "#1a1a1a" + } + }, + "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], + "borderRadius": [0, 0.125, 0.25, 0.5, 1], + "widths": [1, 2, 4, 8, 16], + "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], + "heights": [1, 2, 4, 8, 16], + "sizes": [ + { "name": "small", "value": 2 }, + { "name": "regular", "value": 2.5 }, + { "name": "large", "value": 3 } + ], + "typography": { + "measure": [30, 34, 20], + "styles": { + "heading-1": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "700", + "fontSize": "3rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "semanticColors": { - "background": { - "base": "#ffffff", - "base--inverted": "#03044e", - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#f2f4f5", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-background": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-background": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "text": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "link": "#0F3E99", - "emphasis": "#f71963", - "disabled": "#979899", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "visited-text": { - "link": "#0c389f" - }, - "hover-text": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "active-text": { - "link": "#0c389f", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0" - }, - "border": { - "action-primary": "#0F3E99", - "action-secondary": "#eef3f7", - "emphasis": "#f71963", - "disabled": "#e3e4e6", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "hover-border": { - "action-primary": "#072c75", - "action-secondary": "#dbe9fd", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#e13232", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "active-border": { - "action-primary": "#0c389f", - "action-secondary": "#d2defc", - "emphasis": "#dd1659", - "success": "#8bc34a", - "success--faded": "#eafce3", - "danger": "#ff4c4c", - "danger--faded": "#ffe6e6", - "warning": "#ffb100", - "warning--faded": "#fff6e0", - "muted-1": "#727273", - "muted-2": "#979899", - "muted-3": "#cacbcc", - "muted-4": "#e3e4e6", - "muted-5": "#f2f4f5" - }, - "on": { - "base": "#3f3f40", - "base--inverted": "#ffffff", - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "disabled": "#979899", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a", - "muted-1": "#ffffff", - "muted-2": "#ffffff", - "muted-3": "#3f3f40", - "muted-4": "#3f3f40", - "muted-5": "#3f3f40" - }, - "hover-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - }, - "active-on": { - "action-primary": "#ffffff", - "action-secondary": "#0F3E99", - "emphasis": "#ffffff", - "success": "#ffffff", - "success--faded": "#3f3f40", - "danger": "#ffffff", - "danger--faded": "#3f3f40", - "warning": "#ffffff", - "warning--faded": "#1a1a1a" - } + "heading-2": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "700", + "fontSize": "2.25rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2], - "borderRadius": [0, 0.125, 0.25, 0.5, 1], - "widths": [1, 2, 4, 8, 16], - "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96], - "heights": [1, 2, 4, 8, 16], - "sizes": [ - {"name": "small", "value": 2}, - {"name": "regular", "value": 2.5}, - {"name": "large", "value": 3} - ], - "typography":{ - "measure": [30, 34, 20], - "styles": { - "heading-1": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "3rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-2": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "2.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-3": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "700", - "fontSize": "1.75rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-4": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.5rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-5": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "heading-6": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1.25rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "body": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "1rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "0.875rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "mini": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "normal", - "fontSize": "0.75rem", - "textTransform": "initial", - "letterSpacing": "0" - }, - "action": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "1rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "action--small": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "0.875rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "action--large": { - "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif", - "fontWeight": "500", - "fontSize": "1.25rem", - "textTransform": "uppercase", - "letterSpacing": "0" - }, - "code": { - "fontFamily": "Consolas, monaco, monospace", - "fontWeight": "normal", - "fontSize": "1rem", - "textTransform": "initial", - "letterSpacing": "0" - } - } + "heading-3": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "700", + "fontSize": "1.75rem", + "textTransform": "initial", + "letterSpacing": "0" }, - "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] + "heading-4": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1.5rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-5": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "heading-6": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1.25rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "body": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "small": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "0.875rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "mini": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "0.75rem", + "textTransform": "initial", + "letterSpacing": "0" + }, + "action": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "500", + "fontSize": "1rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--small": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "500", + "fontSize": "0.875rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "action--large": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "500", + "fontSize": "1.25rem", + "textTransform": "uppercase", + "letterSpacing": "0" + }, + "code": { + "fontFamily": "Open Sans, sans-serif", + "fontWeight": "normal", + "fontSize": "1rem", + "textTransform": "initial", + "letterSpacing": "0" + } + } + }, + "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0] } diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..54b243e 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -7,10 +7,11 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.html { - background-color: red; -} - .html--pdp-breadcrumb { - background-color: green; + margin: 0 40px; +} +@media screen and (min-width: 2500px) { + .html--pdp-breadcrumb { + margin: 0 360px; + } } \ 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..707e8c4 --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,26 @@ +/* +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 { + margin: 0; +} +.container .link, +.container .term { + color: #929292; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.container .homeLink::before { + content: "Home"; +} +.container .homeLink .homeIcon { + 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 a7c5732..34c4328 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,9 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; -} - -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; - } -} - -@media screen and (min-width: 80rem) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 0.25rem; - } -} - -.flexRowContent--menu-link { - background-color: #03044e; - color: #fff; -} - -.flexRowContent--main-header { - background-color: #f0f0f0; -} - -.flexRowContent--main-header-mobile { - align-items: center; - padding: 0.625rem 0.5rem; - background-color: #f0f0f0; -} - -.flexRowContent--menu-link :global(.vtex-menu-2-x-styledLink) { - color: #ffffff; - font-size: 14px; -} - -.flexRowContent--main-header :global(.vtex-menu-2-x-styledLink) { - color: #727273; - font-size: 14px; -} - -.flexRow--deals { - background-color: #0F3E99; - padding: 14px 0px; -} - -.flexRow--deals .stretchChildrenWidth { - align-items: center; -} - -.flexRow--deals .flexCol { - align-items: center; - margin-bottom: 5px; - padding-top: 5px; -} - -.flexCol--filterCol { - max-width: 500px; - min-width: 230px; -} - -.flexCol--productCountCol { - align-items: flex-start; -} - -.flexCol--orderByCol { - align-items: flex-end; -} - -.flexCol--orderByMobileCol { - width: 42%; -} - -.flexCol--filterMobileCol { - width: 38%; -} - -.flexRow--quickviewMainRow { - display: flex; - max-height: 100%; -} - -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; -} - -.flexColChild--quickviewDetails:last-child { - height: 34% !important; -} - -.flexRow--addToCartRow { - padding-bottom: 1rem; -} +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss index ea7d5b9..ee45a0d 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,11 @@ -.html { - background-color: red; -} +// .html { +// background-color: red; +// } .html--pdp-breadcrumb { - background-color: green; -} + margin: 0 40px; + @media screen and (min-width: 2500px) { + margin: 0 360px; + } +} diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..3447b2f --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,24 @@ +.container { + margin: 0; + + .link, + .term { + color: $gray-500; + + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + + .homeLink { + &::before { + content: "Home"; + } + + .homeIcon { + display: none; + } + } +} + \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..eafb088 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,3 @@ +// .flexRowContent { +// background-color: red; +// } diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..1719a4c 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,3 @@ +// .paragraph--teste { +// background-color: red; +// } diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..46395da 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -12,6 +12,8 @@ $color-blue: #4267b2; $color-green: #4caf50; +$gray-500: #929292; + /* Grid breakpoints */ $grid-breakpoints: ( xs: 0, @@ -19,7 +21,8 @@ $grid-breakpoints: ( sm: 576px, md: 768px, lg: 992px, - xl: 1200px + xl: 1200px, + ultrawide: 2499px ) !default; $z-index: ( From 939749558450160ee03e0c8fbf11d9df242f6273 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Tue, 24 Jan 2023 12:59:46 -0300 Subject: [PATCH 02/11] feat(stack): Estiliza as fotos para todos os tamanhos de tela --- manifest.json | 1 - react/components/Html/index.tsx | 2 +- react/components/Html/styles.css | 50 ++++++++++++++++ store/blocks/pdp/product.jsonc | 58 ++++++++----------- styles/css/agenciamagma.store-theme.css | 10 +--- styles/css/vtex.store-components.css | 22 +++++++ .../product/agenciamagma.store-theme.scss | 11 ---- .../pages/product/vtex.store-components.scss | 29 +++++++++- 8 files changed, 125 insertions(+), 58 deletions(-) create mode 100644 react/components/Html/styles.css 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..3511a1f 100644 --- a/react/components/Html/index.tsx +++ b/react/components/Html/index.tsx @@ -1,6 +1,6 @@ import React, { ReactNode } from "react"; import { useCssHandles } from "vtex.css-handles"; - +import "./styles.css"; const CSS_HANDLES = ["html"] as const; type HtmlProps = { diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css new file mode 100644 index 0000000..7b114be --- /dev/null +++ b/react/components/Html/styles.css @@ -0,0 +1,50 @@ +[class*="html--pdp-breadcrumb"] { + margin: 0 40px; +} + +[class*="html--product-main"] { + display: flex; + padding: 0 40px 16px; + gap: 32px; +} + +[class*="html--stack"] { + width: 48.8235294%; +} + +[class*="html--right-col"] { + width: 48.8235294%; +} + +@media screen and (min-width: 2500px) { + [class*="html--pdp-breadcrumb"] { + margin: 0 360px; + } + + [class*="html--product-main"] { + padding: 0 360px 16px; + } + + [class*="html--stack"] { + width: 49.13043478%; + } + + [class*="html--right-col"] { + width: 49.13043478%; + } +} + +@media screen and (max-width: 1024px) { + [class*="html--product-main"] { + display: block; + padding: 0 40px 16px; + } + + [class*="html--stack"] { + width: 100%; + } + + [class*="html--right-col"] { + width: 100%; + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index dea7449..6bd6109 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -40,20 +40,15 @@ "subject": "isProductAvailable" } ], - "Then": "flex-layout.row#product-main", - "Else": "flex-layout.row#product-availability" + "Then": "html#product-main", + "Else": "html#product-availability" } }, - "flex-layout.row#product-main": { + "html#product-main": { "props": { - "colGap": 7, - "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7, - "paddingBottom": 7 + "blockClass": "product-main" }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + "children": ["html#stack", "html#right-col"] }, "stack-layout": { @@ -61,7 +56,7 @@ "blockClass": "product" }, "children": [ - "flex-layout.row#product-image", + "html#product-image", "product-bookmark", "product-specification-badges" ] @@ -76,29 +71,32 @@ } }, - "flex-layout.col#stack": { + "html#stack": { "children": ["stack-layout"], "props": { - "width": "60%", - "rowGap": 0 + "blockClass": "stack" } }, - "flex-layout.row#product-image": { + "html#product-image": { + "props": { + "blockClass": "product-image" + }, "children": ["product-images"] }, "product-images": { "props": { - "aspectRatio": { - "desktop": "auto", - "phone": "16:9" - }, - "displayThumbnailsArrows": true + // "aspectRatio": "auto", + "thumbnailAspectRatio": "1:1", + "thumbnailMaxHeight": 90, + "showNavigationArrows": false, + "showPaginationDots": false, + "thumbnailsOrientation": "horizontal", + "thumbnailVisibility": "visible" } }, - "flex-layout.col#right-col": { + "html#right-col": { "props": { - "preventVerticalStretch": true, - "rowGap": 0 + "blockClass": "right-col" }, "children": [ "flex-layout.row#product-name", @@ -141,19 +139,13 @@ "children": ["add-to-cart-button"] }, - "flex-layout.row#product-availability": { + "html#product-availability": { "props": { - "colGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7 + "blockClass": "product-availability" }, - "children": [ - "flex-layout.col#stack", - "flex-layout.col#right-col-availability" - ] + "children": ["html#stack", "html#right-col-availability"] }, - "flex-layout.col#right-col-availability": { + "html#right-col-availability": { "props": { "preventVerticalStretch": true, "rowGap": 0, diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 54b243e..34c4328 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -6,12 +6,4 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ -.html--pdp-breadcrumb { - margin: 0 40px; -} -@media screen and (min-width: 2500px) { - .html--pdp-breadcrumb { - margin: 0 360px; - } -} \ No newline at end of file +/* Grid breakpoints */ \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..8453d15 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -9,4 +9,26 @@ /* Grid breakpoints */ .newsletter { background: red; +} + +.productImageTag--main { + max-height: max-content !important; +} + +.carouselGaleryThumbs { + margin-top: 16px; +} +@media screen and (max-width: 1024px) { + .carouselGaleryThumbs { + margin-bottom: 32px; + display: block; + } +} +.carouselGaleryThumbs .productImagesThumbActive, +.carouselGaleryThumbs .productImagesThumb { + margin: 0 16px 0 0; + width: 90px !important; + height: 90px; + border-radius: 8px; + overflow: hidden; } \ 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 ee45a0d..e69de29 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,11 +0,0 @@ -// .html { -// background-color: red; -// } - -.html--pdp-breadcrumb { - margin: 0 40px; - - @media screen and (min-width: 2500px) { - margin: 0 360px; - } -} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..1c1b324 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,26 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.newsletter { + background: red; +} + +.productImageTag--main { + max-height: max-content !important; +} + +.carouselGaleryThumbs { + margin-top: 16px; + + @media screen and (max-width: 1024px) { + margin-bottom: 32px; + display: block; + } + + .productImagesThumbActive, + .productImagesThumb { + margin: 0 16px 0 0; + + width: 90px !important; + height: 90px; + border-radius: 8px; + overflow: hidden; + } +} From 6d22849b066071abd83915a91de9be27654bf59f Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Wed, 25 Jan 2023 17:20:09 -0300 Subject: [PATCH 03/11] feat(right-col): Cria componentes e estiliza a parte lateral direita do pdp --- assets/pix-logo.png | Bin 0 -> 1412 bytes react/Example.tsx | 2 +- react/Installments.tsx | 3 + react/Pix.tsx | 3 + react/components/Html/styles.css | 103 +++++- react/components/Installments/index.tsx | 29 ++ react/components/Installments/styles.css | 9 + react/components/Pix/index.tsx | 60 ++++ react/components/Pix/styles.css | 37 +++ react/types/index.d.ts | 1 + store/blocks/pdp/product.jsonc | 48 ++- store/blocks/product-price.jsonc | 17 +- store/blocks/product-summary/quickview.json | 30 +- store/interfaces.json | 8 + styles/css/vtex.product-identifier.css | 20 +- styles/css/vtex.product-price.css | 91 +----- styles/css/vtex.product-quantity.css | 74 +++++ styles/css/vtex.store-components.css | 259 +++++++++++++++ .../product/agenciamagma.store-theme.scss | 0 .../product/vtex.product-identifier.scss | 13 + .../pages/product/vtex.product-price.scss | 11 + .../pages/product/vtex.product-quantity.scss | 69 ++++ .../pages/product/vtex.store-components.scss | 309 ++++++++++++++++++ styles/sass/utils/_vars.scss | 8 + 24 files changed, 1070 insertions(+), 134 deletions(-) create mode 100644 assets/pix-logo.png create mode 100644 react/Installments.tsx create mode 100644 react/Pix.tsx create mode 100644 react/components/Installments/index.tsx create mode 100644 react/components/Installments/styles.css create mode 100644 react/components/Pix/index.tsx create mode 100644 react/components/Pix/styles.css create mode 100644 react/types/index.d.ts create mode 100644 styles/css/vtex.product-quantity.css delete mode 100644 styles/sass/pages/product/agenciamagma.store-theme.scss create mode 100644 styles/sass/pages/product/vtex.product-identifier.scss create mode 100644 styles/sass/pages/product/vtex.product-price.scss create mode 100644 styles/sass/pages/product/vtex.product-quantity.scss diff --git a/assets/pix-logo.png b/assets/pix-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..3458b4a6809bc54ac3a54d989860a56f5175fdc2 GIT binary patch literal 1412 zcmV-~1$+95P)X1^@s6g&p|Z00009a7bBm000XU z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yPM06iG+E9 zWq1P26X4Y%0iN!zR1Y((vBzVZSXxN_lBIEfP0z2Zs;gVTBU0|LmXX@jNMQZ#*VD@| zLgAndzx?ypoc+Paly9a8V1mdLa)-Ma7@N>=`z=~77H^=eR<=q(oq#MMdOyGZaph*Lat57r zp}oIRP>uQ}sj{)X#P9zs`X37-gkUWp3&|Q9MrCumrUVt^R=!>9>zf53ochATE3duW zLNO}661VzxbsZzhs>S0cz*ybjF~IB>7Zz^E?h2MeK(Gqh+CBrcg|+pa!XOZ=-n@Ce zVn`P{%LPFL(pRxoYR6Tr%Q?ptyXA7X+gVjMc7ExEVATb}uI}4!zGt(AIgZc`ND`T4 z^B$iMY7rzTI|zgi9caH&*_wbM#HP?xNESxfx?y`=un?dQIw4ryg0QRl;_u&2`A7Ua zM~TnK$2?cX2OtI|ggnJD6ZJXmYZ);yAxX*+9??LSc}Ia|AQd?l?M5&x1T9oO4uVwx zBE}suyxJvnVaAvk7#0Ewo+DM^Lof~9WVHMHebo+Qb$zRv1i=auV}gYt;k!F9?n3BP zR_L*Z1;dyslZk&zj6#W~zV76O7fTUeN{MsAXFugksK+ZZue03&l| zP@WFbo@ltB*h?v*8K39`hEzL*sLaCfk(MhPH_2J2kPIC_KZQGlw2vlXCkaI$_TXR2 z<^cxbY^d!P;vq!3u?(oj!Eh)g3!u$cqF0=_6C4S6TP+!ld3Ke!GYGe!J#X^m3fxmc z3Z8Cp`fCKI(xsvLxviyM5F%L^oPjco?G*)BEryw^!^u!H_eU)cDRbBbBW{NXf+xQ& z1_rx?cRcxW7Wz)Q`-~6?@%kJT9W5=+*W>Di;3SU^Se@h8e(LEbtHrtg2d@yuiZptH zQ}(G~+^CXaWJOBX_)Wow31e0{fOtmWVeDuGMMGE@sCR=tL=Ac`r@iUvo)fX>1pdGh zJU}_ogZFKaCO@~gK6^OF$WgsY+w!{8Xx8Eejs8oURgvaBbaWu+(-| z3CwZm%)=vB_o0g|!=5qv9=PBpCeVeEL_Bc82Uvnnt@FfgerPk^FpdIR_qaeG; zLDT|}8mBmLjw=uc2zrV$Lk~22tb}pW<_uEui^ZQ_t*)(Y&FZoAK3-fEFeT5GPiGF& zGmdL#0{IPwlSEDLdS2cpSw;YX>xQ)if#F!`G*j@i!81c}U6Vmn4fW(n-KN9rpH0Q( zT0 { + const product = useProduct(); + const installment = { + numberOfInstallments: + product?.selectedItem?.sellers[0].commertialOffer?.Installments[10] + .NumberOfInstallments, + value: + product?.selectedItem?.sellers[0].commertialOffer?.Installments[10].Value, + }; + return ( +

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

+ ); +}; + +export default Installments; diff --git a/react/components/Installments/styles.css b/react/components/Installments/styles.css new file mode 100644 index 0000000..eb2a254 --- /dev/null +++ b/react/components/Installments/styles.css @@ -0,0 +1,9 @@ +.parcelas { + margin: 0; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + margin-bottom: 8px; +} diff --git a/react/components/Pix/index.tsx b/react/components/Pix/index.tsx new file mode 100644 index 0000000..b374dfd --- /dev/null +++ b/react/components/Pix/index.tsx @@ -0,0 +1,60 @@ +import React from "react"; +import { useProduct } from "vtex.product-context"; + +import styles from "./styles.css"; + +const Pix = () => { + const product = useProduct(); + const precoAtual = Number( + product?.product?.priceRange.sellingPrice.highPrice + ); + + const desconto = (precoAtual * 10) / 100; + + const precoNovo = precoAtual - desconto; + + const fechApi = async () => { + fetch("/api/checkout/pub/orderForms/simulation", { + method: "POST", + headers: { + Accept: "application/json", + "Content-Type": "application/json", + }, + body: `{ + "items": [ + { + "id": ${product?.selectedItem?.itemId}, + "seller": ${product?.selectedItem?.sellers[0].sellerId}, + "quantity": ${product?.selectedQuantity} + } + ], + "country": "BRA" + }`, + }) + .then((response) => response.json()) + .then((data) => { + console.log(data); + }); + }; + + fechApi(); + + return ( +
+
+ logo do Pix +
+ +
+

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

+

10 % de desconto

+
+
+ ); +}; + +export default Pix; diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css new file mode 100644 index 0000000..3b482f6 --- /dev/null +++ b/react/components/Pix/styles.css @@ -0,0 +1,37 @@ +.pixWrapper { + display: flex; + gap: 26px; + margin-bottom: 16px; + align-items: center; +} + +.pixImageContainer { + margin: 0; +} + +.pixImage { + width: 66px; +} +/* +.descriptionContainer { + +} */ + +.newPrice { + margin: 0; + font-style: normal; + font-weight: 700; + font-size: 18px; + line-height: 25px; + color: rgba(0, 0, 0, 0.58); +} + +.discount { + margin: 0; + + font-style: normal; + font-weight: 300; + font-size: 13px; + line-height: 18px; + color: #929292; +} diff --git a/react/types/index.d.ts b/react/types/index.d.ts new file mode 100644 index 0000000..cbe652d --- /dev/null +++ b/react/types/index.d.ts @@ -0,0 +1 @@ +declare module "*.css"; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6bd6109..0aacf42 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -85,7 +85,6 @@ }, "product-images": { "props": { - // "aspectRatio": "auto", "thumbnailAspectRatio": "1:1", "thumbnailMaxHeight": 90, "showNavigationArrows": false, @@ -99,29 +98,41 @@ "blockClass": "right-col" }, "children": [ - "flex-layout.row#product-name", - "product-rating-summary", - "flex-layout.row#list-price-savings", - "flex-layout.row#selling-price", - "product-installments", - "product-separator", - "product-identifier.product", + "html#product-name", + // "product-identifier.product", + // "product-rating-summary", + // "flex-layout.row#list-price-savings", + "html#selling-price", + // "product-installments", + "installments", + // "product-separator", + "pix", "sku-selector", - "product-quantity", + // "product-quantity", + "html#buy-container", "product-assembly-options", "product-gifts", - "flex-layout.row#buy-button", + // "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator", - "share#default" + "shipping-simulator" + // "share#default" ] }, - - "flex-layout.row#product-name": { + "html#buy-container": { "props": { - "marginBottom": 3 + "blockClass": "buy-container" }, - "children": ["vtex.store-components:product-name"] + "children": ["product-quantity", "flex-layout.row#buy-button"] + }, + + "html#product-name": { + "props": { + "blockClass": "product-name" + }, + "children": [ + "vtex.store-components:product-name", + "product-identifier.product" + ] }, "sku-selector": { @@ -152,8 +163,9 @@ "blockClass": "info-availability" }, "children": [ - "flex-layout.row#product-name", - "product-identifier.product", + "html#product-name", + // "product-identifier.product", + "sku-selector", "flex-layout.row#availability" ] diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..93e5950 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -1,14 +1,10 @@ { - "flex-layout.row#selling-price": { + "html#selling-price": { "props": { - "colGap": 2, - "preserveLayoutOnMobile": true, - "preventHorizontalStretch": true, - "marginBottom": 4 + + "blockClass": "selling-price" }, - "children": [ - "product-selling-price" - ] + "children": ["product-selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +15,6 @@ "marginBottom": 2, "marginTop": 5 }, - "children": [ - "product-list-price", - "product-price-savings" - ] + "children": ["product-list-price", "product-price-savings"] } } diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..6ea1ec9 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -1,9 +1,6 @@ { "modal-trigger#quickview": { - "children": [ - "icon-expand", - "modal-layout#quickview" - ], + "children": ["icon-expand", "modal-layout#quickview"], "props": { "blockClass": "quickview" } @@ -37,7 +34,7 @@ "flex-layout.col#quickviewPrice": { "children": [ "flex-layout.row#list-price-savings", - "flex-layout.row#selling-price", + "html#selling-price", "product-installments" ] }, @@ -63,9 +60,7 @@ }, "flex-layout.col#quickview-product-quantity": { - "children": [ - "product-summary-quantity#quickview" - ] + "children": ["product-summary-quantity#quickview"] }, "product-summary-quantity#quickview": { "props": { @@ -74,18 +69,14 @@ } }, "flex-layout.col#quickview-add-to-card-button": { - "children": [ - "add-to-cart-button" - ], + "children": ["add-to-cart-button"], "props": { "width": "grow" } }, "flex-layout.row#quickview-actions-2": { - "children": [ - "link.product#button-pdp" - ] + "children": ["link.product#button-pdp"] }, "link.product#button-pdp": { "props": { @@ -107,15 +98,10 @@ } }, "flex-layout.col#quickview-images": { - "children": [ - "product-images#quickview" - ] + "children": ["product-images#quickview"] }, "flex-layout.col#quickview-product-details": { - "children": [ - "modal-content#quickview", - "modal-actions#quickview" - ], + "children": ["modal-content#quickview", "modal-actions#quickview"], "props": { "preventVerticalStretch": true, "blockClass": "quickviewDetails" @@ -134,7 +120,7 @@ "blockClass": "quickview" } }, - "product-images#quickview" : { + "product-images#quickview": { "props": { "blockClass": "quickview", "showNavigationArrows": true diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..fed3088 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -5,5 +5,13 @@ "html": { "component": "html", "composition": "children" + }, + + "installments": { + "component": "Installments" + }, + + "pix": { + "component": "Pix" } } diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..f542881 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,19 @@ -.product-identifier--productReference { - margin-bottom: 1rem; +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.product-identifier__label, .product-identifier__separator { + display: none; } +.product-identifier__value { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(146, 146, 146, 0.478); +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..0307721 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,16 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ .sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - -.sellingPriceValue { - font-size: 2.25rem; + 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: 25px; + line-height: 38px; + color: #000; +} \ 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..c0b45bd --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,74 @@ +/* +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-container) { + border: 1px solid #ccc; + width: 128px; + height: 49px; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__input) { + padding: 0; + border: none; + height: auto; + flex: 1; + color: #929292; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button-container) { + justify-content: center; + display: flex; + align-items: center; + margin-left: 16px; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button-container) { + justify-content: center; + display: flex; + align-items: center; + margin-right: 16px; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) { + border: none; + width: auto !important; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button) { + border: none; + width: auto !important; + background-color: transparent; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button__text) { + color: #000; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button__text) { + color: #000; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 8453d15..c3a71aa 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -31,4 +31,263 @@ height: 90px; border-radius: 8px; overflow: hidden; +} + +.productNameContainer { + margin-bottom: 8px; +} +.productNameContainer .productBrand { + color: #575757; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho { + margin-bottom: 16px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorNameSeparator, +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorName, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorNameSeparator, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer .skuSelectorTextContainer .skuSelectorSelectorImageValue { + font-size: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList { + margin: 0; + gap: 16px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem { + margin: 0; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { + background-image: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross::after, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross::after { + content: ""; + display: block; + width: 1px; + height: 40px; + background: #D5D5D5; + transform: rotate(45deg); + bottom: 0; + left: 50%; + position: relative; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .frameAround, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .frameAround { + display: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox { + border: 2px solid #000; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper { + color: #000; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after, +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after { + background-color: #000; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after { + content: "Outras Cores:"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem { + width: 48px; + height: 48px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border: 1px solid rgba(185, 185, 185, 0.6); + border-radius: 50%; + position: absolute; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross { + background-image: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .diagonalCross::after { + content: ""; + height: 48px; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .frameAround { + display: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox { + border: 2px solid #000; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper { + color: #000; +} +.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after { + background-color: #000; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after { + content: "OUTROS TAMANHOS:"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem { + width: 40px; + height: 40px; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox { + border: 1px solid #989898; + border-radius: 50%; + position: absolute; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .valueWrapper { + padding: 0; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: rgba(185, 185, 185, 0.6); +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .frameAround { + display: none; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox { + border: 2px solid #000; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .valueWrapper { + color: #000; +} +.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after { + background-color: #000; +} + +.shippingContainer { + position: relative; +} + +.shippingContainer :global(.vtex-input__label) { + font-size: 0; +} +.shippingContainer :global(.vtex-input__label)::after { + content: "CALCULAR FRETE:"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.shippingContainer :global(.vtex-input-prefix__group) { + width: 280px; + height: 49px; + border: 1px solid #cccccc; + border-radius: 0; +} +@media screen and (max-width: 376px) { + .shippingContainer :global(.vtex-input-prefix__group) { + width: 100%; + } +} + +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + flex-wrap: wrap; + align-items: flex-end; + padding-bottom: 16px; +} + +.shippingContainer :global(.vtex-input) { + width: auto; +} +@media screen and (max-width: 376px) { + .shippingContainer :global(.vtex-input) { + width: 100%; + } +} + +.shippingContainer :global(.vtex-input__suffix) { + display: none; +} + +.shippingContainer :global(.vtex-address-form-4-x-input) { + padding: 16.5px 16px; + margin: 0; +} + +.shippingContainer :global(.vtex__icon-external-link) { + display: none; +} + +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + padding: 0 0 16.5px 32px; + color: #000000 !important; +} +@media screen and (max-width: 376px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + padding: 8px 0 0 0; + text-align: end; + width: 100%; + } +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + color: #000000 !important; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; +} +@media screen and (max-width: 376px) { + .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { + margin: 0; + } +} + +.shippingContainer :global(.vtex-button) { + width: auto; + border: none; + top: 27px; + left: 230px; + position: absolute; +} +@media screen and (max-width: 376px) { + .shippingContainer :global(.vtex-button) { + right: 0; + left: auto; + } +} + +.shippingContainer :global(.vtex-button__label) { + font-size: 0; + background-color: #000000; + width: 49px; + height: 49px; +} +.shippingContainer :global(.vtex-button__label)::after { + content: "OK"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + color: #ffffff; } \ 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 deleted file mode 100644 index e69de29..0000000 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..9957e34 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,13 @@ +.product-identifier { + &__label, &__separator { + display: none; + } + + &__value { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-550; + } +} 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..063d5eb --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,11 @@ +.sellingPrice { + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: $black; +} + +.installments { + // background: red; +} 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..f51bd52 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,69 @@ +.quantitySelectorContainer { + margin: 0; + .quantitySelectorTitle { + display: none; + } +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper-container) { + border: 1px solid #ccc; + width: 128px; + height: 49px; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__input) { + padding: 0; + border: none; + height: auto; + flex: 1; + color: #929292; + + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} + +.quantitySelectorContainer + :global(.vtex-numeric-stepper__minus-button-container) { + justify-content: center; + display: flex; + align-items: center; + margin-left: 16px; +} + +.quantitySelectorContainer + :global(.vtex-numeric-stepper__plus-button-container) { + justify-content: center; + display: flex; + align-items: center; + margin-right: 16px; +} +.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button) { + border: none; + width: auto !important; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button) { + border: none; + width: auto !important; + background-color: transparent; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__plus-button__text) { + color: #000; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} + +.quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button__text) { + color: #000; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; +} + + diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 1c1b324..eab0b00 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -24,3 +24,312 @@ overflow: hidden; } } + +.productNameContainer { + margin-bottom: 8px; + + .productBrand { + color: $gray-700; + font-style: normal; + font-weight: 300; + font-size: 20px; + line-height: 34px; + } +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; + .skuSelectorSubcontainer--cor, + .skuSelectorSubcontainer--tamanho { + margin-bottom: 16px; + .skuSelectorNameContainer { + margin: 0; + .skuSelectorTextContainer { + .skuSelectorName, + .skuSelectorNameSeparator, + .skuSelectorSelectorImageValue { + font-size: 0; + } + } + } + + .skuSelectorOptionsList { + margin: 0; + gap: 16px; + .skuSelectorItem { + margin: 0; + + .skuSelectorInternalBox { + .diagonalCross { + background-image: none; + + &::after { + content: ""; + display: block; + width: 1px; + height: 40px; + background: $gray-300; + + transform: rotate(45deg); + bottom: 0; + left: 50%; + // transform: translate(-50%, -50%); + position: relative; + } + } + + .skuSelectorItem--selected { + .frameAround { + display: none; + } + + .skuSelectorInternalBox { + border: 2px solid $black; + + .valueWrapper { + color: $black; + } + + .diagonalCross { + &::after { + background-color: $black; + } + } + } + } + } + } + } + } + + .skuSelectorSubcontainer--cor { + .skuSelectorName { + &::after { + content: "Outras Cores:"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + } + } + + .skuSelectorOptionsList { + .skuSelectorItem { + width: 48px; + height: 48px; + + .skuSelectorInternalBox { + border: 1px solid $gray-450; + border-radius: 50%; + position: absolute; + + .diagonalCross { + background-image: none; + + &::after { + content: ""; + height: 48px; + } + } + } + } + + .skuSelectorItem--selected { + .frameAround { + display: none; + } + + .skuSelectorInternalBox { + border: 2px solid $black; + + .valueWrapper { + color: $black; + } + + .diagonalCross { + &::after { + background-color: $black; + } + } + } + } + } + } + + .skuSelectorSubcontainer--tamanho { + .skuSelectorName { + &::after { + content: "OUTROS TAMANHOS:"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-transform: uppercase; + } + } + .skuSelectorOptionsList { + .skuSelectorItem { + width: 40px; + height: 40px; + + .skuSelectorInternalBox { + border: 1px solid $gray-600; + border-radius: 50%; + position: absolute; + .valueWrapper { + padding: 0; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-450; + } + + // .diagonalCross { + // background-image: none; + + // &::after { + // content: ""; + // display: block; + // width: 1px; + // height: 40px; + // background: $gray-300; + + // transform: rotate(45deg); + // bottom: 0; + // left: 50%; + // // transform: translate(-50%, -50%); + // position: relative; + // } + // } + } + } + + .skuSelectorItem--selected { + .frameAround { + display: none; + } + + .skuSelectorInternalBox { + border: 2px solid $black; + + .valueWrapper { + color: $black; + } + + .diagonalCross { + &::after { + background-color: $black; + } + } + } + } + } + } +} + +.shippingContainer { + position: relative; +} +.shippingContainer :global(.vtex-input__label) { + font-size: 0; + + &::after { + content: "CALCULAR FRETE:"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: $gray-500; + } +} + +.shippingContainer :global(.vtex-input-prefix__group) { + width: 280px; + height: 49px; + border: 1px solid #cccccc; + border-radius: 0; + + @media screen and (max-width: 376px) { + width: 100%; + } +} + +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + flex-wrap: wrap; + align-items: flex-end; + padding-bottom: 16px; +} +.shippingContainer :global(.vtex-input) { + width: auto; + + @media screen and (max-width: 376px) { + width: 100%; + } +} +.shippingContainer :global(.vtex-input__suffix) { + display: none; +} +.shippingContainer :global(.vtex-address-form-4-x-input) { + padding: 16.5px 16px; + margin: 0; +} +.shippingContainer :global(.vtex__icon-external-link) { + display: none; +} +.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { + padding: 0 0 16.5px 32px; + color: #000000 !important; + + @media screen and (max-width: 376px) { + padding: 8px 0 0 0; + text-align: end; + width: 100%; + } + + :last-child { + color: #000000 !important; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + text-decoration-line: underline; + + @media screen and (max-width: 376px) { + margin: 0; + } + } +} + +.shippingContainer :global(.vtex-button) { + width: auto; + border: none; + top: 27px; + left: 230px; + position: absolute; + + @media screen and (max-width: 376px) { + right: 0; + left: auto; + } +} +.shippingContainer :global(.vtex-button__label) { + font-size: 0; + background-color: #000000; + width: 49px; + height: 49px; + &::after { + content: "OK"; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + + color: #ffffff; + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index 46395da..29ce22a 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -12,7 +12,15 @@ $color-blue: #4267b2; $color-green: #4caf50; +$gray-300: #D5D5D5; +$gray-400: #b9b9b9; +$gray-450: #b9b9b999; $gray-500: #929292; +$gray-550: rgba(146, 146, 146, 0.478); +$gray-600: #989898; +$gray-700: #575757; + +$black: #000; /* Grid breakpoints */ $grid-breakpoints: ( From 8dda378c2b57ab0592063a86655f6f38a25b610f Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Wed, 25 Jan 2023 19:08:41 -0300 Subject: [PATCH 04/11] =?UTF-8?q?feat(info-availability):=20Estiliza=20pro?= =?UTF-8?q?duto=20indispon=C3=ADvel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 127 ++++++++++++++++++++++++++++++- store/blocks/pdp/product.jsonc | 9 +-- 2 files changed, 130 insertions(+), 6 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 1287216..3112737 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -82,6 +82,116 @@ text-transform: uppercase; } +[class*="html--message-availability"] { + width: 60.090361%; +} + +[class*="html--message-availability"] :global(.vtex-store-components-3-x-form) { + margin-bottom: 16px; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-title) { + font-size: 0; + margin: 0; +} +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-title)::after { + content: "Produto indisponível"; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-subscribeLabel) { + font-size: 0; + margin-bottom: 16px; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-subscribeLabel)::after { + content: "Deseja saber quando estiver disponível?"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: #868686; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-content) { + margin: 0; + display: grid; + gap: 8px; + row-gap: 15px; + grid-auto-columns: 1fr 1fr; + grid-template: + "name email" + "buttonSubmit buttonSubmit"; +} +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-input) { + margin: 0; +} +[class*="html--message-availability"] :global(.vtex-input-prefix__group) { + border: 1px solid #989898; + border-radius: 0; + padding: 12px 14px; +} + +[class*="html--message-availability"] + :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + + color: #989898; +} + +[class*="html--message-availability"] :global(.vtex-styleguide-9-x-input) { + padding: 0; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-inputName) { + grid-area: name; +} + +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-inputEmail) { + grid-area: email; +} +[class*="html--message-availability"] + :global(.vtex-store-components-3-x-submit) { + grid-area: buttonSubmit; + width: 100%; + margin: 0; +} +[class*="html--message-availability"] :global(.vtex-button) { + width: 100%; + height: 49px; + border: none; + border-radius: 0; + background-color: #000; +} + +[class*="html--message-availability"] :global(.vtex-button__label) { + font-size: 0; +} +[class*="html--message-availability"] :global(.vtex-button__label)::after { + content: "AVISE-ME"; + font-style: normal; + font-weight: 600; + font-size: 18px; + line-height: 25px; + color: #ffffff; +} + @media screen and (min-width: 2500px) { [class*="html--pdp-breadcrumb"] { margin: 0 360px; @@ -117,6 +227,9 @@ [class*="html--stack"] { width: 100%; } + [class*="html--info-availability"] { + width: 100%; + } [class*="html--right-col"] { width: 100%; @@ -129,6 +242,16 @@ [class*="html--buy-container"] :global(.vtex-button__label) { padding: 0; } + + [class*="html--message-availability"] { + width: 81.0381355932%; + } + + [class*="html--message-availability"] + :global(.vtex-store-components-3-x-content) { + max-width: none; + width: 100%; + } } @media screen and (max-width: 376px) { @@ -145,5 +268,7 @@ height: 70px; } - + [class*="html--message-availability"] { + width: 100%; + } } diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 0aacf42..c1d698d 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -110,7 +110,7 @@ "sku-selector", // "product-quantity", "html#buy-container", - "product-assembly-options", + // "product-assembly-options", "product-gifts", // "flex-layout.row#buy-button", "availability-subscriber", @@ -165,12 +165,11 @@ "children": [ "html#product-name", // "product-identifier.product", - - "sku-selector", - "flex-layout.row#availability" + "html#availability", + "sku-selector" ] }, - "flex-layout.row#availability": { + "html#availability": { "props": { "blockClass": "message-availability" }, From 942ac28341bc94e933f55e3b91f0a22165b73fe7 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Thu, 26 Jan 2023 09:32:23 -0300 Subject: [PATCH 05/11] feat(shippingTable): Estiliza tabela de resultado de frete --- react/components/Html/styles.css | 4 +- styles/css/vtex.store-components.css | 76 ++++++++++++++++-- .../pages/product/vtex.store-components.scss | 77 +++++++++++++++++-- 3 files changed, 145 insertions(+), 12 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 3112737..60ed83c 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -192,7 +192,7 @@ color: #ffffff; } -@media screen and (min-width: 2500px) { +@media screen and (min-width: 1920px) { [class*="html--pdp-breadcrumb"] { margin: 0 360px; } @@ -254,7 +254,7 @@ } } -@media screen and (max-width: 376px) { +@media screen and (max-width: 768px) { [class*="html--buy-container"] { display: block; } diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index c3a71aa..f5472f6 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -203,7 +203,7 @@ border: 1px solid #cccccc; border-radius: 0; } -@media screen and (max-width: 376px) { +@media screen and (max-width: 768px) { .shippingContainer :global(.vtex-input-prefix__group) { width: 100%; } @@ -219,7 +219,7 @@ .shippingContainer :global(.vtex-input) { width: auto; } -@media screen and (max-width: 376px) { +@media screen and (max-width: 768px) { .shippingContainer :global(.vtex-input) { width: 100%; } @@ -242,7 +242,7 @@ padding: 0 0 16.5px 32px; color: #000000 !important; } -@media screen and (max-width: 376px) { +@media screen and (max-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { padding: 8px 0 0 0; text-align: end; @@ -257,7 +257,7 @@ line-height: 16px; text-decoration-line: underline; } -@media screen and (max-width: 376px) { +@media screen and (max-width: 768px) { .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child { margin: 0; } @@ -270,7 +270,7 @@ left: 230px; position: absolute; } -@media screen and (max-width: 376px) { +@media screen and (max-width: 768px) { .shippingContainer :global(.vtex-button) { right: 0; left: auto; @@ -290,4 +290,70 @@ font-size: 14px; line-height: 19px; color: #ffffff; +} + +.shippingTable { + margin: 0; + padding: 0; + border: none; + width: 326px; +} +@media screen and (max-width: 768px) { + .shippingTable { + width: 100%; + } +} + +.shippingTableRadioBtn { + display: none; +} + +.shippingTableHead { + display: block; +} + +.shippingTableLabel, +.shippingTableCell, +.currencyContainer { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; +} + +.shippingTableHeadDeliveryName, +.shippingTableHeadDeliveryEstimate, +.shippingTableHeadDeliveryPrice { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + text-align: start; +} + +.shippingTableRow { + display: flex; + gap: 32px; +} + +.shippingTableCell { + padding: 0; +} + +.shippingTableHeadDeliveryName, .shippingTableCellDeliveryName { + width: 23.92638036%; +} + +.shippingTableHeadDeliveryEstimate, +.shippingTableCellDeliveryEstimate { + order: 3; + width: 41.71779%; +} + +.shippingTableCellDeliveryPrice, +.shippingTableHeadDeliveryPrice { + width: 14.723926%; } \ 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 eab0b00..ee01351 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -254,7 +254,7 @@ border: 1px solid #cccccc; border-radius: 0; - @media screen and (max-width: 376px) { + @media screen and (max-width: 768px) { width: 100%; } } @@ -268,7 +268,7 @@ .shippingContainer :global(.vtex-input) { width: auto; - @media screen and (max-width: 376px) { + @media screen and (max-width: 768px) { width: 100%; } } @@ -286,7 +286,7 @@ padding: 0 0 16.5px 32px; color: #000000 !important; - @media screen and (max-width: 376px) { + @media screen and (max-width: 768px) { padding: 8px 0 0 0; text-align: end; width: 100%; @@ -300,7 +300,7 @@ line-height: 16px; text-decoration-line: underline; - @media screen and (max-width: 376px) { + @media screen and (max-width: 768px) { margin: 0; } } @@ -313,7 +313,7 @@ left: 230px; position: absolute; - @media screen and (max-width: 376px) { + @media screen and (max-width: 768px) { right: 0; left: auto; } @@ -333,3 +333,70 @@ color: #ffffff; } } + +.shippingTable { + margin: 0; + padding: 0; + border: none; + width: 326px; + + @media screen and (max-width: 768px) { + width: 100%; + + } +} + +.shippingTableRadioBtn { + display: none; +} + +.shippingTableHead { + display: block; +} + +.shippingTableLabel, +.shippingTableCell, +.currencyContainer { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + color: #afafaf; +} + +.shippingTableHeadDeliveryName, +.shippingTableHeadDeliveryEstimate, +.shippingTableHeadDeliveryPrice { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #202020; + text-transform: uppercase; + text-align: start; +} + +.shippingTableRow { + display: flex; + gap: 32px; +} + +.shippingTableCell { + padding: 0; +} + +.shippingTableHeadDeliveryName, .shippingTableCellDeliveryName { + width: 23.92638036%; +} + +.shippingTableHeadDeliveryEstimate, +.shippingTableCellDeliveryEstimate { + order: 3; + width: 41.71779%; +} + +.shippingTableCellDeliveryPrice, +.shippingTableHeadDeliveryPrice { + // width: 61px; + width: 14.723926%; +} From c9b41056d78f011d366e7062cc9ecf4f2941cfdd Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Thu, 26 Jan 2023 13:06:16 -0300 Subject: [PATCH 06/11] feat(tab-layout): Cria e estiliza o tab-layout para todos os tamanhos de tela --- react/components/Html/styles.css | 4 +- store/blocks/pdp/product.jsonc | 122 ++++++++++++++-- styles/css/vtex.store-components.css | 7 +- styles/css/vtex.tab-layout.css | 131 ++++++++++++++++++ .../pages/product/vtex.store-components.scss | 9 +- .../sass/pages/product/vtex.tab-layout.scss | 124 +++++++++++++++++ 6 files changed, 378 insertions(+), 19 deletions(-) create mode 100644 styles/css/vtex.tab-layout.css create mode 100644 styles/sass/pages/product/vtex.tab-layout.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 60ed83c..be98f5a 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -216,12 +216,12 @@ @media screen and (max-width: 1024px) { [class*="html--product-main"] { display: block; - padding: 0 40px 16px; + padding: 0 40px; } [class*="html--product-availability"] { display: block; - padding: 0 40px 16px; + padding: 0 40px; } [class*="html--stack"] { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index c1d698d..62c0e20 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,13 +3,117 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", + "tab-layout#description", + // "flex-layout.row#description", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", "shelf.relatedProducts", "product-questions-and-answers" ] }, + + "tab-layout#description": { + "children": ["tab-list#description", "tab-content#description"], + "props": { + "blockClass": "description", + "defaultActiveTabId": "description01" + } + }, + + "tab-list#description": { + "children": [ + "tab-list.item#description01", + "tab-list.item#description02", + "tab-list.item#description03", + "tab-list.item#description04", + "tab-list.item#description05" + ] + }, + + "tab-list.item#description01": { + "props": { + "tabId": "description01", + "label": "Descrição", + "defaultActiveTab": true + } + }, + "tab-list.item#description02": { + "props": { + "tabId": "description02", + "label": "Descrição", + "defaultActiveTab": false + } + }, + "tab-list.item#description03": { + "props": { + "tabId": "description03", + "label": "Descrição", + "defaultActiveTab": false + } + }, + "tab-list.item#description04": { + "props": { + "tabId": "description04", + "label": "Descrição", + "defaultActiveTab": false + } + }, + "tab-list.item#description05": { + "props": { + "tabId": "description05", + "label": "Descrição", + "defaultActiveTab": false + } + }, + + "tab-content#description": { + "children": [ + "tab-content.item#description01", + "tab-content.item#description02", + "tab-content.item#description03", + "tab-content.item#description04", + "tab-content.item#description05" + ] + }, + "product-images#description": { + "props": { + "displayMode": "first-image", + "zoomMode": "disabled", + "blockClass": "image-description" + } + }, + "tab-content.item#description01": { + "props": { + "tabId": "description01" + }, + "children": ["product-images#description", "product-description"] + }, + + "tab-content.item#description02": { + "props": { + "tabId": "description02" + }, + "children": ["product-images#description", "product-description"] + }, + "tab-content.item#description03": { + "props": { + "tabId": "description03" + }, + "children": ["product-images#description", "product-description"] + }, + "tab-content.item#description04": { + "props": { + "tabId": "description04" + }, + "children": ["product-images#description", "product-description"] + }, + "tab-content.item#description05": { + "props": { + "tabId": "description05" + }, + "children": ["product-images#description", "product-description"] + }, + "html#breadcrumb": { "props": { "tag": "section", @@ -27,12 +131,12 @@ "text": "##### Product Specifications" } }, - "flex-layout.row#description": { - "props": { - "marginBottom": 7 - }, - "children": ["product-description"] - }, + // "flex-layout.row#description": { + // "props": { + // "marginBottom": 7 + // }, + // "children": ["product-description"] + // }, "condition-layout.product#availability": { "props": { "conditions": [ diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f5472f6..4c7c557 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -267,7 +267,7 @@ width: auto; border: none; top: 27px; - left: 230px; + left: 234px; position: absolute; } @media screen and (max-width: 768px) { @@ -294,7 +294,7 @@ .shippingTable { margin: 0; - padding: 0; + padding: 0 0 16px 0; border: none; width: 326px; } @@ -343,7 +343,8 @@ padding: 0; } -.shippingTableHeadDeliveryName, .shippingTableCellDeliveryName { +.shippingTableHeadDeliveryName, +.shippingTableCellDeliveryName { width: 23.92638036%; } diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..2ec4d1e --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,131 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +/* Grid breakpoints */ +.container { + padding: 0 40px; +} +.container .listContainer { + justify-content: space-between; + padding: 0 64px; + border-bottom: 1px solid #b9b9b9; +} +@media screen and (max-width: 1024px) { + .container .listContainer { + flex-direction: column; + padding: 8px 0; + border-top: 1px solid #b9b9b9; + } +} +.container .listContainer .listItem { + margin: 0; + padding: 0; + border-bottom: 2px solid transparent; +} +@media screen and (max-width: 1024px) { + .container .listContainer .listItem { + border: none; + } +} +.container .listContainer .listItemActive { + border-bottom: 2px solid #000; +} +@media screen and (max-width: 1024px) { + .container .listContainer .listItemActive { + border: none; + } +} +.container .listItem :global(.vtex-button) { + background-color: transparent; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #bfbfbf; + text-transform: capitalize; + border: none; + padding: 0 16px; +} +@media screen and (max-width: 1024px) { + .container .listItem :global(.vtex-button) { + padding: 0; + } +} +.container .listItem :global(.vtex-button__label) { + padding: 0 !important; +} +.container .listItemActive :global(.vtex-button__label) { + color: #000; +} +.container .listItemActive :global(.vtex-button) { + border: none; + border-radius: 0; + color: #000; +} +.container .contentContainer { + padding: 32px 32px 16px; +} +@media screen and (max-width: 1024px) { + .container .contentContainer { + padding: 16px 0; + border-bottom: 1px solid #B9B9B9; + } +} +.container .contentContainer .contentItem { + display: flex; + gap: 32px; +} +@media screen and (max-width: 1024px) { + .container .contentContainer .contentItem { + flex-direction: column; + gap: 16px; + } +} +.container .contentContainer .contentItem :global(.vtex-store-components-3-x-productImagesContainer) { + width: 50%; +} +@media screen and (max-width: 1024px) { + .container .contentContainer .contentItem :global(.vtex-store-components-3-x-productImagesContainer) { + width: 100%; + } +} +.container .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) { + width: 50%; +} +@media screen and (max-width: 1024px) { + .container .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) { + width: 100%; + } +} +.container .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + margin-bottom: 8px; +} +@media screen and (max-width: 1024px) { + .container .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-size: 20px; + line-height: 32px; + } +} +.container .contentContainer .contentItem :global(.vtex-store-components-3-x-content) { + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +@media screen and (max-width: 1024px) { + .container .contentContainer .contentItem :global(.vtex-store-components-3-x-content) { + font-size: 14px; + line-height: 19px; + } +} \ 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 ee01351..f4b7d12 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -310,7 +310,7 @@ width: auto; border: none; top: 27px; - left: 230px; + left: 234px; position: absolute; @media screen and (max-width: 768px) { @@ -336,13 +336,12 @@ .shippingTable { margin: 0; - padding: 0; + padding: 0 0 16px 0; border: none; width: 326px; @media screen and (max-width: 768px) { width: 100%; - } } @@ -385,7 +384,8 @@ padding: 0; } -.shippingTableHeadDeliveryName, .shippingTableCellDeliveryName { +.shippingTableHeadDeliveryName, +.shippingTableCellDeliveryName { width: 23.92638036%; } @@ -397,6 +397,5 @@ .shippingTableCellDeliveryPrice, .shippingTableHeadDeliveryPrice { - // width: 61px; width: 14.723926%; } 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..17c06c8 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,124 @@ +.container { + padding: 0 40px; + + .listContainer { + justify-content: space-between; + padding: 0 64px; + border-bottom: 1px solid #b9b9b9; + + @media screen and (max-width: 1024px) { + flex-direction: column; + padding: 8px 0; + border-top: 1px solid #b9b9b9; + } + .listItem { + margin: 0; + padding: 0; + border-bottom: 2px solid transparent; + + @media screen and (max-width: 1024px) { + border: none; + } + } + + .listItemActive { + border-bottom: 2px solid $black; + + @media screen and (max-width: 1024px) { + border: none; + } + } + } + + .listItem :global(.vtex-button) { + background-color: transparent; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 38px; + color: #bfbfbf; + text-transform: capitalize; + border: none; + padding: 0 16px; + + @media screen and (max-width: 1024px) { + padding: 0; + } + } + + .listItem :global(.vtex-button__label) { + padding: 0 !important; + } + .listItemActive :global(.vtex-button__label) { + color: $black; + } + + .listItemActive :global(.vtex-button) { + border: none; + border-radius: 0; + color: $black; + } + + .contentContainer { + padding: 32px 32px 16px; + + @media screen and (max-width: 1024px) { + padding: 16px 0; + border-bottom: 1px solid #B9B9B9; + } + .contentItem { + display: flex; + gap: 32px; + + @media screen and (max-width: 1024px) { + flex-direction: column; + gap: 16px; + } + } + + .contentItem :global(.vtex-store-components-3-x-productImagesContainer) { + width: 50%; + + @media screen and (max-width: 1024px) { + width: 100%; + } + } + + .contentItem + :global(.vtex-store-components-3-x-productDescriptionContainer) { + width: 50%; + + @media screen and (max-width: 1024px) { + width: 100%; + } + } + + .contentItem :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 32px; + color: #575757; + margin-bottom: 8px; + + @media screen and (max-width: 1024px) { + font-size: 20px; + line-height: 32px; + } + } + + .contentItem :global(.vtex-store-components-3-x-content) { + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + + color: #929292; + + @media screen and (max-width: 1024px) { + font-size: 14px; + line-height: 19px; + } + } + } +} From fa0c5ee2125daad52b92d50392f48ebd8f00dd08 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Fri, 27 Jan 2023 10:52:47 -0300 Subject: [PATCH 07/11] feat: Adiciona testId --- react/components/Html/styles.css | 81 ++++++++++- react/components/Installments/index.tsx | 4 +- store/blocks/pdp/product.jsonc | 131 ++++++++++++++++-- styles/css/vtex.product-summary.css | 116 +++++++++++----- styles/css/vtex.store-components.css | 4 + styles/css/vtex.tab-layout.css | 7 +- .../pages/product/vtex.product-summary.scss | 103 ++++++++++++++ styles/sass/pages/product/vtex.rich-text.scss | 4 +- .../pages/product/vtex.store-components.scss | 4 + .../sass/pages/product/vtex.tab-layout.scss | 6 +- 10 files changed, 405 insertions(+), 55 deletions(-) create mode 100644 styles/sass/pages/product/vtex.product-summary.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index be98f5a..be5dd61 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -39,9 +39,7 @@ display: flex; margin-bottom: 16px; } -[class*="html--buy-container"] :global(.vtex-flex-layout-0-x-flexRow) { - flex: 1; -} + [class*="html--buy-container"] :global(.vtex-store-components-3-x-container) { padding: 0; margin-left: 10px; @@ -82,6 +80,10 @@ text-transform: uppercase; } +[class*="html--buy-button"] { + flex: 1; +} + [class*="html--message-availability"] { width: 60.090361%; } @@ -192,6 +194,56 @@ color: #ffffff; } +[class*="html--related-product"] { + padding: 0 59.2px; +} + +[class*="html--related-product"] :global(.vtex-rich-text-0-x-heading) { + margin: 0; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + margin-bottom: 32px; +} + +[class*="html--related-product"] + :global(.vtex-slider-layout-0-x-sliderLeftArrow) { + padding: 0; + left: -17px; +} + +[class*="html--related-product"] + :global(.vtex-slider-layout-0-x-sliderRightArrow) { + padding: 0; + right: -17px; +} + +[class*="html--related-product"] + :global(.vtex-slider-layout-0-x-sliderLayoutContainer) { + flex-direction: column; +} +[class*="html--related-product"] + :global(.vtex-slider-layout-0-x-paginationDotsContainer) { + position: initial; + margin-top: 32px; + margin-bottom: 64px; + align-items: center; +} +[class*="html--related-product"] + :global(.vtex-slider-layout-0-x-paginationDot) { + background-color: #000; +} +[class*="html--related-product"] + :global(.vtex-slider-layout-0-x-paginationDot--isActive) { + padding: 7.5px; + border: 0.5px solid #000; + background-color: transparent; +} + +/* 0 */ + @media screen and (min-width: 1920px) { [class*="html--pdp-breadcrumb"] { margin: 0 360px; @@ -211,6 +263,10 @@ [class*="html--info-availability"] { width: 49.13043478%; } + + [class*="html--related-product"] { + padding: 0 479px; + } } @media screen and (max-width: 1024px) { @@ -252,6 +308,15 @@ max-width: none; width: 100%; } + + [class*="html--related-product"] { + padding: 0 50.9px; + } + + [class*="html--related-product"] + :global(.vtex-slider-layout-0-x-paginationDotsContainer) { + margin-top: 24px; + } } @media screen and (max-width: 768px) { @@ -271,4 +336,14 @@ [class*="html--message-availability"] { width: 100%; } + + [class*="html--related-product"] { + padding: 0 47.2px; + } + + [class*="html--related-product"] + :global(.vtex-slider-layout-0-x-paginationDotsContainer) { + margin-top: 16px; + margin-bottom: 32px; + } } diff --git a/react/components/Installments/index.tsx b/react/components/Installments/index.tsx index 50d9c1d..abe4a7e 100644 --- a/react/components/Installments/index.tsx +++ b/react/components/Installments/index.tsx @@ -6,10 +6,10 @@ const Installments = () => { const product = useProduct(); const installment = { numberOfInstallments: - product?.selectedItem?.sellers[0].commertialOffer?.Installments[10] + product?.selectedItem?.sellers[0].commertialOffer?.Installments[3] .NumberOfInstallments, value: - product?.selectedItem?.sellers[0].commertialOffer?.Installments[10].Value, + product?.selectedItem?.sellers[0].commertialOffer?.Installments[3].Value, }; return (

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 62c0e20..a6d87b7 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -7,11 +7,80 @@ // "flex-layout.row#description", // "flex-layout.row#specifications-title", // "product-specification-group#table", - "shelf.relatedProducts", + // "shelf.relatedProducts", + // "rich-text#title-relatedProduct", + // "list-context.product-list", + "html#relatedProduct", "product-questions-and-answers" ] }, + "html#relatedProduct": { + "props": { + "blockClass": "related-product" + }, + "children": ["rich-text#title-relatedProduct", "html#product-list"] + }, + + "rich-text#title-relatedProduct": { + "props": { + "text": "## Você também pode gostar:", + "textAlignment": "CENTER", + "textPosition": "CENTER", + "blockClass": "title-related-product" + } + }, + + "list-context.product-list": { + "blocks": ["product-summary.shelf#related-product"], + "children": ["slider-layout"] + }, + + "html#product-list": { + "props": { + "testId": "product-summary-list", + "blockClass": "product-list" + }, + "children": ["list-context.product-list"] + }, + + "html#product-item": { + "props": { + "blockClass": "product-item", + "testId": "vtex-product-summary" + }, + "children": [ + "product-summary-image#related-product", + "product-summary-name", + "product-summary-price" + ] + }, + + "product-summary.shelf#related-product": { + "children": [ "html#product-item" + // "product-summary-image#related-product", + // "product-summary-name", + // "product-summary-price" + ] + }, + + "product-summary-image#related-product": { + "props": { + "showBadge": false, + "aspectRatio": "1:1" + } + }, + + "slider-layout": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + } + } + }, + "tab-layout#description": { "children": ["tab-list#description", "tab-content#description"], "props": { @@ -123,14 +192,14 @@ "children": ["breadcrumb"] }, - "flex-layout.row#specifications-title": { - "children": ["rich-text#specifications"] - }, - "rich-text#specifications": { - "props": { - "text": "##### Product Specifications" - } - }, + // "flex-layout.row#specifications-title": { + // "children": ["rich-text#specifications"] + // }, + // "rich-text#specifications": { + // "props": { + // "text": "##### Product Specifications" + // } + // }, // "flex-layout.row#description": { // "props": { // "marginBottom": 7 @@ -183,10 +252,12 @@ }, "html#product-image": { "props": { - "blockClass": "product-image" + "blockClass": "product-image", + "testId": "product-images" }, "children": ["product-images"] }, + "product-images": { "props": { "thumbnailAspectRatio": "1:1", @@ -210,8 +281,8 @@ // "product-installments", "installments", // "product-separator", - "pix", - "sku-selector", + "html#pix", + "html#sku-selector", // "product-quantity", "html#buy-container", // "product-assembly-options", @@ -222,11 +293,45 @@ // "share#default" ] }, + + "html#sku-selector": { + "props": { + "blockClass": "sku-selector", + "testId": "sku-selector" + }, + + "children": ["sku-selector"] + }, + + "html#pix": { + "props": { + "blockClass": "pix", + "testId": "pix-price" + }, + "children": ["pix"] + }, + "html#buy-container": { "props": { "blockClass": "buy-container" }, - "children": ["product-quantity", "flex-layout.row#buy-button"] + "children": ["html#product-quantity", "html#buy-button"] + }, + + "html#buy-button": { + "props": { + "blockClass": "buy-button", + "testId": "add-to-cart-button" + }, + "children": ["flex-layout.row#buy-button"] + }, + + "html#product-quantity": { + "props": { + "testId": "product-quantity", + "blockClass": "product-quantity" + }, + "children": ["product-quantity"] }, "html#product-name": { diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..40a8712 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,94 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; +/* +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 { + margin: 0 8px; + max-width: none !important; + border-radius: 0; } - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; +.container .element { + padding: 0; } - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; +.container .element .imageContainer { + width: 100%; } - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; +.container .element .imageContainer :global(.vtex-store-components-3-x-discountContainer) { + width: 100%; +} +.container .element .nameContainer { + padding: 0; + margin-top: 16px; +} +.container .element .nameContainer .productBrand { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #000000; +} +@media screen and (max-width: 1024px) { + .container .element .nameContainer .productBrand { + font-size: 14px; + line-height: 19px; } } - -.nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; +.container .element .priceContainer { + padding: 0; + flex: 1; } - -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; +.container .element .priceContainer .listPriceContainer { + padding: 8px 0; } - -.container { - text-align: start; +.container .element .priceContainer .listPriceContainer .listPriceLabel { + display: none; } - -.imageContainer { - text-align: center; +.container .element .priceContainer .listPriceContainer .currencyCode::before { + content: "de "; } - -.image { - border-radius: 0.25rem; +.container .element .priceContainer .listPriceContainer .currencyInteger:last-child::after { + content: " por"; } +.container .element .priceContainer .listPriceContainer .currencyFraction:last-child::after { + content: " por"; +} +.container .element .priceContainer .sellingPriceContainer { + padding: 0; +} +.container .element .priceContainer .sellingPriceContainer .sellingPriceLabel { + display: none; +} +.container .element .priceContainer .sellingPriceContainer .currencyContainer { + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; +} +@media screen and (max-width: 1024px) { + .container .element .priceContainer .sellingPriceContainer .currencyContainer { + font-size: 18px; + line-height: 25px; + } +} +.container .element .priceContainer .installmentContainer { + display: none; +} +.container .element .priceContainer :global(.vtex-store-components-3-x-listPriceValue) { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; +} +@media screen and (max-width: 1024px) { + .container .element .priceContainer :global(.vtex-store-components-3-x-listPriceValue) { + font-size: 12px; + line-height: 16px; + } +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 4c7c557..5980b80 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -357,4 +357,8 @@ .shippingTableCellDeliveryPrice, .shippingTableHeadDeliveryPrice { width: 14.723926%; +} + +.discountInsideContainer { + 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 2ec4d1e..423bc18 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -10,6 +10,11 @@ .container { padding: 0 40px; } +@media screen and (min-width: 1920px) { + .container { + padding: 0 360px; + } +} .container .listContainer { justify-content: space-between; padding: 0 64px; @@ -73,7 +78,7 @@ @media screen and (max-width: 1024px) { .container .contentContainer { padding: 16px 0; - border-bottom: 1px solid #B9B9B9; + border-bottom: 1px solid #b9b9b9; } } .container .contentContainer .contentItem { diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss new file mode 100644 index 0000000..75be31d --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,103 @@ +.container { + margin: 0 8px; + max-width: none !important; + border-radius: 0; + + .element { + padding: 0; + + .imageContainer { + width: 100%; + } + .imageContainer :global(.vtex-store-components-3-x-discountContainer) { + width: 100%; + } + .nameContainer { + padding: 0; + margin-top: 16px; + .productBrand { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #000000; + + @media screen and (max-width: 1024px) { + font-size: 14px; + line-height: 19px; + } + } + } + + .priceContainer { + padding: 0; + flex: 1; + + .listPriceContainer { + padding: 8px 0; + + .listPriceLabel { + display: none; + } + + .currencyCode { + &::before { + content: "de "; + } + } + .currencyInteger { + &:last-child { + &::after { + content: " por"; + } + } + } + + .currencyFraction { + &:last-child { + &::after { + content: " por"; + } + } + } + } + + .sellingPriceContainer { + padding: 0; + .sellingPriceLabel { + display: none; + } + + .currencyContainer { + font-style: normal; + font-weight: 700; + font-size: 24px; + line-height: 33px; + color: #000000; + + @media screen and (max-width: 1024px) { + font-size: 18px; + line-height: 25px; + } + } + } + + .installmentContainer { + display: none; + } + } + + .priceContainer :global(.vtex-store-components-3-x-listPriceValue) { + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #bababa; + + @media screen and (max-width: 1024px) { + font-size: 12px; + line-height: 16px; + } + } + } +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 1719a4c..8b13789 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -1,3 +1 @@ -// .paragraph--teste { -// background-color: red; -// } + diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index f4b7d12..e2a016f 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -399,3 +399,7 @@ .shippingTableHeadDeliveryPrice { width: 14.723926%; } + +.discountInsideContainer { + display: none; +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 17c06c8..05a4eb1 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -1,6 +1,10 @@ .container { padding: 0 40px; + @media screen and (min-width: 1920px) { + padding: 0 360px; + } + .listContainer { justify-content: space-between; padding: 0 64px; @@ -64,7 +68,7 @@ @media screen and (max-width: 1024px) { padding: 16px 0; - border-bottom: 1px solid #B9B9B9; + border-bottom: 1px solid #b9b9b9; } .contentItem { display: flex; From 96223b6b9caaba2dbbf9535288e48063b56677e2 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Mon, 30 Jan 2023 11:02:18 -0300 Subject: [PATCH 08/11] feat: Adiciona o placeholder para o CEP e Email no produto indisponivel --- react/Installments.tsx | 3 -- react/Placeholder.tsx | 3 ++ react/components/Html/styles.css | 2 +- react/components/Installments/index.tsx | 29 ------------------- react/components/Installments/styles.css | 9 ------ react/components/Pix/styles.css | 2 +- react/components/Placeholder/index.tsx | 21 ++++++++++++++ store/blocks/pdp/product.jsonc | 17 +++++++++-- store/interfaces.json | 7 +++-- styles/css/vtex.product-price.css | 12 ++++++++ styles/css/vtex.product-quantity.css | 3 ++ styles/css/vtex.store-components.css | 8 +++++ .../pages/product/vtex.product-price.scss | 11 ++++++- .../pages/product/vtex.product-quantity.scss | 4 +++ .../pages/product/vtex.store-components.scss | 8 +++++ 15 files changed, 89 insertions(+), 50 deletions(-) delete mode 100644 react/Installments.tsx create mode 100644 react/Placeholder.tsx delete mode 100644 react/components/Installments/index.tsx delete mode 100644 react/components/Installments/styles.css create mode 100644 react/components/Placeholder/index.tsx diff --git a/react/Installments.tsx b/react/Installments.tsx deleted file mode 100644 index 679a337..0000000 --- a/react/Installments.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import Installments from "./components/Installments"; - -export default Installments; diff --git a/react/Placeholder.tsx b/react/Placeholder.tsx new file mode 100644 index 0000000..53ea3ff --- /dev/null +++ b/react/Placeholder.tsx @@ -0,0 +1,3 @@ +import Placeholder from "./components/Placeholder/index"; + +export default Placeholder; diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index be5dd61..b3d9bbd 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -246,7 +246,7 @@ @media screen and (min-width: 1920px) { [class*="html--pdp-breadcrumb"] { - margin: 0 360px; + margin: 16px 360px; } [class*="html--product-main"] { diff --git a/react/components/Installments/index.tsx b/react/components/Installments/index.tsx deleted file mode 100644 index abe4a7e..0000000 --- a/react/components/Installments/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from "react"; -import { useProduct } from "vtex.product-context"; -import styles from "./styles.css"; - -const Installments = () => { - const product = useProduct(); - const installment = { - numberOfInstallments: - product?.selectedItem?.sellers[0].commertialOffer?.Installments[3] - .NumberOfInstallments, - value: - product?.selectedItem?.sellers[0].commertialOffer?.Installments[3].Value, - }; - return ( -

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

- ); -}; - -export default Installments; diff --git a/react/components/Installments/styles.css b/react/components/Installments/styles.css deleted file mode 100644 index eb2a254..0000000 --- a/react/components/Installments/styles.css +++ /dev/null @@ -1,9 +0,0 @@ -.parcelas { - margin: 0; - font-style: normal; - font-weight: 400; - font-size: 16px; - line-height: 22px; - color: #929292; - margin-bottom: 8px; -} diff --git a/react/components/Pix/styles.css b/react/components/Pix/styles.css index 3b482f6..c87225f 100644 --- a/react/components/Pix/styles.css +++ b/react/components/Pix/styles.css @@ -1,7 +1,7 @@ .pixWrapper { display: flex; gap: 26px; - margin-bottom: 16px; + margin:8px 0 16px; align-items: center; } diff --git a/react/components/Placeholder/index.tsx b/react/components/Placeholder/index.tsx new file mode 100644 index 0000000..53b6166 --- /dev/null +++ b/react/components/Placeholder/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +const Example = () => { + if (typeof document !== "undefined") { + const inputCEP = document.querySelector(".vtex-address-form-4-x-input"); + const inputEmail = document.querySelector(".vtex-store-components-3-x-inputEmail"); + + if (inputCEP) { + inputCEP.setAttribute("placeholder", "Digite seu CEP"); + } + + if (inputEmail) { + console.log(inputEmail.children[0].children[0].children[0].setAttribute("placeholder", "E-mail")); + + } + } + + return <>; +}; + +export default Example; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index a6d87b7..ba7e623 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -1,6 +1,7 @@ { "store.product": { "children": [ + "placeholder", "html#breadcrumb", "condition-layout.product#availability", "tab-layout#description", @@ -57,7 +58,8 @@ }, "product-summary.shelf#related-product": { - "children": [ "html#product-item" + "children": [ + "html#product-item" // "product-summary-image#related-product", // "product-summary-name", // "product-summary-price" @@ -278,8 +280,8 @@ // "product-rating-summary", // "flex-layout.row#list-price-savings", "html#selling-price", - // "product-installments", - "installments", + "product-installments", + // "installments", // "product-separator", "html#pix", "html#sku-selector", @@ -294,6 +296,15 @@ ] }, + "product-installments": { + "props": { + "markers": ["discount"], + "blockClass": "installments", + "message": "ou {installmentsNumber}x de R${installmentValue} sem juros", + "installmentsCriteria": "max-quantity-without-interest" + } + }, + "html#sku-selector": { "props": { "blockClass": "sku-selector", diff --git a/store/interfaces.json b/store/interfaces.json index fed3088..720eebd 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -7,10 +7,11 @@ "composition": "children" }, - "installments": { - "component": "Installments" + "placeholder": { + "component": "Placeholder" }, - + + "pix": { "component": "Pix" } diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 0307721..1f72c44 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -13,4 +13,16 @@ font-size: 25px; line-height: 38px; color: #000; +} + +.installments { + margin: 0; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; +} +.installments .installments-discount { + font-weight: 700; } \ No newline at end of file diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index c0b45bd..6b6c6cf 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -31,6 +31,9 @@ font-size: 16px; line-height: 22px; } +.quantitySelectorContainer :global(.vtex-numeric-stepper__input):focus { + outline: none; +} .quantitySelectorContainer :global(.vtex-numeric-stepper__minus-button-container) { justify-content: center; diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 5980b80..6acb449 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -233,6 +233,14 @@ padding: 16.5px 16px; margin: 0; } +.shippingContainer :global(.vtex-address-form-4-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + color: #afafaf; +} .shippingContainer :global(.vtex__icon-external-link) { display: none; diff --git a/styles/sass/pages/product/vtex.product-price.scss b/styles/sass/pages/product/vtex.product-price.scss index 063d5eb..9b9064b 100644 --- a/styles/sass/pages/product/vtex.product-price.scss +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -7,5 +7,14 @@ } .installments { - // background: red; + margin: 0; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + color: #929292; + + .installments-discount { + font-weight: 700; + } } diff --git a/styles/sass/pages/product/vtex.product-quantity.scss b/styles/sass/pages/product/vtex.product-quantity.scss index f51bd52..5200baf 100644 --- a/styles/sass/pages/product/vtex.product-quantity.scss +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -22,6 +22,10 @@ font-weight: 400; font-size: 16px; line-height: 22px; + + &:focus { + outline: none; + } } .quantitySelectorContainer diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index e2a016f..644e5cf 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -278,6 +278,14 @@ .shippingContainer :global(.vtex-address-form-4-x-input) { padding: 16.5px 16px; margin: 0; + &::placeholder { + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + color: #afafaf; + } } .shippingContainer :global(.vtex__icon-external-link) { display: none; From be2f16112f08319ce3c6b1b81b493951fc74f2d4 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Mon, 6 Feb 2023 16:02:52 -0300 Subject: [PATCH 09/11] feat: Adiciona os testIds para a correcao automatica --- react/components/Html/styles.css | 49 ++++++++- react/components/Pix/index.tsx | 6 +- store/blocks/pdp/product.jsonc | 87 +++++++++++++-- store/blocks/product-price.jsonc | 2 +- styles/css/vtex.product-summary.css | 54 --------- styles/css/vtex.rich-text.css | 20 +++- styles/css/vtex.store-components.css | 99 ++++++++++++++++- styles/css/vtex.tab-layout.css | 13 +++ .../pages/product/vtex.product-summary.scss | 71 ------------ styles/sass/pages/product/vtex.rich-text.scss | 19 +++- .../pages/product/vtex.store-components.scss | 104 +++++++++++++++++- .../sass/pages/product/vtex.tab-layout.scss | 13 +++ 12 files changed, 389 insertions(+), 148 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index b3d9bbd..2c4bac4 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -220,6 +220,24 @@ right: -17px; } +[class*="html--related-product"] :global(.vtex-slider-layout-0-x-caretIcon) { + display: none; +} +[class*="html--related-product"] + :global(.vtex-slider-layout-0-x-sliderLeftArrow)::after { + content: ""; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-left-nicolly.svg"); + width: 11.2px; + height: 29.6px; +} +[class*="html--related-product"] + :global(.vtex-slider-layout-0-x-sliderRightArrow)::after { + content: ""; + background-image: url("https://agenciamagma.vteximg.com.br/arquivos/arrow-right-nicolly.svg"); + width: 11.2px; + height: 29.6px; +} + [class*="html--related-product"] :global(.vtex-slider-layout-0-x-sliderLayoutContainer) { flex-direction: column; @@ -242,7 +260,32 @@ background-color: transparent; } -/* 0 */ +[class*="html--product-item"] { + display: flex; + flex-direction: column; + height: 100%; + +} + +[class*="html--product-item"] :global(.vtex-product-price-1-x-listPrice) { + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #bababa; +} +[class*="html--product-item"] :global(.vtex-product-price-1-x-sellingPrice) { + font-weight: 700; + font-size: 24px; + line-height: 33px; + text-align: center; + color: #000000; +} + +[class*="html--newsletter"] { + background-color: #000; + padding: 32px 40px 16px; +} @media screen and (min-width: 1920px) { [class*="html--pdp-breadcrumb"] { @@ -346,4 +389,8 @@ margin-top: 16px; margin-bottom: 32px; } + + [class*="html--newsletter"] { + padding: 32px 16px 16px; + } } diff --git a/react/components/Pix/index.tsx b/react/components/Pix/index.tsx index b374dfd..d7f64d0 100644 --- a/react/components/Pix/index.tsx +++ b/react/components/Pix/index.tsx @@ -44,13 +44,15 @@ const Pix = () => {
logo do Pix
-

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

+

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

10 % de desconto

diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index ba7e623..da42098 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -4,7 +4,8 @@ "placeholder", "html#breadcrumb", "condition-layout.product#availability", - "tab-layout#description", + "html#tab-layout", + // "tab-layout#description", // "flex-layout.row#description", // "flex-layout.row#specifications-title", // "product-specification-group#table", @@ -12,10 +13,41 @@ // "rich-text#title-relatedProduct", // "list-context.product-list", "html#relatedProduct", - "product-questions-and-answers" + // "product-questions-and-answers", + "html#newsletter" ] }, + "html#tab-layout": { + "props": { + "testId": "product-description" + }, + "children": ["tab-layout#description"] + }, + + "html#newsletter": { + "props": { + "blockClass": "newsletter" + }, + "children": ["rich-text#newsletter", "newsletter#pdp"] + }, + + "rich-text#newsletter": { + "props": { + "text": "Assine nossa newsletter", + "blockClass": "title-newsletter" + } + }, + + "newsletter#pdp": { + "props": { + "blockClass": "product-newsletter", + "label": "Receba ofertas e novidades por e-mail", + "placeholder": "Digite seu e-mail", + "submit": "ENVIAR" + } + }, + "html#relatedProduct": { "props": { "blockClass": "related-product" @@ -53,7 +85,9 @@ "children": [ "product-summary-image#related-product", "product-summary-name", - "product-summary-price" + "product-list-price", + "product-selling-price" + // "product-summary-price" ] }, @@ -208,6 +242,14 @@ // }, // "children": ["product-description"] // }, + + // "html#product-description": { + // "props": { + // // "testId": "product-description" + // }, + // "children": ["product-description"] + // }, + "condition-layout.product#availability": { "props": { "conditions": [ @@ -280,7 +322,8 @@ // "product-rating-summary", // "flex-layout.row#list-price-savings", "html#selling-price", - "product-installments", + "html#installments", + // "product-installments", // "installments", // "product-separator", "html#pix", @@ -291,11 +334,26 @@ "product-gifts", // "flex-layout.row#buy-button", "availability-subscriber", - "shipping-simulator" + "html#shipping-simulator" + // "shipping-simulator" // "share#default" ] }, + "html#shipping-simulator": { + "props": { + "testId": "shipping-simulator" + }, + "children": ["shipping-simulator"] + }, + + "html#installments": { + "props": { + "testId": "product-installments" + }, + "children": ["product-installments"] + }, + "product-installments": { "props": { "markers": ["discount"], @@ -349,10 +407,21 @@ "props": { "blockClass": "product-name" }, - "children": [ - "vtex.store-components:product-name", - "product-identifier.product" - ] + "children": ["html#name", "html#code"] + }, + + "html#name": { + "props": { + "testId": "product-name" + }, + "children": ["vtex.store-components:product-name"] + }, + + "html#code": { + "props": { + "testId": "product-code" + }, + "children": ["product-identifier.product"] }, "sku-selector": { diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 93e5950..30740ad 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -1,7 +1,7 @@ { "html#selling-price": { "props": { - + "testId": "product-price", "blockClass": "selling-price" }, "children": ["product-selling-price"] diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 40a8712..68daeaa 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -37,58 +37,4 @@ font-size: 14px; line-height: 19px; } -} -.container .element .priceContainer { - padding: 0; - flex: 1; -} -.container .element .priceContainer .listPriceContainer { - padding: 8px 0; -} -.container .element .priceContainer .listPriceContainer .listPriceLabel { - display: none; -} -.container .element .priceContainer .listPriceContainer .currencyCode::before { - content: "de "; -} -.container .element .priceContainer .listPriceContainer .currencyInteger:last-child::after { - content: " por"; -} -.container .element .priceContainer .listPriceContainer .currencyFraction:last-child::after { - content: " por"; -} -.container .element .priceContainer .sellingPriceContainer { - padding: 0; -} -.container .element .priceContainer .sellingPriceContainer .sellingPriceLabel { - display: none; -} -.container .element .priceContainer .sellingPriceContainer .currencyContainer { - font-style: normal; - font-weight: 700; - font-size: 24px; - line-height: 33px; - color: #000000; -} -@media screen and (max-width: 1024px) { - .container .element .priceContainer .sellingPriceContainer .currencyContainer { - font-size: 18px; - line-height: 25px; - } -} -.container .element .priceContainer .installmentContainer { - display: none; -} -.container .element .priceContainer :global(.vtex-store-components-3-x-listPriceValue) { - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #bababa; -} -@media screen and (max-width: 1024px) { - .container .element .priceContainer :global(.vtex-store-components-3-x-listPriceValue) { - font-size: 12px; - line-height: 16px; - } } \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..81300ec 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,22 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.container--title-newsletter { + width: 100%; + max-width: 774px; + margin: 0 auto; + padding-bottom: 8px; +} +.container--title-newsletter .wrapper--title-newsletter { + width: 100%; +} +.container--title-newsletter .wrapper--title-newsletter .paragraph { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + margin: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 6acb449..71a3c19 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,10 +7,6 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - background: red; -} - .productImageTag--main { max-height: max-content !important; } @@ -369,4 +365,99 @@ .discountInsideContainer { display: none; +} + +.newsletter--product-newsletter { + max-width: 774px; + margin: 0 auto; + width: 100%; +} +@media screen and (max-width: 768px) { + .newsletter--product-newsletter { + max-width: none; + } +} +.newsletter--product-newsletter .container--product-newsletter { + padding: 0; +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter { + margin: 0; + width: 100%; + max-width: none; +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .label--product-newsletter { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; +} +@media screen and (max-width: 768px) { + .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .label--product-newsletter { + font-size: 16px; + line-height: 22px; + } +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter { + width: 100%; + border-bottom: 1px solid #929292; + display: flex; +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter .buttonContainer { + width: 10.852713178%; + padding: 0; +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter .buttonContainer :global(.vtex-button) { + width: 100%; + border: none; + border-radius: 0; + background: transparent; + border-bottom: 3px solid #bfbfbf; + min-height: auto; +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter .buttonContainer :global(.vtex-button__label) { + width: 100%; + padding: 0 !important; + padding-bottom: 10px !important; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #ffffff; +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-input) { + flex: 1; +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-input-prefix__group) { + border: none; + height: 29px; +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +@media screen and (max-width: 768px) { + .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-styleguide-9-x-input) { + font-size: 12px; + line-height: 16px; + } +} +.newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-styleguide-9-x-input)::placeholder { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +@media screen and (max-width: 768px) { + .newsletter--product-newsletter .container--product-newsletter .form--product-newsletter .inputGroup--product-newsletter :global(.vtex-styleguide-9-x-input)::placeholder { + font-size: 12px; + line-height: 16px; + } } \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index 423bc18..c648b36 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -56,6 +56,12 @@ border: none; padding: 0 16px; } +@media screen and (min-width: 1920px) { + .container .listItem :global(.vtex-button) { + font-size: 18px; + line-height: 38px; + } +} @media screen and (max-width: 1024px) { .container .listItem :global(.vtex-button) { padding: 0; @@ -121,6 +127,13 @@ line-height: 32px; } } +.container .contentContainer .contentItem :global(.vtex-store-components-3-x-container) { + height: auto !important; + overflow: auto !important; +} +.container .contentContainer .contentItem :global(.vtex-store-components-3-x-pointerEventsNone) { + display: none; +} .container .contentContainer .contentItem :global(.vtex-store-components-3-x-content) { font-style: normal; font-weight: 400; diff --git a/styles/sass/pages/product/vtex.product-summary.scss b/styles/sass/pages/product/vtex.product-summary.scss index 75be31d..8c07b51 100644 --- a/styles/sass/pages/product/vtex.product-summary.scss +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -28,76 +28,5 @@ } } } - - .priceContainer { - padding: 0; - flex: 1; - - .listPriceContainer { - padding: 8px 0; - - .listPriceLabel { - display: none; - } - - .currencyCode { - &::before { - content: "de "; - } - } - .currencyInteger { - &:last-child { - &::after { - content: " por"; - } - } - } - - .currencyFraction { - &:last-child { - &::after { - content: " por"; - } - } - } - } - - .sellingPriceContainer { - padding: 0; - .sellingPriceLabel { - display: none; - } - - .currencyContainer { - font-style: normal; - font-weight: 700; - font-size: 24px; - line-height: 33px; - color: #000000; - - @media screen and (max-width: 1024px) { - font-size: 18px; - line-height: 25px; - } - } - } - - .installmentContainer { - display: none; - } - } - - .priceContainer :global(.vtex-store-components-3-x-listPriceValue) { - font-style: normal; - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: #bababa; - - @media screen and (max-width: 1024px) { - font-size: 12px; - line-height: 16px; - } - } } } diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index 8b13789..216628b 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -1 +1,18 @@ - +.container--title-newsletter { + width: 100%; + max-width: 774px; + margin: 0 auto; + padding-bottom: 8px; + .wrapper--title-newsletter { + width: 100%; + .paragraph { + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + margin: 0; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 644e5cf..52e024c 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,7 +1,3 @@ -.newsletter { - background: red; -} - .productImageTag--main { max-height: max-content !important; } @@ -411,3 +407,103 @@ .discountInsideContainer { display: none; } + +.newsletter--product-newsletter { + max-width: 774px; + margin: 0 auto; + width: 100%; + + @media screen and (max-width: 768px) { + max-width: none; + } + .container--product-newsletter { + padding: 0; + .form--product-newsletter { + margin: 0; + width: 100%; + max-width: none; + .label--product-newsletter { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + + @media screen and (max-width: 768px) { + font-size: 16px; + line-height: 22px; + } + } + + .inputGroup--product-newsletter { + width: 100%; + border-bottom: 1px solid #929292; + + display: flex; + + .buttonContainer { + width: 10.852713178%; + padding: 0; + } + + .buttonContainer :global(.vtex-button) { + width: 100%; + border: none; + border-radius: 0; + background: transparent; + border-bottom: 3px solid #bfbfbf; + min-height: auto; + } + .buttonContainer :global(.vtex-button__label) { + width: 100%; + padding: 0 !important; + + padding-bottom: 10px !important; + + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #ffffff; + } + } + + .inputGroup--product-newsletter :global(.vtex-input) { + flex: 1; + } + .inputGroup--product-newsletter :global(.vtex-input-prefix__group) { + border: none; + height: 29px; + } + + .inputGroup--product-newsletter :global(.vtex-styleguide-9-x-input) { + background: transparent; + padding: 0; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + + @media screen and (max-width: 768px) { + font-size: 12px; + line-height: 16px; + } + + &::placeholder { + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + + @media screen and (max-width: 768px) { + font-size: 12px; + line-height: 16px; + } + } + } + } + } +} diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 05a4eb1..4e71c36 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -45,6 +45,11 @@ border: none; padding: 0 16px; + @media screen and (min-width: 1920px) { + font-size: 18px; + line-height: 38px; + } + @media screen and (max-width: 1024px) { padding: 0; } @@ -111,6 +116,14 @@ } } + .contentItem :global(.vtex-store-components-3-x-container) { + height: auto !important; + overflow: auto !important; + } + .contentItem :global(.vtex-store-components-3-x-pointerEventsNone) { + display: none; + } + .contentItem :global(.vtex-store-components-3-x-content) { font-style: normal; font-weight: 400; From 736e881975ed7ba8ec89884f3e6ad297288d78b2 Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Tue, 7 Feb 2023 12:03:49 -0300 Subject: [PATCH 10/11] =?UTF-8?q?feat:=20Ajusta=20alguns=20espa=C3=A7ament?= =?UTF-8?q?os=20errados?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- react/components/Html/styles.css | 9 +++++++-- store/blocks/pdp/product.jsonc | 9 ++++++++- styles/css/vtex.store-components.css | 15 +++++++++++---- styles/css/vtex.tab-layout.css | 17 ++++++++++++++++- .../pages/product/vtex.store-components.scss | 13 ++++++++++++- styles/sass/pages/product/vtex.tab-layout.scss | 15 ++++++++++++++- 6 files changed, 68 insertions(+), 10 deletions(-) diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 2c4bac4..84c6b0e 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -32,7 +32,7 @@ [class*="html--product-name"] { text-align: end; - margin-bottom: 24px; + margin-bottom: 16px; } [class*="html--buy-container"] { @@ -264,7 +264,6 @@ display: flex; flex-direction: column; height: 100%; - } [class*="html--product-item"] :global(.vtex-product-price-1-x-listPrice) { @@ -273,6 +272,7 @@ line-height: 19px; text-align: center; color: #bababa; + margin: 8px 0; } [class*="html--product-item"] :global(.vtex-product-price-1-x-sellingPrice) { font-weight: 700; @@ -360,6 +360,11 @@ :global(.vtex-slider-layout-0-x-paginationDotsContainer) { margin-top: 24px; } + + [class*="html--related-product"] :global(.vtex-rich-text-0-x-heading) { + margin-bottom: 24px; + margin-top: 16px; + } } @media screen and (max-width: 768px) { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index da42098..4b33e62 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -91,6 +91,13 @@ ] }, + "product-list-price": { + "props": { + "message": "de {listPriceValue} por" + } + }, + + "product-summary.shelf#related-product": { "children": [ "html#product-item" @@ -358,7 +365,7 @@ "props": { "markers": ["discount"], "blockClass": "installments", - "message": "ou {installmentsNumber}x de R${installmentValue} sem juros", + "message": "ou {installmentsNumber}x de {installmentValue} sem juros", "installmentsCriteria": "max-quantity-without-interest" } }, diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 71a3c19..914e9a9 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -44,10 +44,6 @@ display: flex; flex-direction: column-reverse; } -.skuSelectorContainer .skuSelectorSubcontainer--cor, -.skuSelectorContainer .skuSelectorSubcontainer--tamanho { - margin-bottom: 16px; -} .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorNameContainer, .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorNameContainer { margin: 0; @@ -101,6 +97,9 @@ .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorOptionsList .skuSelectorItem .skuSelectorInternalBox .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after { background-color: #000; } +.skuSelectorContainer .skuSelectorSubcontainer--cor { + margin-bottom: 16px; +} .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorName::after { content: "Outras Cores:"; font-style: normal; @@ -138,6 +137,9 @@ .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList .skuSelectorItem--selected .skuSelectorInternalBox .diagonalCross::after { background-color: #000; } +.skuSelectorContainer .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; +} .skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorName::after { content: "OUTROS TAMANHOS:"; font-style: normal; @@ -341,6 +343,11 @@ .shippingTableRow { display: flex; gap: 32px; + padding-bottom: 15px; +} + +.shippingTableBody .shippingTableRow:last-child { + padding-bottom: 0; } .shippingTableCell { diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index c648b36..f2f2900 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -55,10 +55,11 @@ text-transform: capitalize; border: none; padding: 0 16px; + width: 100%; } @media screen and (min-width: 1920px) { .container .listItem :global(.vtex-button) { - font-size: 18px; + font-size: 24px; line-height: 38px; } } @@ -69,6 +70,8 @@ } .container .listItem :global(.vtex-button__label) { padding: 0 !important; + text-align: start; + display: block; } .container .listItemActive :global(.vtex-button__label) { color: #000; @@ -121,6 +124,12 @@ color: #575757; margin-bottom: 8px; } +@media screen and (min-width: 1920px) { + .container .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionTitle) { + font-size: 32px; + margin-bottom: 16px; + } +} @media screen and (max-width: 1024px) { .container .contentContainer .contentItem :global(.vtex-store-components-3-x-productDescriptionTitle) { font-size: 20px; @@ -141,6 +150,12 @@ line-height: 22px; color: #929292; } +@media screen and (min-width: 1920px) { + .container .contentContainer .contentItem :global(.vtex-store-components-3-x-content) { + font-size: 18px; + line-height: 25px; + } +} @media screen and (max-width: 1024px) { .container .contentContainer .contentItem :global(.vtex-store-components-3-x-content) { font-size: 14px; diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 52e024c..595c159 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -38,7 +38,6 @@ flex-direction: column-reverse; .skuSelectorSubcontainer--cor, .skuSelectorSubcontainer--tamanho { - margin-bottom: 16px; .skuSelectorNameContainer { margin: 0; .skuSelectorTextContainer { @@ -100,6 +99,8 @@ } .skuSelectorSubcontainer--cor { + margin-bottom: 16px; + .skuSelectorName { &::after { content: "Outras Cores:"; @@ -156,6 +157,7 @@ } .skuSelectorSubcontainer--tamanho { + margin-bottom: 10px; .skuSelectorName { &::after { content: "OUTROS TAMANHOS:"; @@ -382,6 +384,15 @@ .shippingTableRow { display: flex; gap: 32px; + padding-bottom: 15px; +} + +.shippingTableBody { + .shippingTableRow { + &:last-child { + padding-bottom: 0; + } + } } .shippingTableCell { diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 4e71c36..476a16b 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -44,9 +44,10 @@ text-transform: capitalize; border: none; padding: 0 16px; + width: 100%; @media screen and (min-width: 1920px) { - font-size: 18px; + font-size: 24px; line-height: 38px; } @@ -57,6 +58,8 @@ .listItem :global(.vtex-button__label) { padding: 0 !important; + text-align: start; + display: block; } .listItemActive :global(.vtex-button__label) { color: $black; @@ -110,6 +113,11 @@ color: #575757; margin-bottom: 8px; + @media screen and (min-width: 1920px) { + font-size: 32px; + margin-bottom: 16px; + } + @media screen and (max-width: 1024px) { font-size: 20px; line-height: 32px; @@ -132,6 +140,11 @@ color: #929292; + @media screen and (min-width: 1920px) { + font-size: 18px; + line-height: 25px; + } + @media screen and (max-width: 1024px) { font-size: 14px; line-height: 19px; From e13172baab9fc0271036c264ce2e0a66ff4ca29f Mon Sep 17 00:00:00 2001 From: Nicolly Vieira Date: Tue, 7 Feb 2023 12:15:10 -0300 Subject: [PATCH 11/11] feat: Retira os comentarios do projeto --- react/components/Html/styles.css | 6 +- store/blocks/pdp/product.jsonc | 58 +------------------ .../sass/pages/product/vtex.flex-layout.scss | 3 - .../pages/product/vtex.store-components.scss | 18 ------ 4 files changed, 3 insertions(+), 82 deletions(-) delete mode 100644 styles/sass/pages/product/vtex.flex-layout.scss diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css index 84c6b0e..677f6e0 100644 --- a/react/components/Html/styles.css +++ b/react/components/Html/styles.css @@ -343,7 +343,7 @@ } [class*="html--message-availability"] { - width: 81.0381355932%; + width: 100%; } [class*="html--message-availability"] @@ -381,9 +381,7 @@ height: 70px; } - [class*="html--message-availability"] { - width: 100%; - } + [class*="html--related-product"] { padding: 0 47.2px; diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 4b33e62..8a7a101 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -5,15 +5,7 @@ "html#breadcrumb", "condition-layout.product#availability", "html#tab-layout", - // "tab-layout#description", - // "flex-layout.row#description", - // "flex-layout.row#specifications-title", - // "product-specification-group#table", - // "shelf.relatedProducts", - // "rich-text#title-relatedProduct", - // "list-context.product-list", "html#relatedProduct", - // "product-questions-and-answers", "html#newsletter" ] }, @@ -87,7 +79,6 @@ "product-summary-name", "product-list-price", "product-selling-price" - // "product-summary-price" ] }, @@ -101,9 +92,6 @@ "product-summary.shelf#related-product": { "children": [ "html#product-item" - // "product-summary-image#related-product", - // "product-summary-name", - // "product-summary-price" ] }, @@ -235,28 +223,6 @@ "children": ["breadcrumb"] }, - // "flex-layout.row#specifications-title": { - // "children": ["rich-text#specifications"] - // }, - // "rich-text#specifications": { - // "props": { - // "text": "##### Product Specifications" - // } - // }, - // "flex-layout.row#description": { - // "props": { - // "marginBottom": 7 - // }, - // "children": ["product-description"] - // }, - - // "html#product-description": { - // "props": { - // // "testId": "product-description" - // }, - // "children": ["product-description"] - // }, - "condition-layout.product#availability": { "props": { "conditions": [ @@ -325,25 +291,14 @@ }, "children": [ "html#product-name", - // "product-identifier.product", - // "product-rating-summary", - // "flex-layout.row#list-price-savings", "html#selling-price", "html#installments", - // "product-installments", - // "installments", - // "product-separator", "html#pix", "html#sku-selector", - // "product-quantity", "html#buy-container", - // "product-assembly-options", "product-gifts", - // "flex-layout.row#buy-button", "availability-subscriber", "html#shipping-simulator" - // "shipping-simulator" - // "share#default" ] }, @@ -460,7 +415,6 @@ }, "children": [ "html#product-name", - // "product-identifier.product", "html#availability", "sku-selector" ] @@ -470,16 +424,6 @@ "blockClass": "message-availability" }, "children": ["availability-subscriber"] - }, - - "share#default": { - "props": { - "social": { - "Facebook": true, - "WhatsApp": true, - "Twitter": false, - "Pinterest": true - } - } } + } diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss deleted file mode 100644 index eafb088..0000000 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ /dev/null @@ -1,3 +0,0 @@ -// .flexRowContent { -// background-color: red; -// } diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 595c159..6699917 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -69,7 +69,6 @@ transform: rotate(45deg); bottom: 0; left: 50%; - // transform: translate(-50%, -50%); position: relative; } } @@ -187,23 +186,6 @@ color: $gray-450; } - // .diagonalCross { - // background-image: none; - - // &::after { - // content: ""; - // display: block; - // width: 1px; - // height: 40px; - // background: $gray-300; - - // transform: rotate(45deg); - // bottom: 0; - // left: 50%; - // // transform: translate(-50%, -50%); - // position: relative; - // } - // } } }