feat(pdp): Adiciona skus

store/blocks/pdp/product.jsonc

@@ -43,7 +43,6 @@
   },
   "condition-layout.product#availability": {
     "props": {
-      "blockClass": "testecontainer",
       "conditions": [
         {
           "subject": "isProductAvailable"

store/blocks/product-summary/product-summary.jsonc

@@ -81,9 +81,7 @@
   },
   "product-price-savings#summary": {
     "props": {
-      "markers": [
+      "markers": ["discount"],
-        "discount"
-      ],
       "blockClass": "summary"
     }
   }

styles/css/vtex.condition-layout.css

@@ -1,14 +0,0 @@
-/*
-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 */
-.testecontainer {
-  margin-left: 50px;
-  border: 1px solid red;
-  background-color: yellow;
-}

styles/css/vtex.flex-layout.css

@@ -12,24 +12,11 @@
   text-align: end;
 }
 
-.flexRowContent--testecontainer {
-  margin-left: 50px;
-  border: 1px solid red;
-  background-color: yellow;
-}
-
 .flexRowContent--preco {
   border: 1px solid red;
   font-style: normal;
   font-weight: 700;
   font-size: 25px;
   line-height: 38px;
-  /* identical to box height, or 152% */
   color: #000000;
 }
-
-.flexRowContent--container-btn .stretchChildrenWidth {
-  background-color: yellow;
-  width: 90%;
-  padding: 0;
-}

styles/css/vtex.store-components.css

@@ -7,13 +7,14 @@
 */
 /* Media Query M3 */
 /* Grid breakpoints */
-.newsletter {
+.container {
-  background: red;
+  border: 1px solid red;
+  margin-left: 40px;
+  margin-right: 40px;
 }
 
-.skuSelectorContainer--skus {
+.newsletter {
-  display: flex;
+  background: red;
-  flex-direction: column-reverse;
 }
 
 .productBrand--quickview {
@@ -23,16 +24,31 @@
   color: #575757;
 }
 
-.testecontainer {
+.skuSelectorContainer--skus {
-  margin-left: 50px;
+  display: flex;
-  border: 1px solid red;
+  flex-direction: column-reverse;
-  background-color: yellow;
 }
 
 .frameAround--skus {
   border: none;
 }
 
+.skuSelectorOptionsList {
+  margin-left: -5px;
+}
+
+.skuSelectorName {
+  font-size: 0;
+}
+.skuSelectorName::after {
+  content: "OUTRAS CORES";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
 .skuSelectorItemTextValue--skus {
   font-weight: 400;
   font-size: 14px;
@@ -66,6 +82,10 @@
   color: #000000;
 }
 
+.skuSelectorSelectorImageValue {
+  display: none;
+}
+
 .shippingContainer {
   border: 1px solid red;
   display: flex;
@@ -90,9 +110,6 @@
   height: 49px;
   border-radius: 0%;
 }
-.shippingContainer :global(.vtex-address-form-4-x-input) {
-  /*background-color: red;*/
-}
 .shippingContainer :global(.vtex-address-form__postalCode-forgottenURL) {
   position: absolute;
   top: 28px;

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

@@ -1,5 +0,0 @@
-.testecontainer {
-  margin-left: 50px;
-  border: 1px solid red;
-  background-color: yellow;
-}

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

@@ -3,28 +3,11 @@
   text-align: end;
 }
 
-.flexRowContent--testecontainer {
-  margin-left: 50px;
-  border: 1px solid red;
-  background-color: yellow;
-}
-
 .flexRowContent--preco {
   border: 1px solid red;
   font-style: normal;
   font-weight: 700;
   font-size: 25px;
   line-height: 38px;
-  /* identical to box height, or 152% */
-
   color: #000000;
 }
-
-//CONTAINER QUANTIDADE E BOTAO
-.flexRowContent--container-btn {
-  .stretchChildrenWidth {
-    background-color: yellow;
-    width: 90%;
-    padding: 0;
-  }
-}

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

@@ -1,10 +1,11 @@
-.newsletter {
+.container {
-  background: red;
+  border: 1px solid red;
+  margin-left: 40px;
+  margin-right: 40px;
 }
 
-.skuSelectorContainer--skus {
+.newsletter {
-  display: flex;
+  background: red;
-  flex-direction: column-reverse;
 }
 
 //NOME DO PRODUTO
@@ -15,16 +16,33 @@
   color: #575757;
 }
 
-.testecontainer {
+//SKUS
-  margin-left: 50px;
+.skuSelectorContainer--skus {
-  border: 1px solid red;
+  display: flex;
-  background-color: yellow;
+  flex-direction: column-reverse;
 }
 
 .frameAround--skus {
   border: none;
 }
 
+.skuSelectorOptionsList {
+  margin-left: -5px;
+}
+
+.skuSelectorName {
+  font-size: 0;
+
+  &::after {
+    content: "OUTRAS CORES";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: #929292;
+  }
+}
+
 .skuSelectorItemTextValue--skus {
   font-weight: 400;
   font-size: 14px;
@@ -61,6 +79,10 @@
   }
 }
 
+.skuSelectorSelectorImageValue {
+  display: none;
+}
+
 //FRETE
 
 .shippingContainer {
@@ -91,10 +113,6 @@
     border-radius: 0%;
   }
 
-  :global(.vtex-address-form-4-x-input) {
-    /*background-color: red;*/
-  }
-
   :global(.vtex-address-form__postalCode-forgottenURL) {
     position: absolute;
     top: 28px;