diff --git a/react/components/Html/style.css b/react/components/Html/style.css
index ac5093d..1a2d5bd 100644
--- a/react/components/Html/style.css
+++ b/react/components/Html/style.css
@@ -15,3 +15,11 @@
margin: 0;
padding: 0;
}
+
+[class*="agenciamagma-store-theme-5-x-html--slider-product" ]{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+
+}
diff --git a/store/blocks/pdp/product__carousel.jsonc b/store/blocks/pdp/product__carousel.jsonc
index 4b0fae9..fe32833 100644
--- a/store/blocks/pdp/product__carousel.jsonc
+++ b/store/blocks/pdp/product__carousel.jsonc
@@ -27,7 +27,8 @@
"product-summary-image#slider-images",
"product-summary-name",
// "product-summary-space",
- "product-summary-price"
+ "product-list-price",
+ "product-selling-price"
]
},
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
index d3abedc..b4b2f47 100644
--- a/styles/css/vtex.product-summary.css
+++ b/styles/css/vtex.product-summary.css
@@ -40,11 +40,14 @@
line-height: 19px;
}
}
-.containerNormal .clearLink .element .priceContainer {
+.containerNormal .clearLink .element .listPrice {
padding: 0;
margin: 0;
}
-.containerNormal .clearLink .element .priceContainer .listPriceContainer {
+.containerNormal .clearLink .element .listPrice .installmentContainer {
+ display: none;
+}
+.containerNormal :global(.vtex-product-price-1-x-listPriceValue) {
font-family: "Open Sans", sans-serif;
font-style: normal;
font-weight: 400;
@@ -57,24 +60,21 @@
margin-bottom: 8px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
- .containerNormal .clearLink .element .priceContainer .listPriceContainer {
+ .containerNormal :global(.vtex-product-price-1-x-listPriceValue) {
font-size: 12px;
line-height: 15px;
}
}
-.containerNormal .clearLink .element .priceContainer .listPriceContainer .listPriceLabel {
- display: none;
-}
-.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer {
+.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer) {
font-size: 14px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
- .containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer {
+ .containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer) {
font-size: 12px;
line-height: 16px;
}
}
-.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::before {
+.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::before {
content: "de ";
font-family: "Open Sans", sans-serif;
font-style: normal;
@@ -84,12 +84,12 @@
text-align: center;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
- .containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::before {
+ .containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::before {
font-size: 12px;
line-height: 15px;
}
}
-.containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::after {
+.containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::after {
content: " por";
font-family: "Open Sans", sans-serif;
font-style: normal;
@@ -99,12 +99,12 @@
text-align: center;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
- .containerNormal .clearLink .element .priceContainer .listPriceContainer .currencyContainer::after {
+ .containerNormal :global(.vtex-product-price-1-x-listPriceValue) :global(.vtex-product-price-1-x-currencyContainer)::after {
font-size: 12px;
line-height: 15px;
}
}
-.containerNormal .clearLink .element .priceContainer .sellingPriceContainer {
+.containerNormal :global(.vtex-product-price-1-x-sellingPrice) {
padding: 0;
margin: 0;
height: 33px;
@@ -117,28 +117,22 @@
color: #000;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
- .containerNormal .clearLink .element .priceContainer .sellingPriceContainer {
+ .containerNormal :global(.vtex-product-price-1-x-sellingPrice) {
font-size: 18px;
line-height: 25px;
}
}
-.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .currencyContainer {
+.containerNormal :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-currencyContainer) {
font-size: 24px;
line-height: 33px;
}
@media (min-width: 769px) and (max-width: 1024px), (min-width: 280px) and (max-width: 768px) {
- .containerNormal .clearLink .element .priceContainer .sellingPriceContainer .currencyContainer {
+ .containerNormal :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-currencyContainer) {
font-size: 18px;
line-height: 25px;
}
}
-.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .sellingPriceLabel {
- display: none;
-}
-.containerNormal .clearLink .element .priceContainer .sellingPriceContainer .sellingPriceValue {
+.containerNormal :global(.vtex-product-price-1-x-sellingPrice) .sellingPriceValue {
padding: 0;
margin: 0;
-}
-.containerNormal .clearLink .element .priceContainer .installmentContainer {
- display: none;
}
\ No newline at end of file
diff --git a/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss b/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss
index 06fab47..b5a2877 100644
--- a/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss
+++ b/styles/sass/pages/product/vtexProduct/vtex.product-summary.scss
@@ -33,109 +33,10 @@
}
}
- .priceContainer {
+ .listPrice {
padding: 0;
margin: 0;
- .listPriceContainer {
- font-family: $font-family;
- font-style: normal;
- font-weight: 400;
- font-size: 14px;
- line-height: 19px;
- text-align: center;
- text-decoration-line: line-through;
- color: #BABABA;
- padding: 0;
- margin-bottom: 8px;
-
- @media #{$mq-tablet}, #{$mq-mobile} {
- font-size: 12px;
- line-height: 15px;
- }
-
- .listPriceLabel {
- display: none;
- }
-
- .currencyContainer {
- font-size: 14px;
-
- @media #{$mq-tablet}, #{$mq-mobile} {
- font-size: 12px;
- line-height: 16px;
- }
-
- &::before {
- content: "de ";
- font-family: $font-family;
- font-style: normal;
- font-weight: 400;
- font-size: 14px;
- line-height: 19px;
- text-align: center;
-
- @media #{$mq-tablet}, #{$mq-mobile} {
- font-size: 12px;
- line-height: 15px;
- }
- }
-
- &::after {
- content: " por";
- font-family: $font-family;
- font-style: normal;
- font-weight: 400;
- font-size: 14px;
- line-height: 19px;
- text-align: center;
-
- @media #{$mq-tablet}, #{$mq-mobile} {
- font-size: 12px;
- line-height: 15px;
- }
- }
- }
-
- }
-
- .sellingPriceContainer {
- padding: 0;
- margin: 0;
- height: 33px;
- font-family: $font-family;
- font-style: normal;
- font-weight: 700;
- font-size: 24px;
- line-height: 33px;
- text-align: center;
- color: $color-black0;
-
- @media #{$mq-tablet}, #{$mq-mobile} {
- font-size: 18px;
- line-height: 25px;
- }
-
- .currencyContainer {
- font-size: 24px;
- line-height: 33px;
-
- @media #{$mq-tablet}, #{$mq-mobile} {
- font-size: 18px;
- line-height: 25px;
- }
- }
-
- .sellingPriceLabel {
- display: none;
- }
-
- .sellingPriceValue {
- padding: 0;
- margin: 0;
- }
- }
-
.installmentContainer {
display: none;
}
@@ -143,4 +44,93 @@
}
}
+ :global(.vtex-product-price-1-x-listPriceValue) {
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-align: center;
+ text-decoration-line: line-through;
+ color: #BABABA;
+ padding: 0;
+ margin-bottom: 8px;
+
+ @media #{$mq-tablet}, #{$mq-mobile} {
+ font-size: 12px;
+ line-height: 15px;
+ }
+
+ :global(.vtex-product-price-1-x-currencyContainer) {
+ font-size: 14px;
+
+ @media #{$mq-tablet}, #{$mq-mobile} {
+ font-size: 12px;
+ line-height: 16px;
+ }
+
+ &::before {
+ content: "de ";
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-align: center;
+
+ @media #{$mq-tablet}, #{$mq-mobile} {
+ font-size: 12px;
+ line-height: 15px;
+ }
+ }
+
+ &::after {
+ content: " por";
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ text-align: center;
+
+ @media #{$mq-tablet}, #{$mq-mobile} {
+ font-size: 12px;
+ line-height: 15px;
+ }
+ }
+ }
+ }
+
+ :global(.vtex-product-price-1-x-sellingPrice) {
+ padding: 0;
+ margin: 0;
+ height: 33px;
+ font-family: $font-family;
+ font-style: normal;
+ font-weight: 700;
+ font-size: 24px;
+ line-height: 33px;
+ text-align: center;
+ color: $color-black0;
+
+ @media #{$mq-tablet}, #{$mq-mobile} {
+ font-size: 18px;
+ line-height: 25px;
+ }
+
+ :global(.vtex-product-price-1-x-currencyContainer) {
+ font-size: 24px;
+ line-height: 33px;
+
+ @media #{$mq-tablet}, #{$mq-mobile} {
+ font-size: 18px;
+ line-height: 25px;
+ }
+ }
+ .sellingPriceValue {
+ padding: 0;
+ margin: 0;
+ }
+ }
+
}