product.liquid

{% liquid

  # ASSIGN CURRENCY CODE IF NOT PASSED
  unless currency_code
    assign currency_code = ' ' | append: cart.currency.iso_code
  endunless

  # ASSIGN CURRENCY SYMBOL IF NOT PASSED
  unless currency_symbol
    if cart.currency.iso_code != shop.currency.iso_code and currency_symbol contains '.'
      assign currency_symbol = currency_symbol | remove: '.'
    else
      assign currency_symbol = cart.currency.symbol
    endif
  endunless

  # PRE ORDER BADGE
  assign pre_order = product.metafields.data.pre_order.value

  # FORMATTED PRICE
  capture price
    echo product.price | money_without_trailing_zeros | remove: currency_symbol
    echo currency_code
  endcapture

  # PRODUCT PRICE
  capture product_price
    echo '<span class="price">'
    echo price
    echo '</span>'
  endcapture

  if product.compare_at_price_max > product.price and private_sale == false

    # COMPARE AT PRICE
    capture display_price
      echo product_price
      echo '<s class="price ml-3 d-none d-sm-unset">'
      echo product.compare_at_price | money_without_trailing_zeros | remove: currency_symbol
      echo currency_code
      echo '</s>'
    endcapture

  elsif private_sale

    # PRIVATE SALE PRICE
    assign subtract = product.price | divided_by: 100 | times: product.metafields.data.discount

    capture display_price
      echo '<span class="price">'
      echo product.price | minus: subtract | money_without_trailing_zeros | remove: currency_symbol
      echo currency_code
      echo '</span>'
      echo '<s class="price ml-3">'
      echo price
      echo '</s>'
    endcapture
  endif
%}

<div
  class="{{ grid }} rel product-item"
  {% unless image_swap == false %}
    data-action="mouseenter->collection#swap"
    data-srcset="{{ product.images[image_swap] | image_url: width: 600 }}"
  {% endunless %}
  {{ styles }}>

  {% comment %}
    PRODUCT IMAGE
  {% endcomment %}
  <div class="ratio ratio-3000x2400">
    <picture>
      <source
        data-srcset="{{ product.featured_image | image_url: width: 300 }}"
        media="(max-width: 343px)">
      <source
        data-srcset="{{ product.featured_image | image_url: width: 420 }}"
        media="(min-width: 344px) and (max-width: 576px)">
      <source
        data-srcset="{{ product.featured_image | image_url: width: 540 }}"
        media="(min-width: 1024px) and (max-width: 1399px)">
      <source
        data-srcset="{{ product.featured_image | image_url: width: 600 }}"
        media="(min-width: 1400px) and (max-width: 1799px)">
      <source
        data-srcset="{{ product.featured_image | image_url: width: 740 }}"
        media="(min-width: 1800px)">
      <img
        src="{{ product.featured_image.src | image_url: width: 740 }}"
        alt="{{ product.title }}"
        loading="lazy"
        class="lazy"
        height="{{ product.featured_image.height }}px"
        width="{{ product.featured_image.width }}px">
    </picture>
  </div>

  {% comment %}
    PRODUCT INFORMATION
  {% endcomment %}
  <div class="row jc-between">
    <div class="col-auto">

      <a
        href="{{ product.url }}"
        title="{{ product.title }}"
        class="d-block upper pt-2 pb-1"
        spx-data-category="{{ product.type }}"
        spx-data-currency="{{ cart.currency.iso_code }}"
        spx-data-id="{{ product.id }}"
        spx-data-name="{{ product.title }}"
        spx-data-price="{{ product.price | replace_last: '00', '.00' }}">
        {{ product.title }}
      </a>

      <div class="d-flex ai-center pb-4">

        {{ display_price | default: product_price }}

        {% if pre_order != blank and product.available != false %}
          <span class="italic fc-gray ml-auto pr-2 lower">
            {{ 'product_item.preorder' | t }}
          </span>
        {% endif %}

        {% unless product.available %}
          <span class="italic fc-gray ml-auto pr-2 lower">
            {{ 'product_item.sold_out' | t }}
          </span>
        {% endunless %}

      </div>
    </div>
    <div class="col-auto">

      {% for item in product.metafields.data.variants.value limit: 3 %}

        {% liquid

          if forloop.length == 1
            break
          endif

          # COLUMN CLASS
          capture class
            if item.id == product.id
              echo 'v-bg'
            else
              echo 'v-link'
            endif
          endcapture

          # FLAT CROP
          capture height
            if item.metafields.image.crop
              echo 80 | minus: 50
            else
              echo 80
            endif
          endcapture

          capture width
            echo 100
          endcapture
        %}

        {% if forloop.first %}
          <div class="row g-0">
        {% endif %}

        <a
          href="{{ item.url }}"
          class="col-auto bd bc-gray v-item {{ class }}"
          aria-label="{{ item.title | replace_first: '-', '–' | split: '–' | last }}">
          <div
            class="ratio"
            style="--ratio: calc({{ height }} / {{ width }});">
            <picture>
              <img
                itemprop="image"
                src="{{ item.metafields.image.flat | image_url: width: width, height: height, crop: 'center' }}"
                alt="{{ item.title }}"
                loading="lazy"
                class="img-fluid lazy">
            </picture>
          </div>
        </a>

        {% if forloop.last %}
          </div>
        {% endif %}

      {% endfor %}

    </div>
  </div>
</div>