product-inventory.liquid

{% liquid
  assign product = closest.product | default: product
  if request.visual_preview_mode and product == blank
    assign product = collections.all.products.first
  endif
%}

{%- liquid
  assign block_settings = block.settings
  assign variant = product.selected_or_first_available_variant
  if variant.inventory_management == 'shopify'
    assign inventory_managed = true
  endif
  assign inventory_quantity = variant.inventory_quantity
  assign inventory_policy = variant.inventory_policy
  assign threshold = block_settings.inventory_threshold

  if inventory_managed
    if inventory_quantity > 0
      if inventory_quantity <= threshold
        assign status = 'low'
        assign show_quantity = block_settings.show_inventory_quantity
        if show_quantity == false
          assign translation_key = 'products.inventory_low_stock'
        endif
      else
        assign status = 'in_stock'
        assign translation_key = 'products.inventory_in_stock'
      endif
    else
      if inventory_policy == 'continue'
        assign status = 'in_stock'
        assign translation_key = 'products.inventory_in_stock'
      else
        assign status = 'out_of_stock'
        assign translation_key = 'products.inventory_out_of_stock'
      endif
    endif
  else
    if product.selected_or_first_available_variant != null
      assign status = 'in_stock'
      assign translation_key = 'products.inventory_in_stock'
    else
      assign status = 'out_of_stock'
      assign translation_key = 'products.inventory_out_of_stock'
    endif
  endif
-%}

<script src="{{ 'product-inventory.js' | asset_url }}" type="module"></script>

<product-inventory
  class="
    product-inventory
    {%- if block.settings.show_on_display == 'desktop_only' %} mobile-hide{% endif -%}
    {%- if block.settings.show_on_display == 'mobile_only' %} desktop-hide{% endif -%}
    {{- block.settings.additional_class -}}
  "
  style="--margin-top: {{ block.settings.margin_top }}px; --margin-bottom: {{ block.settings.margin_bottom }}px;"
  {{ block.shopify_attributes }}
  {% if request.visual_preview_mode %}data-visual-preview-mode{% endif %}
>

{%- if status == 'in_stock' -%}
  <div class="inventory-banner">
    <strong class="inventory-banner__in-stock">En stock</strong>
    <span class="inventory-banner__sep"> :</span>
    <span> Livré chez vous dès le </span>
    <strong><span class="inventory-banner__date" data-days="5">jeudi 23 octobre</span></strong>
  </div>
{%- else -%}
    {% capture inventory_status_icon %}
      <span class="product-inventory__icon product-inventory__icon-{{ status }}">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" width="15" height="15" fill="none">
          <circle cx="7.5" cy="7.5" r="7.5" fill="currentColor"></circle>
          <circle cx="7.5" cy="7.5" r="5" fill="currentColor" stroke="#FFF"></circle>
        </svg>
      </span>
    {% endcapture %}
    <div class="product-inventory__status product-inventory__status--{{ block.settings.inventory_position }}">
      {{ inventory_status_icon }}
      <span class="product-inventory__text">
        {%- if status == 'low' and show_quantity -%}
          {{ 'products.inventory_low_stock_show_count' | t: count: inventory_quantity }}
        {%- else -%}
          {{ translation_key | t }}
        {%- endif -%}
      </span>
    </div>
  {%- endif -%}

</product-inventory>

{% stylesheet %}
  .inventory-banner {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 2px solid rgba(59,130,246,.35);
    background: rgba(59,130,246,.08);
    border-radius: 12px;
    font-size: var(--font-body--size);
    line-height: 1.4;
  }

  .inventory-banner__in-stock {
    color: #1FB566;
    font-weight: 700;
  }

  .inventory-banner__date {
    font-weight: 700;
    color: #000;
  }

  .inventory-banner__sep {
    margin-right: 4px;
  }
{% endstylesheet %}


<script>
  // Calcule et affiche une date J+5 en français
  (function(){
    function formatFR(d){
      const jours=['dimanche','lundi','mardi','mercredi','jeudi','vendredi','samedi'];
      const mois=['janvier','février','mars','avril','mai','juin','juillet','août','septembre','octobre','novembre','décembre'];
      return jours[d.getDay()]+' '+d.getDate()+' '+mois[d.getMonth()];
    }
    function update(){
      const span=document.querySelector('.inventory-banner__date');
      if(!span) return;
      const days=parseInt(span.getAttribute('data-days')||'5',10);
      const d=new Date();
      d.setDate(d.getDate()+days);
      span.textContent=formatFR(d);
    }
    if(document.readyState==='loading'){
      document.addEventListener('DOMContentLoaded', update);
    } else {
      update();
    }
  })();
</script>

{% schema %}
{
  "name": "t:product_inventory",
  "settings": [
    {
      "type": "range",
      "id": "inventory_threshold",
      "label": "Seuil d’inventaire",
      "min": 0,
      "max": 100,
      "step": 1,
      "default": 20
    },
    {
      "type": "checkbox",
      "id": "show_inventory_quantity",
      "label": "Afficher la quantité",
      "default": true
    },
    {
      "type": "range",
      "id": "margin_top",
      "label": "Marge supérieure",
      "default": 0,
      "min": 0,
      "max": 100,
      "unit": "px"
    },
    {
      "type": "range",
      "id": "margin_bottom",
      "label": "Marge inférieure",
      "default": 0,
      "min": 0,
      "max": 100,
      "unit": "px"
    }
  ],
  "presets": [
    {
      "name": "Stock + Livraison estimée"
    }
  ]
}
{% endschema %}