fureunoir/schon
fureunoir/schon
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat(storefront): enhance category and product templates with HTML rendering

Browse source 
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.
This commit is contained in:
Alexandr SaVBaD Waltz 2026-03-01 22:13:24 +03:00
parent e8e0675d7d
commit d4b2839502
2 changed files with 48 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
storefront/app/pages/catalog/[categorySlug].vue
View file

@ -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">

91
storefront/app/pages/product/[slug].vue
View file

@ -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 {