From a20042166e33742439559dd79be31a0873cf4fd2 Mon Sep 17 00:00:00 2001 From: PatrickSouza Date: Fri, 3 Feb 2023 21:27:34 -0300 Subject: [PATCH] feat: criando o footer pronto para o style e criando os files menu footer --- store/blocks/footer/footer-1-desktop.jsonc | 52 +++ store/blocks/footer/footer-2-desktop.jsonc | 24 ++ store/blocks/footer/footer-newsletter.jsonc | 21 + store/blocks/footer/footer.json | 127 ------ store/blocks/footer/footer.jsonc | 18 + store/blocks/footer/menu-link-1.jsonc | 87 ++++ store/blocks/footer/menu-link-2.jsonc | 67 +++ store/blocks/footer/menu-link-3.jsonc | 66 +++ store/blocks/footer/menu.json | 393 ------------------ .../blocks/footer/mobile/footer-mobile.jsonc | 36 ++ store/blocks/footer/mobile/menu-item-1.jsonc | 110 +++++ store/blocks/footer/mobile/menu-mobile.jsonc | 31 ++ store/blocks/pdp/descriptionTabs.jsonc | 1 + store/blocks/pdp/product.jsonc | 26 +- styles/css/vtex.breadcrumb.css | 29 +- styles/css/vtex.shelf.css | 19 + styles/css/vtex.tab-layout.css | 4 +- .../sass/pages/product/vtex.breadcrumb.scss | 30 +- .../sass/pages/product/vtex.tab-layout.scss | 9 +- 19 files changed, 616 insertions(+), 534 deletions(-) create mode 100644 store/blocks/footer/footer-1-desktop.jsonc create mode 100644 store/blocks/footer/footer-2-desktop.jsonc create mode 100644 store/blocks/footer/footer-newsletter.jsonc delete mode 100644 store/blocks/footer/footer.json create mode 100644 store/blocks/footer/footer.jsonc create mode 100644 store/blocks/footer/menu-link-1.jsonc create mode 100644 store/blocks/footer/menu-link-2.jsonc create mode 100644 store/blocks/footer/menu-link-3.jsonc delete mode 100644 store/blocks/footer/menu.json create mode 100644 store/blocks/footer/mobile/footer-mobile.jsonc create mode 100644 store/blocks/footer/mobile/menu-item-1.jsonc create mode 100644 store/blocks/footer/mobile/menu-mobile.jsonc create mode 100644 styles/css/vtex.shelf.css diff --git a/store/blocks/footer/footer-1-desktop.jsonc b/store/blocks/footer/footer-1-desktop.jsonc new file mode 100644 index 0000000..1e2de62 --- /dev/null +++ b/store/blocks/footer/footer-1-desktop.jsonc @@ -0,0 +1,52 @@ +{ + "flex-layout.row#footer-1-desktop": { + "children": [ + "vtex.menu@2.x:menu#link-1", + "vtex.menu@2.x:menu#link-2", + "footer-spacer", + "vtex.menu@2.x:menu#link-3", + "footer-spacer", + "flex-layout.row#footer-social" + ], + "props": { + "blockClass": "menu-row", + "paddingTop": 6, + "paddingBottom": 3 + } + }, + "flex-layout.row#footer-social": { + "children": ["social-networks", "accepted-payment-methods"], + "props": { + "blockClass": "menu-row", + "paddingTop": 6, + "paddingBottom": 3 + } + }, + "social-networks": { + "props": { + "socialNetworks": [ + { + "name": "Facebook", + "url": "https://www.facebook.com/vtexonline/" + }, + { + "name": "Instagram", + "url": "https://www.instagram.com/vtextruecloud/" + }, + { + "name": "Twitter", + "url": "https://twitter.com/vtexonline" + }, + { + "name": "Youtube", + "url": "https://www.youtube.com/user/VTEXTV" + } + ] + } + }, + "accepted-payment-methods": { + "props": { + "paymentMethods": ["MasterCard", "Visa", "Diners Club"] + } + } +} diff --git a/store/blocks/footer/footer-2-desktop.jsonc b/store/blocks/footer/footer-2-desktop.jsonc new file mode 100644 index 0000000..eaf8db7 --- /dev/null +++ b/store/blocks/footer/footer-2-desktop.jsonc @@ -0,0 +1,24 @@ +{ + "flex-layout.row#footer-2-desktop": { + "children": [ + "rich-text#footer-copyright", + "footer-spacer", + "rich-text#footer-powered" + ], + "props": { + "blockClass": "credits" + } + }, + "rich-text#footer-copyright": { + "props": { + "text": "**Copyright © 2022 M3 Academy. Todos os direitos reservados.** \n R. Helena Coutinho, 41 - Braunes - Nova Friburgo - RJ \n CNPJ: 12.345.678.0009-10", + "blockClass": "footer" + } + }, + "rich-text#footer-powered": { + "props": { + "text": "Powered by [![vtex](assets/test.svg)](/test) Developed by [![vtex](assets/test.svg)](/test)", + "blockClass": "footer" + } + } +} diff --git a/store/blocks/footer/footer-newsletter.jsonc b/store/blocks/footer/footer-newsletter.jsonc new file mode 100644 index 0000000..62f7a2a --- /dev/null +++ b/store/blocks/footer/footer-newsletter.jsonc @@ -0,0 +1,21 @@ +{ + "flex-layout.row#footer-newsletter": { + "children": ["rich-text#footer-newsletter", "newsletter"], + "props": { + "blockClass": "menu-row", + "paddingTop": 6, + "paddingBottom": 3 + } + }, + "rich-text#footer-newsletter": { + "props": { + "text": "## Assine nossa newsletter \n Receba ofertas e novidades por e-mail", + "blockClass": "footer" + } + }, + "newsletter": { + "props": { + "hideLabel": true + } + } +} diff --git a/store/blocks/footer/footer.json b/store/blocks/footer/footer.json deleted file mode 100644 index c05ac0f..0000000 --- a/store/blocks/footer/footer.json +++ /dev/null @@ -1,127 +0,0 @@ -{ - "footer": { - "blocks": [ - "footer-layout.desktop", - "footer-layout.mobile" - ] - }, - "footer-layout.desktop": { - "children": [ - "flex-layout.row#footer-1-desktop", - "flex-layout.row#footer-2-desktop", - "flex-layout.row#footer-3-desktop" - ] - }, - "flex-layout.row#footer-1-desktop": { - "children": [ - "vtex.menu@2.x:menu#Products", - "vtex.menu@2.x:menu#footer-clothing", - "vtex.menu@2.x:menu#footer-decoration", - "vtex.menu@2.x:menu#footer-bags", - "footer-spacer", - "social-networks" - ], - "props": { - "blockClass": "menu-row", - "paddingTop": 6, - "paddingBottom": 3 - } - }, - "social-networks": { - "props": { - "socialNetworks": [ - { - "name": "Facebook", - "url": "https://www.facebook.com/vtexonline/" - }, - { - "name": "Instagram", - "url": "https://www.instagram.com/vtextruecloud/" - }, - { - "name": "Twitter", - "url": "https://twitter.com/vtexonline" - }, - { - "name": "Youtube", - "url": "https://www.youtube.com/user/VTEXTV" - } - ] - } - }, - "flex-layout.row#footer-2-desktop": { - "children": [ - "accepted-payment-methods" - ], - "props": { - "blockClass": "payment-methods" - } - }, - "accepted-payment-methods": { - "props": { - "paymentMethods": [ - "MasterCard", - "Visa", - "Diners Club" - ] - } - }, - "flex-layout.row#footer-3-desktop": { - "children": [ - "rich-text#footer" - ], - "props": { - "blockClass": "credits" - } - }, - "rich-text#footer": { - "props": { - "text": "All stock and product photos are from photos.icons8.com", - "blockClass": "footer" - } - }, - "footer-layout.mobile": { - "children": [ - "flex-layout.row#1-footer-mobile", - "flex-layout.row#2-footer-mobile" - ] - }, - "flex-layout.row#2-footer-mobile": { - "children": [ - "flex-layout.col#footer-1-mobile" - ], - "props": { - "blockClass": "payment-methods", - "paddingTop": 4, - "paddingBottom": 4 - } - }, - "flex-layout.col#footer-1-mobile": { - "children": [ - "accepted-payment-methods", - "social-networks", - "rich-text#footer-mobile" - ], - "props": { - "blockClass": "payment-methods", - "paddingTop": 4, - "paddingBottom": 4, - "rowGap": 4 - } - }, - "flex-layout.row#1-footer-mobile": { - "props": { - "paddingTop": 4, - "paddingBottom": 4 - }, - "children": [ - "vtex.menu@2.x:menu#footer-mobile" - ] - }, - "rich-text#footer-mobile": { - "props": { - "text": "All stock and product photos are from photos.icons8.com", - "blockClass": "footer" - } - } -} diff --git a/store/blocks/footer/footer.jsonc b/store/blocks/footer/footer.jsonc new file mode 100644 index 0000000..8b13133 --- /dev/null +++ b/store/blocks/footer/footer.jsonc @@ -0,0 +1,18 @@ +{ + "footer": { + "blocks": ["footer-layout.desktop", "footer-layout.mobile"] + }, + "footer-layout.desktop": { + "children": [ + "flex-layout.row#footer-newsletter", + "flex-layout.row#footer-1-desktop", + "flex-layout.row#footer-2-desktop" + ] + }, + "footer-layout.mobile": { + "children": [ + "flex-layout.row#1-footer-mobile", + "flex-layout.row#2-footer-mobile" + ] + } +} diff --git a/store/blocks/footer/menu-link-1.jsonc b/store/blocks/footer/menu-link-1.jsonc new file mode 100644 index 0000000..bdfce66 --- /dev/null +++ b/store/blocks/footer/menu-link-1.jsonc @@ -0,0 +1,87 @@ +{ + "vtex.menu@2.x:menu#link-1": { + "props": { + "orientation": "vertical" + }, + "children": [ + "rich-text#footer-link-1-title", + "menu-item#loja", + "menu-item#blackfriday", + "menu-item#sale", + "menu-item#personalization", + "rich-text#footer-link-1-cnpj" + ] + }, + "rich-text#footer-link-1-cnpj": { + "props": { + "text": "CNPJ 12.345.678.0009-10", + "blockClass": "footer-link-1-title" + } + }, + "rich-text#footer-link-1-title": { + "props": { + "text": "Site M3 Academy", + "blockClass": "footer-link-1-title" + } + }, + "menu-item#loja": { + "props": { + "id": "menu-item-loja", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Loja Ebit Ouro", + "text": "Loja Ebit Ouro" + } + } + }, + "menu-item#blackfriday": { + "props": { + "id": "menu-item-black-friday", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "BlackFriday", + "text": "Black Friday" + } + } + }, + "menu-item#sale": { + "props": { + "id": "menu-item-sale", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Sale", + "text": "Sale" + } + } + }, + "menu-item#personalization": { + "props": { + "id": "menu-item-personalization", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Personalization", + "text": "Personalization" + } + } + } +} diff --git a/store/blocks/footer/menu-link-2.jsonc b/store/blocks/footer/menu-link-2.jsonc new file mode 100644 index 0000000..82eae17 --- /dev/null +++ b/store/blocks/footer/menu-link-2.jsonc @@ -0,0 +1,67 @@ +{ + "vtex.menu@2.x:menu#link-2": { + "props": { + "orientation": "vertical" + }, + "children": [ + "rich-text#footer-link-1-cnpj", + "menu-item#smartphones", + "menu-item#videogames", + "menu-item#tvs", + "rich-text#footer-link-1-cnpj" + ] + }, + "rich-text#footer-link-1-cnpj": { + "props": { + "text": "CNPJ 12.345.678.0009-10", + "blockClass": "footer-link-1-title" + } + }, + "menu-item#smartphones": { + "props": { + "id": "menu-item-smartphones", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/decoration/smartphones", + "noFollow": true, + "tagTitle": "Smartphones", + "text": "Smartphones" + } + } + }, + + "menu-item#videogames": { + "props": { + "id": "menu-item-videogames", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/decoration/videogames", + "noFollow": true, + "tagTitle": "Videogames", + "text": "Videogames" + } + } + }, + + "menu-item#tvs": { + "props": { + "id": "menu-item-tvs", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/decoration/tvs", + "noFollow": true, + "tagTitle": "TVs", + "text": "TVs" + } + } + } +} diff --git a/store/blocks/footer/menu-link-3.jsonc b/store/blocks/footer/menu-link-3.jsonc new file mode 100644 index 0000000..90f7f5a --- /dev/null +++ b/store/blocks/footer/menu-link-3.jsonc @@ -0,0 +1,66 @@ +{ + "vtex.menu@2.x:menu#link-3": { + "props": { + "orientation": "vertical" + }, + "children": [ + "rich-text#link-3-title", + "menu-item#bags", + "menu-item#backpacks", + "menu-item#necessaire" + ] + }, + "rich-text#link-3-title": { + "props": { + "text": "Seja um franqueado" + } + }, + + "menu-item#bags": { + "props": { + "id": "menu-item-bags", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/bags/d", + "noFollow": true, + "tagTitle": "Bags", + "text": "Bags" + } + } + }, + + "menu-item#backpacks": { + "props": { + "id": "menu-item-backpacks", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/bags/backpacks", + "noFollow": true, + "tagTitle": "Backpacks", + "text": "Backpacks" + } + } + }, + + "menu-item#necessaire": { + "props": { + "id": "menu-item-necessaire", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/bags/necessaire", + "noFollow": true, + "tagTitle": "Necessaire", + "text": "Necessaire" + } + } + } +} diff --git a/store/blocks/footer/menu.json b/store/blocks/footer/menu.json deleted file mode 100644 index 7cc85f7..0000000 --- a/store/blocks/footer/menu.json +++ /dev/null @@ -1,393 +0,0 @@ -{ - "vtex.menu@2.x:menu#Products": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#news", - "menu-item#blackfriday", - "menu-item#sale", - "menu-item#personalization" - ] - }, - "menu-item#news": { - "props": { - "id": "menu-item-news", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "#", - "noFollow": false, - "tagTitle": "News", - "text": "News" - } - } - }, - "menu-item#blackfriday": { - "props": { - "id": "menu-item-black-friday", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "#", - "noFollow": false, - "tagTitle": "BlackFriday", - "text": "Black Friday" - } - } - }, - "menu-item#sale": { - "props": { - "id": "menu-item-sale", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "#", - "noFollow": false, - "tagTitle": "Sale", - "text": "Sale" - } - } - }, - "menu-item#personalization": { - "props": { - "id": "menu-item-personalization", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "#", - "noFollow": false, - "tagTitle": "Personalization", - "text": "Personalization" - } - } - }, - - "vtex.menu@2.x:menu#footer-decoration": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#smartphones", - "menu-item#videogames", - "menu-item#tvs" - ] - }, - - "menu-item#smartphones": { - "props": { - "id": "menu-item-smartphones", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/decoration/smartphones", - "noFollow": true, - "tagTitle": "Smartphones", - "text": "Smartphones" - } - } - }, - - "menu-item#videogames": { - "props": { - "id": "menu-item-videogames", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/decoration/videogames", - "noFollow": true, - "tagTitle": "Videogames", - "text": "Videogames" - } - } - }, - - "menu-item#tvs": { - "props": { - "id": "menu-item-tvs", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/decoration/tvs", - "noFollow": true, - "tagTitle": "TVs", - "text": "TVs" - } - } - }, - - "vtex.menu@2.x:menu#footer-bags": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#bags", - "menu-item#backpacks", - "menu-item#necessaire" - ] - }, - - "menu-item#bags": { - "props": { - "id": "menu-item-bags", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/bags/d", - "noFollow": true, - "tagTitle": "Bags", - "text": "Bags" - } - } - }, - - "menu-item#backpacks": { - "props": { - "id": "menu-item-backpacks", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/bags/backpacks", - "noFollow": true, - "tagTitle": "Backpacks", - "text": "Backpacks" - } - } - }, - - "menu-item#necessaire": { - "props": { - "id": "menu-item-necessaire", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/bags/necessaire", - "noFollow": true, - "tagTitle": "Necessaire", - "text": "Necessaire" - } - } - }, - - "vtex.menu@2.x:menu#footer-clothing": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#clothing", - "menu-item#shorts", - "menu-item#tank-tops", - "menu-item#shirts", - "menu-item#sweatshirt", - "menu-item#cropped" - ] - }, - - "vtex.menu@2.x:menu#footer-mobile": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#clothing-mobile", - "menu-item#decoration-mobile", - "menu-item#sale-mobile" - ] - }, - - "menu-item#clothing-mobile": { - "props": { - "id": "menu-item-category-clothing", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/d", - "noFollow": true, - "tagTitle": "Clothing", - "text": "Clothing" - } - }, - "blocks": ["vtex.menu@2.x:submenu.accordion#clothing"] - }, - "vtex.menu@2.x:submenu.accordion#clothing": { - "children": ["vtex.menu@2.x:menu#clothing-accordion"] - }, - - "vtex.menu@2.x:menu#clothing-accordion": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#shorts", - "menu-item#tank-tops", - "menu-item#shirts", - "menu-item#sweatshirt", - "menu-item#cropped" - ] - }, - - "menu-item#decoration-mobile": { - "props": { - "itemProps": { - "tagTitle": "Decoration", - "text": "Decoration" - } - }, - "blocks": ["vtex.menu@2.x:submenu.accordion#decoration"] - }, - "vtex.menu@2.x:submenu.accordion#decoration": { - "children": ["vtex.menu@2.x:menu#footer-decoration-mobile"] - }, - - "vtex.menu@2.x:menu#footer-decoration-mobile": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#smartphones", - "menu-item#videogames", - "menu-item#tvs" - ] - }, - - "menu-item#sale-mobile": { - "props": { - "itemProps": { - "tagTitle": "Sale", - "text": "Sale" - } - }, - "blocks": ["vtex.menu@2.x:submenu.accordion#sale"] - }, - "vtex.menu@2.x:submenu.accordion#sale": { - "children": ["vtex.menu@2.x:menu#footer-sale-mobile"] - }, - - "vtex.menu@2.x:menu#footer-sale-mobile": { - "props": { - "orientation": "vertical" - }, - "children": [ - "menu-item#smartphones", - "menu-item#videogames", - "menu-item#tvs" - ] - }, - - "menu-item#clothing": { - "props": { - "id": "menu-item-category-clothing", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/d", - "noFollow": true, - "tagTitle": "Clothing", - "text": "Clothing" - } - } - }, - - "menu-item#shorts": { - "props": { - "id": "menu-item-shorts", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/shorts", - "noFollow": false, - "tagTitle": "Shorts", - "text": "Shorts" - } - } - }, - - "menu-item#tank-tops": { - "props": { - "id": "menu-item-tank-tops", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/tank-tops", - "noFollow": false, - "tagTitle": "Tank tops", - "text": "Tank tops" - } - } - }, - - "menu-item#shirts": { - "props": { - "id": "menu-item-shirts", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/shirts", - "noFollow": false, - "tagTitle": "Shirts", - "text": "Shirts" - } - } - }, - - "menu-item#sweatshirt": { - "props": { - "id": "menu-item-sweat-shirts", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/sweatshirt", - "noFollow": false, - "tagTitle": "Sweatshirt", - "text": "Sweatshirt" - } - } - }, - - "menu-item#cropped": { - "props": { - "id": "menu-item-cropped", - "type": "custom", - "iconId": null, - "highlight": false, - "itemProps": { - "type": "internal", - "href": "/clothing/cropped", - "noFollow": false, - "tagTitle": "Cropped", - "text": "Cropped" - } - } - } -} diff --git a/store/blocks/footer/mobile/footer-mobile.jsonc b/store/blocks/footer/mobile/footer-mobile.jsonc new file mode 100644 index 0000000..3a0b8e5 --- /dev/null +++ b/store/blocks/footer/mobile/footer-mobile.jsonc @@ -0,0 +1,36 @@ +{ + "flex-layout.row#2-footer-mobile": { + "children": ["flex-layout.col#footer-1-mobile"], + "props": { + "blockClass": "payment-methods", + "paddingTop": 4, + "paddingBottom": 4 + } + }, + "flex-layout.col#footer-1-mobile": { + "children": [ + "accepted-payment-methods", + "social-networks", + "flex-layout.row#footer-2-desktop" + ], + "props": { + "blockClass": "payment-methods", + "paddingTop": 4, + "paddingBottom": 4, + "rowGap": 4 + } + }, + "flex-layout.row#1-footer-mobile": { + "props": { + "paddingTop": 4, + "paddingBottom": 4 + }, + "children": ["vtex.menu@2.x:menu#footer-mobile"] + }, + "rich-text#footer-mobile": { + "props": { + "text": "All stock and product photos are from photos.icons8.com", + "blockClass": "footer" + } + } +} diff --git a/store/blocks/footer/mobile/menu-item-1.jsonc b/store/blocks/footer/mobile/menu-item-1.jsonc new file mode 100644 index 0000000..46755b9 --- /dev/null +++ b/store/blocks/footer/mobile/menu-item-1.jsonc @@ -0,0 +1,110 @@ +{ + "menu-item#sale-mobile": { + "props": { + "itemProps": { + "tagTitle": "comprar", + "text": "comprar" + } + }, + "blocks": ["vtex.menu@2.x:submenu.accordion#sale"] + }, + "vtex.menu@2.x:submenu.accordion#sale": { + "children": ["vtex.menu@2.x:menu#footer-sale-mobile"] + }, + "vtex.menu@2.x:menu#footer-sale-mobile": { + "props": { + "orientation": "vertical" + }, + "children": ["menu-item#patrick", "menu-item#videogames", "menu-item#tvs"] + }, + "menu-item#patrick": { + "props": { + "id": "menu-item-category-clothing", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/clothing/d", + "noFollow": true, + "tagTitle": "Clothing", + "text": "Clothing" + } + } + }, + "menu-item#shorts": { + "props": { + "id": "menu-item-shorts", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/clothing/shorts", + "noFollow": false, + "tagTitle": "Shorts", + "text": "Shorts" + } + } + }, + "menu-item#tank-tops": { + "props": { + "id": "menu-item-tank-tops", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/clothing/tank-tops", + "noFollow": false, + "tagTitle": "Tank tops", + "text": "Tank tops" + } + } + }, + "menu-item#shirts": { + "props": { + "id": "menu-item-shirts", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/clothing/shirts", + "noFollow": false, + "tagTitle": "Shirts", + "text": "Shirts" + } + } + }, + "menu-item#sweatshirt": { + "props": { + "id": "menu-item-sweat-shirts", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/clothing/sweatshirt", + "noFollow": false, + "tagTitle": "Sweatshirt", + "text": "Sweatshirt" + } + } + }, + "menu-item#cropped": { + "props": { + "id": "menu-item-cropped", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/clothing/cropped", + "noFollow": false, + "tagTitle": "Cropped", + "text": "Cropped" + } + } + } +} diff --git a/store/blocks/footer/mobile/menu-mobile.jsonc b/store/blocks/footer/mobile/menu-mobile.jsonc new file mode 100644 index 0000000..ba816c4 --- /dev/null +++ b/store/blocks/footer/mobile/menu-mobile.jsonc @@ -0,0 +1,31 @@ +{ + "vtex.menu@2.x:menu#footer-mobile": { + "props": { + "orientation": "vertical" + }, + "children": ["menu-item#sale-mobile", "menu-item#decoration-mobile"] + }, + "menu-item#decoration-mobile": { + "props": { + "itemProps": { + "tagTitle": "Decoration", + "text": "Decoration" + } + }, + "blocks": ["vtex.menu@2.x:submenu.accordion#decoration"] + }, + "vtex.menu@2.x:submenu.accordion#decoration": { + "children": ["vtex.menu@2.x:menu#footer-decoration-mobile"] + }, + + "vtex.menu@2.x:menu#footer-decoration-mobile": { + "props": { + "orientation": "vertical" + }, + "children": [ + "menu-item#smartphones", + "menu-item#videogames", + "menu-item#tvs" + ] + } +} diff --git a/store/blocks/pdp/descriptionTabs.jsonc b/store/blocks/pdp/descriptionTabs.jsonc index 3bd3202..f93abe4 100644 --- a/store/blocks/pdp/descriptionTabs.jsonc +++ b/store/blocks/pdp/descriptionTabs.jsonc @@ -20,6 +20,7 @@ }, "tab-list.item#description": { "props": { + "blockClass": "tab-list-button", "tabId": "product-description", "label": "Description", "defaultActiveTab": true diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index a80a89b..f87b040 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -139,6 +139,7 @@ "flex-layout.row#product-availability": { "props": { + "blockClass": "product-main-container", "colGap": 7, "marginTop": 4, "marginBottom": 7, @@ -158,8 +159,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": { @@ -178,5 +179,26 @@ "Pinterest": true } } + }, + "shelf.relatedProducts": { + "props": { + "productList": { + "maxItems": 10, + "itemsPerPage": 2, + "minItemsPerPage": 2, + "arrows": true, + "showTitle": false, + "gap": "ph2" + } + }, + "blocks": ["product-summary.shelf#teste"] + }, + "product-summary.shelf#teste": { + "children": [ + "product-summary-image", + "product-summary-name", + "product-summary-price", + "product-summary-buy-button" + ] } } diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css index ae5381f..426b1af 100644 --- a/styles/css/vtex.breadcrumb.css +++ b/styles/css/vtex.breadcrumb.css @@ -8,5 +8,32 @@ /* Media Query M3 */ /* Grid breakpoints */ .container { - background-color: aqua; + max-width: 1920px; + margin: 0 auto; +} +.container .link, +.container .term { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-align: center; +} +.container .homeLink { + padding-top: 0; + padding-bottom: 0; +} +.container .homeLink::after { + content: "Home"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.container .homeLink .homeIcon { + display: none; } \ 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..88fbed2 --- /dev/null +++ b/styles/css/vtex.shelf.css @@ -0,0 +1,19 @@ +/* +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 */ +.vtex-shelf :global(.vtex-shelf-1-x-title) { + padding: 16px; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #575757; +} \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css index eac9af2..7035d7d 100644 --- a/styles/css/vtex.tab-layout.css +++ b/styles/css/vtex.tab-layout.css @@ -19,16 +19,14 @@ margin-bottom: 54px; } -.t-action { +.listItem--tab-list-button :global(.vtex-button) { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 24px; line-height: 38px; - /* identical to box height, or 158% */ display: flex; align-items: center; text-align: center; - /* gray-300 */ color: #bfbfbf; } \ 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 4895dfd..47cbe5d 100644 --- a/styles/sass/pages/product/vtex.breadcrumb.scss +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -1,3 +1,31 @@ .container { - background-color: aqua; + max-width: 1920px; + margin: 0 auto; + + .link, + .term { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + text-align: center; + } + .homeLink { + padding-top: 0; + padding-bottom: 0; + &::after { + content: "Home"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + .homeIcon { + display: none; + } + } } diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss index 47f66f8..a49c189 100644 --- a/styles/sass/pages/product/vtex.tab-layout.scss +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -10,21 +10,16 @@ margin-bottom: 54px; } -.listItem { - button { +.listItem--tab-list-button { + :global(.vtex-button) { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-size: 24px; line-height: 38px; - /* identical to box height, or 158% */ - display: flex; align-items: center; text-align: center; - - /* gray-300 */ - color: #bfbfbf; } }