feat(flexCol): created flex col

store/blocks/pdp/product.jsonc

@@ -243,6 +243,21 @@
       "showNavigationArrows": false
     }
   },
+
+  "flex-layout.col#skuCol": {
+    "props": {
+      "blockClass": "skuProduct"
+    },
+    "children": ["product-identifier.product"]
+  },
+
+  "product-installments": {
+    "props": {
+      "message": "{installmentsNumber} {hasInterest, select, true {x} false {}} de {installmentValue} sem juros",
+      "blockClass": "installmentsPrice"
+    }
+  },
+
   "flex-layout.col#right-col": {
     "props": {
       "preventVerticalStretch": true,
@@ -250,17 +265,14 @@
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-identifier.product",
+      "flex-layout.col#skuCol",
       "product-rating-summary",
       // "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
       "product-installments",
       // "product-separator",
       "sku-selector",
-      "product-quantity",
+      "flex-layout.row#cartPlus",
-      "product-assembly-options",
-      "product-gifts",
-      "flex-layout.row#buy-button",
       "availability-subscriber",
       "shipping-simulator"
       // "share#default"
@@ -284,11 +296,16 @@
   "flex-layout.row#buy-button": {
     "props": {
       "marginTop": 4,
-      "marginBottom": 7
+      "marginBottom": 7,
+      "blockClass": "buttonCart"
     },
     "children": ["add-to-cart-button"]
   },
 
+  "flex-layout.row#cartPlus": {
+    "children": ["product-quantity", "flex-layout.row#buy-button"]
+  },
+
   "flex-layout.row#product-availability": {
     "props": {
       "colGap": 7,

styles/css/vtex.flex-layout.css

@@ -9,4 +9,13 @@
 /* Grid breakpoints */
 .flexRow--containerFlexRow {
   margin: 32px 72px 16px;
+}
+
+.flexColChild--skuProduct {
+  text-align: end;
+}
+
+.flexRowContent--buttonCart :global(.vtex-button) {
+  background: black;
+  border: 0;
 }

styles/css/vtex.product-identifier.css

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

styles/css/vtex.product-price.css

@@ -1,79 +1,22 @@
-.listPrice {
+/*
-  color: #727273;
+0 - 600PX: Phone
-  margin-bottom: 0.25rem;
+600 - 900px: Table portrait
-  font-size: 1rem;
+900 - 1200px: Tablet landscape
+[1200 - 1800] is where our nortal styles apply
+1800px + : Big desktop
+*/
+/* Media Query M3 */
+/* Grid breakpoints */
+.installments {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
 }
 
 .sellingPrice {
-  color: #3f3f40;
-  font-size: 1.25rem;
-}
-
-.sellingPriceValue {
-  font-size: 2.25rem;
   font-weight: 700;
-}
+  font-size: 25px;
-
+  line-height: 38px;
-.installments {
+  color: #000000;
-  color: #727273;
+}
-  margin-bottom: 1rem;
-}
-
-.savings {
-  font-weight: 500;
-  color: #79b03a;
-}
-
-.sellingPriceValue--summary {
-  font-size: 1.25rem;
-  font-weight: 600;
-  color: #2e2e2e;
-}
-
-.savings--summary {
-  background: #8bc34a;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #ffffff;
-}
-
-.savings-discount--summary {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #ffffff;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-.listPrice--summary {
-  margin-bottom: 0.25rem;
-  font-size: 0.875rem;
-}
-
-.installments--summary {
-  margin-bottom: 2rem;
-  font-size: 0.875rem;
-}
-
-.savings--summaryPercentage {
-  background: #0f3e99;
-  border-radius: 1000px;
-  align-items: center;
-  display: flex;
-}
-
-.savingsPercentage--summaryPercentage {
-  font-size: 0.875rem;
-  font-weight: 600;
-  vertical-align: baseline;
-  color: #ffffff;
-  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
-}

styles/css/vtex.store-components.css

@@ -72,4 +72,34 @@
 
 .discountInsideContainer {
   display: none;
+}
+
+.productBrand {
+  text-align: end;
+}
+
+.productNameContainer--quickview {
+  text-align: end;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  color: #575757;
+}
+
+.skuSelectorItemTextValue {
+  padding: unset;
+}
+
+.skuSelectorItem {
+  border-radius: 50%;
+  width: 45px;
+  height: 45px;
+}
+
+.skuSelectorInternalBox {
+  border-radius: 50%;
+}
+
+.frameAround {
+  border-radius: 50%;
 }

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

@@ -1,3 +1,12 @@
 .flexRow--containerFlexRow {
   margin: 32px 72px 16px;
 }
+
+.flexColChild--skuProduct {
+  text-align: end;
+}
+
+.flexRowContent--buttonCart :global(.vtex-button) {
+  background: black;
+  border: 0;
+}

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

@@ -0,0 +1,15 @@
+.product-identifier__label {
+  display: none;
+}
+
+.product-identifier__value {
+  text-align: end;
+  color: rgba(146, 146, 146, 0.48);
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+}
+
+.product-identifier__separator {
+  display: none;
+}

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

@@ -0,0 +1,13 @@
+.installments {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 22px;
+  color: #929292;
+}
+
+.sellingPrice {
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 38px;
+  color: #000000;
+}

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

@@ -66,3 +66,33 @@
 .discountInsideContainer {
   display: none;
 }
+
+.productBrand {
+  text-align: end;
+}
+
+.productNameContainer--quickview {
+  text-align: end;
+  font-weight: 300;
+  font-size: 20px;
+  line-height: 34px;
+  color: #575757;
+}
+
+.skuSelectorItemTextValue {
+  padding: unset;
+}
+
+.skuSelectorItem {
+  border-radius: 50%;
+  width: 45px;
+  height: 45px;
+}
+
+.skuSelectorInternalBox {
+  border-radius: 50%;
+}
+
+.frameAround {
+  border-radius: 50%;
+}