store/blocks/pdp/product-tab-layout.jsonc

@@ -1,13 +1,14 @@
-  // Descrição
+// Descrição
 
-  {
+{
-    "html#tab-layout": {
+  "html#tab-layout": {
-      "props" : {
+    "children": ["tab-layout"],
-        "testId": "tab-layout"
+    "props": {
-      }
+      "testId": "product-description"
-    },
+    }
+  },
 
-    "tab-layout": {
+  "tab-layout": {
     "children": ["tab-list", "tab-content"],
     "props": {
       "blockClass": "tabLayout"
@@ -77,31 +78,31 @@
   },
 
   "tab-content.item#1": {
-    "children": ["product-images#description", "rich-text#1"],
+    "children": ["product-images#description", "product-description#1"],
     "props": {
       "tabId": "description#1"
     }
   },
   "tab-content.item#2": {
-    "children": ["product-images#description", "rich-text#2"],
+    "children": ["product-images#description", "product-description#2"],
     "props": {
       "tabId": "description#2"
     }
   },
   "tab-content.item#3": {
-    "children": ["product-images#description", "rich-text#3"],
+    "children": ["product-images#description", "product-description#3"],
     "props": {
       "tabId": "description#3"
     }
   },
   "tab-content.item#4": {
-    "children": ["product-images#description", "rich-text#4"],
+    "children": ["product-images#description", "product-description#4"],
     "props": {
       "tabId": "description#4"
     }
   },
   "tab-content.item#5": {
-    "children": ["product-images#description", "rich-text#5"],
+    "children": ["product-images#description", "product-description#5"],
     "props": {
       "tabId": "description#5"
     }
@@ -122,39 +123,39 @@
     }
   },
 
-  "rich-text#1": {
+  "product-description#1": {
     "props": {
       "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
       "textPosition": "CENTER",
-      "blockClass": "description-rich-text"
+      "blockClass": "description-product-description"
     }
   },
-  "rich-text#2": {
+  "product-description#2": {
     "props": {
       "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
       "textPosition": "CENTER",
-      "blockClass": "description-rich-text"
+      "blockClass": "description-product-description"
     }
   },
-  "rich-text#3": {
+  "product-description#3": {
     "props": {
       "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
       "textPosition": "CENTER",
-      "blockClass": "description-rich-text"
+      "blockClass": "description-product-description"
     }
   },
-  "rich-text#4": {
+  "product-description#4": {
     "props": {
       "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
       "textPosition": "CENTER",
-      "blockClass": "description-rich-text"
+      "blockClass": "description-product-description"
     }
   },
-  "rich-text#5": {
+  "product-description#5": {
     "props": {
       "text": "# Descrição do produto \n Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque. Sandália Lima Salto Bloco Baixo de amarração com palmilha levemente quadrada e aplicação de spikes na tira do cabedal. Possui variedade de cores no Prata Metalizado. Do 33 ao 40. Consulte disponibilidade de estoque.",
       "textPosition": "CENTER",
-      "blockClass": "description-rich-text"
+      "blockClass": "description-product-description"
     }
   }
 }

store/blocks/pdp/product.jsonc

@@ -112,10 +112,10 @@
       "rowGap": 0
     },
     "children": [
-      "flex-layout.row#product-name",
+      "html#product-name",
-      "product-identifier.product",
+      "html#product-code",
-      "flex-layout.row#selling-price",
+      "html#product-price",
-      "product-installments",
+      "html#product-installments",
       "html#pix-price",
       "html#sku-selector",
       "html#buy-button",
@@ -135,6 +135,13 @@
     }
   },
 
+  // Nome do produto
+
+  "html#product-name": {
+    "children": ["flex-layout.row#product-name"],
+    "props": { "testId": "product-name" }
+  },
+
   "flex-layout.row#product-name": {
     "props": {
       "marginBottom": 3
@@ -142,6 +149,15 @@
     "children": ["vtex.store-components:product-name"]
   },
 
+  // Código identificação produto
+
+  "html#product-code": {
+    "children": ["product-identifier.product"],
+    "props": {
+      "testId": "product-code"
+    }
+  },
+
   // Skus
 
   "html#sku-selector": {
@@ -159,8 +175,24 @@
     }
   },
 
+  // Valor do produto
+
+  "html#product-price": {
+    "children": ["flex-layout.row#selling-price"],
+    "props": {
+      "testId": "product-price"
+    }
+  },
+
   // Parcelamento
 
+  "html#product-installments": {
+    "children": ["product-installments"],
+    "props": {
+      "testId": "product-installments"
+    }
+  },
+
   "product-installments": {
     "props": {
       "markers": ["discount"],
@@ -294,7 +326,8 @@
     "children": [
       "product-summary-image",
       "product-summary-name",
-      "product-price"
+      "product-list-price",
+      "product-selling-price"
     ]
   },
 
@@ -305,6 +338,13 @@
     }
   },
 
+  "product-list-price": {
+    "props": {
+      "message": "de {listPriceValue} por",
+      "blockClass": "list-price"
+    }
+  },
+
   // Newsletter
 
   "newsletter": {
@@ -317,7 +357,7 @@
 
   // Informações de frete
 
-  "html#shipping-simulator" : {
+  "html#shipping-simulator": {
     "props": {
       "testId": "shipping-simulator"
     },

styles/css/vtex.slider-layout.css

@@ -43,44 +43,40 @@
   padding-right: 16px;
 }
 
-:global(.vtex-store-components-3-x-listPrice) {
+:global(.vtex-product-price-1-x-listPrice) {
+  display: block;
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
   color: #bababa;
   margin: 0;
   padding-bottom: 8px;
+  text-decoration: line-through;
 }
 @media screen and (max-width: 1024px) {
-  :global(.vtex-store-components-3-x-listPrice) {
+  :global(.vtex-product-price-1-x-listPrice) {
     font-size: 12px;
     line-height: 16px;
   }
 }
-:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-listPriceLabel) {
+:global(.vtex-product-price-1-x-listPrice) :global(.vtex-product-price-1-x-listPriceValue--list-price) {
-  display: none;
+  text-decoration: none;
-}
-:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::before {
-  content: "de ";
-}
-:global(.vtex-store-components-3-x-listPrice) :global(.vtex-store-components-3-x-currencyContainer)::after {
-  content: " por";
 }
 
-:global(.vtex-store-components-3-x-sellingPrice) {
+:global(.vtex-product-price-1-x-sellingPrice) {
   padding: 0;
 }
-:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceLabel) {
+:global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceLabel) {
   display: none;
 }
-:global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceValue) {
+:global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) {
   font-weight: 700;
   font-size: 24px;
   line-height: 33px;
   color: #000000;
 }
 @media screen and (max-width: 1024px) {
-  :global(.vtex-store-components-3-x-sellingPrice) :global(.vtex-store-components-3-x-sellingPriceValue) {
+  :global(.vtex-product-price-1-x-sellingPrice) :global(.vtex-product-price-1-x-sellingPriceValue) {
     font-size: 18px;
     line-height: 25px;
   }

styles/css/vtex.tab-layout.css

@@ -149,15 +149,15 @@
   max-width: 100%;
   display: block;
 }
-:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) {
+:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) {
   max-width: 50%;
 }
 @media screen and (max-width: 1024px) {
-  :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) {
+  :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) {
     max-width: 100%;
   }
 }
-:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) {
+:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
   font-weight: 400;
   font-size: 24px;
   line-height: 32px;
@@ -165,32 +165,41 @@
   margin-top: 0;
 }
 @media screen and (min-width: 1920px) {
-  :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) {
+  :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
     font-size: 32px;
     line-height: 32px;
   }
 }
 @media screen and (max-width: 1024px) {
-  :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-heading) {
+  :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionTitle) {
     font-size: 20px;
     line-height: 32px;
   }
 }
-:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) {
+:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) {
   font-weight: 400;
   font-size: 16px;
   line-height: 22px;
   color: #929292;
 }
 @media screen and (min-width: 1920px) {
-  :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) {
+  :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) {
     font-size: 18px;
     line-height: 25px;
   }
 }
 @media screen and (max-width: 1024px) {
-  :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-rich-text-0-x-container--description-rich-text) :global(.vtex-rich-text-0-x-paragraph) {
+  :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) {
     font-size: 14px;
     line-height: 19px;
   }
 }
+:global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) :global(.vtex-store-components-3-x-container--description-product-description) {
+  padding: 0;
+  margin: 0;
+}
+@media screen and (max-width: 1024px) {
+  :global(.vtex-tab-layout-0-x-container) :global(.vtex-tab-layout-0-x-contentContainer) .contentItem :global(.vtex-store-components-3-x-productDescriptionContainer) :global(.vtex-store-components-3-x-productDescriptionText) :global(.vtex-store-components-3-x-container--description-product-description) {
+    margin-bottom: 16px;
+  }
+}

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

@@ -45,44 +45,36 @@
 
 // Preço sem desconto
 
-:global(.vtex-store-components-3-x-listPrice) {
+:global(.vtex-product-price-1-x-listPrice) {
+  display: block;
   font-weight: 400;
   font-size: 14px;
   line-height: 19px;
   color: $gray-300;
   margin: 0;
   padding-bottom: 8px;
+  text-decoration: line-through;
 
   @media screen and (max-width: 1024px) {
     font-size: 12px;
     line-height: 16px;
   }
 
-  :global(.vtex-store-components-3-x-listPriceLabel) {
+  :global(.vtex-product-price-1-x-listPriceValue--list-price) {
-    display: none;
+    text-decoration: none;
-  }
-
-  :global(.vtex-store-components-3-x-currencyContainer) {
-    &::before {
-      content: "de ";
-    }
-
-    &::after {
-      content: " por";
-    }
   }
 }
 
 // Preço com desconto
 
-:global(.vtex-store-components-3-x-sellingPrice) {
+:global(.vtex-product-price-1-x-sellingPrice) {
   padding: 0;
 
-  :global(.vtex-store-components-3-x-sellingPriceLabel) {
+  :global(.vtex-product-price-1-x-sellingPriceLabel) {
     display: none;
   }
 
-  :global(.vtex-store-components-3-x-sellingPriceValue) {
+  :global(.vtex-product-price-1-x-sellingPriceValue) {
     font-weight: 700;
     font-size: 24px;
     line-height: 33px;

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

@@ -163,7 +163,7 @@
 
       // Conteúdo de texto da descrição do produto
 
-      :global(.vtex-rich-text-0-x-container--description-rich-text) {
+      :global(.vtex-store-components-3-x-productDescriptionContainer) {
         max-width: 50%;
 
         @media screen and (max-width: 1024px) {
@@ -172,7 +172,7 @@
 
         // Título da descrição do produto
 
-        :global(.vtex-rich-text-0-x-heading) {
+        :global(.vtex-store-components-3-x-productDescriptionTitle) {
           font-weight: 400;
           font-size: 24px;
           line-height: 32px;
@@ -192,7 +192,7 @@
 
         // Texto descrição do produto
 
-        :global(.vtex-rich-text-0-x-paragraph) {
+        :global(.vtex-store-components-3-x-productDescriptionText) {
           font-weight: 400;
           font-size: 16px;
           line-height: 22px;
@@ -207,6 +207,15 @@
             font-size: 14px;
             line-height: 19px;
           }
+
+          :global(.vtex-store-components-3-x-container--description-product-description) {
+            padding: 0;
+            margin: 0;
+
+            @media screen and (max-width: 1024px) {
+              margin-bottom: 16px
+            }
+          }
         }
       }
     }