diff --git a/manifest.json b/manifest.json
index 9ee3cc5..a2cde0d 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",
diff --git a/react/components/Html/index.tsx b/react/components/Html/index.tsx
index d60d7f5..0a215b6 100644
--- a/react/components/Html/index.tsx
+++ b/react/components/Html/index.tsx
@@ -1,5 +1,6 @@
import React, { ReactNode } from "react";
import { useCssHandles } from "vtex.css-handles";
+import "./styles.css"
const CSS_HANDLES = ["html"] as const;
diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
new file mode 100644
index 0000000..4603396
--- /dev/null
+++ b/react/components/Html/styles.css
@@ -0,0 +1,3 @@
+[data-testeid="breadcrumb"] {
+ background-color: yellow;
+}
diff --git a/store/blocks/minicart.jsonc b/store/blocks/minicart.jsonc
index 5c797c2..9963b7c 100644
--- a/store/blocks/minicart.jsonc
+++ b/store/blocks/minicart.jsonc
@@ -2,7 +2,8 @@
"add-to-cart-button": {
"props": {
"addToCartFeedback": "customEvent",
- "customPixelEventId": "add-to-cart-button"
+ "customPixelEventId": "add-to-cart-button",
+ "blockClass": "button-add"
}
},
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 6a916dc..dfbf931 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -91,7 +91,7 @@
"desktop": "auto",
"phone": "16:9"
},
- "displayThumbnailsArrows": true
+ "displayThumbnailsArrows": false
}
},
"flex-layout.col#right-col": {
@@ -101,12 +101,11 @@
},
"children": [
"flex-layout.row#product-name",
+ "product-identifier.product",
"product-rating-summary",
"flex-layout.row#list-price-savings",
"flex-layout.row#selling-price",
- "product-installments",
- "product-separator",
- "product-identifier.product",
+ "product-installments#m3-academy",
"sku-selector",
"product-quantity",
"product-assembly-options",
@@ -118,6 +117,15 @@
]
},
+ "product-installments#m3-academy": {
+ "props": {
+ "installmentsCriteria": "max-quantity-without-interest",
+ "markers": ["discount", "vezes"],
+ "blockClass": "m3-custom-installments",
+ "message": "ou {installmentsNumber}x de {installmentValue} sem juros"
+ }
+ },
+
"flex-layout.row#product-name": {
"props": {
"marginBottom": 3
diff --git a/styles/css/agenciamagma.store-theme.css b/styles/css/agenciamagma.store-theme.css
index 5e37ba5..5e1eb80 100644
--- a/styles/css/agenciamagma.store-theme.css
+++ b/styles/css/agenciamagma.store-theme.css
@@ -7,10 +7,9 @@
*/
/* Media Query M3 */
/* Grid breakpoints */
-.html {
+/*.html {
background-color: red;
-}
-
-.html--pdp-breadcrumb {
+}*/
+/*.html--pdp-breadcrumb {
background-color: green;
-}
\ No newline at end of file
+}*/
\ No newline at end of file
diff --git a/styles/css/vtex.add-to-cart-button.css b/styles/css/vtex.add-to-cart-button.css
new file mode 100644
index 0000000..d2a9697
--- /dev/null
+++ b/styles/css/vtex.add-to-cart-button.css
@@ -0,0 +1,44 @@
+.add-to-cart-button {
+ background-color: black;
+ color: white;
+}
+
+.buttonText {
+ visibility: hidden;
+}
+
+.button-add {
+ background-color: black;
+}
+
+
+.__label {
+ padding: 0;
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
+.buttonText::after {
+ width: 398px;
+ height: 25px;
+ content: "Adicionar à sacola";
+ visibility: visible;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 18px;
+ line-height: 25px;
+ color: #ffffff;
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+}
+.buttonDataContainer {
+ background: black;
+ position: relative;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+}
diff --git a/styles/css/vtex.breadcrumb.css b/styles/css/vtex.breadcrumb.css
new file mode 100644
index 0000000..3c6a137
--- /dev/null
+++ b/styles/css/vtex.breadcrumb.css
@@ -0,0 +1,35 @@
+.homeIcon {
+ visibility: hidden;
+}
+
+.arrow--1 {
+ visibility: hidden;
+ content: "";
+}
+
+.arrow--1::after {
+ visibility: visible;
+ content: "Home";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+}
+
+.link--2 {
+ visibility: hidden;
+ content: "";
+}
+
+.link--2::after {
+ visibility: visible;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+ content: "Sapatos";
+}
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index a7c5732..35cef48 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -43,7 +43,7 @@
}
.flexRow--deals {
- background-color: #0F3E99;
+ background-color: #0f3e99;
padding: 14px 0px;
}
@@ -83,6 +83,7 @@
max-height: 100%;
}
+
.flexColChild--quickviewDetails:first-child {
overflow-y: auto;
height: 66% !important;
diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css
index e3aa6d5..83188ac 100644
--- a/styles/css/vtex.product-identifier.css
+++ b/styles/css/vtex.product-identifier.css
@@ -1,3 +1,29 @@
.product-identifier--productReference {
margin-bottom: 1rem;
}
+
+.product-identifier__label,
+.product-identifier__separator {
+ display: none;
+}
+
+.product-identifier__value {
+ text-align: right;
+ position: absolute;
+ right: 0;
+ margin-right: 40px;
+}
+
+.product-identifier--productReference {
+ position: relative;
+ font-family: "Open Sans";
+ text-align: right;
+ display: flex;
+ align-self: flex-end;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-align: right;
+ color: rgba(146, 146, 146, 0.48);
+}
diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
index 95f4cfe..c29586b 100644
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@@ -1,6 +1,6 @@
.listPrice {
color: #727273;
- margin-bottom: .25rem;
+ margin-bottom: 0.25rem;
font-size: 1rem;
}
@@ -10,8 +10,12 @@
}
.sellingPriceValue {
- font-size: 2.25rem;
+ font-family: "Open Sans";
+ font-style: normal;
font-weight: 700;
+ font-size: 25px;
+ line-height: 38px;
+ color: #000000;
}
.installments {
@@ -20,18 +24,19 @@
}
.savings {
+ display: none;
font-weight: 500;
- color: #79B03A;
+ color: #79b03a;
}
.sellingPriceValue--summary {
font-size: 1.25rem;
font-weight: 600;
- color: #2E2E2E;
+ color: #2e2e2e;
}
.savings--summary {
- background: #8BC34A;
+ background: #8bc34a;
border-radius: 1000px;
align-items: center;
display: flex;
@@ -41,21 +46,24 @@
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
- color: #FFFFFF;
+ color: #ffffff;
+}
+.listPrice {
+ display: none;
}
.savings-discount--summary {
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
- color: #FFFFFF;
+ color: #ffffff;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.listPrice--summary {
margin-bottom: 0.25rem;
- font-size: .875rem;
+ font-size: 0.875rem;
}
.installments--summary {
@@ -74,6 +82,6 @@
font-size: 0.875rem;
font-weight: 600;
vertical-align: baseline;
- color: #FFFFFF;
+ color: #ffffff;
padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}
diff --git a/styles/css/vtex.product-quantity.css b/styles/css/vtex.product-quantity.css
new file mode 100644
index 0000000..ae06188
--- /dev/null
+++ b/styles/css/vtex.product-quantity.css
@@ -0,0 +1,4 @@
+.quantitySelectorTitle {
+ display: none;
+}
+
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index f8fa6cb..1162e3a 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -9,4 +9,17 @@
/* Grid breakpoints */
.newsletter {
background: red;
-}
\ No newline at end of file
+}
+
+.productNameContainer {
+ width: 664px;
+ height: 34px;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 300;
+ font-size: 20px;
+ line-height: 34px;
+ text-align: right;
+ color: #575757;
+ margin-right: 40px;
+}
diff --git a/styles/css/vtex.styleguide.css b/styles/css/vtex.styleguide.css
new file mode 100644
index 0000000..02a5904
--- /dev/null
+++ b/styles/css/vtex.styleguide.css
@@ -0,0 +1,4 @@
+.hideDecorators {
+ border-left: none;
+ border-right: none;
+}
diff --git a/styles/sass/pages/product/agenciamagma.store-theme.scss b/styles/sass/pages/product/agenciamagma.store-theme.scss
index ea7d5b9..f45d7fb 100644
--- a/styles/sass/pages/product/agenciamagma.store-theme.scss
+++ b/styles/sass/pages/product/agenciamagma.store-theme.scss
@@ -1,8 +1,7 @@
-.html {
+/*.html {
background-color: red;
-}
+}*/
-.html--pdp-breadcrumb {
+/*.html--pdp-breadcrumb {
background-color: green;
-}
-
+}*/
diff --git a/styles/sass/pages/product/vtex.add-to-cart-button.scss b/styles/sass/pages/product/vtex.add-to-cart-button.scss
new file mode 100644
index 0000000..e69de29