diff --git a/.vscode/schemas/html.json b/.vscode/schemas/html.json
deleted file mode 100644
index e69de29..0000000
diff --git a/store/blocks/header/header.jsonc b/store/blocks/header/header.jsonc
index ab2c0c0..bc780c2 100644
--- a/store/blocks/header/header.jsonc
+++ b/store/blocks/header/header.jsonc
@@ -19,7 +19,7 @@
"fullWidth": true
}
},
-
+
"flex-layout.row#3-desktop": {
"props": {
"blockClass": "menu-link",
diff --git a/store/blocks/home/deals.json b/store/blocks/home/deals.json
index 2473f98..e49a955 100644
--- a/store/blocks/home/deals.json
+++ b/store/blocks/home/deals.json
@@ -1,7 +1,7 @@
{
"flex-layout.row#deals": {
"children": [
- "flex-layout.col#deals1",
+
"flex-layout.col#deals2",
"flex-layout.col#deals3",
"flex-layout.col#deals4"
diff --git a/store/blocks/home/home.jsonc b/store/blocks/home/home.jsonc
index a4776bc..ebacd49 100644
--- a/store/blocks/home/home.jsonc
+++ b/store/blocks/home/home.jsonc
@@ -2,9 +2,9 @@
"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",
+ "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",
"flex-layout.row#shelf",
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 6a916dc..bbdbf24 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -10,6 +10,7 @@
"product-questions-and-answers"
]
},
+
"html#breadcrumb": {
"props": {
"tag": "section",
@@ -18,20 +19,24 @@
},
"children": ["breadcrumb"]
},
+
"flex-layout.row#specifications-title": {
"children": ["rich-text#specifications"]
},
+
"rich-text#specifications": {
"props": {
"text": "##### Product Specifications"
}
},
+
"flex-layout.row#description": {
"props": {
"marginBottom": 7
},
"children": ["product-description"]
},
+
"condition-layout.product#availability": {
"props": {
"conditions": [
@@ -43,6 +48,7 @@
"Else": "flex-layout.row#product-availability"
}
},
+
"flex-layout.row#product-main": {
"props": {
"colGap": 7,
@@ -82,9 +88,11 @@
"rowGap": 0
}
},
+
"flex-layout.row#product-image": {
"children": ["product-images"]
},
+
"product-images": {
"props": {
"aspectRatio": {
@@ -94,11 +102,23 @@
"displayThumbnailsArrows": true
}
},
+
+
+
"flex-layout.col#right-col": {
"props": {
"preventVerticalStretch": true,
"rowGap": 0
},
+
+ "product-installments": {
+ "props": {
+ "markers": ["discount"],
+ "message": "ou: {sellingPriceValue}x de {installmentValue}",
+ "blockClass": "teste"
+ }
+ },
+
"children": [
"flex-layout.row#product-name",
"product-rating-summary",
diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/vtex-flex-layout.css
similarity index 59%
rename from styles/css/agenciamagma.store-theme.css
rename to styles/css/vtex-flex-layout.css
index 5e37ba5..7ce594b 100644
--- a/styles/css/agenciamagma.store-theme.css
+++ b/styles/css/vtex-flex-layout.css
@@ -7,10 +7,10 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
-.html {
- background-color: red;
+:global(.vtex-breadcrumb-1-x-link--m3-product-breadcrumb) {
+ background-color: black;
}
-.html--pdp-breadcrumb {
- background-color: green;
+.product-breadcrumb {
+ background-color: blue;
}
\ No newline at end of file
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index a7c5732..34c4328 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -1,98 +1,9 @@
-.flexRowContent--menu-link,
-.flexRowContent--main-header {
- padding: 0 0.5rem;
-}
-
-@media screen and (min-width: 40em) {
- .flexRowContent--menu-link,
- .flexRowContent--main-header {
- padding: 0 1rem;
- }
-}
-
-@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 {
- display: flex;
- max-height: 100%;
-}
-
-.flexColChild--quickviewDetails:first-child {
- overflow-y: auto;
- height: 66% !important;
- overflow-x: hidden;
-}
-
-.flexColChild--quickviewDetails:last-child {
- height: 34% !important;
-}
-
-.flexRow--addToCartRow {
- padding-bottom: 1rem;
-}
+/*
+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 */
\ No newline at end of file
diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
index 95f4cfe..c429118 100644
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@@ -1,79 +1,38 @@
-.listPrice {
- color: #727273;
- margin-bottom: .25rem;
- font-size: 1rem;
+/*
+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 */
+.sellingPrice--m3-custom-selling-price {
+ font-size: 0;
}
-
-.sellingPrice {
- color: #3f3f40;
- font-size: 1.25rem;
-}
-
-.sellingPriceValue {
- font-size: 2.25rem;
+.sellingPrice--m3-custom-selling-price .currencyContainer--m3-custom-selling-price {
+ font-family: Open Sans;
+ font-size: 25px;
font-weight: 700;
+ line-height: 38px;
+ color: #000000;
+ margin-left: 0;
}
-.installments {
- color: #727273;
- margin-bottom: 1rem;
+.installments--m3-custom-installments {
+ font-family: Open Sans;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 22px;
}
-
-.savings {
- font-weight: 500;
- color: #79B03A;
+.installments--m3-custom-installments .installmentsNumber--m3-custom-installments--36 {
+ font-size: 0;
}
-
-.sellingPriceValue--summary {
- font-size: 1.25rem;
+.installments--m3-custom-installments .installmentsNumber--m3-custom-installments--36::after {
+ content: "4 ";
+ font-size: 16px;
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;
}
+.installments--m3-custom-installments .installmentsNumber--m3-custom-installments--36::before {
+ font-size: 0;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index f8fa6cb..894f086 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -9,4 +9,15 @@
/* Grid breakpoints */
.newsletter {
background: red;
+}
+
+.productBrand--quickview {
+ font-family: Open Sans;
+ font-size: 20px;
+ font-weight: 300;
+ line-height: 34px;
+ text-align: right;
+ color: #575757;
+ display: flex;
+ justify-content: end;
}
\ No newline at end of file
diff --git a/styles/css/vtex.store-header.css b/styles/css/vtex.store-header.css
index c240fd1..cdcb8f0 100644
--- a/styles/css/vtex.store-header.css
+++ b/styles/css/vtex.store-header.css
@@ -1,10 +1,7 @@
/* add transitions */
-:global(.vtex-sticky-layout-0-x-container)
- :global(.vtex-store-components-3-x-logoLink),
-:global(.vtex-sticky-layout-0-x-container)
- :global(.vtex-minicart-2-x-openIconContainer),
-:global(.vtex-sticky-layout-0-x-container)
- :global(.vtex-store-components-3-x-searchBarContainer) {
+:global(.vtex-sticky-layout-0-x-container) :global(.vtex-store-components-3-x-logoLink),
+:global(.vtex-sticky-layout-0-x-container) :global(.vtex-minicart-2-x-openIconContainer),
+:global(.vtex-sticky-layout-0-x-container) :global(.vtex-store-components-3-x-searchBarContainer) {
transition: all 0.3s ease;
display: block;
}
@@ -23,10 +20,8 @@
}
/* add a box-shadow to desktop/mobile header when stuck */
-:global(.vtex-sticky-layout-0-x-wrapper--stuck)
- :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
-:global(.vtex-sticky-layout-0-x-wrapper--stuck)
- :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
+:global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
+:global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}
@@ -34,8 +29,7 @@
* remove the extra padding when stuck from the desktop header
* we add a transition only when "stuck" for the "unstick" step seem faster
*/
-:global(.vtex-sticky-layout-0-x-wrapper--stuck)
- :global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
+:global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
transition: padding 0.3s ease, background 0.3s ease;
padding-top: 0;
padding-bottom: 0;
@@ -43,18 +37,15 @@
/* if supported add some translucency to the desktop/mobile header background */
@supports (backdrop-filter: blur(5px)) {
- :global(.vtex-sticky-layout-0-x-wrapper--stuck)
- :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
- :global(.vtex-sticky-layout-0-x-wrapper--stuck)
- :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
+
+ :global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
+ :global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
backdrop-filter: blur(8px);
}
/* header background when stuck and not hovered */
- :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover)
- :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
- :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover)
- :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
+ :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover) :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
+ :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover) :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
background: rgba(240, 240, 240, 0.8);
}
}
@@ -65,20 +56,16 @@
}
/* resize the logo for neat effect */
-:global(.vtex-sticky-layout-0-x-wrapper--stuck)
- :global(.vtex-store-components-3-x-logoLink) {
+:global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-store-components-3-x-logoLink) {
transform: scale(0.85);
}
@media (prefers-reduced-motion: reduce) {
- :global(.vtex-sticky-layout-0-x-container)
- :global(.vtex-store-components-3-x-logoLink),
- :global(.vtex-sticky-layout-0-x-container)
- :global(.vtex-minicart-2-x-openIconContainer),
- :global(.vtex-sticky-layout-0-x-container)
- :global(.vtex-store-components-3-x-searchBarContainer),
- :global(.vtex-sticky-layout-0-x-wrapper--stuck)
- :global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
+
+ :global(.vtex-sticky-layout-0-x-container) :global(.vtex-store-components-3-x-logoLink),
+ :global(.vtex-sticky-layout-0-x-container) :global(.vtex-minicart-2-x-openIconContainer),
+ :global(.vtex-sticky-layout-0-x-container) :global(.vtex-store-components-3-x-searchBarContainer),
+ :global(.vtex-sticky-layout-0-x-wrapper--stuck) :global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
transition: none;
}
}
diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss
deleted file mode 100644
index ea7d5b9..0000000
--- a/styles/sass/pages/product/agenciamagma.store-theme.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.html {
- background-color: red;
-}
-
-.html--pdp-breadcrumb {
- background-color: green;
-}
-
diff --git a/styles/sass/pages/product/vtex.breadcrumb.scss b/styles/sass/pages/product/vtex.breadcrumb.scss
new file mode 100644
index 0000000..2996f2c
--- /dev/null
+++ b/styles/sass/pages/product/vtex.breadcrumb.scss
@@ -0,0 +1,49 @@
+.container {
+ display: flex;
+}
+
+.homeLink {
+ &::after {
+ content: "Home";
+ }
+}
+
+.homeLink,
+.link--1,
+.link--2 {
+ text-transform: capitalize;
+ font-family: Open Sans;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 19px;
+ color: #929292;
+
+ &::after {
+ text-transform: capitalize;
+ font-family: Open Sans;
+ font-size: 14px;
+ font-weight: 400;
+ line-height: 19px;
+ color: #929292;
+ color: #929292;
+ }
+}
+
+.homeIcon,
+.term {
+ display: none;
+}
+
+.link--1 {
+ font-size: 0;
+
+ &::after {
+ content: "Sapatos";
+ }
+}
+
+.caretIcon {
+ &:last-child {
+ 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..154df8c
--- /dev/null
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -0,0 +1,5 @@
+
+
+.flexRowContent--m3-product-details {
+ //background-color: blue;
+}
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..e2300b9
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-price.scss
@@ -0,0 +1,35 @@
+.sellingPrice--m3-custom-selling-price {
+ font-size: 0;
+
+ .currencyContainer--m3-custom-selling-price {
+ font-family: Open Sans;
+ font-size: 25px;
+ font-weight: 700;
+ line-height: 38px;
+ color: #000000;
+ margin-left: 0;
+ }
+}
+
+.installments--m3-custom-installments {
+ font-family: Open Sans;
+ font-size: 16px;
+ font-weight: 400;
+ line-height: 22px;
+
+ .installmentsNumber--m3-custom-installments--36 {
+ font-size: 0;
+
+ &::after {
+ content: "4 ";
+ font-size: 16px;
+ font-weight: 600;
+ }
+
+ &::before {
+ font-size: 0;
+ }
+ }
+}
+
+
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 36d0f22..c60ed72 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,3 +1,15 @@
-.newsletter{
- background: red;
-}
\ No newline at end of file
+.newsletter {
+ background: red;
+}
+
+.productBrand--quickview {
+ font-family: Open Sans;
+ font-size: 20px;
+ font-weight: 300;
+ line-height: 34px;
+ text-align: right;
+ color: #575757;
+ display: flex;
+ justify-content: end;
+}
+