ui: иконки и наглядное отображение цен со скидкой
SVG-иконки в шапке и кнопках, зачёркнутая старая цена и акцент на цене со скидкой в каталоге, корзине и на карточке товара. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user