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

{#
/**
 * @file
 * Default theme implementation for the order page.
 *
 * 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 productRoute = constant('Drupal\\commercetools_content\\Routing\\RouteProvider::ROUTE_PREFIX') ~ constant('Drupal\\commercetools_content\\Routing\\RouteProvider::PAGE_PRODUCT_ROUTE') %}


<div {{ attributes.addClass("order-page") }}>

  {% block status %}
    <div class="order-page__status fs-4 my-4">
      <span class="fw-bold">{{ "Order status:"|t }}</span>
      <span>{{ order.orderState }}</span>
    </div>
  {% endblock %}

  {% block line_items %}
    <div class="order-page__line-items container shadow border">
      <div class="row d-flex justify-content-between align-items-center bg-secondary">
        <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 %}

  {% block confirmation %}
    <div class="order-page__confirmation">
      <h2 class="fs-3 mt-4 text-center">{{ "Order Confirmation"|t }}</h2>
      <div class="order-page__confirmation-blocks">
        <div class="row justify-content-between">

          <div class="order-page__confirmation-block col-md-4 my-4">
            <div class="order-confirmation--block-inner shadow border p-4">
              <h3 class="fs-5">{{ "Shipping To"|t }}</h3>
              <hr>
              {% if order.shippingAddress  %}
                <h4 class="fs-6">{{ "Address"|t }}</h4>
                {{ order.shippingAddress.firstName }}
                {{ order.shippingAddress.lastName }}
                <br>
                {{ order.shippingAddress.streetName }}
                <br>
                {{ order.shippingAddress.state }},
                {{ order.shippingAddress.city }}
                {{ order.shippingAddress.postalCode}}
              {% endif  %}
            </div>
          </div>

          <div class="order-page__confirmation-block col-md-4 my-4">
            <div class="order-confirmation--block-inner shadow border p-4">
              <h3 class="fs-5">{{ "Billing Information"|t }}</h3>
              <hr>
              {% if order.billingAddress  %}
                <h4 class="fs-6">{{ "Address"|t }}</h4>

                {{ order.billingAddress.firstName }}
                {{ order.billingAddress.lastName }}
                <br>
                {{ order.billingAddress.streetName }}
                <br>
                {{ order.billingAddress.state }},
                {{ order.billingAddress.city }}
                {{ order.billingAddress.postalCode}}
              {% endif  %}
            </div>
          </div>

          <div class="order-page__confirmation-block col-md-4 my-4">
            <div class="order-confirmation--block-inner shadow border p-4">
              <h3 class="fs-5">{{ "Payment Information"|t }}</h3>
              <hr>

              <span class="fw-bold">{{ "Sub Total:"|t }}</span>
              <span>{{ order.subtotalPrice.localizedPrice }}</span>

              {% if order.shippingInfo %}
                <br/>
                <span class="fw-bold">{{ "Shipping:"|t }}</span>
                <span>{{ order.shippingInfo.shippingMethodName }}
                  -
                  {{ order.shippingInfo.price.localizedPrice }}</span>
              {% endif %}

              {% if order.taxedPrice.taxPortions %}
                {% for taxPortion in order.taxedPrice.taxPortions %}
                  <br/>
                  <span class="fw-bold">{{ taxPortion.name }}</span>
                  <span>{{ taxPortion.amount.localizedPrice }}</span>
                {% endfor %}
              {% endif %}

              {% if order.taxedPrice.totalGross %}
                <br/>
                <span class="fw-bold">{{ "Total:"|t }}</span>
                <span>{{ order.taxedPrice.totalGross.localizedPrice }}</span>
              {% endif %}
            </div>
          </div>

        </div>
      </div>
    </div>
  {% endblock %}
</div>