From d4b283950204ea3d5bfc38172cd326788cc72b7b Mon Sep 17 00:00:00 2001
From: Alexandr SaVBaD Waltz <savbad@wiseless.xyz>
Date: Sun, 1 Mar 2026 22:13:24 +0300
Subject: [PATCH] feat(storefront): enhance category and product templates with
 HTML rendering
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Updated catalog and product pages to render descriptions using HTML (`v-html`), allowing richer content presentation. Improved characteristics section for products, reintroducing previously commented-out functionality with refined structure and styling.

- Enabled `v-html` in `categorySlug.vue` and `slug.vue` for proper HTML display in descriptions.
- Restored and revamped characteristics section with better styling and layout.
- Adjusted SCSS for consistent typography and spacing in characteristics.

No breaking changes introduced—enhancements improve presentation and maintain code quality.
---
 .../app/pages/catalog/[categorySlug].vue      |  2 +-
 storefront/app/pages/product/[slug].vue       | 91 ++++++++++---------
 2 files changed, 48 insertions(+), 45 deletions(-)

diff --git a/storefront/app/pages/catalog/[categorySlug].vue b/storefront/app/pages/catalog/[categorySlug].vue
index 8addffc6..b2005590 100644
--- a/storefront/app/pages/catalog/[categorySlug].vue
+++ b/storefront/app/pages/catalog/[categorySlug].vue
@@ -2,7 +2,7 @@
   <div class="category">
     <ui-title>
       <h1>{{ category?.name }}</h1>
-      <p>{{ category?.description }}</p>
+      <div v-html="category?.description" />
     </ui-title>
     <div class="category__main">
       <div class="container">
diff --git a/storefront/app/pages/product/[slug].vue b/storefront/app/pages/product/[slug].vue
index ac6d0cfa..cb626001 100644
--- a/storefront/app/pages/product/[slug].vue
+++ b/storefront/app/pages/product/[slug].vue
@@ -38,7 +38,7 @@
             />
             <p class="product__main-price">{{ product?.price }} $</p>
             <p class="product__main-stock">{{ t('cards.product.stock') }} {{ product?.quantity }}</p>
-            <p class="product__main-description">{{ product?.description }}</p>
+            <div class="product__main-description" v-html="product?.description" />
             <div class="tools" v-if="isProductInCart">
               <button
                   class="tools__item tools__item-button"
@@ -100,30 +100,28 @@
           </div>
         </div>
       </div>
-<!--      <client-only>-->
-<!--        <div class="characteristics" id="characteristics" v-if="attributes.length">-->
-<!--          <div class="characteristics__wrapper">-->
-<!--            <h6 class="characteristics__title">{{ t('product.characteristics') }}</h6>-->
-<!--            <div class="characteristics__list">-->
-<!--              <div-->
-<!--                  class="characteristics__column"-->
-<!--                  v-for="group in attributes"-->
-<!--                  :key="group.uuid"-->
-<!--              >-->
-<!--                <h6 class="characteristics__column-title">{{ group.name }}</h6>-->
-<!--                <p-->
-<!--                    class="characteristics__item"-->
-<!--                    v-for="item in group.items"-->
-<!--                    :key="item.uuid"-->
-<!--                >-->
-<!--                  <span class="characteristics__item-label"><span>{{ item.name }}</span></span>-->
-<!--                  <span class="characteristics__item-value">{{ item.valuesStr }}</span>-->
-<!--                </p>-->
-<!--              </div>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--        </div>-->
-<!--      </client-only>-->
+      <client-only>
+        <div class="characteristics" id="characteristics" v-if="attributes.length">
+          <h6 class="characteristics__title">{{ t('product.characteristics') }}</h6>
+          <div class="characteristics__list">
+            <div
+                class="characteristics__column"
+                v-for="group in attributes"
+                :key="group.uuid"
+            >
+              <h6 class="characteristics__column-title">{{ group.name }}</h6>
+              <p
+                  class="characteristics__item"
+                  v-for="item in group.items"
+                  :key="item.uuid"
+              >
+                <span class="characteristics__item-label"><span>{{ item.name }}</span></span>
+                <span class="characteristics__item-value">{{ item.valuesStr }}</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </client-only>
       <div class="similar">
         <h6 class="similar__title">{{ t('product.similar') }}</h6>
         <div class="similar__inner">
@@ -569,27 +567,26 @@ watch(
 }
 
 .characteristics {
-  padding-top: 100px;
-
-  &__wrapper {
-    background-color: $main;
-    border-radius: $less_border_radius;
-    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.2);
-    padding: 20px;
-  }
+  margin-top: 100px;
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  padding: 45px 25px;
+  border-radius: $default_border_radius;
+  border: 1px solid $border;
 
   &__title {
-    padding-bottom: 10px;
-    border-bottom: 2px solid $primary_dark;
+    font-family: "Playfair Display", sans-serif;
     color: $primary_dark;
-    font-size: 24px;
-    font-weight: 700;
+    font-size: 30px;
+    font-weight: 600;
+    letter-spacing: -0.5px;
   }
 
   &__list {
     margin-top: 20px;
     display: grid;
-    grid-template-columns: repeat(auto-fit,minmax(100px, 30%));
+    grid-template-columns: repeat(auto-fit,minmax(30%, 30%));
     gap: 40px;
   }
 
@@ -622,6 +619,11 @@ watch(
         z-index: 1;
         background-color: $main;
         padding-bottom: 1px;
+
+        color: $text;
+        font-size: 16px;
+        font-weight: 400;
+        letter-spacing: -0.5px;
       }
 
       &::after {
@@ -635,6 +637,11 @@ watch(
     }
 
     &-value {
+      color: $primary_dark;
+      font-size: 16px;
+      font-weight: 500;
+      letter-spacing: -0.5px;
+
       & span {
         &:first-child {
           & span {
@@ -687,14 +694,10 @@ watch(
     padding-inline: 10px;
     aspect-ratio: 1;
     border-radius: 50%;
-    background-color: $main;
+    background-color: transparent;
 
     @include hover {
-      background-color: $main_hover;
-
-      & span {
-        color: $main;
-      }
+      background-color: $link_secondary;
     }
 
     & span {