commercetools-8.x-1.2-alpha1/modules/commercetools_content/templates/commercetools-order-card.html.twig

{#
/**
 * @file
 * Default theme implementation for the order item.
 *
 * Available variables
 * - attributes: A list of HTML attributes for the wrapper element.
 * - order: The order object.
 *
 * @ingroup themeable
 */
#}

{{ attach_library('commercetools/commercetools.bootstrap_checker') }}

{% set userOrderRoute = constant('Drupal\\commercetools_content\\Routing\\RouteProvider::ROUTE_PREFIX') ~ constant('Drupal\\commercetools_content\\Routing\\RouteProvider::PAGE_USER_ORDER_ROUTE') %}


<div {{ attributes.addClass("order-item", "mb-4", "shadow") }}>

  {% block header %}
    <div class="order-item__header d-flex justify-content-between bg-secondary mb-4">
      <div class="col-md-4 order-item__header-number fs-5 p-3">
        <span>{{ "Order item:"|t }}</span>
        <a class="link-dark" href="{{ url(userOrderRoute, {user: order.customer.uid, orderId: order.id}) }}">#{{ order.orderNumber }}</a>
      </div>
      <div class="col-md-4 text-center order-item__header-price fs-5 p-3 border-start border-end border-white">{{ order.subtotalPrice.localizedPrice }}</div>
      <div class="col-md-4 text-center  order-item__header-state fs-5 p-3">{{ order.orderState }}</div>
    </div>
  {% endblock %}

  {% block line_items %}
    <div class="order-item__line-items container">
      <div class="row d-flex justify-content-between align-items-center">
        <div class="col-md-2 text-center fw-bold p-2">
          {{ "Image"|t }}
        </div>
        <div class="col-md-5 fw-bold p-2">
          {{ "Product name"|t }}
        </div>
        <div class="col-md-2 text-center fw-bold p-2">
          {{ "QTY"|t }}
        </div>
        <div class="col-md-3 text-center fw-bold p-2">
          {{ "Subtotal"|t }}
        </div>
      </div>
      {{ render_var({ '#theme': 'commercetools_line_items', '#lineItems': order.lineItems }) }}
    </div>
  {% endblock %}
</div>