diff --git a/assets/logo-m3.png b/assets/logo-m3.png new file mode 100644 index 0000000..94b38ca Binary files /dev/null and b/assets/logo-m3.png differ diff --git a/assets/logo-vtex.png b/assets/logo-vtex.png new file mode 100644 index 0000000..ff26605 Binary files /dev/null and b/assets/logo-vtex.png differ diff --git a/manifest.json b/manifest.json index 9ee3cc5..fb9b018 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", @@ -66,7 +65,8 @@ "vtex.tab-layout": "0.x", "vtex.condition-layout": "2.x", "vtex.css-handles": "1.x", - "vtex.product-context": "0.x" + "vtex.product-context": "0.x", + "vtex.list-context": "0.x" }, "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema" } diff --git a/react/Example.tsx b/react/Example.tsx deleted file mode 100644 index 7d550e5..0000000 --- a/react/Example.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import Example from "./components/Example/Example"; - -export default Example; \ No newline at end of file diff --git a/react/assets/pix.svg b/react/assets/pix.svg new file mode 100644 index 0000000..9b21249 --- /dev/null +++ b/react/assets/pix.svg @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/react/components/Example/Example.tsx b/react/components/Example/Example.tsx deleted file mode 100644 index d195271..0000000 --- a/react/components/Example/Example.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react' - -const Example = () => { - return ( -
Example
- ) -} - -export default Example \ No newline at end of file diff --git a/react/components/Pix/index.tsx b/react/components/Pix/index.tsx new file mode 100644 index 0000000..55ec502 --- /dev/null +++ b/react/components/Pix/index.tsx @@ -0,0 +1,33 @@ +import React from 'react' +import { useProduct } from 'vtex.product-context' +import styles from './styles.module.css' + +const Pix = () => { + const product = useProduct() + const paymentMethods = product?.selectedItem?.sellers[0].commertialOffer.Installments + const [pricePix] = paymentMethods?.filter(paymentMethod => paymentMethod.Name === 'Pix à vista' && paymentMethod) ?? [] + const originalPrice = product?.selectedItem?.sellers[0].commertialOffer.Price ?? 0 + const priceToPix = pricePix.Value + const discount = originalPrice - priceToPix + const discountPercentage = ((discount / originalPrice) * 100).toFixed(2) + + const formatter = new Intl.NumberFormat('pt-BR', { + style: 'currency', + currency: 'BRL', + maximumFractionDigits: 1 + }); + + return ( +
+
+ Pix +
+
+ {formatter.format(priceToPix)} + {discount > 0 && {discountPercentage}% de desconto} +
+
+ ) +} + +export default Pix diff --git a/react/components/Pix/styles.module.css b/react/components/Pix/styles.module.css new file mode 100644 index 0000000..7880a90 --- /dev/null +++ b/react/components/Pix/styles.module.css @@ -0,0 +1,7 @@ +/* .pix-container { + display: flex; + margin-top: 8px; +} +.pix-image { + margin-right: 26px !important; +} */ diff --git a/react/pix.ts b/react/pix.ts new file mode 100644 index 0000000..1373321 --- /dev/null +++ b/react/pix.ts @@ -0,0 +1,3 @@ +import Pix from "./components/Pix"; + +export default Pix; diff --git a/store/blocks/footer/footer-1-desktop.jsonc b/store/blocks/footer/footer-1-desktop.jsonc new file mode 100644 index 0000000..d7b1d66 --- /dev/null +++ b/store/blocks/footer/footer-1-desktop.jsonc @@ -0,0 +1,86 @@ +{ + "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-wrapper", + "paddingTop": 6, + "paddingBottom": 3 + } + }, + "flex-layout.row#footer-social": { + "children": [ + "flex-layout.col#footer-social", + "flex-layout.col#footer-payment" + ], + "props": { + "blockClass": "menu-row-wrapper", + "paddingTop": 6, + "paddingBottom": 3 + } + }, + "flex-layout.col#footer-social": { + "children": ["rich-text#footer-social", "social-networks"], + "props": { + "blockClass": "menu-row-wrapper", + "paddingTop": 6, + "paddingBottom": 3 + } + }, + "rich-text#footer-social": { + "props": { + "text": "## Nos siga", + "blockClass": "menu-row-newsletter-title" + } + }, + "rich-text#footer-social-payments": { + "props": { + "text": "## Formas de pagamento", + "blockClass": "menu-row-newsletter-title" + } + }, + "flex-layout.col#footer-payment": { + "children": [ + "rich-text#footer-social-payments", + "accepted-payment-methods" + ], + "props": { + "blockClass": "menu-row-wrapper", + "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..401fcab --- /dev/null +++ b/store/blocks/footer/footer-2-desktop.jsonc @@ -0,0 +1,20 @@ +{ + "flex-layout.row#footer-2-desktop": { + "children": ["rich-text#footer-copyright", "rich-text#footer-powered"], + "props": { + "blockClass": "footer-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-copyright" + } + }, + "rich-text#footer-powered": { + "props": { + "text": "Powered by [![vtex](assets/logo-vtex.png)](/test) Developed by [![vtex](assets/logo-m3.png)](/test)", + "blockClass": "footer-powered-by" + } + } +} diff --git a/store/blocks/footer/footer-newsletter.jsonc b/store/blocks/footer/footer-newsletter.jsonc new file mode 100644 index 0000000..cf7a981 --- /dev/null +++ b/store/blocks/footer/footer-newsletter.jsonc @@ -0,0 +1,22 @@ +{ + "flex-layout.row#footer-newsletter": { + "children": ["rich-text#footer-newsletter", "newsletter"], + "props": { + "blockClass": "menu-row-newsletter", + "paddingTop": 6, + "paddingBottom": 3 + } + }, + "rich-text#footer-newsletter": { + "props": { + "text": "## Assine nossa newsletter \n Receba ofertas e novidades por e-mail", + "blockClass": "menu-row-newsletter-title" + } + }, + "newsletter": { + "props": { + "blockClass": "menu-row-label-newsletter", + "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..fbce575 --- /dev/null +++ b/store/blocks/footer/footer.jsonc @@ -0,0 +1,21 @@ +{ + "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#footer-newsletter", + "flex-layout.row#1-footer-mobile", + "flex-layout.row#footer-3-mobile", + "flex-layout.row#footer-social", + "flex-layout.row#footer-2-desktop" + ] + } +} diff --git a/store/blocks/footer/menu-link-1.jsonc b/store/blocks/footer/menu-link-1.jsonc new file mode 100644 index 0000000..d0f6cd3 --- /dev/null +++ b/store/blocks/footer/menu-link-1.jsonc @@ -0,0 +1,119 @@ +{ + "vtex.menu@2.x:menu#link-1": { + "props": { + "orientation": "vertical" + }, + "children": [ + "rich-text#footer-link-1-title", + "menu-item#loja", + "menu-item#trocasEdevolucoes", + "menu-item#centralatendimento", + "menu-item#faleconosco", + "menu-item#imprensa", + "menu-item#faleconosco", + "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#trocasEdevolucoes": { + "props": { + "id": "menu-item-trocasEdevolucoes", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Trocas e devoluções", + "text": "Trocas e devoluções" + } + } + }, + "menu-item#centralatendimento": { + "props": { + "id": "menu-item-centralatendimento", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Central de Atendimento", + "text": "Central de Atendimento" + } + } + }, + "menu-item#imprensa": { + "props": { + "id": "menu-item-imprensa", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Imprensa", + "text": "Imprensa" + } + } + }, + "menu-item#rastreamento": { + "props": { + "id": "menu-item-rastreamento", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Rastreamento", + "text": "Rastreamento" + } + } + }, + "menu-item#faleconosco": { + "props": { + "id": "menu-item-faleconosco", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "#", + "noFollow": false, + "tagTitle": "Fale conosco", + "text": "Fale conosco" + } + } + } +} diff --git a/store/blocks/footer/menu-link-2.jsonc b/store/blocks/footer/menu-link-2.jsonc new file mode 100644 index 0000000..02bae1a --- /dev/null +++ b/store/blocks/footer/menu-link-2.jsonc @@ -0,0 +1,123 @@ +{ + "vtex.menu@2.x:menu#link-2": { + "props": { + "orientation": "vertical" + }, + "children": [ + "rich-text#footer-link-2-aM3academy", + "menu-item#sejaumfranqueado", + "menu-item#quemsomos", + "menu-item#nossaslojas", + "rich-text#footer-link-2-responsabilidadesocial", + "menu-item#franquias", + "menu-item#proconMG", + "menu-item#PolíticadePrivacidade" + ] + }, + "rich-text#footer-link-2-aM3academy": { + "props": { + "text": "A M3 Academy", + "blockClass": "footer-link-2-title" + } + }, + + "menu-item#sejaumfranqueado": { + "props": { + "id": "menu-item-sejaumfranqueado", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/decoration/smartphones", + "noFollow": true, + "tagTitle": "Seja um franqueado", + "text": "Seja um franqueado" + } + } + }, + + "menu-item#quemsomos": { + "props": { + "id": "menu-item-quemsomos", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/decoration/videogames", + "noFollow": true, + "tagTitle": "Quem somos", + "text": "Quem somos" + } + } + }, + + "menu-item#nossaslojas": { + "props": { + "id": "menu-item-tvs", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/decoration/tvs", + "noFollow": true, + "tagTitle": "Nossas lojas", + "text": "Nossas lojas" + } + } + }, + + "rich-text#footer-link-2-responsabilidadesocial": { + "props": { + "text": "Responsabilidade Social", + "blockClass": "footer-link-2-title" + } + }, + "menu-item#franquias": { + "props": { + "id": "menu-item-franquias", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/decoration/franquias", + "noFollow": true, + "tagTitle": "Franquias", + "text": "Franquias" + } + } + }, + "menu-item#proconMG": { + "props": { + "id": "menu-item-proconMG", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/decoration/ProconMG", + "noFollow": true, + "tagTitle": "Procon MG", + "text": "Procon MG" + } + } + }, + "menu-item#PolíticadePrivacidade": { + "props": { + "id": "menu-item-PolíticadePrivacidade", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/decoration/PolíticadePrivacidade", + "noFollow": true, + "tagTitle": "Política de Privacidade", + "text": "Política de Privacidade" + } + } + } +} diff --git a/store/blocks/footer/menu-link-3.jsonc b/store/blocks/footer/menu-link-3.jsonc new file mode 100644 index 0000000..c815b0e --- /dev/null +++ b/store/blocks/footer/menu-link-3.jsonc @@ -0,0 +1,49 @@ +{ + "vtex.menu@2.x:menu#link-3": { + "props": { + "orientation": "vertical" + }, + "children": [ + "rich-text#link-3-title", + "menu-item#Sejaumfranqueado", + "menu-item#Multimarcas" + ] + }, + "rich-text#link-3-title": { + "props": { + "text": "Seja um franqueado", + "blockClass": "footer-link-3-title" + } + }, + "menu-item#Sejaumfranqueado": { + "props": { + "id": "menu-item-Sejaumfranqueado", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/Sejaumfranqueado/d", + "noFollow": true, + "tagTitle": "Seja um franqueado", + "text": "Seja um franqueado" + } + } + }, + + "menu-item#Multimarcas": { + "props": { + "id": "menu-item-Multimarcas", + "type": "custom", + "iconId": null, + "highlight": false, + "itemProps": { + "type": "internal", + "href": "/Multimarcas/backpacks", + "noFollow": true, + "tagTitle": "Multimarcas", + "text": "Multimarcas" + } + } + } +} 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..601ad57 --- /dev/null +++ b/store/blocks/footer/mobile/footer-mobile.jsonc @@ -0,0 +1,41 @@ +{ + "flex-layout.row#1-footer-mobile": { + "props": { + "paddingTop": 4, + "paddingBottom": 4 + }, + "children": ["vtex.menu@2.x:menu#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": [], + "props": { + "blockClass": "payment-methods", + "paddingTop": 4, + "paddingBottom": 4, + "rowGap": 4 + } + }, + "rich-text#footer-mobile": { + "props": { + "text": "All stock and product photos are from photos.icons8.com", + "blockClass": "footer" + } + }, + "flex-layout.row#footer-3-mobile": { + "children": ["vtex.menu@2.x:menu#link-3"], + "props": { + "blockClass": "payment-methods", + "paddingTop": 4, + "paddingBottom": 4, + "rowGap": 4 + } + } +} diff --git a/store/blocks/footer/mobile/menu-mobile.jsonc b/store/blocks/footer/mobile/menu-mobile.jsonc new file mode 100644 index 0000000..17b3bdb --- /dev/null +++ b/store/blocks/footer/mobile/menu-mobile.jsonc @@ -0,0 +1,32 @@ +{ + "vtex.menu@2.x:menu#footer-mobile": { + "props": { + "orientation": "vertical" + }, + "children": ["menu-item#sale-mobile", "menu-item#decoration-mobile"] + }, + "menu-item#sale-mobile": { + "props": { + "itemProps": { + "tagTitle": "comprar", + "text": "comprar" + } + }, + "blocks": ["vtex.menu@2.x:submenu.accordion#sale-mobile"] + }, + "vtex.menu@2.x:submenu.accordion#sale-mobile": { + "children": ["vtex.menu@2.x:menu#link-1"] + }, + "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#link-2"] + } +} diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc index a4776bc..df8c1f3 100644 --- a/store/blocks/home/home.jsonc +++ b/store/blocks/home/home.jsonc @@ -2,8 +2,6 @@ "store.home": { "blocks": [ "list-context.image-list#demo", - "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", "__fold__", "rich-text#shelf-title", diff --git a/store/blocks/pdp/descriptionTabs.jsonc b/store/blocks/pdp/descriptionTabs.jsonc new file mode 100644 index 0000000..914ed77 --- /dev/null +++ b/store/blocks/pdp/descriptionTabs.jsonc @@ -0,0 +1,70 @@ +{ + "tab-layout#product-description": { + "children": [ + "tab-list#product-description", + "tab-content#product-description" + ], + "props": { + "blockClass": "product-description", + "defaultActiveTabId": "product-description" + } + }, + "tab-list#product-description": { + "children": [ + "tab-list.item#description", + "tab-list.item#description2", + "tab-list.item#description2", + "tab-list.item#description2", + "tab-list.item#description2" + ] + }, + "tab-list.item#description": { + "props": { + "blockClass": "tab-list-button", + "tabId": "product-description", + "label": "Description", + "defaultActiveTab": true + } + }, + "tab-list.item#description2": { + "props": { + "blockClass": "tab-list-button", + "tabId": "product-description2", + "label": "Description" + } + }, + "tab-content#product-description": { + "children": [ + "tab-content.item#product-description", + "tab-content.item#product-description2" + ] + }, + "tab-content.item#product-description": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "product-description" + } + }, + "tab-content.item#product-description2": { + "children": ["flex-layout.row#description"], + "props": { + "tabId": "product-description2" + } + }, + "flex-layout.row#description": { + "props": { + "marginBottom": 7 + }, + "children": ["product-images#description", "product-description"] + }, + "product-images#description": { + "props": { + "displayMode": "first-image" + } + }, + "product-description": { + "props": { + "collapseContent": true + } + } +} diff --git a/store/blocks/pdp/product-main.jsonc b/store/blocks/pdp/product-main.jsonc new file mode 100644 index 0000000..887182d --- /dev/null +++ b/store/blocks/pdp/product-main.jsonc @@ -0,0 +1,102 @@ +{ + "condition-layout.product#availability": { + "props": { + "conditions": [ + { + "subject": "isProductAvailable" + } + ], + "Then": "flex-layout.row#product-main", + "Else": "flex-layout.row#product-availability" + } + }, + "flex-layout.row#product-main": { + "props": { + "blockClass": "product-main-container", + "colGap": 7, + "rowGap": 7, + "marginTop": 4, + "marginBottom": 7, + "paddingTop": 7, + "paddingBottom": 7 + }, + "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] + }, + "flex-layout.col#stack": { + "children": ["stack-layout"], + "props": { + "width": "60%", + "rowGap": 0 + } + }, + "stack-layout": { + "props": { + "blockClass": "product" + }, + "children": [ + "flex-layout.row#product-image", + "product-bookmark", + "product-specification-badges" + ] + }, + // "html#imagens": { + // "props": { + // "testId": "product-images" + // }, + // "children": ["product-images"] + // }, + "flex-layout.row#product-image": { + "children": ["product-images"] + }, + "product-images": { + "props": { + "thumbnailMaxHeight": 90, + "thumbnailsOrientation": "horizontal", + "aspectRatio": { + "desktop": "auto", + "phone": "16:9" + }, + "displayThumbnailsArrows": true + } + }, + "product-specification-badges": { + "props": { + "specificationGroupName": "Group", + "specificationName": "On Sale", + "visibleWhen": "True", + "displayValue": "SPECIFICATION_NAME" + } + }, + "flex-layout.col#right-col": { + "props": { + "preventVerticalStretch": true, + "rowGap": 0 + }, + "children": [ + "flex-layout.row#product-name", + "product-identifier.product", + "product-rating-summary", + "flex-layout.row#selling-price", + "product-installments", + "price-pix-custom", + "sku-selector", + "product-assembly-options", + "product-gifts", + "flex-layout.row#buy-button", + "availability-subscriber", + "shipping-simulator" + ] + }, + "flex-layout.row#product-name": { + "props": { + "marginBottom": 3 + }, + "children": ["vtex.store-components:product-name"] + }, + "sku-selector": { + "props": { + "variationsSpacing": 3, + "showValueNameForImageVariation": true + } + } +} diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc index 6a916dc..7e45953 100644 --- a/store/blocks/pdp/product.jsonc +++ b/store/blocks/pdp/product.jsonc @@ -1,15 +1,21 @@ { "store.product": { "children": [ - "html#breadcrumb", + "flex-layout.row#breadcrumb", "condition-layout.product#availability", - "flex-layout.row#description", - "flex-layout.row#specifications-title", - "product-specification-group#table", - "shelf.relatedProducts", + "flex-layout.row#product-description", + // "flex-layout.row#specifications-title", + // "product-specification-group#table", + "flex-layout.row#pdp", "product-questions-and-answers" ] }, + "flex-layout.row#breadcrumb": { + "props": { + "blockClass": "breadcrumb-container" + }, + "children": ["html#breadcrumb"] + }, "html#breadcrumb": { "props": { "tag": "section", @@ -26,122 +32,23 @@ "text": "##### Product Specifications" } }, - "flex-layout.row#description": { + "flex-layout.row#product-description": { "props": { - "marginBottom": 7 + "blockClass": "product-description-container" }, - "children": ["product-description"] + "children": ["tab-layout#product-description"] }, - "condition-layout.product#availability": { - "props": { - "conditions": [ - { - "subject": "isProductAvailable" - } - ], - "Then": "flex-layout.row#product-main", - "Else": "flex-layout.row#product-availability" - } - }, - "flex-layout.row#product-main": { - "props": { - "colGap": 7, - "rowGap": 7, - "marginTop": 4, - "marginBottom": 7, - "paddingTop": 7, - "paddingBottom": 7 - }, - "children": ["flex-layout.col#stack", "flex-layout.col#right-col"] - }, - - "stack-layout": { - "props": { - "blockClass": "product" - }, - "children": [ - "flex-layout.row#product-image", - "product-bookmark", - "product-specification-badges" - ] - }, - - "product-specification-badges": { - "props": { - "specificationGroupName": "Group", - "specificationName": "On Sale", - "visibleWhen": "True", - "displayValue": "SPECIFICATION_NAME" - } - }, - - "flex-layout.col#stack": { - "children": ["stack-layout"], - "props": { - "width": "60%", - "rowGap": 0 - } - }, - "flex-layout.row#product-image": { - "children": ["product-images"] - }, - "product-images": { - "props": { - "aspectRatio": { - "desktop": "auto", - "phone": "16:9" - }, - "displayThumbnailsArrows": true - } - }, - "flex-layout.col#right-col": { - "props": { - "preventVerticalStretch": true, - "rowGap": 0 - }, - "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", - "sku-selector", - "product-quantity", - "product-assembly-options", - "product-gifts", - "flex-layout.row#buy-button", - "availability-subscriber", - "shipping-simulator", - "share#default" - ] - }, - - "flex-layout.row#product-name": { - "props": { - "marginBottom": 3 - }, - "children": ["vtex.store-components:product-name"] - }, - - "sku-selector": { - "props": { - "variationsSpacing": 3, - "showValueNameForImageVariation": true - } - }, - "flex-layout.row#buy-button": { "props": { "marginTop": 4, - "marginBottom": 7 + "marginBottom": 7, + "blockClass": "button-card-add" }, - "children": ["add-to-cart-button"] + "children": ["product-quantity", "add-to-cart-button"] }, - "flex-layout.row#product-availability": { "props": { + "blockClass": "product-main-container", "colGap": 7, "marginTop": 4, "marginBottom": 7, @@ -161,8 +68,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": { @@ -171,7 +78,6 @@ }, "children": ["availability-subscriber"] }, - "share#default": { "props": { "social": { diff --git a/store/blocks/pdp/shelf-pdp.jsonc b/store/blocks/pdp/shelf-pdp.jsonc new file mode 100644 index 0000000..a30c451 --- /dev/null +++ b/store/blocks/pdp/shelf-pdp.jsonc @@ -0,0 +1,53 @@ +{ + "flex-layout.row#pdp": { + "props": { + "title": "Shelf pdp", + "blockClass": "shelf-pdp" + }, + "children": [ + "rich-text#nuestro-top", + "list-context.product-list#nuestro-top" + ] + }, + "rich-text#nuestro-top": { + "props": { + "text": "Você também pode gostar:", + "blockClass": "nuestro-shelf-title" + } + }, + "list-context.product-list#nuestro-top": { + "blocks": ["product-summary.shelf#pdp"], + "children": ["slider-layout#shelf-pdp"], + "props": { + "orderBy": "OrderByTopSaleDESC", + "collection": "320" + } + }, + + "product-summary-price": { + "props": { + "showInstallments": false + } + }, + + "product-summary.shelf#pdp": { + "children": [ + "product-summary-image", + "product-summary-name", + "product-summary-price" + // "product-summary-buy-button" + ] + }, + "slider-layout#shelf-pdp": { + "props": { + "itemsPerPage": { + "desktop": 4, + "tablet": 3, + "phone": 2 + }, + "infinite": false, + "fullWidth": false, + "blockClass": "shelf" + } + } +} diff --git a/store/blocks/product-price.jsonc b/store/blocks/product-price.jsonc index 3035106..779175f 100644 --- a/store/blocks/product-price.jsonc +++ b/store/blocks/product-price.jsonc @@ -6,9 +6,7 @@ "preventHorizontalStretch": true, "marginBottom": 4 }, - "children": [ - "product-selling-price" - ] + "children": ["product-selling-price"] }, "flex-layout.row#list-price-savings": { @@ -19,9 +17,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/product-summary-list.jsonc b/store/blocks/product-summary/product-summary-list.jsonc index cfc3226..971cd70 100644 --- a/store/blocks/product-summary/product-summary-list.jsonc +++ b/store/blocks/product-summary/product-summary-list.jsonc @@ -9,14 +9,10 @@ ] }, "responsive-layout.desktop#productSummaryList": { - "children": [ - "flex-layout.row#summaryListDesktop" - ] + "children": ["flex-layout.row#summaryListDesktop"] }, "responsive-layout.mobile#productSummaryList": { - "children": [ - "flex-layout.row#summaryListMobile" - ] + "children": ["flex-layout.row#summaryListMobile"] }, "product-price-savings#summaryPercentage": { "props": { @@ -36,7 +32,7 @@ ] }, "flex-layout.row#summaryListDesktop": { - "props":{ + "props": { "fullWidth": true, "colSizing": "auto", "blockClass": "summaryListDesktop" @@ -69,9 +65,7 @@ ] }, "flex-layout.row#productSpecifications": { - "children": [ - "product-specification-group#summary" - ] + "children": ["product-specification-group#summary"] }, "product-summary-name#summaryListDesktop": { "props": { @@ -100,18 +94,13 @@ "colSizing": "auto", "colGap": 5 }, - "children": [ - "add-to-cart-button", - "flex-layout.row#buyNowButton" - ] + "children": ["add-to-cart-button", "flex-layout.row#buyNowButton"] }, "flex-layout.row#buyNowButton": { "props": { "blockClass": "buyNowButton" }, - "children": [ - "add-to-cart-button#buyNow" - ] + "children": ["add-to-cart-button#buyNow"] }, "add-to-cart-button#buyNow": { @@ -123,10 +112,7 @@ } }, "flex-layout.col#priceSummaryListDesktop": { - "children": [ - "product-selling-price#summary", - "product-list-price#summary" - ] + "children": ["product-selling-price#summary", "product-list-price#summary"] }, "stack-layout#summaryListDesktop": { "children": [ @@ -144,7 +130,7 @@ } }, "flex-layout.row#summaryListMobile": { - "props":{ + "props": { "preserveLayoutOnMobile": true, "colSizing": "auto", "blockClass": "summaryListMobile", diff --git a/store/blocks/product-summary/product-summary.jsonc b/store/blocks/product-summary/product-summary.jsonc index afabee3..bb93cc8 100644 --- a/store/blocks/product-summary/product-summary.jsonc +++ b/store/blocks/product-summary/product-summary.jsonc @@ -81,9 +81,7 @@ }, "product-price-savings#summary": { "props": { - "markers": [ - "discount" - ], + "markers": ["discount"], "blockClass": "summary" } } diff --git a/store/interfaces.json b/store/interfaces.json index c4b2ac4..8c26a01 100644 --- a/store/interfaces.json +++ b/store/interfaces.json @@ -1,6 +1,6 @@ { - "example-component": { - "component": "Example" + "price-pix-custom": { + "component": "pix" }, "html": { "component": "html", diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css index 5e37ba5..c92ee65 100644 --- a/styles/css/agenciamagma.store-theme.css +++ b/styles/css/agenciamagma.store-theme.css @@ -8,9 +8,9 @@ /* Media Query M3 */ /* Grid breakpoints */ .html { - background-color: red; + background-color: blue; } .html--pdp-breadcrumb { - background-color: green; + background-color: red; } \ 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..b044aad --- /dev/null +++ b/styles/css/vtex.breadcrumb.css @@ -0,0 +1,35 @@ +/* +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 .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.flex-layout.css b/styles/css/vtex.flex-layout.css index a7c5732..1f1b01a 100644 --- a/styles/css/vtex.flex-layout.css +++ b/styles/css/vtex.flex-layout.css @@ -1,98 +1,79 @@ -.flexRowContent--menu-link, -.flexRowContent--main-header { - padding: 0 0.5rem; +/* +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 */ +.flexRow--product-main-container :global(.vtex-store-components-3-x-container), +.flexRow--product-description-container :global(.vtex-store-components-3-x-container), +.flexRow--breadcrumb-container :global(.vtex-store-components-3-x-container), +.flexRow--shelf-pdp :global(.vtex-store-components-3-x-container), +.flexRow--menu-row-wrapper :global(.vtex-store-components-3-x-container), +.flexRow--menu-row-newsletter :global(.vtex-store-components-3-x-container), +.flexRow--footer-credits :global(.vtex-store-components-3-x-container) { + max-width: 1920px; + padding: 0 40px; +} +.flexRowContent--button-card-add .stretchChildrenWidth:first-child { + max-width: 128px; + padding-right: 10px; +} +.flexRowContent--button-card-add .stretchChildrenWidth:last-child { + width: 100% !important; } -@media screen and (min-width: 40em) { - .flexRowContent--menu-link, - .flexRowContent--main-header { - padding: 0 1rem; - } +.flexRowContent--button-card-add :global(.vtex-button) { + background-color: #000000; + border: none; + border-radius: 0; + padding: 12px; } -@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 { +.flexRowContent--shelf-pdp { display: flex; - max-height: 100%; + flex-direction: column; +} +.flexRowContent--shelf-pdp .stretchChildrenWidth { + width: 100% !important; + margin-bottom: 32px; } -.flexColChild--quickviewDetails:first-child { - overflow-y: auto; - height: 66% !important; - overflow-x: hidden; +.flexRow--menu-row-newsletter { + margin-top: 64px; + background: #000000; + border-bottom: 1px solid #ffffff; +} +.flexRow--menu-row-newsletter .flexRowContent--menu-row-newsletter { + width: 100%; + max-width: 775px; + margin: 0 auto; } -.flexColChild--quickviewDetails:last-child { - height: 34% !important; +.flexRowContent--menu-row-newsletter { + display: flex; + flex-direction: column; + padding: 32px 0 16px; +} +.flexRowContent--menu-row-newsletter .stretchChildrenWidth { + width: 100% !important; } -.flexRow--addToCartRow { - padding-bottom: 1rem; +.flexRow--menu-row-wrapper { + background-color: #000000; + padding-top: 32px; + padding-bottom: 128px; } + +.flexRow--footer-credits { + background-color: #000000 !important; + border-top: 1px solid #ffffff; + padding: 31px 0 15px; +} + +.flexRowContent--menu-row-social-wrapper { + display: flex; + flex-direction: column; +} \ No newline at end of file diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css index e3aa6d5..57b5e5d 100644 --- a/styles/css/vtex.product-identifier.css +++ b/styles/css/vtex.product-identifier.css @@ -1,3 +1,27 @@ +/* +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--productReference { - margin-bottom: 1rem; + width: 100%; + display: flex; + justify-content: end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + color: rgba(146, 146, 146, 0.48); } +.product-identifier__label { + display: none; +} +.product-identifier__separator { + display: none; +} \ No newline at end of file diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css index 95f4cfe..e7f0ab0 100644 --- a/styles/css/vtex.product-price.css +++ b/styles/css/vtex.product-price.css @@ -1,79 +1,26 @@ -.listPrice { - color: #727273; - margin-bottom: .25rem; - font-size: 1rem; -} - -.sellingPrice { - color: #3f3f40; - font-size: 1.25rem; -} - +/* +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 */ .sellingPriceValue { - font-size: 2.25rem; + font-family: "Open Sans", sans-serif; + font-style: normal; font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; } .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-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} \ 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..57fad8b --- /dev/null +++ b/styles/css/vtex.product-quantity.css @@ -0,0 +1,51 @@ +/* +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 */ +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorContainer { + margin: 0; + height: 100%; +} +.quantitySelectorContainer .quantitySelectorStepper { + height: 100%; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) { + height: 100%; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) { + height: 100%; + border: 1px solid #cccccc; + padding: 0 16px; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__input) { + width: 100%; + height: 100%; + border: none; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button), +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button) { + width: max-content !important; + height: 100%; + border: none; + border-radius: 0; +} +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__minus-button__text), +.quantitySelectorContainer .quantitySelectorStepper :global(.vtex-numeric-stepper-wrapper) :global(.vtex-numeric-stepper-container) :global(.vtex-numeric-stepper__plus-button__text) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + display: flex; + align-items: center; + color: #000000; +} \ No newline at end of file diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css index 0a6e420..a3c4f3b 100644 --- a/styles/css/vtex.product-summary.css +++ b/styles/css/vtex.product-summary.css @@ -1,42 +1,18 @@ -.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox { - border-radius: 50%; -} - -.container :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 0; - transition: opacity 200ms ease-in-out; -} - -.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) { - opacity: 1; -} - -@media screen and (max-width: 40em) { - .container :global(.vtex-modal-layout-0-x-triggerContainer) { - display: none; - } -} - +/* +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 */ .nameContainer { - justify-content: start; - padding-top: 1rem; - padding-bottom: 1rem; + display: flex; + justify-content: center; + padding: 16px 0 8px 0; } -.brandName { - font-weight: 600; - font-size: 18px; - color: #2E2E2E; -} - -.container { - text-align: start; -} - -.imageContainer { - text-align: center; -} - -.image { - border-radius: 0.25rem; -} +.priceContainer { + padding: 0; +} \ No newline at end of file diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css index 34c4328..81ea5d5 100644 --- a/styles/css/vtex.rich-text.css +++ b/styles/css/vtex.rich-text.css @@ -6,4 +6,78 @@ 1800px + : Big desktop */ /* Media Query M3 */ -/* Grid breakpoints */ \ No newline at end of file +/* Grid breakpoints */ +.wrapper--nuestro-shelf-title { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + margin: auto; + color: #575757; +} + +.container--menu-row-newsletter-title { + display: flex; + justify-content: center; +} +.container--menu-row-newsletter-title .heading--menu-row-newsletter-title { + margin: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; +} +.container--menu-row-newsletter-title .paragraph--menu-row-newsletter-title { + margin: 16px 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; +} + +.paragraph--footer-link-1-title, +.paragraph--footer-link-2-title, +.paragraph--footer-link-3-title { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 38px; + text-align: center; + color: #ffffff; +} + +.paragraph--footer-copyright { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 20px; + color: rgba(255, 255, 255, 0.45); + margin-right: 8px; +} + +.paragraph--footer-powered-by { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 12px; + color: #ffffff; + margin-right: 8px; +} + +.image--footer-powered-by { + width: 100%; + max-width: 40px; +} +.image--footer-powered-by:not(:last-child) { + margin-right: 16px; +} \ 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..d86b1e2 --- /dev/null +++ b/styles/css/vtex.shelf.css @@ -0,0 +1,23 @@ +/* +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; +} + +.shelfContentContainer { + padding: 0 40px; +} \ No newline at end of file diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css index f8fa6cb..76652cf 100644 --- a/styles/css/vtex.store-components.css +++ b/styles/css/vtex.store-components.css @@ -7,6 +7,249 @@ */ /* Media Query M3 */ /* Grid breakpoints */ -.newsletter { - background: red; +.productImageTag--main { + max-height: unset !important; +} + +.productImagesThumb { + height: auto !important; + width: 90px !important; + margin-right: 16px !important; +} + +.productNameContainer--quickview { + text-align: end; +} + +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} + +.skuSelectorName { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.skuSelectorItem { + border-radius: 50%; + width: 50px; + height: 50px; +} +.skuSelectorItem:not(:last-child) { + margin-right: 16px; +} +.skuSelectorItem .valueWrapper { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; +} +.skuSelectorItem:hover .frameAround { + border: 2px solid #000000; +} +.skuSelectorItem:hover .valueWrapper { + color: #000000; +} +.skuSelectorItem .frameAround { + border-radius: 50%; + border: 1px solid #989898; +} + +.skuSelectorItem--selected .frameAround { + border: 2px solid #000000; +} +.skuSelectorItem--selected .valueWrapper { + color: #000000; +} + +.skuSelectorInternalBox { + border-radius: 50%; +} +.skuSelectorInternalBox:hover { + border: none; +} +.skuSelectorInternalBox .diagonalCross { + background-image: linear-gradient(to top right, transparent 50%, rgba(0, 0, 0, 0.5) 53%, currentColor 54%, currentColor 52%, transparent 0%); + transform: rotate(95deg); +} + +.shippingContainer { + position: relative; +} +.shippingContainer :global(.vtex-button) { + position: absolute; + top: 24px; + left: 230px; + padding: 15px; + width: max-content; + background-color: #000000; + border: none; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label) { + font-size: 0; + padding: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + line-height: 19px; + color: #929292; +} +.shippingContainer :global(.vtex-button) :global(.vtex-button__label)::after { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #ffffff; +} +.shippingContainer :global(.vtex-address-form__postalCode) { + display: flex; + align-items: center; + padding-bottom: 16px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) { + max-width: 280px; + margin-right: 32px; + padding: 0; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) { + height: 49px; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-input__suffix) { + display: none; +} +.shippingContainer :global(.vtex-address-form__postalCode) :global(.vtex-input) :global(.vtex-input-prefix__group) :global(.vtex-address-form-4-x-input) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; +} + +.shippingTable { + max-width: 320px; + margin: 0; + border: none; +} +.shippingTable .shippingTableHead { + display: table-header-group !important; + width: 100%; +} +.shippingTable .shippingTableHead .shippingTableRow { + text-align: left; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell { + padding: 0 16px 0 0; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel { + display: flex; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel .shippingTableRadioBtn { + display: none; +} +.shippingTable .shippingTableBody .shippingTableRow .shippingTableCell .shippingTableLabel :global(.vtex-address-form-4-x-input) { + display: none !important; +} + +.subscriberContainer .title { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; +} +.subscriberContainer .subscribeLabel { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} +.subscriberContainer .content { + flex-wrap: wrap; +} +.subscriberContainer .content .input { + width: 50%; + flex: 1; +} +.subscriberContainer .content .inputEmail { + margin-right: 0; +} +.subscriberContainer .content .submit { + width: 100%; +} +.subscriberContainer .content .submit :global(.vtex-button) { + width: 100%; +} + +.productDescriptionContainer { + margin-left: 32px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; +} +.productDescriptionContainer .productDescriptionTitle { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + color: #575757; +} +.productDescriptionContainer .productDescriptionText .container { + padding: 0; +} + +.container--menu-row-label-newsletter { + padding: 0; +} +.container--menu-row-label-newsletter .form--menu-row-label-newsletter { + display: contents !important; +} +.container--menu-row-label-newsletter .inputGroup--menu-row-label-newsletter { + border-bottom: 1px solid #929292 !important; + padding: 0; +} +.container--menu-row-label-newsletter .buttonContainer--menu-row-label-newsletter :global(.vtex-button) { + border: none !important; + border-bottom: 3px solid #bfbfbf !important; + background: #000000 !important; + border-radius: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #ffffff; +} +.container--menu-row-label-newsletter .inputGroup--menu-row-label-newsletter :global(.vtex-input-prefix__group) { + border: 0; +} +.container--menu-row-label-newsletter .inputGroup--menu-row-label-newsletter :global(.vtex-styleguide-9-x-input) { + background: #000000; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + text-align: left; } \ No newline at end of file diff --git a/styles/css/vtex.store-footer.css b/styles/css/vtex.store-footer.css index 1fd6bb3..99ba4ea 100644 --- a/styles/css/vtex.store-footer.css +++ b/styles/css/vtex.store-footer.css @@ -1,11 +1,12 @@ -.row--menu-row { - padding-right: 24px; -} - -.row--menu-row .rowContainer { - align-items: flex-start; -} - -.row--payment-methods { - padding-top: 16px; -} +/* +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-store-footer-2-x-footerLayout :global(.vtex-flex-layout-0-x-flexRow--credits) { + background-color: #000000 !important; +} \ No newline at end of file diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css new file mode 100644 index 0000000..f8efc76 --- /dev/null +++ b/styles/css/vtex.tab-layout.css @@ -0,0 +1,53 @@ +/* +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 */ +.listContainer { + display: flex; + justify-content: space-between; + border-bottom: 1px solid #bfbfbf; + text-decoration: none; + margin-bottom: 54px; +} + +.listItem--tab-list-button { + padding: 0; + margin: 0 0 -1px 0; + display: flex; +} +.listItem--tab-list-button :global(.vtex-button) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #bfbfbf; + background-color: white; + border: none; + text-transform: capitalize; + border-radius: 0; + border-bottom: 1px solid #bfbfbf; +} +@media (max-width: 1440px) { + .listItem--tab-list-button :global(.vtex-button) { + font-size: 18px; + } +} + +.listItemActive { + margin: 0 0 -2px 0; +} +.listItemActive :global(.vtex-button) { + color: #000000; + border-bottom: 3px solid #000000; +} +@media (max-width: 1440px) { + .listItemActive :global(.vtex-button) { + font-size: 18px; + } +} \ 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..9d2e34b 100644 --- a/styles/sass/pages/product/agenciamagma.store-theme.scss +++ b/styles/sass/pages/product/agenciamagma.store-theme.scss @@ -1,8 +1,7 @@ .html { - background-color: red; + background-color: blue; } .html--pdp-breadcrumb { - background-color: green; + background-color: red; } - diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss new file mode 100644 index 0000000..104ec37 --- /dev/null +++ b/styles/sass/pages/product/vtex.breadcrumb.scss @@ -0,0 +1,28 @@ +.container { + .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.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss new file mode 100644 index 0000000..0fe44f2 --- /dev/null +++ b/styles/sass/pages/product/vtex.flex-layout.scss @@ -0,0 +1,85 @@ +.flexRow--product-main-container, +.flexRow--product-description-container, +.flexRow--breadcrumb-container, +.flexRow--shelf-pdp, +.flexRow--menu-row-wrapper, +.flexRow--menu-row-newsletter, +.flexRow--footer-credits { + :global(.vtex-store-components-3-x-container) { + max-width: 1920px; + padding: 0 40px; + + @media (max-width: 1440px) { + } + } +} + +.flexRowContent--button-card-add { + .stretchChildrenWidth { + &:first-child { + max-width: 128px; + padding-right: 10px; + } + &:last-child { + width: 100% !important; + } + } +} +.flexRowContent--button-card-add { + :global(.vtex-button) { + background-color: #000000; + border: none; + border-radius: 0; + padding: 12px; + } +} + +.flexRowContent--shelf-pdp { + display: flex; + flex-direction: column; + .stretchChildrenWidth { + width: 100% !important; + margin-bottom: 32px; + } +} + +//AREA DA NEWSLATTER STYLE +.flexRow--menu-row-newsletter { + margin-top: 64px; + background: #000000; + border-bottom: 1px solid #ffffff; + + .flexRowContent--menu-row-newsletter { + width: 100%; + max-width: 775px; + margin: 0 auto; + } +} +.flexRowContent--menu-row-newsletter { + display: flex; + flex-direction: column; + padding: 32px 0 16px; + + .stretchChildrenWidth { + width: 100% !important; + } +} + +//STYLE DO FOOTER PARTE DO MEIO COM PAYMENTS +.flexRow--menu-row-wrapper { + background-color: #000000; + padding-top: 32px; + padding-bottom: 128px; +} + +//STYLE DO FOOTER CREDITS +.flexRow--footer-credits { + background-color: #000000 !important; + border-top: 1px solid #ffffff; + padding: 31px 0 15px; +} + +.flexRowContent--menu-row-social-wrapper { + display: flex; + flex-direction: column; +} 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..f2f3d20 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-identifier.scss @@ -0,0 +1,21 @@ +.product-identifier { + &--productReference { + width: 100%; + display: flex; + justify-content: end; + font-family: "Open Sans"; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + text-align: right; + color: rgba(146, 146, 146, 0.48); + } + &__label { + display: none; + } + + &__separator { + display: none; + } +} 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..ded7ef7 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-price.scss @@ -0,0 +1,17 @@ +//AREA DO PREÇO DO PRODUTO +.sellingPriceValue { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 25px; + line-height: 38px; + color: #000000; +} +.installments { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 16px; + line-height: 22px; + color: #929292; +} 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..a2c64d9 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-quantity.scss @@ -0,0 +1,48 @@ +.quantitySelectorTitle { + display: none; +} + +.quantitySelectorContainer { + margin: 0; + height: 100%; + + .quantitySelectorStepper { + height: 100%; + + :global(.vtex-numeric-stepper-wrapper) { + height: 100%; + + :global(.vtex-numeric-stepper-container) { + height: 100%; + border: 1px solid #cccccc; + padding: 0 16px; + + :global(.vtex-numeric-stepper__input) { + width: 100%; + height: 100%; + border: none; + } + + :global(.vtex-numeric-stepper__plus-button), + :global(.vtex-numeric-stepper__minus-button) { + width: max-content !important; + height: 100%; + border: none; + border-radius: 0; + } + + :global(.vtex-numeric-stepper__minus-button__text), + :global(.vtex-numeric-stepper__plus-button__text) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 16px; + line-height: 22px; + display: flex; + align-items: center; + color: #000000; + } + } + } + } +} 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..9352c05 --- /dev/null +++ b/styles/sass/pages/product/vtex.product-summary.scss @@ -0,0 +1,10 @@ +// AREA DA DESCRIÇAO DOS PRODUTOS DA SHELF + +.nameContainer { + display: flex; + justify-content: center; + padding: 16px 0 8px 0; +} +.priceContainer { + padding: 0; +} diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss index e69de29..035a5ee 100644 --- a/styles/sass/pages/product/vtex.rich-text.scss +++ b/styles/sass/pages/product/vtex.rich-text.scss @@ -0,0 +1,79 @@ +//AREA DO TITLE DA SHELF +.wrapper--nuestro-shelf-title { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + margin: auto; + color: #575757; +} + +//AREA DA RICH TEXT DA NEWSLETEER +.container--menu-row-newsletter-title { + display: flex; + justify-content: center; + .heading--menu-row-newsletter-title { + margin: 0; + + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + text-align: center; + color: #ffffff; + } + + .paragraph--menu-row-newsletter-title { + margin: 16px 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + text-align: center; + color: #929292; + } +} +//AREA DO FOOTER DO MEIO COM PAYMENTS E CARTOES +.paragraph--footer-link-1-title, +.paragraph--footer-link-2-title, +.paragraph--footer-link-3-title { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 38px; + text-align: center; + color: #ffffff; +} + +//AREA DO FOOTER CREDITS PARAGRAFO +.paragraph--footer-copyright { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 12px; + line-height: 20px; + color: rgba(255, 255, 255, 0.45); + margin-right: 8px; +} + +.paragraph--footer-powered-by { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 12px; + color: #ffffff; + margin-right: 8px; +} + +.image--footer-powered-by { + width: 100%; + max-width: 40px; + &:not(:last-child) { + margin-right: 16px; + } +} diff --git a/styles/sass/pages/product/vtex.shelf.scss b/styles/sass/pages/product/vtex.shelf.scss new file mode 100644 index 0000000..a0c3501 --- /dev/null +++ b/styles/sass/pages/product/vtex.shelf.scss @@ -0,0 +1,16 @@ +.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; + } +} +.shelfContentContainer { + padding: 0 40px; +} diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss index 36d0f22..ed1463e 100644 --- a/styles/sass/pages/product/vtex.store-components.scss +++ b/styles/sass/pages/product/vtex.store-components.scss @@ -1,3 +1,295 @@ -.newsletter{ - background: red; -} \ No newline at end of file +.productImageTag--main { + max-height: unset !important; +} +.productImagesThumb { + height: auto !important; + width: 90px !important; + margin-right: 16px !important; +} + +.productNameContainer--quickview { + text-align: end; +} +.skuSelectorContainer { + display: flex; + flex-direction: column-reverse; +} +.skuSelectorName { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; +} + +.skuSelectorItem { + border-radius: 50%; + width: 50px; + height: 50px; + + &:not(:last-child) { + margin-right: 16px; + } + + .valueWrapper { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + } + + &:hover { + .frameAround { + border: 2px solid #000000; + } + + .valueWrapper { + color: #000000; + } + } + + .frameAround { + border-radius: 50%; + border: 1px solid #989898; + } +} + +.skuSelectorItem--selected { + .frameAround { + border: 2px solid #000000; + } + + .valueWrapper { + color: #000000; + } +} + +.skuSelectorInternalBox { + border-radius: 50%; + + &:hover { + border: none; + } + + .diagonalCross { + background-image: linear-gradient( + to top right, + transparent 50%, + rgba(0, 0, 0, 0.5) 53%, + currentColor 54%, + currentColor 52%, + transparent 0% + ); + transform: rotate(95deg); + } +} +//AREA DO CEP COM OS INPUT E BUTTON +.shippingContainer { + position: relative; + + :global(.vtex-button) { + position: absolute; + top: 24px; + left: 230px; + padding: 15px; + width: max-content; + background-color: #000000; + border: none; + + :global(.vtex-button__label) { + font-size: 0; + padding: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + + line-height: 19px; + color: #929292; + + &::after { + content: "OK"; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 600; + font-size: 14px; + line-height: 19px; + display: flex; + align-items: center; + color: #ffffff; + } + } + } + + :global(.vtex-address-form__postalCode) { + display: flex; + align-items: center; + padding-bottom: 16px; + + :global(.vtex-input) { + max-width: 280px; + margin-right: 32px; + padding: 0; + + :global(.vtex-input-prefix__group) { + height: 49px; + + :global(.vtex-input__suffix) { + display: none; + } + + :global(.vtex-address-form-4-x-input) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 12px; + line-height: 16px; + display: flex; + align-items: center; + color: #afafaf; + } + } + } + } +} + +.shippingTable { + max-width: 320px; + margin: 0; + border: none; + + .shippingTableHead { + display: table-header-group !important; + width: 100%; + + .shippingTableRow { + text-align: left; + } + } + + .shippingTableBody { + .shippingTableRow { + .shippingTableCell { + padding: 0 16px 0 0; + + .shippingTableLabel { + display: flex; + .shippingTableRadioBtn { + display: none; + } + :global(.vtex-address-form-4-x-input) { + display: none !important; + } + } + } + } + } +} +//AREA DO COMPONENTES QUANDO O PRODUTO ESTA INDISPONIVEL +.subscriberContainer { + .title { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + color: #868686; + } + .subscribeLabel { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 14px; + line-height: 19px; + color: #929292; + } + .content { + flex-wrap: wrap; + .input { + width: 50%; + flex: 1; + } + .inputEmail { + margin-right: 0; + } + .submit { + width: 100%; + :global(.vtex-button) { + width: 100%; + } + } + } +} + +//AREA DO TAB LAYOUT CONTAINER +.productDescriptionContainer { + margin-left: 32px; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + + color: #929292; + + .productDescriptionTitle { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 32px; + line-height: 32px; + color: #575757; + } + + .productDescriptionText { + .container { + padding: 0; + } + } +} +// AREA DA NEWSLATTER INPUT - BUTTON +.container--menu-row-label-newsletter { + padding: 0; + + .form--menu-row-label-newsletter { + display: contents !important; + } + .inputGroup--menu-row-label-newsletter { + border-bottom: 1px solid #929292 !important; + padding: 0; + } + + .buttonContainer--menu-row-label-newsletter { + :global(.vtex-button) { + border: none !important; + border-bottom: 3px solid #bfbfbf !important; + background: #000000 !important; + border-radius: 0; + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 700; + font-size: 14px; + line-height: 19px; + text-align: center; + color: #ffffff; + } + } + .inputGroup--menu-row-label-newsletter { + :global(.vtex-input-prefix__group) { + border: 0; + } + + :global(.vtex-styleguide-9-x-input) { + background: #000000; + + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 18px; + line-height: 25px; + color: #929292; + text-align: left; + } + } +} diff --git a/styles/sass/pages/product/vtex.store-footer.scss b/styles/sass/pages/product/vtex.store-footer.scss new file mode 100644 index 0000000..6eb8577 --- /dev/null +++ b/styles/sass/pages/product/vtex.store-footer.scss @@ -0,0 +1,6 @@ +//AREA DO FOOTER CREDITS PARA USAR O GLOBAL +.vtex-store-footer-2-x-footerLayout { + :global(.vtex-flex-layout-0-x-flexRow--credits) { + background-color: #000000 !important; + } +} 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..ba15378 --- /dev/null +++ b/styles/sass/pages/product/vtex.tab-layout.scss @@ -0,0 +1,44 @@ +//AREA DO PRODUTO E DESCRIÇAO E CONTAINER +.listContainer { + display: flex; + justify-content: space-between; + + border-bottom: 1px solid #bfbfbf; + text-decoration: none; + margin-bottom: 54px; +} + +//AREA DOS BUTOES DA DESCRIÇOES DO PRODUTO +.listItem--tab-list-button { + padding: 0; + margin: 0 0 -1px 0; + display: flex; + :global(.vtex-button) { + font-family: "Open Sans", sans-serif; + font-style: normal; + font-weight: 400; + font-size: 24px; + line-height: 38px; + color: #bfbfbf; + background-color: white; + border: none; + text-transform: capitalize; + border-radius: 0; + border-bottom: 1px solid #bfbfbf; + + @media (max-width: 1440px) { + font-size: 18px; + } + } +} +.listItemActive { + margin: 0 0 -2px 0; + :global(.vtex-button) { + color: #000000; + border-bottom: 3px solid #000000; + + @media (max-width: 1440px) { + font-size: 18px; + } + } +} diff --git a/styles/sass/utils/_vars.scss b/styles/sass/utils/_vars.scss index daf3adb..10b3c3e 100644 --- a/styles/sass/utils/_vars.scss +++ b/styles/sass/utils/_vars.scss @@ -14,18 +14,18 @@ $color-green: #4caf50; /* Grid breakpoints */ $grid-breakpoints: ( - xs: 0, - cstm: 400, - sm: 576px, - md: 768px, - lg: 992px, - xl: 1200px + xs: 0, + cstm: 400, + sm: 576px, + md: 768px, + lg: 992px, + xl: 1200px, ) !default; $z-index: ( - level1: 5, - level2: 10, - level3: 15, - level4: 20, - level5: 25 + level1: 5, + level2: 10, + level3: 15, + level4: 20, + level5: 25, ) !default;