-
{(product?.product?.priceRange.sellingPrice.highPrice || 0) * (0.9)}
-
R$ 10 % de desconto
+
+
+
+
{(product?.product?.priceRange.sellingPrice.highPrice || 0) * (0.9)}
+
R$ 10 % de desconto
)
}
-export default paymentWithPix
+export default PaymentWithPix;
diff --git a/react/components/Example/styles.css b/react/components/Example/styles.css
index 5755a5b..f425591 100644
--- a/react/components/Example/styles.css
+++ b/react/components/Example/styles.css
@@ -1,20 +1,21 @@
-.wrapperPix {
+[class*="wrapperPix"] {
display: flex;
gap: 26px;
align-items: center;
margin-top: 8px;
}
-.wrapperPixImage {
+
+[class*="wrapperPixImage"] {
width: 66px;
height: 24px;
}
-.wrapperPrices {
+[class*="wrapperPrices"] {
display: flex;
flex-direction: column;
}
-.wrapperTitle {
+[class*="wrapperTitle"] {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
@@ -25,7 +26,7 @@
}
-.wrapperSubtitle {
+[class*="wrapperSubtitle"] {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
diff --git a/react/paymentWithPix.tsx b/react/paymentWithPix.tsx
index 990bd8a..5cdc4e8 100644
--- a/react/paymentWithPix.tsx
+++ b/react/paymentWithPix.tsx
@@ -1,3 +1,3 @@
-import paymentWithPix from "./components/Example/paymentWithPix";
+import paymentWithPix from "./components/Example/PaymentWithPix";
export default paymentWithPix;
diff --git a/store/blocks/pdp/product.jsonc b/store/blocks/pdp/product.jsonc
index 6791541..b109aa8 100644
--- a/store/blocks/pdp/product.jsonc
+++ b/store/blocks/pdp/product.jsonc
@@ -100,7 +100,8 @@
"props": {
"aspectRatio": {
"desktop": "auto",
- "phone": "16:9"
+ "phone": "auto"
+
},
"displayThumbnailsArrows": false,
@@ -121,9 +122,8 @@
"html#codigo",
"product-rating-summary",
"flex-layout.row#selling-price",
- "example-component",
+ "html#pixzap",
"html#product-installments",
- // "html#pixzap",
// "product-separator",
// "product-identifier.product",
"html#sku-selector",
@@ -276,7 +276,11 @@
"defaultActiveTab": true
},
"children": [
- "tab-content.item#home1"
+ "tab-content.item#home1",
+ "tab-content.item#home2",
+ "tab-content.item#home3",
+ "tab-content.item#home4",
+ "tab-content.item#home5"
]
},
@@ -289,6 +293,42 @@
"tabId":"description1"
}
},
+"tab-content.item#home2": {
+ "children": [
+ "image#image-1",
+ "product-description"
+ ],
+"props": {
+ "tabId":"description2"
+}
+},
+"tab-content.item#home3": {
+ "children": [
+ "image#image-1",
+ "product-description"
+ ],
+"props": {
+ "tabId":"description3"
+}
+},
+"tab-content.item#home4": {
+ "children": [
+ "image#image-1",
+ "product-description"
+ ],
+"props": {
+ "tabId":"description4"
+}
+},
+"tab-content.item#home5": {
+ "children": [
+ "image#image-1",
+ "product-description"
+ ],
+"props": {
+ "tabId":"description5"
+}
+},
"html#box-buy" : {
"props":{
@@ -345,14 +385,15 @@
"phone": 2
},
"infinite": true,
- "showNavigationArrows": "desktopOnly",
+ "showNavigationArrows": "always",
"blockClass": "carousel"
}
},
"rich-text#1": {
"props": {
- "text": "Você também pode gostar:"
+ "text": "Você também pode gostar:",
+ "blockClass": "m3-richText"
}
},
@@ -377,12 +418,12 @@
},
"children":["product-installments"]
},
- // "html#pixzap": {
- // "props":{
- // "testId": "pix-price"
- // },
- // "children":["paymentWithPix"]
- // },
+ "html#pixzap": {
+ "props":{
+ "testId": "pix-price"
+ },
+ "children":["example-component"]
+ },
"html#sku-selector": {
"props":{
"testId": "sku-selector",
diff --git a/store/interfaces.json b/store/interfaces.json
index b485af2..e0b6ca6 100644
--- a/store/interfaces.json
+++ b/store/interfaces.json
@@ -1,6 +1,6 @@
{
"example-component": {
- "component": "paymentWithPix"
+ "component": "PaymentWithPix"
},
"html": {
diff --git a/styles/css/vtex.flex-layout.css b/styles/css/vtex.flex-layout.css
index 892d537..976d156 100644
--- a/styles/css/vtex.flex-layout.css
+++ b/styles/css/vtex.flex-layout.css
@@ -32,4 +32,7 @@
display: flex;
flex-direction: column;
}
+ .flexRowContent .stretchChildrenWidth {
+ width: 100% !important;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.product-identifier.css b/styles/css/vtex.product-identifier.css
index aa21160..9cda2ce 100644
--- a/styles/css/vtex.product-identifier.css
+++ b/styles/css/vtex.product-identifier.css
@@ -27,4 +27,10 @@
font-size: 14px;
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
+}
+
+@media (min-width: 768px) and (max-width: 1024px) {
+ .product-identifier__value {
+ justify-content: flex-start;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.rich-text.css b/styles/css/vtex.rich-text.css
index 1373242..8ae215d 100644
--- a/styles/css/vtex.rich-text.css
+++ b/styles/css/vtex.rich-text.css
@@ -19,4 +19,14 @@
color: #575757;
display: flex;
justify-content: center;
+}
+
+.m3-richText {
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+ text-align: center;
+ color: #575757;
}
\ No newline at end of file
diff --git a/styles/css/vtex.slider-layout.css b/styles/css/vtex.slider-layout.css
index 0e382bf..272432e 100644
--- a/styles/css/vtex.slider-layout.css
+++ b/styles/css/vtex.slider-layout.css
@@ -10,6 +10,25 @@
/*font*/
/*colors*/
/* Grid breakpoints */
+.sliderLayoutContainer--carousel {
+ width: 100%;
+ padding: 0 16px 0 16px;
+ display: flex;
+ justify-content: center;
+ margin-bottom: 64px;
+}
+.sliderLayoutContainer--carousel .paginationDotsContainer {
+ display: flex;
+ align-items: center;
+}
+.sliderLayoutContainer--carousel .paginationDot {
+ background: black;
+}
+.sliderLayoutContainer--carousel .paginationDot--isActive {
+ background: white;
+ border: 0.5px solid black;
+}
+
@media (min-width: 768px) and (max-width: 1024px) {
.sliderLayoutContainer--carousel {
padding: 24px 62px;
diff --git a/styles/css/vtex.store-components.css b/styles/css/vtex.store-components.css
index a24a6e7..c3bd5bd 100644
--- a/styles/css/vtex.store-components.css
+++ b/styles/css/vtex.store-components.css
@@ -12,7 +12,7 @@
/* Grid breakpoints */
.newsletter {
background: black;
- border-bottom: 1px solid #FFFFFF;
+ border-bottom: 1px solid #ffffff;
margin: 0;
display: flex;
flex-direction: column;
@@ -44,9 +44,9 @@
padding: 0 0 0 0;
width: 774px;
}
-.newsletter .container {
+
+.container {
max-width: 100%;
- padding: 32px 0 16px 0;
margin: 0;
}
@@ -57,7 +57,7 @@
font-size: 24px;
line-height: 38px;
text-align: center;
- color: #FFFFFF;
+ color: #ffffff;
border: none;
}
@@ -100,11 +100,6 @@
height: auto !important;
}
-@media (min-width: 375px) and (max-width: 1444px) {
- .stack {
- width: 40%;
- }
-}
.shippingTableHead {
display: grid;
margin-bottom: 15px;
@@ -161,7 +156,7 @@
line-height: 16px;
display: flex;
align-items: center;
- color: #AFAFAF;
+ color: #afafaf;
}
.shippingTableCellDeliveryEstimate {
@@ -174,7 +169,7 @@
line-height: 16px;
display: flex;
align-items: center;
- color: #AFAFAF;
+ color: #afafaf;
}
.shippingTableCellDeliveryPrice {
@@ -187,7 +182,7 @@
line-height: 16px;
display: flex;
align-items: center;
- color: #AFAFAF;
+ color: #afafaf;
}
.shareContainer {
@@ -211,7 +206,7 @@
line-height: 16px;
display: flex;
align-items: center;
- color: #AFAFAF;
+ color: #afafaf;
}
.shippingContainer :global(.vtex-input) :global(.vtex-input__label) {
@@ -320,4 +315,10 @@
padding: 0;
margin: auto;
margin: auto;
+}
+
+@media (min-width: 768px) and (max-width: 1024px) {
+ .productBrand--quickview {
+ justify-content: flex-start;
+ }
}
\ No newline at end of file
diff --git a/styles/css/vtex.tab-layout.css b/styles/css/vtex.tab-layout.css
index d7aa64a..c1ec31f 100644
--- a/styles/css/vtex.tab-layout.css
+++ b/styles/css/vtex.tab-layout.css
@@ -47,7 +47,7 @@
text-transform: initial;
}
-@media (min-width: 768px) and (max-width: 1024px) {
+@media (min-width: 637px) and (max-width: 1024px) {
.listContainer {
display: flex;
flex-direction: column;
diff --git a/styles/sass/pages/product/vtex.flex-layout.scss b/styles/sass/pages/product/vtex.flex-layout.scss
index 67cbdba..e65542b 100644
--- a/styles/sass/pages/product/vtex.flex-layout.scss
+++ b/styles/sass/pages/product/vtex.flex-layout.scss
@@ -20,5 +20,10 @@
.flexRowContent {
display: flex;
flex-direction: column;
+
+ .stretchChildrenWidth {
+ width: 100% !important;
}
+ }
+
}
diff --git a/styles/sass/pages/product/vtex.product-identifier.scss b/styles/sass/pages/product/vtex.product-identifier.scss
index b19a895..5f40e51 100644
--- a/styles/sass/pages/product/vtex.product-identifier.scss
+++ b/styles/sass/pages/product/vtex.product-identifier.scss
@@ -4,9 +4,6 @@
.product-identifier__separator {
display: none;
}
-
-
-
.product-identifier__value {
display: flex;
justify-content: end;
@@ -17,3 +14,9 @@
line-height: 19px;
color: rgba(146, 146, 146, 0.48);
}
+
+@media (min-width: 768px) and (max-width: 1024px) {
+ .product-identifier__value {
+ justify-content: flex-start;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.rich-text.scss b/styles/sass/pages/product/vtex.rich-text.scss
index 27eef50..ebe41e6 100644
--- a/styles/sass/pages/product/vtex.rich-text.scss
+++ b/styles/sass/pages/product/vtex.rich-text.scss
@@ -8,3 +8,14 @@
display: flex;
justify-content: center;
}
+
+.m3-richText {
+ font-family: 'Open Sans';
+ font-style: normal;
+ font-weight: 400;
+ font-size: 24px;
+ line-height: 38px;
+ text-align: center;
+ color: #575757;
+}
+
diff --git a/styles/sass/pages/product/vtex.slider-layout.scss b/styles/sass/pages/product/vtex.slider-layout.scss
index ab2c9ff..ee45877 100644
--- a/styles/sass/pages/product/vtex.slider-layout.scss
+++ b/styles/sass/pages/product/vtex.slider-layout.scss
@@ -1,7 +1,24 @@
-// .sliderLayoutContainer--carousel {
-// padding: ;
-// }
+.sliderLayoutContainer--carousel {
+ width: 100%;
+ padding: 0 16px 0 16px;
+ display: flex;
+ justify-content: center;
+ margin-bottom: 64px;
+
+ .paginationDotsContainer {
+ display: flex;
+ align-items: center;
+ }
+ .paginationDot {
+ background: black;
+ }
+ .paginationDot--isActive {
+ background: white;
+ border: 0.5px solid black;
+ }
+}
+
@media (min-width:768px) and (max-width:1024px) {
.sliderLayoutContainer--carousel {
diff --git a/styles/sass/pages/product/vtex.store-components.scss b/styles/sass/pages/product/vtex.store-components.scss
index aec7f93..493b44e 100644
--- a/styles/sass/pages/product/vtex.store-components.scss
+++ b/styles/sass/pages/product/vtex.store-components.scss
@@ -1,58 +1,58 @@
-.newsletter{
- background: black;
- border-bottom: 1px solid #FFFFFF;
- margin:0;
+.newsletter {
+ background: black;
+ border-bottom: 1px solid #ffffff;
+ margin: 0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ :global(.vtex-button) {
+ position: relative;
+ right: 40px;
+ background: transparent;
+ border: none;
+ border-radius: 0;
+ border-bottom: 3px solid #bfbfbf;
+ &:hover {
+ border-bottom: 5px solid #bfbfbf;
+ }
+ }
+
+ :global(.vtex-input-prefix__group) {
display: flex;
- flex-direction: column;
justify-content: center;
- align-items: center;
+ border-top: none;
+ border-right: none;
+ border-left: none;
+ border-bottom: 1px solid #929292;
+ border-radius: 0;
+ }
+ :global(.vtex-styleguide-9-x-input) {
+ background: transparent;
+ padding: 0 0 0 0;
+ width: 774px;
+ }
+}
- :global(.vtex-button) {
- position: relative;
- right: 40px;
- background: transparent;
- border: none;
- border-radius: 0;
- border-bottom: 3px solid #bfbfbf;
- &:hover {
- border-bottom: 5px solid #bfbfbf;
- }
- }
-
- :global(.vtex-input-prefix__group) {
- display: flex;
- justify-content: center;
- border-top: none;
- border-right: none;
- border-left: none;
- border-bottom: 1px solid #929292;
- border-radius: 0;
- }
- :global(.vtex-styleguide-9-x-input) {
- background: transparent;
- padding: 0 0 0 0;
- width: 774px;
- }
- .container {
- max-width: 100%;
- padding: 32px 0 16px 0;
- margin:0;
- }
+.container {
+ max-width: 100%;
+ margin: 0;
}
.label {
- font-family: 'Open Sans';
+ font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
line-height: 38px;
text-align: center;
- color: #FFFFFF;
+ color: #ffffff;
border: none;
}
.label::after {
content: "Receba ofertas e novidades por e-mail";
- font-family:'Opens Sans';
+ font-family: "Opens Sans";
font-style: normal;
font-weight: 400;
font-size: 18px;
@@ -66,7 +66,7 @@
}
.productDescriptionTitle {
- font-family:'Opens Sans';
+ font-family: "Opens Sans";
font-style: normal;
font-weight: 400;
font-size: 24px;
@@ -75,8 +75,8 @@
margin-bottom: 8px;
}
-.productDescriptionText {
- text-align: left;
+.productDescriptionText {
+ text-align: left;
}
.thumbImg {
@@ -89,10 +89,14 @@
height: auto !important;
}
-@media (min-width: 375px) and (max-width:1444px) {
- .stack {
- width: 40%;
- }
+@media (min-width: 375px) and (max-width: 1444px) {
+}
+
+
+@media (min-width: 1898px) and (max-width: 2000px) {
+ // .carouselGaleryThumbs {
+ // margin-left: 28px;
+ // }
}
// estilização do frete
@@ -104,7 +108,7 @@
}
.shippingTableHeadDeliveryName {
display: flex;
- font-family: 'Open Sans';
+ font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
@@ -113,7 +117,7 @@
}
.shippingTableHeadDeliveryEstimate {
display: flex;
- font-family: 'Open Sans';
+ font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
@@ -122,7 +126,7 @@
}
.shippingTableHeadDeliveryPrice {
display: flex;
- font-family: 'Open Sans';
+ font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 14px;
@@ -144,40 +148,40 @@
grid-area: t;
padding: 0;
margin-bottom: 15px;
- font-family: 'Open Sans';
+ font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
- color: #AFAFAF;
+ color: #afafaf;
}
.shippingTableCellDeliveryEstimate {
- grid-area:d;
+ grid-area: d;
padding: 0;
- font-family: 'Open Sans';
+ font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
- color: #AFAFAF;
+ color: #afafaf;
}
-.shippingTableCellDeliveryPrice {
+.shippingTableCellDeliveryPrice {
grid-area: p;
padding: 0;
- font-family: 'Open Sans';
+ font-family: "Open Sans";
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
display: flex;
align-items: center;
- color: #AFAFAF;
+ color: #afafaf;
}
.shareContainer {
@@ -189,37 +193,37 @@
width: 49px;
height: 49px;
background-color: black;
- :global(.vtex-button__label ){
- font-size: 0;
- &::after {
- content: "Ok";
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 400;
- font-size: 12px;
- line-height: 16px;
- display: flex;
- align-items: center;
+ :global(.vtex-button__label) {
+ font-size: 0;
+ &::after {
+ content: "Ok";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 12px;
+ line-height: 16px;
+ display: flex;
+ align-items: center;
- color: #AFAFAF;
- }
+ color: #afafaf;
+ }
}
}
}
.shippingContainer {
:global(.vtex-input) {
- :global(.vtex-input__label ){
- font-size: 0;
- &::after {
- content: "CALCULAR FRETE:";
- font-family: 'Open Sans';
- font-style: normal;
- font-weight: 400;
- font-size: 14px;
- line-height: 19px;
- color: #929292;
- }
+ :global(.vtex-input__label) {
+ font-size: 0;
+ &::after {
+ content: "CALCULAR FRETE:";
+ font-family: "Open Sans";
+ font-style: normal;
+ font-weight: 400;
+ font-size: 14px;
+ line-height: 19px;
+ color: #929292;
+ }
}
}
}
@@ -230,11 +234,11 @@
}
:global(.vtex-button) {
- position: relative;
- right: 49px;
- top: 27px;
- width: 49px;
- height: 49px;
+ position: relative;
+ right: 49px;
+ top: 27px;
+ width: 49px;
+ height: 49px;
}
}
@@ -243,7 +247,7 @@
.productBrand--quickview {
display: flex;
justify-content: end;
- font-family: 'Open Sans';
+ font-family: "Open Sans";
font-style: normal;
font-weight: 300;
font-size: 20px;
@@ -254,7 +258,6 @@
//estilização do container de skus ( tamanhos e cores )
-
.skuSelectorContainer {
display: flex;
flex-direction: column-reverse;
@@ -327,7 +330,10 @@
margin: auto;
}
}
-
-
}
+@media (min-width: 768px) and (max-width: 1024px) {
+ .productBrand--quickview{
+ justify-content: flex-start;
+ }
+}
diff --git a/styles/sass/pages/product/vtex.tab-layout.scss b/styles/sass/pages/product/vtex.tab-layout.scss
index 6bbf8b9..7ab21c2 100644
--- a/styles/sass/pages/product/vtex.tab-layout.scss
+++ b/styles/sass/pages/product/vtex.tab-layout.scss
@@ -38,7 +38,12 @@
}
}
-@media (min-width:768px) and (max-width:1024px) {
+@media (min-width:637px) and (max-width:1024px) {
+
+ // .container {
+ // display: block;
+ // flex-direction: column;
+ // }
.listContainer {
display: flex;
flex-direction: column;