commerce-product-availability-product-availability-default.html.twig

{#
/**
 * @file
 * Default theme implementation for a commerce_product_availability element.
 *
 * Available variables
 * - langcode (string): The langcode of the field item.
 * - orderable (boolean): A flag indicating whether the product is orderable.
 * - availability_indicator (string): The availability indicator color string.
 * - availability_status (string): The availability status machine name of the
 *   product.
 * - availability_status_label (string): The availability status label of the
 *   product.
 * - availability_date (date_iso string): The availability date of the product.
 * - min_delivery_period (string): The minimum delivery period of the product.
 * - max_delivery_period (string): The maximum delivery period of the product.
 *
 * @see template_preprocess_time()
 * @see http://www.w3.org/TR/html5-author/the-time-element.html#attr-time-datetime
 */
#}

{% set attributes = create_attribute() %}
{% set classes = [
  'product-availability',
  availability_status ? ('product-availability--' ~ availability_indicator)|clean_class,
] %}

{% set delivery_time_label %}
  {% block delivery_time_label %}
    <strong class="product-availability__delivery-time-label">{{ 'Estimated delivery'|t ~ ': ' }}</strong>
  {% endblock delivery_time_label %}
{% endset %}

{% block status_outer %}
  <div{{ attributes.addClass(classes) }}>
    {% if availability_status %}
      {% block availability_status %}
        <div class="product-availability__availability-status">
          <strong class="product-availability__availability-status-label">{{ 'Stock status'|t ~ ': ' }}</strong>
          <span class="product-availability__availability-status-value">
            {% if availability_indicator %}
              <span class="product-availability__availability-status-icon product-availability__availability-status-icon--{{ availability_indicator|clean_class }}">&#9951;</span>
            {% endif %}
            <span class="product-availability__availability-status-string">{{ availability_status_label }}</span>
          </span>
        </div>
      {% endblock availability_status %}
    {% endif %}
    {% if availability_date %}
      {% block availability_date %}
        <div class="product-availability__availability-date">
          <strong class="product-availability__availability-date-label">{{ 'Available on'|t ~ ': ' }}</strong>
          <time{{ attributes.addClass('product-availability__availability-date-value') }}>{{ availability_date }}</time>
        </div>
      {% endblock availability_date %}
    {% endif %}
    {% block delivery_period %}
      {% if min_delivery_period and max_delivery_period %}
        {# Show as timespan #}
        {% block delivery_period_timespan %}
          <div class="product-availability__delivery-time product-availability__delivery-time--timespan">
            {{ delivery_time_label }}
            <div class="product-availability__delivery-time-value">
              <span class="product-availability__delivery-time-min">{{- min_delivery_period -}}</span>-<span class="product-availability__delivery-time-max">{{- max_delivery_period -}}</span><span class="product-availability__delivery-time-suffix"> {{ 'days'|t }}</span>
            </div>
          </div>
        {% endblock delivery_period_timespan %}
      {% else %}
        {% if min_delivery_period %}
          {% block delivery_period_min %}
            <div class="product-availability__delivery-time product-availability__delivery-time--min">
              {{ delivery_time_label }}
              <div class="product-availability__delivery-time-value">
                {{ min_delivery_period }} {{ 'days'|t }}
              </div>
            </div>
          {% endblock delivery_period_min %}
        {% endif %}
        {% if max_delivery_period %}
          {% block delivery_period_max %}
            <div class="product-availability__delivery-time product-availability__delivery-time--max">
              {{ delivery_time_label }}
              <div class="product-availability__delivery-time-value">
                {{ max_delivery_period }} {{ 'days'|t }}
              </div>
            </div>
          {% endblock delivery_period_max %}
        {% endif %}
      {% endif %}
    {% endblock delivery_period %}
  </div>
{% endblock status_outer %}