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

SVG-иконки в шапке и кнопках, зачёркнутая старая цена и акцент на цене со скидкой в каталоге, корзине и на карточке товара. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-05-17 14:14:38 +03:00
parent 9b688b2af4
commit 0c2cee410f
7 changed files with 315 additions and 51 deletions
@@ -29,20 +29,22 @@
              <% } %>
              <a href="/product/<%= item.slug %>"><%= item.name %></a>
            </td>
-            <td>
-              <% if (item.on_sale) { %>
-                <span class="price-block__old"><%= formatPrice(item.price_cents) %></span>
-                <%= formatPrice(item.effective_price_cents) %>
-              <% } else { %>
-                <%= formatPrice(item.effective_price_cents) %>
-              <% } %>
+            <td class="cart-table__price">
+              <%- include('partials/product-price', {
+                product: item,
+                forceOnSale: item.on_sale,
+                forceEffective: item.effective_price_cents,
+                priceSize: 'sm'
+              }) %>
            </td>
            <td>
              <input type="number" name="items[<%= item.id %>]" value="<%= item.quantity %>" min="0" max="<%= item.stock %>" class="input input--qty">
            </td>
            <td><%= formatPrice(item.line_total) %></td>
            <td>
-              <button type="submit" formaction="/cart/remove/<%= item.id %>" formmethod="post" class="btn btn--ghost btn--sm" title="Удалить">×</button>
+              <button type="submit" formaction="/cart/remove/<%= item.id %>" formmethod="post" class="btn btn--ghost btn--sm btn--icon" title="Удалить" aria-label="Удалить">
+                <%- include('partials/icon', { name: 'trash', iconSize: 16 }) %>
+              </button>
            </td>
          </tr>
        <% }) %>
@@ -2,7 +2,7 @@

 <section class="hero">
  <h1>Каталог товаров</h1>
-  <p>Доставка по России. Оплата при получении.</p>
+  <p class="hero__lead">Доставка по России · Оплата при получении · Акции со скидкой в каталоге</p>
 </section>

 <% if (categories.length) { %>
@@ -19,8 +19,15 @@
 <% } else { %>
  <div class="grid">
    <% products.forEach(p => { %>
-      <article class="card">
+      <% const onSale = isSaleActive(p); %>
+      <article class="card<%= onSale ? ' card--sale' : '' %>">
        <a href="/product/<%= p.slug %>" class="card__image-wrap">
+          <% if (onSale) { %>
+            <span class="card__sale-ribbon" aria-hidden="true">
+              <%- include('partials/icon', { name: 'tag', iconSize: 14 }) %>
+              −<%= salePercent(p) %>%
+            </span>
+          <% } %>
          <% if (p.image_url) { %>
            <img src="<%= p.image_url %>" alt="<%= p.name %>" class="card__image" loading="lazy">
          <% } else { %>
@@ -32,11 +39,14 @@
            <span class="card__category"><%= p.category_name %></span>
          <% } %>
          <h2 class="card__title"><a href="/product/<%= p.slug %>"><%= p.name %></a></h2>
-          <%- include('partials/product-price', { product: p }) %>
+          <%- include('partials/product-price', { product: p, priceSize: 'md' }) %>
          <form action="/cart/add" method="post" class="card__form">
            <input type="hidden" name="product_id" value="<%= p.id %>">
            <input type="hidden" name="redirect" value="/cart">
-            <button type="submit" class="btn btn--primary btn--block">В корзину</button>
+            <button type="submit" class="btn btn--primary btn--block">
+              <%- include('partials/icon', { name: 'cart', iconSize: 18 }) %>
+              В корзину
+            </button>
          </form>
        </div>
      </article>
@@ -0,0 +1,25 @@
+<%
+  const sz = typeof iconSize !== 'undefined' ? iconSize : 20;
+  const cls = 'icon' + (typeof iconClass !== 'undefined' ? ' ' + iconClass : '');
+%>
+<% if (name === 'cart') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
+<% } else if (name === 'search') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+<% } else if (name === 'tag') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>
+<% } else if (name === 'user') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+<% } else if (name === 'shield') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+<% } else if (name === 'plus') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>
+<% } else if (name === 'trash') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
+<% } else if (name === 'clock') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+<% } else if (name === 'arrow-left') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 19-7-7 7-7M19 12H5"/></svg>
+<% } else if (name === 'package') { %>
+<svg class="<%= cls %>" width="<%= sz %>" height="<%= sz %>" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16.5 9.4 7.55 4.24M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/></svg>
+<% } %>
@@ -12,26 +12,40 @@
 <body>
  <header class="header">
    <div class="container header__inner">
-      <a href="/" class="logo">Shop</a>
+      <a href="/" class="logo">
+        <%- include('partials/icon', { name: 'package', iconSize: 22, iconClass: 'logo__icon' }) %>
+        Shop
+      </a>
      <form class="search" action="/" method="get">
+        <span class="search__icon" aria-hidden="true"><%- include('partials/icon', { name: 'search', iconSize: 18 }) %></span>
        <input type="search" name="q" placeholder="Поиск товаров…" value="<%= typeof searchQuery !== 'undefined' ? searchQuery : '' %>" aria-label="Поиск">
-        <button type="submit" class="btn btn--ghost">Найти</button>
+        <button type="submit" class="btn btn--ghost btn--icon-text">Найти</button>
      </form>
      <nav class="nav">
-        <a href="/cart" class="nav__link nav__cart">
-          Корзина
+        <a href="/cart" class="nav__link nav__cart nav__link--icon">
+          <%- include('partials/icon', { name: 'cart', iconSize: 18 }) %>
+          <span>Корзина</span>
          <% if (cartCount > 0) { %><span class="badge"><%= cartCount %></span><% } %>
        </a>
        <% if (user) { %>
          <% if (typeof isAdmin !== 'undefined' && isAdmin) { %>
-            <a href="/admin" class="nav__link nav__admin">Админ</a>
+            <a href="/admin" class="nav__link nav__link--icon nav__admin">
+              <%- include('partials/icon', { name: 'shield', iconSize: 18 }) %>
+              <span>Админ</span>
+            </a>
          <% } %>
-          <a href="/account" class="nav__link"><%= user.name %></a>
+          <a href="/account" class="nav__link nav__link--icon">
+            <%- include('partials/icon', { name: 'user', iconSize: 18 }) %>
+            <span><%= user.name %></span>
+          </a>
          <form action="/logout" method="post" class="inline-form">
            <button type="submit" class="btn btn--ghost btn--sm">Выйти</button>
          </form>
        <% } else if (cookieConsent) { %>
-          <a href="/login" class="nav__link">Вход</a>
+          <a href="/login" class="nav__link nav__link--icon">
+            <%- include('partials/icon', { name: 'user', iconSize: 18 }) %>
+            <span>Вход</span>
+          </a>
          <a href="/register" class="btn btn--primary btn--sm">Регистрация</a>
        <% } else { %>
          <span class="nav__link nav__link--disabled" title="Примите cookies">Вход</span>
@@ -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>
@@ -14,11 +14,12 @@
    <% } %>
    <h1><%= product.name %></h1>
    <div class="product-detail__price">
-      <%- include('partials/product-price', { product }) %>
+      <%- include('partials/product-price', { product, priceSize: 'lg', showSavings: true }) %>
      <% if (isSaleActive(product) && product.sale_ends_at) { %>
-        <div class="promo-countdown" data-expires="<%= product.sale_ends_at %>">
-          Акция заканчивается: <span class="promo-countdown__timer">—</span>
-        </div>
+        <p class="promo-countdown promo-countdown--product" data-expires="<%= product.sale_ends_at %>">
+          <%- include('partials/icon', { name: 'clock', iconSize: 16 }) %>
+          <span>Акция заканчивается: <strong class="promo-countdown__timer">—</strong></span>
+        </p>
      <% } %>
    </div>
    <p class="product-detail__desc"><%= product.description %></p>
@@ -43,7 +44,10 @@
          <input type="number" name="quantity" value="1" min="1" max="<%= product.stock %>" class="input input--qty">
        </label>
        <input type="hidden" name="redirect" value="/cart">
-        <button type="submit" class="btn btn--primary btn--lg">Добавить в корзину</button>
+        <button type="submit" class="btn btn--primary btn--lg">
+          <%- include('partials/icon', { name: 'cart', iconSize: 20 }) %>
+          Добавить в корзину
+        </button>
      </form>

      <% if (user && !userReservation) { %>
@@ -87,7 +91,10 @@
        </section>
      <% } %>
    <% } %>
-    <a href="/" class="link-back">← Назад в каталог</a>
+    <a href="/" class="link-back">
+      <%- include('partials/icon', { name: 'arrow-left', iconSize: 16 }) %>
+      Назад в каталог
+    </a>
  </div>
 </article>