ui: иконки и наглядное отображение цен со скидкой

SVG-иконки в шапке и кнопках, зачёркнутая старая цена и акцент на цене со скидкой в каталоге, корзине и на карточке товара.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
shop
2026-05-17 14:14:38 +03:00
parent 9b688b2af4
commit 0c2cee410f
7 changed files with 315 additions and 51 deletions
+30 -8
View File
@@ -1,11 +1,33 @@
<% const onSale = typeof isSaleActive === 'function' && isSaleActive(product); %>
<% const eff = typeof effectivePrice === 'function' ? effectivePrice(product) : product.price_cents; %>
<p class="price-block<%= onSale ? ' price-block--sale' : '' %>">
<%
const onSale = typeof forceOnSale !== 'undefined'
? forceOnSale
: (typeof isSaleActive === 'function' && isSaleActive(product));
const eff = typeof forceEffective !== 'undefined'
? forceEffective
: (typeof effectivePrice === 'function' ? effectivePrice(product) : product.price_cents);
const oldCents = product.price_cents;
const pct = onSale && typeof salePercent === 'function'
? salePercent(product)
: (onSale && oldCents ? Math.round(((oldCents - eff) / oldCents) * 100) : 0);
const sizeMod = typeof priceSize !== 'undefined' ? ' price-block--' + priceSize : '';
%>
<div class="price-block<%= sizeMod %><%= onSale ? ' price-block--sale' : '' %>" role="group" aria-label="<%= onSale ? 'Цена со скидкой' : 'Цена' %>">
<% if (onSale) { %>
<span class="price-block__old"><%= formatPrice(product.price_cents) %></span>
<span class="price-block__current"><%= formatPrice(eff) %></span>
<span class="badge badge--sale"><%= salePercent(product) %>%</span>
<div class="price-block__meta">
<span class="price-block__tag">
<%- include('partials/icon', { name: 'tag', iconSize: 12 }) %>
Акция
</span>
<span class="price-block__badge"><%= pct %>%</span>
</div>
<div class="price-block__prices">
<span class="price-block__old" aria-label="Старая цена"><%= formatPrice(oldCents) %></span>
<span class="price-block__current" aria-label="Цена со скидкой"><%= formatPrice(eff) %></span>
</div>
<% if (typeof showSavings !== 'undefined' && showSavings) { %>
<span class="price-block__savings">Экономия <%= formatPrice(oldCents - eff) %></span>
<% } %>
<% } else { %>
<span class="price-block__current"><%= formatPrice(product.price_cents) %></span>
<span class="price-block__current price-block__current--solo"><%= formatPrice(oldCents) %></span>
<% } %>
</p>
</div>