Untitled

{% comment %}
    Renders a list of product's price (regular, sale, unit)
    Accompanies product forms and meant to be updated dynamically
    Accepts:
    - variant: {Object} Variant Liquid object (optional)
    - product: {Object} Product Liquid object (optional)

    Usage:
    {% include 'product-price', variant: current_variant, product: product %}
{% endcomment %}

{% if variant.title %}
  {% assign compare_at_price = variant.compare_at_price %}
  {% assign price = variant.price %}
  {% assign available = variant.available %}
{% else %}
  {% assign compare_at_price = 1999 %}
  {% assign price = 1999 %}
  {% assign available = true %}
{% endif %}

{% assign price_dollars = price | divided_by: 100 %}
{% assign price_cents = price | modulo: 100 %}
{% if price_cents == 0 %}
  {% assign money_price = "$" | append: price_dollars %}
{% else %}
  {% assign money_price = price | money %}
{% endif %}

{% assign compare_at_price_dollars = compare_at_price | divided_by: 100 %}
{% assign compare_at_price_cents = compare_at_price | modulo: 100 %}
{% if compare_at_price_cents == 0 %}
  {% assign compare_at_price_formatted = "$" | append: compare_at_price_dollars %}
{% else %}
  {% assign compare_at_price_formatted = compare_at_price | money %}
{% endif %}

<div id="product-price" class="price
  {% if available == false %} price--sold-out {% endif %}
  {% if compare_at_price > price %} price--on-sale {% endif %}
  {% if variant.unit_price_measurement %} price--unit-available {% endif %}"
  data-price
>

  {% comment %}
    Explanation of description list:
      - div.price__regular: Displayed when there are no variants on sale
      - div.price__sale: Displayed when a variant is a sale
      - div.price__unit: Displayed when the first variant has a unit price
      - div.price__availability: Displayed when the product is sold out
  {% endcomment %}
  <div class="price__pricing-group">
    <dl class="price__regular">
      <dt>
        <span class="visually-hidden visually-hidden--inline">{{ 'products.general.regular_price' | t }}</span>
      </dt>
      <dd>
        <span class="price-item price-item--regular" data-regular-price>
          {{ money_price }}
        </span>
      </dd>
    </dl>
    <dl class="price__sale">
      <dt>
        <span class="visually-hidden visually-hidden--inline">{{ 'products.general.sale_price' | t }}</span>
      </dt>
      <dd>
        <span class="price-item price-item--sale" data-sale-price>
          {{ money_price }}
        </span>
      </dd>
      <dt>
        <span class="visually-hidden visually-hidden--inline">{{ 'products.general.regular_price' | t }}</span>
      </dt>
      <dd>
        <span class="price-item price-item--regular" data-regular-price>
          {{ compare_at_price_formatted }}
        </span>
      </dd>
    </dl>
    <div class="price__badges">
      <span class="price__badge price__badge--sale" aria-hidden="true">
        <span>{{ 'products.general.sale' | t }}</span>
      </span>
      <span class="price__badge price__badge--sold-out">
        <span>{{ 'products.product.sold_out' | t }}</span>
      </span>
    </div>
  </div>
  <dl class="price__unit">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
    </dt>
    <dd class="price-unit-price">
      {% capture unit_price_separator %}
        <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {% endcapture %}
      {% capture unit_price_base_unit %}
        <span data-unit-price-base-unit>
          {% if variant.unit_price_measurement %}
            {% if variant.unit_price_measurement.reference_value != 1 %}
              {{ variant.unit_price_measurement.reference_value }}
            {% endif %}
            {{ variant.unit_price_measurement.reference_unit }}
          {% endif %}
        </span>
      {% endcapture %}

      <span data-unit-price>{{ variant.unit_price | money }}</span>{{ unit_price_separator }}{{ unit_price_base_unit }}
    </dd>
  </dl>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    function formatPriceWithoutTrailingZeros(priceElement) {
      if (priceElement) {
        var priceText = priceElement.innerHTML.trim();
        if (priceText.endsWith('.00')) {
          priceElement.innerHTML = priceText.slice(0, -3);
        }
      }
    }

    function updateAllPrices() {
      var regularPriceElements = document.querySelectorAll('.price-item--regular');
      var salePriceElements = document.querySelectorAll('.price-item--sale');

      regularPriceElements.forEach(formatPriceWithoutTrailingZeros);
      salePriceElements.forEach(formatPriceWithoutTrailingZeros);
    }

    updateAllPrices();

    // Observe changes to the variant price elements
    var priceContainer = document.getElementById('product-price');
    if (priceContainer) {
      var observer = new MutationObserver(updateAllPrices);
      observer.observe(priceContainer, { childList: true, subtree: true });
    }
  });
</script>