Shopify Liquid Generator.

{% comment %}
  Versandtarife bitte separat in Shopify einrichten. JavaScript für AJAX-Warenkorbänderungen erforderlich.
  Bei mehreren Währungen die Schwelle je Währung prüfen.
{% endcomment %}
{%- assign dhk_free_shipping_limit = 5000 -%}
<div class="dhk-shipping-note" data-dhk-shipping-note data-limit="5000" role="status" aria-live="polite"{% if cart.item_count == 0 %} hidden{% endif %}>
  {%- if cart.item_count > 0 -%}
    {%- if cart.total_price >= dhk_free_shipping_limit -%}
      Kostenloser Versand erreicht!
    {%- else -%}
      Noch {{ dhk_free_shipping_limit | minus: cart.total_price | money }} bis zum kostenlosen Versand.
    {%- endif -%}
  {%- endif -%}
</div>
<style>
  .dhk-shipping-note {
    display: block;
    padding: 14px 18px;
    border: 1px solid #56605c;
    border-radius: 0px;
    background: #161919;
    color: #ffffff;
    font: inherit;
  }
  .dhk-shipping-note[hidden] { display: none !important; }
</style>
<script>
(function () {
  if (window.__dhkShippingNoteReady) return;
  window.__dhkShippingNoteReady = true;

  var timers = [];
  var latestRequest = 0;

  function updateFromCart(cart) {
    if (!cart || !Number.isFinite(cart.total_price)) return;
    var currency = cart.currency || (window.Shopify && window.Shopify.currency && window.Shopify.currency.active) || 'EUR';
    var language = document.documentElement.lang || navigator.language || 'de-DE';
    var money;
    try {
      money = new Intl.NumberFormat(language, { style: 'currency', currency: currency });
    } catch (error) {
      money = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });
    }
    document.querySelectorAll('[data-dhk-shipping-note]').forEach(function (note) {
      var limit = Number(note.getAttribute('data-limit'));
      if (!Number.isFinite(limit) || limit <= 0) return;
      if (!cart.item_count) {
        note.hidden = true;
        note.textContent = '';
        return;
      }
      note.hidden = false;
      note.textContent = cart.total_price >= limit
        ? 'Kostenloser Versand erreicht!'
        : 'Noch ' + money.format((limit - cart.total_price) / 100) + ' bis zum kostenlosen Versand.';
    });
  }

  function refresh() {
    var requestNumber = ++latestRequest;
    var root = (window.Shopify && window.Shopify.routes && window.Shopify.routes.root) || '/';
    fetch(root + 'cart.js', { credentials: 'same-origin', cache: 'no-store' })
      .then(function (response) {
        if (!response.ok) throw new Error('Warenkorb nicht erreichbar');
        return response.json();
      })
      .then(function (cart) {
        if (requestNumber === latestRequest) updateFromCart(cart);
      })
      .catch(function () {
        // Bei Netzwerkfehlern bleibt der letzte serverseitig gerenderte Stand erhalten.
      });
  }

  function schedule(delays) {
    timers.forEach(clearTimeout);
    timers = delays.map(function (delay) { return setTimeout(refresh, delay); });
  }

  function cartArea(element) {
    return element.closest('cart-drawer, cart-items, form[action*="/cart"], [class*="cart-drawer"], [class*="cartDrawer"], [id*="CartDrawer"], [class*="mini-cart"], [class*="minicart"], [class*="cart__"], [class*="cart-"], [id="cart"], [id="Cart"]');
  }

  document.addEventListener('click', function (event) {
    if (!(event.target instanceof Element)) return;
    var control = event.target.closest('button, a');
    if (!control) return;
    var productForm = control.closest('form[action*="/cart/add"]');
    if (cartArea(control) || productForm || control.matches('[data-add-to-cart], [name="add"]')) {
      schedule([350, 1150]);
    }
  }, true);

  document.addEventListener('change', function (event) {
    if (!(event.target instanceof Element)) return;
    if (cartArea(event.target) || event.target.matches('[name="updates[]"], [data-ajax-cart-quantity-input]')) {
      schedule([250, 1000]);
    }
  }, true);

  document.addEventListener('submit', function (event) {
    if (!(event.target instanceof Element)) return;
    if (event.target.matches('form[action*="/cart/add"], form[action*="/cart"]')) {
      schedule([400, 1200]);
    }
  }, true);

  ['cart:updated', 'cart:change', 'cart:refresh', 'cart:added', 'cart:rendered', 'ajaxProduct:added', 'theme:cart:change'].forEach(function (eventName) {
    document.addEventListener(eventName, function () { schedule([100, 600]); });
  });
  window.addEventListener('pageshow', refresh);
  refresh();
})();
</script>