feat(sku-seletor):concertando skuSelectorName

react/components/Html/styles.css

@@ -20,7 +20,10 @@
     display: flex;
     flex-direction: column;
 }
-.html--pdp-pixPrice div span[datatype='span_wrapper'] span[class="pix_wrapper-price"]{
+.html--pdp-pixPrice div span[datatype='span_wrapper'] p{
+    margin: 0;
+}
+.html--pdp-pixPrice div span[datatype='span_wrapper'] p[class="pix_wrapper-price"]{
     font-family: 'Open Sans',sans-serif;
     font-style: normal;
     font-weight: 700;
@@ -29,7 +32,7 @@
     color: rgba(0, 0, 0, 0.58);
     white-space: nowrap;
 }
-.html--pdp-pixPrice div span[datatype='span_wrapper'] span[class='pix_wrapper-Discount']{
+.html--pdp-pixPrice div span[datatype='span_wrapper'] p[class='pix_wrapper-Discount']{
     font-family: 'Open Sans',sans-serif;
     font-style: normal;
     font-weight: 300;

react/components/ProductContext/Pix.tsx

@@ -17,10 +17,10 @@ const Pix = () => {
     <div className='pix_wrapper'>
       <img className='pix_wrapper-img' src="https://agenciamagma.vteximg.com.br/arquivos/ids/166877/pixrallenson.sv" alt="Logo do Pix" />
       <span datatype='span_wrapper'>
-        <span className='pix_wrapper-price'>
+        <p className='pix_wrapper-price'>
         R$ {formattedNumber}
-        </span>
+        </p>
-        <span className='pix_wrapper-Discount'> {desconto} % de desconto</span>
+        <p className='pix_wrapper-Discount'> {desconto} % de desconto</p>
       </span>
     </div>
   )

react/components/ProductContext/Placeholder.tsx

@@ -3,6 +3,15 @@ import React from 'react';
 const Placeholder = () => {
   if (typeof document !== "undefined") {
     const Placeholder = document.querySelector(".vtex-address-form-4-x-input")
+    const placeholdertamanho = document.querySelector(".vtex-store-components-3-x-skuSelectorSubcontainer--tamanho .vtex-store-components-3-x-skuSelectorName");
+    const placeholdercor = document.querySelector(".vtex-store-components-3-x-skuSelectorSubcontainer--cor .vtex-store-components-3-x-skuSelectorName");
+    console.log(placeholdertamanho)
+    if(placeholdertamanho){
+      placeholdertamanho.textContent = "OUTROS TAMANHOS:";
+    }
+    if(placeholdercor){
+      placeholdercor.textContent = "OUTRAS CORES:";
+    }
     Placeholder?.setAttribute("Placeholder","Digite seu CEP")
   }
   return(

store/blocks/pdp/product.jsonc

@@ -133,13 +133,14 @@
   },
   "html#prateleira": {
     "props": {
-      "testId": "vtex-product-sumary"
+      "testId": "vtex-product-summary"
     },
     "children": [
-      "product-summary-image#shelfpdp",
+      "stack-layout#pdp",
       "product-summary-name",
       "product-list-price#summary",
-      "product-selling-price#summarypdp"
+      "html#selling-price",
+      "flex-layout.row#selling-price-savingspdp"
     ]
   },
   "html#carousel": {
@@ -162,9 +163,7 @@
     "props": {
       "testId": "product-summary-list"
     },
-    "children": [
+    "children": ["slider-layout#demo-products#pdp"]
-      "slider-layout#demo-products#pdp"
-    ]
   },
   "slider-layout#demo-products#pdp": {
     "props": {
@@ -178,14 +177,9 @@
       "blockClass": "pdp-carrousel"
     }
   },
-
   "product-summary.shelf#Pdp": {
     "children": [
-      "stack-layout#pdp",
+      "html#prateleira"
-      "product-summary-name",
-      "product-list-price#summary",
-      "html#selling-price",
-      "flex-layout.row#selling-price-savingspdp"
     ]
   },
 
@@ -198,7 +192,7 @@
       "marginBottom": 4
     },
     "children": [
-      "product-selling-price#summarypdp",
+      "product-selling-price#summary",
       "product-price-savings#summary"
     ]
   },
@@ -231,8 +225,6 @@
     "children": ["breadcrumb"]
   },
 
-
-
   "flex-layout.row#specifications-title": {
     "children": ["rich-text#specifications"]
   },
@@ -330,7 +322,8 @@
     "children": ["stack-layout"],
     "props": {
       "width": "50%",
-      "blockClass": "StackLayout"
+      "blockClass": "StackLayout",
+      "testId": "product-images"
     }
   },
 
@@ -432,10 +425,7 @@
       "marginBottom": 3,
       "blockClass": "title"
     },
-    "children": [
+    "children": ["html#código", "vtex.store-components:product-name"]
-      "html#código",
-      "vtex.store-components:product-name"
-    ]
   },
   "html#código": {
     "props": {
@@ -502,10 +492,7 @@
     "props": {
       "blockClass": "availability"
     },
-    "children": [
+    "children": ["html#stack", "html#right-col-availability"]
-      "html#stack",
-      "html#right-col-availability"
-    ]
   },
   "html#right-col-availability": {
     "props": {

styles/css/vtex.store-components.css

@@ -63,22 +63,16 @@
   left: 0;
   right: 0;
 }
+.skuSelectorContainer .skuSelectorName {
+  text-transform: uppercase;
+  font-family: "Open Sans", sans-serif;
+}
 .skuSelectorContainer .skuSelectorSubcontainer--cor {
   height: 75px;
 }
 .skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorOptionsList {
   height: 48px;
 }
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName {
-  text-transform: uppercase;
-  font-family: "Open Sans", sans-serif;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::after {
-  content: "ES:";
-}
-.skuSelectorContainer .skuSelectorSubcontainer--cor .skuSelectorTextContainer .skuSelectorName::before {
-  content: "OUTRAS ";
-}
 .skuSelectorContainer .skuSelectorSubcontainer--tamanho .frameAround {
   width: 40px;
   height: 40px;
@@ -91,16 +85,6 @@
   width: 40px;
   height: 40px;
 }
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName {
-  text-transform: uppercase;
-  font-family: "Open Sans", sans-serif;
-}
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::after {
-  content: "S:";
-}
-.skuSelectorContainer .skuSelectorSubcontainer--tamanho .skuSelectorTextContainer .skuSelectorName::before {
-  content: "OUTROS ";
-}
 .skuSelectorContainer .skuSelectorInternalBox {
   border: 2px solid #B9B9B9;
 }

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

@@ -50,24 +50,16 @@
     left: 0;
     right: 0;
   }
+  .skuSelectorName{
+    text-transform: uppercase;
+    font-family: 'Open Sans',sans-serif;
+  }
   .skuSelectorSubcontainer-{
     &-cor{
       height: 75px;
       .skuSelectorOptionsList{
         height: 48px;
       }
-      .skuSelectorTextContainer{
-        .skuSelectorName{
-          text-transform: uppercase;
-          font-family: 'Open Sans',sans-serif;
-          &::after{
-              content: "ES:";
-            }
-            &::before{
-                content: "OUTRAS ";
-              }
-        }
-      }
     }
     &-tamanho{
       .frameAround{
@@ -82,18 +74,6 @@
         width: 40px;
         height: 40px;
       }
-      .skuSelectorTextContainer{
-        .skuSelectorName{
-          text-transform: uppercase;
-          font-family: 'Open Sans',sans-serif;
-          &::after{
-              content: "S:";
-            }
-            &::before{
-                content: "OUTROS ";
-              }
-        }
-      }
     }
   }