diff --git a/react/components/Html/styles.css b/react/components/Html/styles.css
index ee698bf..0c91295 100644
--- a/react/components/Html/styles.css
+++ b/react/components/Html/styles.css
@@ -8,3 +8,5 @@
[class*="html--pdp-breadcrumb"] {
background-color: #fff;
}
+
+
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 16cc1f6..683a37d 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -121,22 +121,37 @@
"children": [
"flex-layout.row#product-name",
"flex-layout.row#product-modelo",
- "product-rating-summary",
+ // "product-rating-summary",
"flex-layout.row#selling-price",
- "flex-layout.row#list-price-savings",
- "product-installments",
- // "product-separator",
+ // "flex-layout.row#list-price-savings",
+ "product-installments#custom",
"sku-selector",
- "product-quantity",
- "product-assembly-options",
- "product-gifts",
- "flex-layout.row#buy-button",
- "availability-subscriber",
- "shipping-simulator",
- "share#default"
+ "html#quantidadeEButtonCustom",
+ // "product-separator",
+ // "product-quantity",
+ // "product-assembly-options",
+ // "product-gifts",
+ // "flex-layout.row#buy-button",
+ // "availability-subscriber"
+ "shipping-simulator"
+ // "share#default"
+
]
},
-
+ "html#quantidadeEButtonCustom":{
+ "props": {
+ "blockClass": "quantidadeEBuy"
+ },
+ "children": ["product-quantity","flex-layout.row#buy-button"]
+ },
+ "product-installments#custom":{
+ "props":{
+ "blockClass":"divParcelamente",
+ "markers": ["discount"],
+ "message": " {installmentsNumber}x de {installmentValue} sem juros ",
+ "installmentsCriteria":"max-quantity-without-interest"
+ }
+ },
"flex-layout.row#product-modelo": {
"props": {
"blockClass": "divNomeProductModelo"
@@ -154,6 +169,7 @@
"sku-selector": {
"props": {
+ "blockClass":"divSku",
"variationsSpacing": 3,
"showValueNameForImageVariation": true
}
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 3b8d201..e3abf1f 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -23,6 +23,10 @@
}
}
+.flexRowContent {
+ margin: 0;
+}
+
.flexRowContent--divProduct {
margin-top: 16px;
padding: 0px;
diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
index 95f4cfe..30969cd 100644
--- a/styles/css/vtex.product-price.css
+++ b/styles/css/vtex.product-price.css
@@ -1,79 +1,32 @@
-.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--hasListPrice {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 700;
+ font-size: 25px;
+ line-height: 38px;
+ color: #000000;
}
-.sellingPrice {
- color: #3f3f40;
- font-size: 1.25rem;
+.installments--divParcelamente {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: #929292;
}
-
-.sellingPriceValue {
- font-size: 2.25rem;
+.installments--divParcelamente .installmentsNumber--divParcelamente {
font-weight: 700;
}
-
-.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;
-}
+.installments--divParcelamente .currencyContainer--divParcelamente {
+ font-weight: 700;
+}
\ No newline at end of file
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index a0a805c..8640de2 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -10,6 +10,7 @@
.container--tituloSlick {
height: 40px;
margin-bottom: 32px;
+ margin-top: 16px;
}
@media (min-width: 1024px) {
.container--tituloSlick {
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 00a5d35..3533b01 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -11,6 +11,7 @@
background-color: #fff;
margin-left: 40px;
margin-right: 40px;
+ margin-bottom: 105px;
}
.sliderTrackContainer--carousel .sliderTrack--carousel {
gap: 16px;
@@ -32,6 +33,10 @@
height: 402.2px;
}
}
-.sliderTrackContainer--carousel .paginationDotsContainer--carousel {
- margin-bottom: 105px;
+.paginationDotsContainer--carousel .paginationDot--carousel {
+ background-color: black;
+}
+.paginationDotsContainer--carousel .paginationDot--carousel--isActive {
+ background-color: white;
+ border: 0.5px solid #000000;
}
\ No newline at end of file
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index 0265c43..07123bf 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -116,4 +116,109 @@
.listPrice {
padding-top: 0 !important;
padding-bottom: 0 !important;
+}
+
+.skuSelectorContainer--divSku {
+ display: flex;
+ flex-direction: column;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor {
+ order: 2;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorName {
+ font-size: 0;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ line-height: 19px;
+ color: #929292;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorName::after {
+ display: block;
+ content: "OUTROS CORES:";
+ font-size: 14px;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku {
+ width: 48px;
+ height: 48px;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku .frameAround--divSku {
+ border-radius: 50%;
+ width: 48px;
+ height: 48px;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: 0;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku .skuSelectorInternalBox--divSku {
+ border-radius: 50%;
+ width: 48px;
+ height: 48px;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .skuSelectorItemTextValue--divSku {
+ padding: 0 !important;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .absolute {
+ height: 48px;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorNameSeparator {
+ display: none;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--cor .skuSelectorSelectorImageValue {
+ display: none;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho {
+ order: 1;
+ height: 67px;
+ margin-bottom: 10px !important;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorName {
+ font-size: 0;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ line-height: 19px;
+ color: #929292;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorName::after {
+ display: block;
+ content: "OUTROS TAMANHOS:";
+ font-size: 14px;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku {
+ width: 40px;
+ height: 40px;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .frameAround--divSku {
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: 0;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .skuSelectorInternalBox--divSku {
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .skuSelectorItemTextValue--divSku {
+ padding: 0 !important;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .skuSelectorInternalBox--divSku .absolute {
+ height: 40px;
+}
+.skuSelectorContainer--divSku .skuSelectorSubcontainer--tamanho .skuSelectorItem--divSku .diagonalCross--divSku {
+ height: 40px;
+ width: 40px;
+ border-radius: 50%;
+ transform: rotate(-90deg);
+}
+.skuSelectorContainer--divSku .diagonalCross--divSku {
+ height: 48px;
+ width: 48px;
+ border-radius: 50%;
+ transform: rotate(-90deg);
}
\ No newline at end of file
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index 4687f8c..34abb3b 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -36,6 +36,7 @@
font-size: 18px;
line-height: 38px;
color: #bfbfbf;
+ text-transform: capitalize;
}
@media (max-width: 1024px) {
.container--estrutura .listContainer--Guias .listItem--renderGuia :global(.vtex-button__label) {
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index f729c33..69dff67 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -12,6 +12,9 @@
flex-direction: column;
}
}
+.flexRowContent{
+ margin: 0;
+}
.flexRowContent--divProduct {
margin-top: 16px;
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..fcc8ea1
--- /dev/null
+++ b/styles/sass/pages/product/vtex.product-price.scss
@@ -0,0 +1,23 @@
+.sellingPrice--hasListPrice {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 700;
+ font-size: 25px;
+ line-height: 38px;
+ color: #000000;
+}
+
+.installments--divParcelamente {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 16px;
+ line-height: 22px;
+ color: #929292;
+ .installmentsNumber--divParcelamente{
+ font-weight: 700;
+ }
+ .currencyContainer--divParcelamente{
+ font-weight: 700;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index e946be3..b7c96c2 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@@ -1,6 +1,7 @@
.container--tituloSlick {
height: 40px;
margin-bottom: 32px;
+ margin-top: 16px;
@media (min-width: 1024px) {
margin-bottom: 24px;
}
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index bf2744f..f20863a 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -2,6 +2,7 @@
background-color: $color-white;
margin-left: 40px;
margin-right: 40px;
+ margin-bottom: 105px;
.sliderTrack--carousel {
gap: 16px;
}
@@ -27,11 +28,13 @@
}
}
- .paginationDotsContainer--carousel {
- margin-bottom: 105px;
- .paginationDot--carousel {
- }
- .paginationDot--carousel--isActive {
- }
+}
+.paginationDotsContainer--carousel {
+ .paginationDot--carousel {
+ background-color: black;
+ }
+ .paginationDot--carousel--isActive {
+ background-color: white;
+ border: 0.5px solid #000000;
}
}
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index 8f024ff..dc041bd 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -94,7 +94,112 @@
}
}
-.listPrice{
+.listPrice {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
+
+.skuSelectorContainer--divSku {
+ display: flex;
+ flex-direction: column;
+ .skuSelectorSubcontainer--cor {
+ order: 2;
+ .skuSelectorName {
+ font-size: 0;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ line-height: 19px;
+ color: #929292;
+ &::after {
+ display: block;
+ content: "OUTROS CORES:";
+ font-size: 14px;
+ }
+ }
+ .skuSelectorItem--divSku {
+ width: 48px;
+ height: 48px;
+ .frameAround--divSku {
+ border-radius: 50%;
+ width: 48px;
+ height: 48px;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ }
+ .skuSelectorInternalBox--divSku {
+ border-radius: 50%;
+ width: 48px;
+ height: 48px;
+ .skuSelectorItemTextValue--divSku {
+ padding: 0 !important;
+ }
+ .absolute {
+ height: 48px;
+ }
+ }
+ }
+ .skuSelectorNameSeparator {
+ display: none;
+ }
+ .skuSelectorSelectorImageValue {
+ display: none;
+ }
+ }
+ .skuSelectorSubcontainer--tamanho {
+ order: 1;
+ height: 67px;
+ margin-bottom: 10px !important;
+ .skuSelectorName {
+ font-size: 0;
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ line-height: 19px;
+ color: #929292;
+ &::after {
+ display: block;
+ content: "OUTROS TAMANHOS:";
+ font-size: 14px;
+ }
+ }
+ .skuSelectorItem--divSku {
+ width: 40px;
+ height: 40px;
+ .frameAround--divSku {
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ left: 0;
+ }
+ .skuSelectorInternalBox--divSku {
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ .skuSelectorItemTextValue--divSku {
+ padding: 0 !important;
+ }
+ .absolute {
+ height: 40px;
+ }
+ }
+ .diagonalCross--divSku {
+ height: 40px;
+ width: 40px;
+ border-radius: 50%;
+ transform: rotate(-90deg);
+ }
+ }
+ }
+ .diagonalCross--divSku {
+ height: 48px;
+ width: 48px;
+ border-radius: 50%;
+ transform: rotate(-90deg);
+ }
+}
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index 96ff759..f71d816 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -22,6 +22,7 @@
font-size: 18px;
line-height: 38px;
color: #bfbfbf;
+ text-transform: capitalize;
}
:global(.vtex-button__label) {
@media (max-width: 1024px) {