CartBadge

Domain

Round cart button for the header that shows the number of items in the cart. Counts above 99 render as a "99+" badge.

Preview

Empty

3 items

12 items

99+ overflow

Code

<%- include('modules/domain/common/cart/CartBadge', {
  cart: { items: [] }
}) %>
<%- include('modules/domain/common/cart/CartBadge', {
  cart: { items: [{ quantity: 1 }, { quantity: 2 }] }
}) %>
<%- include('modules/domain/common/cart/CartBadge', {
  cart: { items: [{ quantity: 150 }] }
}) %>

Preview

S Shop

Code


  Shop
  
    <%- include('modules/domain/common/cart/CartBadge', {
      cart: currentCart,
      onClick: 'openCartDrawer'
    }) %>

<%
  var _cart       = locals.cart       || {};
  var _items      = _cart.items       || [];
  var _id         = locals.id         || ('cart-badge-' + Math.random().toString(36).slice(2, 9));
  var _onClick    = locals.onClick    || '';
  var _className  = locals.className  || '';

  var totalQty = _items.reduce(function(s, i) { return s + (i.quantity || 0); }, 0);
  var label    = 'Cart — ' + totalQty + ' item' + (totalQty !== 1 ? 's' : '');
  var display  = totalQty > 99 ? '99+' : totalQty;
%>

CartBadge

States

In a header