feat(pdp): Adiciona parcelamentos

store/blocks/pdp/product.jsonc

@@ -95,6 +95,7 @@
   },
   "product-images": {
     "props": {
+      "thumbnailsOrientation": "horizontal",
       "aspectRatio": {
         "desktop": "auto",
         "phone": "16:9"
@@ -111,7 +112,7 @@
       "flex-layout.row#product-name",
       "html#codigo",
       "product-rating-summary",
-      "flex-layout.row#list-price-savings",
+      /*"flex-layout.row#list-price-savings", desconto*/
       "flex-layout.row#selling-price",
       "product-installments",
       /*"product-separator",*/
@@ -127,6 +128,13 @@
     ]
   },
 
+  "product-installments": {
+    "props": {
+      "installmentsCriteria": "max-quantity-without-interest",
+      "blockClass": "parcelamentos"
+    }
+  },
+
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3,

store/blocks/product-summary/quickview.json

@@ -1,9 +1,6 @@
 {
   "modal-trigger#quickview": {
-    "children": [
+    "children": ["icon-expand", "modal-layout#quickview"],
-      "icon-expand",
-      "modal-layout#quickview"
-    ],
     "props": {
       "blockClass": "quickview"
     }
@@ -63,9 +60,7 @@
   },
 
   "flex-layout.col#quickview-product-quantity": {
-    "children": [
+    "children": ["product-summary-quantity#quickview"]
-      "product-summary-quantity#quickview"
-    ]
   },
   "product-summary-quantity#quickview": {
     "props": {
@@ -74,18 +69,14 @@
     }
   },
   "flex-layout.col#quickview-add-to-card-button": {
-    "children": [
+    "children": ["add-to-cart-button"],
-      "add-to-cart-button"
-    ],
     "props": {
       "width": "grow"
     }
   },
 
   "flex-layout.row#quickview-actions-2": {
-    "children": [
+    "children": ["link.product#button-pdp"]
-      "link.product#button-pdp"
-    ]
   },
   "link.product#button-pdp": {
     "props": {
@@ -107,15 +98,10 @@
     }
   },
   "flex-layout.col#quickview-images": {
-    "children": [
+    "children": ["product-images#quickview"]
-      "product-images#quickview"
-    ]
   },
   "flex-layout.col#quickview-product-details": {
-    "children": [
+    "children": ["modal-content#quickview", "modal-actions#quickview"],
-      "modal-content#quickview",
-      "modal-actions#quickview"
-    ],
     "props": {
       "preventVerticalStretch": true,
       "blockClass": "quickviewDetails"
@@ -134,7 +120,7 @@
       "blockClass": "quickview"
     }
   },
-  "product-images#quickview" : {
+  "product-images#quickview": {
     "props": {
       "blockClass": "quickview",
       "showNavigationArrows": true

styles/css/agenciamagma.store-theme.css

@@ -26,4 +26,5 @@
   font-size: 18px;
   line-height: 25px;
   color: #ffffff;
+  border-radius: 0%;
 }

styles/css/vtex.flex-layout.css

@@ -13,10 +13,10 @@
 }
 
 .flexRowContent--preco {
-  border: 1px solid red;
   font-style: normal;
   font-weight: 700;
   font-size: 25px;
   line-height: 38px;
   color: #000000;
+  margin: 0;
 }

styles/css/vtex.product-price.css

@@ -7,6 +7,20 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.interestRate {
+.installments--parcelamentos {
-  color: red;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+.installments--parcelamentos .installmentsNumber {
+  font-weight: 700;
+}
+.installments--parcelamentos .installmentValue {
+  font-weight: 700;
+}
+.installments--parcelamentos .installmentValue::before {
+  content: "de ";
+  font-weight: 400;
 }

styles/css/vtex.product-quantity.css

@@ -71,6 +71,7 @@
   font-size: 16px;
   line-height: 22px;
   color: #000000;
+  border-radius: 0%;
 }
 
 :global(.vtex-numeric-stepper__minus-button) {
@@ -80,4 +81,5 @@
   font-size: 16px;
   line-height: 22px;
   color: #000000;
+  border-radius: 0%;
 }

styles/css/vtex.store-components.css

@@ -8,7 +8,6 @@
 /* Media Query M3 */
 /* Grid breakpoints */
 .container {
-  border: 1px solid red;
   margin-left: 40px;
   margin-right: 40px;
 }
@@ -17,6 +16,18 @@
   background: red;
 }
 
+/*:global(.vtex-store-components-3-x-productImage) {
+  width: 664px;
+  height: 664px;
+}*/
+/*:global(.vtex-store-components-3-x-productImageTag) {
+  width: 664px;
+  height: 664px;
+}
+
+.caretIcon {
+  display: none;
+}*/
 .productBrand--quickview {
   font-weight: 300;
   font-size: 20px;
@@ -27,6 +38,7 @@
 .skuSelectorContainer--skus {
   display: flex;
   flex-direction: column-reverse;
+  margin-top: 16px;
 }
 
 .frameAround--skus {
@@ -37,16 +49,16 @@
   margin-left: -5px;
 }
 
-.skuSelectorName {
+.skuSelectorSubcontainer--tamanho .skuSelectorName {
   font-size: 0;
 }
-.skuSelectorName::after {
+.skuSelectorSubcontainer--tamanho .skuSelectorName::after {
-  content: "OUTRAS CORES";
+  content: "OUTROS TAMANHOS";
   font-style: normal;
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
-  color: #929292;
+  color: color-gray6;
 }
 
 .skuSelectorItemTextValue--skus {
@@ -82,12 +94,35 @@
   color: #000000;
 }
 
+.skuSelectorSubcontainer--cor .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorSubcontainer--cor .skuSelectorName::after {
+  content: "OUTRAS CORES";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: color-gray6;
+}
+.skuSelectorSubcontainer--cor .skuSelectorItemImage--skus {
+  height: 48px;
+  width: 48px;
+}
+.skuSelectorSubcontainer--cor .skuSelectorInternalBox--skus {
+  width: 48px;
+  height: 48px;
+}
+
+.diagonalCross--skus {
+  height: 20px;
+}
+
 .skuSelectorSelectorImageValue {
   display: none;
 }
 
 .shippingContainer {
-  border: 1px solid red;
   display: flex;
   align-items: end;
   margin-top: 16px;
@@ -104,7 +139,7 @@
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
-  color: #929292;
+  color: color-gray6;
 }
 .shippingContainer :global(.vtex-input-prefix__group) {
   height: 49px;
@@ -120,14 +155,20 @@
   display: flex;
   align-items: center;
   text-decoration-line: underline;
+}
+.shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) :last-child {
   color: #000000;
 }
+.shippingContainer :global(.vtex__icon-external-link) {
+  display: none;
+}
 .shippingContainer :global(.vtex-button) {
   width: 49px;
   height: 49px;
   background-color: #000000;
   border: none;
   border-radius: inherit;
+  margin-left: -1px;
 }
 .shippingContainer :global(.vtex-button__label) {
   font-size: 0;
@@ -137,5 +178,5 @@
   font-weight: 600;
   font-size: 14px;
   line-height: 19px;
-  color: #ffffff;
+  color: #fff;
 }

styles/sass/pages/product/agenciamagma.store-theme.scss

@@ -10,12 +10,13 @@
   height: 49px;
 
   :global(.vtex-button) {
-    background-color: #000000;
+    background-color: $color-black-100;
     border: none;
     font-style: normal;
     font-weight: 400;
     font-size: 18px;
     line-height: 25px;
     color: #ffffff;
+    border-radius: 0%;
   }
 }

styles/sass/pages/product/vtex.flex-layout.scss

@@ -4,10 +4,10 @@
 }
 
 .flexRowContent--preco {
-  border: 1px solid red;
   font-style: normal;
   font-weight: 700;
   font-size: 25px;
   line-height: 38px;
   color: #000000;
+  margin: 0;
 }

styles/sass/pages/product/vtex.product-price.scss

@@ -1,3 +1,20 @@
-.interestRate {
+.installments--parcelamentos {
-  color: red;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 22px;
+  color: $color-gray6;
+
+  .installmentsNumber {
+    font-weight: 700;
+  }
+
+  .installmentValue {
+    font-weight: 700;
+
+    &::before {
+      content: "de ";
+      font-weight: 400;
+    }
+  }
 }

styles/sass/pages/product/vtex.product-quantity.scss

@@ -64,7 +64,8 @@
   font-weight: 400;
   font-size: 16px;
   line-height: 22px;
-  color: #000000;
+  color: $color-black-100;
+  border-radius: 0%;
 }
 
 :global(.vtex-numeric-stepper__minus-button) {
@@ -73,5 +74,6 @@
   font-weight: 400;
   font-size: 16px;
   line-height: 22px;
-  color: #000000;
+  color: $color-black-100;
+  border-radius: 0%;
 }

styles/sass/pages/product/vtex.store-components.scss

@@ -1,5 +1,4 @@
 .container {
-  border: 1px solid red;
   margin-left: 40px;
   margin-right: 40px;
 }
@@ -8,18 +7,34 @@
   background: red;
 }
 
+//IMAGENS
+/*:global(.vtex-store-components-3-x-productImage) {
+  width: 664px;
+  height: 664px;
+}*/
+
+/*:global(.vtex-store-components-3-x-productImageTag) {
+  width: 664px;
+  height: 664px;
+}
+
+.caretIcon {
+  display: none;
+}*/
+
 //NOME DO PRODUTO
 .productBrand--quickview {
   font-weight: 300;
   font-size: 20px;
   line-height: 34px;
-  color: #575757;
+  color: $color-gray8;
 }
 
 //SKUS
 .skuSelectorContainer--skus {
   display: flex;
   flex-direction: column-reverse;
+  margin-top: 16px;
 }
 
 .frameAround--skus {
@@ -30,16 +45,18 @@
   margin-left: -5px;
 }
 
-.skuSelectorName {
+.skuSelectorSubcontainer--tamanho {
+  .skuSelectorName {
     font-size: 0;
 
     &::after {
-    content: "OUTRAS CORES";
+      content: "OUTROS TAMANHOS";
       font-style: normal;
       font-weight: 400;
       font-size: 14px;
       line-height: 19px;
-    color: #929292;
+      color: color-gray6;
+    }
   }
 }
 
@@ -51,7 +68,7 @@
 }
 
 .skuSelectorInternalBox--skus {
-  border: 1px solid #989898;
+  border: 1px solid $color-gray7;
   border-radius: 100%;
   width: 40px;
   height: 40px;
@@ -62,7 +79,7 @@
 
 .skuSelectorItem--skus--selected {
   .skuSelectorInternalBox--skus {
-    border: 2px solid #000000;
+    border: 2px solid $color-black-100;
     border-radius: 100%;
     width: 40px;
     height: 40px;
@@ -75,10 +92,39 @@
     font-weight: 400;
     font-size: 14px;
     line-height: 19px;
-    color: #000000;
+    color: $color-black-100;
   }
 }
 
+.skuSelectorSubcontainer--cor {
+  .skuSelectorName {
+    font-size: 0;
+
+    &::after {
+      content: "OUTRAS CORES";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: color-gray6;
+    }
+  }
+
+  .skuSelectorItemImage--skus {
+    height: 48px;
+    width: 48px;
+  }
+
+  .skuSelectorInternalBox--skus {
+    width: 48px;
+    height: 48px;
+  }
+}
+
+.diagonalCross--skus {
+  height: 20px;
+}
+
 .skuSelectorSelectorImageValue {
   display: none;
 }
@@ -86,7 +132,6 @@
 //FRETE
 
 .shippingContainer {
-  border: 1px solid red;
   display: flex;
   align-items: end;
   margin-top: 16px;
@@ -104,7 +149,7 @@
       font-weight: 400;
       font-size: 14px;
       line-height: 19px;
-      color: #929292;
+      color: color-gray6;
     }
   }
 
@@ -123,15 +168,23 @@
     display: flex;
     align-items: center;
     text-decoration-line: underline;
-    color: #000000;
+
+    :last-child {
+      color: $color-black-100;
+    }
+  }
+
+  :global(.vtex__icon-external-link) {
+    display: none;
   }
 
   :global(.vtex-button) {
     width: 49px;
     height: 49px;
-    background-color: #000000;
+    background-color: $color-black-100;
     border: none;
     border-radius: inherit;
+    margin-left: -1px;
   }
 
   :global(.vtex-button__label) {
@@ -142,7 +195,7 @@
       font-weight: 600;
       font-size: 14px;
       line-height: 19px;
-      color: #ffffff;
+      color: $color-white;
     }
   }
 }

styles/sass/utils/_vars.scss

@@ -1,4 +1,5 @@
 $color-black: #292929;
+$color-black-100: #000000;
 
 $color-white: #fff;
 
@@ -7,6 +8,9 @@ $color-gray2: #7d7d7d;
 $color-gray3: #f0f0f0;
 $color-gray4: #c4c4c4;
 $color-gray5: #e5e5e5;
+$color-gray6: #929292;
+$color-gray7: #989898;
+$color-gray8: #575757;
 
 $color-blue: #4267b2;
 
@@ -19,7 +23,7 @@ $grid-breakpoints: (
   sm: 576px,
   md: 768px,
   lg: 992px,
-	xl: 1200px
+  xl: 1200px,
 ) !default;
 
 $z-index: (
@@ -27,5 +31,5 @@ $z-index: (
   level2: 10,
   level3: 15,
   level4: 20,
-	level5: 25
+  level5: 25,
 ) !default;