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 (
+
+
+
+
+
+ {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;