diff --git a/assets/sandalia-image.png b/assets/sandalia-image.png new file mode 100644 index 0000000..f4da28d Binary files /dev/null and b/assets/sandalia-image.png differ diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 30250b8..03ab73b 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,9 +3,9 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", + "flex-layout.row#primeira-coluna", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", "shelf.relatedProducts", "newsletter", "product-questions-and-answers" @@ -92,11 +92,14 @@ "desktop": "auto", "phone": "16:9" }, + "displayThumbnailsArrows": false, "thumbnailsOrientation": "horizontal", - "showNavigationArrows": false + "showNavigationArrows": false, + "maxHeight":900 } }, + "flex-layout.col#right-col": { "props": { "preventVerticalStretch": true, @@ -184,5 +187,44 @@ "Pinterest": true } } + }, + // teste do meu bloco + // "teste#content-main" :{ + // "children": [ "flex-layout.row#content"] + // }, + + "flex-layout.row#primeira-coluna":{ + "props": { + "blockClass": "flexCol", + "preventHorizontalStretch": true + }, + "children":["image#image-1", "flex-layout.col#segunda-coluna"] + }, + + "flex-layout.col#segunda-coluna":{ + "props": { + "paddingLeft": 7, + "width": "60%" + }, + "children":["rich-text#texto-meio"] + }, + + "rich-text#texto-meio":{ + "props": { + "text": "Descrição do produto\nSandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40.*Consulte disponibilidade de estoque.", + "textAlignment": "START", + "textPosition": "DIREITA", + "textColor": "black", + "font": "Open Sans", + "blockClass": "help-message" + } + }, + "image#image-1": { + "props":{ + "src":"assets/sandalia-image.png", + "maxHeight": 872, + "maxWidth": 872, + "blockClass":"imageElement" + } } } diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..5c7bf0d 100644 --- a/store/blocks/product-summary/quickview.json +++ b/store/blocks/product-summary/quickview.json @@ -137,7 +137,8 @@ "product-images#quickview" : { "props": { "blockClass": "quickview", - "showNavigationArrows": true + "showNavigationArrows": true, + "maxHeight": 90 } } } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index 03baf65..9eaac48 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -11,6 +11,7 @@ display: flex; align-items: center; background-color: white; + padding: 32px 0 16px 240px; } .container .homeLink .homeIcon { display: none; diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 046d276..f179964 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -9,4 +9,13 @@ /* Grid breakpoints */ .stack-layout { background-color: yellow; +} + +.flexRowContent { + padding: 0; + margin: 0; +} + +.content-main { + background-color: red; } \ No newline at end of file diff --git a/styles/css/vtex.shelf.css b/styles/css/vtex.shelf.css new file mode 100644 index 0000000..7c52f1d --- /dev/null +++ b/styles/css/vtex.shelf.css @@ -0,0 +1,14 @@ +/* +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 */ +.title ::before { + content: " Veja tambem"; + font-size: 16px; + color: red; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index c35e378..b69e317 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -8,10 +8,60 @@ /* Media Query M3 */ /* Grid breakpoints */ .newsletter { - background: blue; + background: black; + border-bottom: 1px solid #FFFFFF; + margin: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.container { + padding: 32px 0 23px 0; +} + +.label { + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #FFFFFF; + border: none; +} + +.label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + display: flex; + flex-direction: column; + gap: 16px; + margin-top: 16px; } .productBrand--quickview { display: flex; justify-content: end; +} + +.productImagesThumb { + height: 90px !important; + width: 90px !important; +} + +.imageElement { + padding-left: 32px; +} + +.help-message { + padding: 0 0 60px 0; + background-color: red; } \ No newline at end of file diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss index 1f229ca..a8f1e00 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -3,6 +3,7 @@ display: flex; align-items: center; background-color: white; + padding: 32px 0 16px 240px; .homeLink { .homeIcon { diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss index 3245d7a..6bccc60 100644 --- a/styles/sass/pages/product/vtex.flex-layout.scss +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -2,4 +2,11 @@ background-color: yellow; } +.flexRowContent { + padding: 0; + margin:0; +} +.content-main { + background-color: red; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index bf46b1c..41b78a4 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,8 +1,59 @@ .newsletter{ - background: blue; + background: black; + border-bottom: 1px solid #FFFFFF; + margin:0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } +.container { + padding: 32px 0 23px 0; + // margin:0; +} + +.label { + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #FFFFFF; + border: none; +} +.label::after { + content: "Receba ofertas e novidades por e-mail"; + font-family: 'Open Sans'; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + display: flex; + flex-direction: column; + gap: 16px; + margin-top: 16px; +} + + .productBrand--quickview { display: flex; justify-content: end; } + +.productImagesThumb { + height: 90px !important; + width: 90px !important; +} + +.imageElement{ + padding-left: 32px; +} + +.help-message { + padding: 0 0 60px 0; + background-color: red; +} diff --git a/styles/sass/pages/vtex.shelf.scss b/styles/sass/pages/vtex.shelf.scss new file mode 100644 index 0000000..efb4698 --- /dev/null +++ b/styles/sass/pages/vtex.shelf.scss @@ -0,0 +1,10 @@ +.title ::before { + content: " Veja tambem"; + font-size: 16px; + color:red; +} + +// .title { +// color: blue; +// } +