diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index d17ddbb..c07727f 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -50,7 +50,8 @@ "marginTop": 4, "marginBottom": 7, "paddingTop": 7, - "paddingBottom": 7 + "paddingBottom": 7, + "blockClass": "product-main-stack" }, "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] }, @@ -78,7 +79,7 @@ "flex-layout.col#stack": { "children": ["stack-layout"], "props": { - "width": "60%", + "width": "50%", "rowGap": 0 } }, @@ -113,7 +114,6 @@ "sku-selector", "product-quantity", "product-assembly-options", - "product-gifts", "flex-layout.row#buy-button", "availability-subscriber", "shipping-simulator" @@ -164,8 +164,8 @@ "children": [ "flex-layout.row#product-name", "product-identifier.product", - "sku-selector", - "flex-layout.row#availability" + "flex-layout.row#availability", + "sku-selector" ] }, "flex-layout.row#availability": { @@ -193,9 +193,18 @@ } }, + "rich-text#shelfTitle": { + "props": { + "textAlignment": "CENTER", + "textPosition": "CENTER", + "text": "Você também pode gostar:", + "blockClass": "shelfTitleText" + } + }, + "list-context.product-list#list": { "blocks": ["product-summary.shelf#carrosselprodutos"], - "children": ["slider-layout#carrosselatualizado"] + "children": ["rich-text#shelfTitle", "slider-layout#carrosselatualizado"] }, "product-summary.shelf#carrosselprodutos": { "children": [ diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css new file mode 100644 index 0000000..b8da68a --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,33 @@ +/* +0 - 600PX: Phone +600 - 900px: Table portrait +900 - 1200px: Tablet landscape +[1200 - 1800] is where our nortal styles apply +1800px + : Big desktop +*/ +/* Media Query M3 */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); +/* Grid breakpoints */ +.homeLink .homeIcon { + display: none; +} +.homeLink::before { + content: "Home"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.link--1, +.link--2, +.link--3 { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} \ No newline at end of file diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index c30975d..e9a063b 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -8,8 +8,11 @@ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); /* Grid breakpoints */ +.flexRowContent--product-main-stack { + padding: 0 30px; +} @media screen and (max-width: 1024px) { - .flexRowContent { + .flexRowContent--product-main-stack { display: flex; flex-direction: column; } @@ -29,7 +32,7 @@ @media screen and (min-width: 769px) { .flexRow--btn-product { width: 100%; - max-width: 400px; + max-width: 526px; position: absolute; top: 366px; left: 158px; diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 53a4cc6..b05cfa2 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -7,4 +7,13 @@ */ /* Media Query M3 */ @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap"); -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.paragraph--shelfTitleText { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + margin-bottom: 32px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index 5c6ef95..2e8232b 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -206,7 +206,7 @@ .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) { color: #000000; position: absolute; - right: 110px; + left: 348px; top: 25px; font-family: "Open Sans"; font-style: normal; diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..adb8793 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,28 @@ +.homeLink { + .homeIcon { + display: none; + } + + &::before { + content: "Home"; + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: #929292; + } +} + +.link--1, +.link--2, +.link--3 { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + + color: #929292; +} diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 7a9e38d..e6c2fda 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -1,10 +1,17 @@ -.flexRowContent { +// .flexRowContent { +// @media screen and (max-width: 1024px) { +// display: flex; +// flex-direction: column; +// } +// } +.flexRowContent--product-main-stack { + padding: 0 30px; + @media screen and (max-width: 1024px) { display: flex; flex-direction: column; } } - .flexRowContent--main-header-mobile { @media screen and (max-width: 1024px) { display: flex; @@ -19,7 +26,7 @@ .flexRow--btn-product { @media screen and (min-width: 769px) { width: 100%; - max-width: 400px; + max-width: 526px; position: absolute; top: 366px; left: 158px; diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..25ee81f 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,10 @@ +.paragraph--shelfTitleText { + font-family: $font-family; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #575757; + + margin-bottom: 32px; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 794eea7..9d78fef 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -230,7 +230,7 @@ :global(.vtex-address-form__postalCode-forgottenURL) { color: $color-black; position: absolute; - right: 110px; + left: 348px; top: 25px; font-family: $font-family;