feat: Estiliza container de skus

store/blocks/pdp/product.jsonc

@@ -105,20 +105,17 @@
     },
     "children": [
       "flex-layout.row#product-name",
+      "product-identifier.product",
       "product-rating-summary",
-      "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
-      "product-separator",
-      "product-identifier.product",
       "sku-selector",
       "product-quantity",
       "product-assembly-options",
       "product-gifts",
       "flex-layout.row#buy-button",
       "availability-subscriber",
-      "shipping-simulator",
+      "shipping-simulator"
-      "share#default"
     ]
   },
 
@@ -132,7 +129,8 @@
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,
-      "showValueNameForImageVariation": true
+      "showValueNameForImageVariation": true,
+      "blockClass": "size-sku"
     }
   },
 
@@ -174,16 +172,5 @@
       "blockClass": "message-availability"
     },
     "children": ["availability-subscriber"]
-  },
-
-  "share#default": {
-    "props": {
-      "social": {
-        "Facebook": true,
-        "WhatsApp": true,
-        "Twitter": false,
-        "Pinterest": true
-      }
-    }
   }
 }

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"

styles/configs/font-faces.css

@@ -1,5 +1,18 @@
 @font-face {
-  font-family: "Roboto";
+  font-family: "Open Sans";
   src: url("assets/fonts/OpenSans-Regular.ttf");
   font-weight: 400;
 }
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("assets/fonts/OpenSans-Light.ttf");
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("assets/fonts/OpenSans-Bold.ttf");
+  font-weight: 700;
+}
+

styles/css/vtex.flex-layout.css

@@ -95,7 +95,7 @@
   max-height: 100%;
 }
 
-.flexColChild--quickviewDetails:first-child {
+.flexRowContent .flexColChild--quickviewDetails:first-child {
   overflow-y: auto;
   height: 66% !important;
   overflow-x: hidden;

styles/css/vtex.product-identifier.css

@@ -1,3 +1,27 @@
-.product-identifier--productReference {
+/*
+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 */
+/* .product-identifier--productReference {
   margin-bottom: 1rem;
+} */
+.product-identifier__label {
+  display: none;
+}
+.product-identifier__separator {
+  display: none;
+}
+.product-identifier__value {
+  display: flex;
+  justify-content: end;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: right;
+  color: rgba(146, 146, 146, 0.48);
 }

styles/css/vtex.product-price.css

@@ -11,29 +11,17 @@
   display: none;
 }
 
-.sellingPrice {
-  color: #3f3f40;
-  font-size: 1.25rem;
-}
-
 .sellingPriceValue {
-  font-size: 2.25rem;
   font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
+  margin: 0;
 }
 
 .installments {
-  color: #727273;
+  color: #929292;
-  margin-bottom: 1rem;
+  margin-bottom: 16px;
-}
-
-.savings {
-  display: none;
-}
-
-.sellingPriceValue--summary {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2e2e2e;
 }
 
 .savings--summary {
@@ -68,6 +56,16 @@
   font-size: 0.875rem;
 }
 
+.installments {
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+.installments .installmentsNumber,
+.installments .installmentValue {
+  font-weight: 700;
+}
+
 .savings--summaryPercentage {
   background: #0f3e99;
   border-radius: 1000px;

styles/css/vtex.store-components.css

@@ -21,6 +21,14 @@
   }
 }
 
+.productNameContainer--quickview {
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  text-align: right;
+  color: #575757;
+}
+
 .productImageTag--main {
   max-height: max-content !important;
   max-width: 664px;
@@ -50,3 +58,85 @@
   max-width: 90px;
   margin-right: 16px;
 }
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor {
+  order: 2;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorItemImageValue,
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorInternalBox {
+  border-radius: 50%;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .frameAround {
+  border-color: #000000;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
+  content: "OUTRAS CORES";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: gray;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorSelectorImageValue {
+  display: none;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho {
+  order: 1;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorItemTextValue {
+  padding: 0;
+  margin: auto;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround,
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorInternalBox {
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
+  border-color: #000000;
+  top: -2px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .diagonalCross {
+  top: 4px;
+  right: 6px;
+  bottom: 0px;
+  z-index: 2;
+  width: 29px;
+  height: 29px;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
+  content: "OUTROS TAMANHOS:";
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorSelectorImageValue {
+  display: none;
+}
+
+.skuSelectorItem--size-sku--selected .skuSelectorItemTextValue--size-sku {
+  color: #000000;
+}
+
+.skuSelectorItemTextValue {
+  color: rgba(185, 185, 185, 0.6);
+}

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

@@ -89,6 +89,13 @@
   max-height: 100%;
 }
 
+// .flexColChild:first-child {
+//   display: flex;
+//   align-self: flex-end;
+// }
+
+.flexRowContent
+
 .flexColChild--quickviewDetails:first-child {
   overflow-y: auto;
   height: 66% !important;

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

@@ -0,0 +1,29 @@
+/* .product-identifier--productReference {
+  margin-bottom: 1rem;
+} */
+
+// .info-availability {
+//   display: flex;
+//   align-self: flex-end;
+// }
+
+.product-identifier {
+
+  &__label {
+    display: none;
+  }
+
+  &__separator {
+    display: none;
+  }
+
+  &__value {
+    display: flex;
+    justify-content: end;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    text-align: right;
+    color: rgba(146, 146, 146, 0.48);
+  }
+}

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

@@ -5,30 +5,28 @@
   // font-size: 1rem;
 }
 
-.sellingPrice {
+// .sellingPrice {
-  color: #3f3f40;
+//   margin: 0;
-  font-size: 1.25rem;
+// }
-}
 
 .sellingPriceValue {
-  font-size: 2.25rem;
   font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: $black;
+  margin: 0;
 }
 
 .installments {
-  color: #727273;
+  color: $gray-500;
-  margin-bottom: 1rem;
+  margin-bottom: 16px;
 }
 
-.savings {
+// .sellingPriceValue--summary {
-display: none;
+//   font-size: 1.25rem;
-}
+//   font-weight: 600;
-
+//   color: $black;
-.sellingPriceValue--summary {
+// }
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2e2e2e;
-}
 
 .savings--summary {
   background: #8bc34a;
@@ -63,6 +61,17 @@ display: none;
   font-size: 0.875rem;
 }
 
+.installments {
+  font-size: 16px;
+  line-height: 22px;
+  color: $gray-500;
+
+  .installmentsNumber,
+  .installmentValue {
+    font-weight: 700;
+  }
+}
+
 .savings--summaryPercentage {
   background: #0f3e99;
   border-radius: 1000px;

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

@@ -23,6 +23,14 @@
 //   width: 664px !important;
 // }
 
+.productNameContainer--quickview {
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  text-align: right;
+  color: $gray-600;
+}
+
 .productImageTag--main {
   max-height: max-content !important;
   max-width: 664px;
@@ -52,3 +60,105 @@
   max-width: 90px;
   margin-right: 16px;
 }
+
+.skuSelectorContainer {
+  display: flex;
+  flex-direction: column;
+
+  .skuSelectorSubcontainer--cor {
+    order: 2;
+
+    .frameAround,
+    .skuSelectorItemImageValue,
+    .skuSelectorInternalBox {
+      border-radius: 50%;
+    }
+
+    .frameAround {
+      border-color: $black;
+    }
+
+    .skuSelectorTextContainer {
+      .skuSelectorName {
+        font-size: 0;
+
+        &::after {
+          content: "OUTRAS CORES";
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 19px;
+          color: gray;
+        }
+      }
+
+      .skuSelectorSelectorImageValue {
+        display: none;
+      }
+    }
+  }
+
+  .skuSelectorSubcontainer--tamanho {
+    order: 1;
+
+    .skuSelectorItemTextValue{
+      padding: 0;
+      margin: auto;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 19px;
+    }
+
+    .frameAround,
+    .skuSelectorInternalBox {
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+    }
+
+    .frameAround {
+      border-color: $black;
+      top: -2px;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 2;
+    }
+
+    .diagonalCross {
+      top: 4px;
+      right: 6px;
+      bottom: 0px;
+      z-index: 2;
+      width: 29px;
+      height: 29px;
+    }
+
+    .skuSelectorTextContainer {
+      .skuSelectorName {
+        font-size: 0;
+
+        &::after {
+          content: "OUTROS TAMANHOS:";
+          font-weight: 400;
+          font-size: 14px;
+          line-height: 19px;
+          color: $gray-500;
+        }
+      }
+
+      .skuSelectorSelectorImageValue {
+        display: none;
+      }
+    }
+  }
+}
+
+.skuSelectorItem--size-sku--selected {
+  .skuSelectorItemTextValue--size-sku {
+    color: $black;
+  }
+}
+
+.skuSelectorItemTextValue {
+  color: rgba(185, 185, 185, 0.6);
+}