product-badges.liquid

{% comment %}
  Renders badges for a product

  Accepts:
  - product: {Object} The product object (required)
  - use_variant: {Boolean} Renders selected or first variant badges instead of overall product badges (optional)

  Usage:
  {% render 'product-badges', product: product %}
{% endcomment %}

{{ 'component-product-badges.css' | asset_url | stylesheet_tag }}

{% liquid
  if use_variant
    assign target = product.selected_or_first_available_variant
  else
    assign target = product
  endif

  assign collection_handles = product.collections | map: 'handle'
  assign badges = ''
  assign delimiter = ','
  assign scheme_delimiter = ':'

  # Custom badges - for each tag that begins with 'badge:'
  for tag in product.tags
    if tag contains 'badge:'
      assign label = tag | remove_first: 'badge:' | strip
      assign badges = badges | append: delimiter | append: label
    endif
  endfor

  # Sale
  assign compare_at_price = target.compare_at_price
  assign price = target.price | default: 1999
  if compare_at_price > price and product.quantity_price_breaks_configured? != true
    for tag in product.tags
      if tag contains 'sale:'
        assign sale_custom_label = tag | remove_first: 'sale:' | strip
        break
      endif
    endfor
    assign sale_label = sale_custom_label | default: 'sale'
    assign badges = badges | append: delimiter | append: sale_label | append: scheme_delimiter | append: settings.sale_badge_color_scheme
  endif

  # Sold Out
  unless target.available
    assign badges = badges | append: delimiter | append: 'sold-out' | append: scheme_delimiter | append: settings.sold_out_badge_color_scheme
  endunless

  # Preorder
  if collection_handles contains 'preorder'
    for tag in product.tags
      if tag contains 'preorder:'
        assign preorder_custom_label = tag | remove_first: 'preorder:' | strip
        break
      endif
    endfor
    assign preorder_label = preorder_custom_label | default: 'pre-order'
    assign badges = badges | append: delimiter | append: preorder_label | append: scheme_delimiter | append: settings.preorder_badge_color_scheme
  endif

  # Restocked
  if collection_handles contains 'restocked'
    for tag in product.tags
      if tag contains 'restocked:'
        assign restocked_custom_label = tag | remove_first: 'restocked:' | strip
        break
      endif
    endfor
    assign restocked_label = restocked_custom_label | default: 'restocked'
    assign badges = badges | append: delimiter | append: restocked_label | append: scheme_delimiter | append: settings.new_badge_color_scheme
  endif

  # New
  # Don't show new badge if product is resrocked
  if collection_handles contains 'new-arrivals' and restocked_label == blank
    for tag in product.tags
      if tag contains 'new:'
        assign new_custom_label = tag | remove_first: 'new:' | strip
        break
      endif
    endfor
    assign new_label = new_custom_label | default: 'new'
    assign badges = badges | append: delimiter | append: new_label | append: scheme_delimiter | append: settings.new_badge_color_scheme
  endif

  # Create list of badges
  assign badges_list = badges | remove_first: delimiter | split: delimiter | uniq
%}

<div class="product__badges" {{ block.shopify_attributes }}>
  {% for badge in badges_list %}
    {% if badge != blank %}
      {% liquid
        assign badge_parts  = badge | split: scheme_delimiter
        assign badge_label  = badge_parts[0]
        assign badge_scheme = badge_parts[1] | default: settings.default_badge_color_scheme
      %}
      <div class="product__badge product__badge--{{ badge_label }} color-{{ badge_scheme }}">
        {{ badge_label | replace: '-', ' ' }}
      </div>
    {% endif %}
  {% endfor %}
</div>