feat(selling-price e sku-selectors): Ajusta o selling-price e os sku-selectors

store/blocks/pdp/product.jsonc

@@ -109,7 +109,7 @@
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
-      "product-separator",
+      // "product-separator",
       "product-identifier.product",
       "sku-selector",
       "product-quantity",

store/blocks/product-price.jsonc

@@ -4,11 +4,10 @@
       "colGap": 2,
       "preserveLayoutOnMobile": true,
       "preventHorizontalStretch": true,
-      "marginBottom": 4
+      "marginBottom": 4,
+      "blockClass": "preco"
     },
-    "children": [
+    "children": ["product-selling-price"]
-      "product-selling-price"
-    ]
   },
 
   "flex-layout.row#list-price-savings": {
@@ -19,9 +18,6 @@
       "marginBottom": 2,
       "marginTop": 5
     },
-    "children": [
+    "children": ["product-list-price", "product-price-savings"]
-      "product-list-price",
-      "product-price-savings"
-    ]
   }
 }

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/configs/style.json

@@ -255,84 +255,84 @@
     "measure": [30, 34, 20],
     "styles": {
       "heading-1": {
-        "fontFamily": "Open Sans",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "700",
         "fontSize": "3rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-2": {
-        "fontFamily": "Open Sans",
+        "fontFamily": "'Open Sans', sans-serif",
         "fontWeight": "700",
         "fontSize": "2.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-3": {
-        "fontFamily": "Open Sans",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "700",
         "fontSize": "1.75rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-4": {
-        "fontFamily": "Open Sans",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.5rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-5": {
-        "fontFamily": "Open Sans",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-6": {
-        "fontFamily": "Open Sans",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "body": {
-        "fontFamily": "Open Sans",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "small": {
-        "fontFamily": "Open Sans",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "normal",
         "fontSize": "0.875rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "mini": {
-        "fontFamily": "Open Sans",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "normal",
         "fontSize": "0.75rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "action": {
-        "fontFamily": "Open Sans",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "500",
         "fontSize": "1rem",
         "textTransform": "uppercase",
         "letterSpacing": "0"
       },
       "action--small": {
-        "fontFamily": "Open Sans",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "500",
         "fontSize": "0.875rem",
         "textTransform": "uppercase",
         "letterSpacing": "0"
       },
       "action--large": {
-        "fontFamily": "Open Sans",
+        "fontFamily": "Open Sans, sans-serif",
         "fontWeight": "500",
         "fontSize": "1.25rem",
         "textTransform": "uppercase",

styles/css/vtex.flex-layout.css

@@ -7,6 +7,11 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 .flexRowContent {
   position: relative;
+}
+
+.flexRowContent--preco {
+  margin: 0;
 }

styles/css/vtex.product-price.css

@@ -7,7 +7,42 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 .savings,
 .listPrice {
   display: none;
+}
+
+.sellingPrice {
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+}
+
+.installments {
+  font-size: 0;
+}
+.installmentsNumber {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+.installmentsNumber::after {
+  content: " x ";
+}
+
+.installmentValue .currencyContainer {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+.installmentValue .currencyContainer::before {
+  content: "de ";
+  font-weight: 400;
+}
+.installmentValue .currencyContainer::after {
+  content: " sem juros ";
+  font-weight: 400;
 }

styles/css/vtex.store-components.css

@@ -7,12 +7,16 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");
 .container {
   padding: 0 40px;
 }
 .container .productImagesThumb {
   padding-right: 16px;
 }
+.container .productImageTag {
+  object-fit: fill !important;
+}
 .container .productNameContainer {
   text-align: right;
   font-weight: 300;
@@ -20,4 +24,70 @@
   line-height: 34px;
   color: #575757;
   margin-bottom: 31px;
+}
+.container .skuSelectorSubcontainer {
+  margin-bottom: 10px;
+}
+.container .skuSelectorNameContainer {
+  margin: 0;
+}
+.container .skuSelectorTextContainer {
+  font-size: 0;
+  margin-bottom: 8px;
+}
+.container .skuSelectorTextContainer .skuSelectorName {
+  font-size: 0;
+}
+.container .skuSelectorTextContainer .skuSelectorName:last-child::before {
+  content: "OUTROS TAMANHOS:";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.container .skuSelectorTextContainer .skuSelectorName::before {
+  content: "OUTRAS CORES";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.container .skuSelectorTextContainer .skuSelectorSelectorImageValue {
+  font-size: 0;
+}
+.container .skuSelectorContainer {
+  display: flex;
+  flex-direction: column-reverse;
+}
+.container .skuSelectorItem {
+  width: 40px;
+  height: 40px;
+  margin-right: 16px;
+}
+.container .frameAround {
+  border-radius: 24px;
+  border: 1px solid #989898;
+}
+.container .skuSelectorItem--selected .frameAround {
+  border-radius: 24px;
+  border: 2px solid #000000;
+}
+.container .skuSelectorItem--selected .skuSelectorItemTextValue {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #000000;
+}
+.container .skuSelectorInternalBox {
+  border: none;
+  border-radius: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.container .skuSelectorItemTextValue {
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: rgba(185, 185, 185, 0.6);
 }

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

@@ -1,3 +1,7 @@
 .flexRowContent {
   position: relative;
 }
+
+.flexRowContent--preco {
+  margin: 0;
+}

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

@@ -2,3 +2,42 @@
 .listPrice {
   display: none;
 }
+
+.sellingPrice {
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+}
+
+.installments {
+  font-size: 0;
+
+  &Number {
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 22px;
+    color: $color-gray7;
+
+    &::after {
+      content: " x ";
+    }
+  }
+}
+.installmentValue {
+  .currencyContainer {
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 22px;
+    color: $color-gray7;
+
+    &::before {
+      content: "de ";
+      font-weight: 400;
+    }
+
+    &::after {
+      content: " sem juros ";
+      font-weight: 400;
+    }
+  }
+}

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

@@ -8,6 +8,10 @@
     padding-right: 16px;
   }
 
+  .productImageTag {
+    object-fit: fill !important;
+  }
+
   .productNameContainer {
     text-align: right;
     font-weight: 300;
@@ -16,4 +20,87 @@
     color: $color-gray6;
     margin-bottom: 31px;
   }
+
+  .skuSelectorSubcontainer {
+    margin-bottom: 10px;
+  }
+
+  .skuSelectorNameContainer {
+    margin: 0;
+  }
+
+  .skuSelectorTextContainer {
+    font-size: 0;
+    margin-bottom: 8px;
+
+    .skuSelectorName {
+      font-size: 0;
+
+      &:last-child {
+        &::before {
+          content: "OUTROS TAMANHOS:";
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 19px;
+          color: $color-gray7;
+        }
+      }
+
+      &::before {
+        content: "OUTRAS CORES";
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 19px;
+        color: $color-gray7;
+      }
+    }
+
+    .skuSelectorSelectorImageValue {
+      font-size: 0;
+    }
+  }
+
+  .skuSelectorContainer {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
+  .skuSelectorItem {
+    width: 40px;
+    height: 40px;
+    margin-right: 16px;
+  }
+
+  .frameAround {
+    border-radius: 24px;
+    border: 1px solid $color-gray8;
+  }
+
+  .skuSelectorItem--selected {
+    .frameAround {
+      border-radius: 24px;
+      border: 2px solid $color-black2;
+    }
+    .skuSelectorItemTextValue {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+      color: $color-black2;
+    }
+  }
+
+  .skuSelectorInternalBox {
+    border: none;
+    border-radius: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .skuSelectorItemTextValue {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: rgba(185, 185, 185, 0.6);
+  }
 }

styles/sass/utils/_vars.scss

@@ -1,4 +1,5 @@
 $color-black: #292929;
+$color-black2: #000000;
 
 $color-white: #fff;
 
@@ -9,6 +10,7 @@ $color-gray4: #c4c4c4;
 $color-gray5: #e5e5e5;
 $color-gray6: #575757;
 $color-gray7: #929292;
+$color-gray8: #989898;
 
 $color-blue: #4267b2;
 
@@ -31,3 +33,7 @@ $z-index: (
   level4: 20,
   level5: 25,
 ) !default;
+
+//Fonts
+
+@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");