From 6d6f51d4d23f361f3237e07ccd1801489119d932 Mon Sep 17 00:00:00 2001 From: Izabela Balizardo Date: Sat, 4 Feb 2023 17:04:58 -0300 Subject: [PATCH] feat: Adiciona imagem e descricao --- store/blocks/home/home.jsonc | 8 +- store/blocks/pdp/product.jsonc | 170 +++++++++++++++++- store/blocks/product-summary/quickview.json | 28 +-- styles/css/agenciamagma.store-theme.css | 1 + styles/css/vtex.flex-layout.css | 3 +- styles/css/vtex.product-identifier.css | 1 + styles/css/vtex.product-price.css | 1 + styles/css/vtex.product-quantity.css | 1 + styles/css/vtex.rich-text.css | 1 + styles/css/vtex.store-components.css | 6 +- .../pages/product/vtex.store-components.scss | 7 +- styles/sass/utils/_vars.scss | 3 + 12 files changed, 196 insertions(+), 34 deletions(-) diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index e18de24..e0aeb30 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -1,11 +1,11 @@ { "store.home": { + "blocks": [ "list-context.image-list#demo", - "example-component" + "example-component", /* You can make references to blocks defined in other files. - * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */, - "flex-layout.row#deals", + * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */ "flex-layout.row#deals", "__fold__", "rich-text#shelf-title", "flex-layout.row#shelf", @@ -14,6 +14,8 @@ "rich-text#link", "newsletter" ] + + }, "list-context.image-list#demo": { diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 7a0322d..e33be5a 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -3,13 +3,173 @@ "children": [ "html#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", - "product-questions-and-answers" + "tab-layout#descricao", + "list-context.product-list#list", + "product-questions-and-answers", + "newsletter" ] }, + + "tab-layout#descricao": { + "children": ["tab-list#descricao", "tab-content#descricao"], + + "props": { + "blockClass": "descricao", + "defaultActiveTabId": "descricao1" + } + }, + + "tab-list#descricao": { + "children": ["tab-list.item#descricao1", "tab-list.item#descricao2", "tab-list.item#descricao3", "tab-list.item#descricao4", "tab-list.item#descricao5"] + }, + "tab-list.item#descricao1": { + "props": { + "tabId": "descricao1", + "label": "descricao 1", + "defaultActiveTab": true + } + }, + "tab-list.item#descricao2": { + "props": { + "tabId": "descricao2", + "label": "descricao 2" + } + }, + + "tab-list.item#descricao3": { + "props": { + "tabId": "descricao3", + "label": "descricao 3" + } + }, + + + + "tab-list.item#descricao4": { + "props": { + "tabId": "descricao4", + "label": "descricao 4" + } + }, + + + + "tab-list.item#descricao5": { + "props": { + "tabId": "descricao5", + "label": "descricao 5" + } + }, + + + + + "tab-content#descricao": { + "children": [ + "tab-content.item#descricao1", + "tab-content.item#descricao2", + "tab-content.item#descricao3", + "tab-content.item#descricao4", + "tab-content.item#descricao5" + ] + }, + "tab-content.item#descricao1": { + "children": [ + "product-description", + "product-images#descricao" + ], + "props": { + "tabId": "descricao1" + } + }, + "tab-content.item#descricao2": { + "children": [ + "product-description", + "product-images#descricao" + ], + "props": { + "tabId": "descricao2" + } + }, + + + "tab-content.item#descricao3": { + "children": [ + "product-description", + "product-images#descricao" + ], + "props": { + "tabId": "descricao3" + } + }, + + + "tab-content.item#descricao4": { + "children": [ + "product-description", + "product-images#descricao" + ], + "props": { + "tabId": "descricao4" + } + }, + + + "tab-content.item#descricao5": { + "children": [ + "product-description", + "product-images#descricao" + ], + "props": { + "tabId": "descricao5" + } + }, + + + + + "product-images#descricao": { + "props": { + "displayMode": "first-image", + "blockClass": "imagem-descricao" + } + }, + + + + + + + + "list-context.product-list#list": { + "blocks": ["product-summary.shelf#carrosselprodutos"], + "children": ["slider-layout#carrosselatualizado"] + }, + + "product-summary.shelf#carrosselprodutos": { + "children": [ + "product-summary-name", + "product-summary-description", + "product-summary-image", + "product-summary-price", + "product-summary-sku-selector", + "product-summary-buy-button" + ] + }, + + "slider-layout#carrosselatualizado": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 1 + }, + "infinite": true, + "showNavigationArrows": "desktopOnly", + "blockClass": "carousel" + } + }, + "html#breadcrumb": { "props": { "tag": "section", diff --git a/store/blocks/product-summary/quickview.json b/store/blocks/product-summary/quickview.json index 723d4a0..2224337 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" } @@ -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/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..7225e9a 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -7,6 +7,7 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); .html { background-color: red; } diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css index 34c4328..32d6e49 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -6,4 +6,5 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index 228a2c3..d6161ff 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -7,6 +7,7 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); .product-identifier--productReference { font-family: "Open Sans"; font-style: normal; diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index fa8d19a..329a85b 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -7,6 +7,7 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); .listPrice { display: none; } diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css index 5476938..28c7984 100644 --- a/styles/css/vtex.product-quantity.css +++ b/styles/css/vtex.product-quantity.css @@ -7,6 +7,7 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); .quantitySelectorTitle { display: none; } diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 32d6e49..fc1c55c 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -7,4 +7,5 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index ebc1bd6..c3125e8 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,8 +7,10 @@ */ /* Media Query M3 */ /* Grid breakpoints */ +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap"); .newsletter { - background: red; + background-color: #000000; + color: #fff; } .productNameContainer { @@ -18,7 +20,7 @@ font-size: 20px; line-height: 34px; text-align: right; - color: #000000; + color: #292929; } .productNameContainer--quickview { diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 2b5fcb7..8d9d2a9 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,7 +1,10 @@ .newsletter { - background: red; + background-color: #000000; + color: $color-white; } + + .productNameContainer { font-family: "Open Sans"; font-style: normal; @@ -9,7 +12,7 @@ font-size: 20px; line-height: 34px; text-align: right; - color: #000000; + color: $color-black; } .productNameContainer--quickview { diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..ee4cff8 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -29,3 +29,6 @@ $z-index: ( level4: 20, level5: 25 ) !default; + + +@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap");